Le persone sono più pigro di quanto si potrebbe pensare—secondo Google, la ricerca, il 53% degli utenti di telefonia mobile per lasciare il vostro sito, se si prende più di tre secondi per caricare. Volete che il vostro sito per essere veloce per migliorare il tasso di conversione e posizionamento nei motori di ricerca.
Come Controllare il Vostro Sito web di Velocità
Probabilmente la metrica più importante del tuo sito di velocità è di Google PageSpeed Insights test. Dal momento che Google è l’arbitro di come il vostro sito svolge in classifica, avrai voglia di placare loro, per quanto possibile. Un buon punteggio su PageSpeed Insights test influenzeranno direttamente il vostro SEO. Basta inserire l’URL del tuo sito, e clicca su “Analizza” per visualizzare i risultati.
PageSpeed Insights fornisce una panoramica completa di ciò che è attualmente di sbagliato con il vostro sito. Si dovrebbe lavorare attraverso di loro come una lista di controllo fino a quando il tuo punteggio è di molto superiore. Google mantiene una lista di profondità raccomandazioni che si possono verificare con.
Se si vuole scavare esattamente come tua pagina viene caricato dal browser, è possibile aprire Chrome Developer Tools (tasto Destro del mouse > Ispezionare o dal menu impostazioni). Qui sono due schede di Rete e le Prestazioni.
La scheda di Rete mostra un facile da usare la timeline di richieste al tuo sito, quanto è grande la risposta è stata, e come il tempo impiegato. La scheda Prestazioni mostra una visualizzazione più particolareggiata di tutto quello che sta succedendo con il tuo sito web:
Da qui, è possibile diagnosticare quasi qualsiasi problema con il rendimento del tuo sito, tra cui non ottimizzata codice JavaScript, nuovamente il rendering, e lo stile ricalcoli.
Installare Google PageSpeed Modulo
Il PageSpeed estensione di Apache e Nginx, fa un sacco di automazioni per l’ottimizzazione generale del tuo sito, come il minifying di compressione e di HTML, la compressione di immagini, che unisce più file JS e CSS in un unico download, e in generale ridurre l’ingombro. Non è un catch-all, ma è una soluzione semplice per un sacco di problemi comuni.
Ridurre il Vostro Sito web Dimensione
Ridurre le dimensioni del tuo sito web direttamente riduce la quantità di tempo necessario per il download. Mentre gli utenti desktop possono ancora scaricare il tuo sito abbastanza rapidamente, la gente su connessioni mobili possono trovare il tuo sito web si fermi se non è ottimizzata.
Comprimere e Pigro Caricare le Immagini
Il primo modo per ridurre le dimensioni occupa dell’immagine. Le immagini (e altri media) spesso sono la causa principale di siti lenti. Se non stai controllando la dimensione delle immagini, c’è una possibilità che molti di loro sono più megabyte di dimensione, che può prendere per sempre per caricare su connessioni lente.
Si dovrebbe controllare la dimensione delle immagini (si può fare dalla scheda di Rete nella finestra di Chrome Dev Console) e assicurarsi che nessuno di loro rottura in megabyte gamma. La maggior parte delle immagini di questo sito sono di circa 100 Kb.
Se si dispone di immagini di grandi dimensioni, si desidera comprimere. Ci sono molti strumenti online che possono fare questo, o manualmente, è possibile ri-esportare in Photoshop, oppure è possibile convertire un’intera cartella da riga di comando con ImageMagick:
per f in *.jpg; effettuare la conversione di qualità 70 $f $f; fatto
Questo comprime ogni .il file jpg al 70% di qualità, che dovrebbe risparmiare un sacco di spazio, pur essendo quasi indistinguibili dalle impostazioni di qualità superiore.
Le immagini non sono rendering di blocco, il che significa che il resto del sito verrà caricato in attesa per le vostre immagini. Ma non c’è bisogno di caricare tutti in una volta, specialmente quando ci sono cose più importanti a scaricare prima le immagini.
È possibile risolvere questo problema con il caricamento pigro immagini. Questa tecnica ritardi di caricamento delle immagini fino a quando non sono necessari, e viene visualizzato un segnaposto invece, che impedisce al tuo contenuto spostando in giro quando le immagini reali di carico). Questi segnaposto sono spesso fatte per essere il “colore dominante” o un più piccolo, l’immagine sfocata che è più veloce a caricare, riducendo al minimo lo spiccato effetto del carico.
È possibile pigro caricare le immagini con un plugin per WordPress, con alcune semplici JavaScript, o con una libreria JS.
Minimizzare E Gzip File JavaScript
Si dovrebbe cercare di non avere una tonnellata di JavaScript, ma se si deve, si deve frenare la dimensione del file di script. Il metodo principale di questo è minifying e comprimerli.
Minifying è una tecnica in cui tutte le inutili per la maggior parte del suo codice viene rimosso e sostituito con un minor numero di caratteri. Spazi, nuove linee, schede andati tutti. Funzione e i nomi delle variabili sono sostituiti con i singoli caratteri. Certo, è orribile:
Ma si riduce la dimensione del file, e nessuno sta per essere ammirato in ogni caso. Minifying è qualcosa che si fa durante la distribuzione, quindi non preoccupatevi, non è necessario lavorare su un codice come questo.
Gzippare è un altro passaggio che coinvolge effettivo di compressione del testo, che può risparmiare ancora più spazio. C’è un leggero overhead della CPU quando il browser ha per decriptare il file, ma la dimensione di risparmio giustificare questo costo. I browser che sono compatibili con i file compressi invia una Accept-Encoding: gzip intestazione nelle loro richieste di risorse, che consente al server di sa è in grado di servire le versioni compresse.
Entrambi questi passaggi velocizzare il caricamento di JavaScript risorse. Infatti, minified JavaScript in realtà analizza ed esegue un po ‘ più veloce, quindi è meglio in che senso.
Sbarazzarsi Della Maggior Parte Inutili
Il passo finale per migliorare le prestazioni del sito è solo per rimuovere la roba che non ti serve. Se si sta caricando un sacco di librerie JavaScript, considerare la codifica una soluzione più semplice, senza la necessità di una risorsa esterna. jQuery è un esempio di questo, è bello avere e rende il lavoro con JS molto più facile, ma è il rendering di blocco e spesso ingombranti rispetto vaniglia JS. Se si sta andando per “il più velocemente possibile,” non utilizzare jQuery.
La stessa cosa vale per WordPress plugin e widget; se non sono del tutto necessari, potrebbero pesare il tuo sito verso il basso. Look per ottimizzare il tuo sito ogni volta che è possibile.
Evitare Di Rendere Il Blocco Delle Risorse
Certo, le risorse del sito sono di rendering di blocco, il che significa che la pagina non andrà assolutamente a caricare fino a quando tali risorse vengono scaricati. Ovviamente, il codice HTML è rendere il blocco, ma il JavaScript di solito è così. Questo significa che un utente effettua una richiesta al tuo sito, attendere il download di HTML, vedere che hanno bisogno di un ulteriore JS file, e quindi attendere che il download di file come bene. Questo è un problema importante, in quanto aumenta i tempi di caricamento.
Ci sono un paio di soluzioni:
- Inline JavaScript. Invece di collegare a una risorsa esterna, incollare tutto il contenuto del file JavaScript che si sta tentando di caricare all’interno di un tag <script> nel file HTML. Questo impedisce qualsiasi tipo di carico esterno, in primo luogo, ed è la soluzione più semplice.
- Rinviare JavaScript di carico fino a dopo la pagina finiture di analisi. Per tutto ciò che non è necessario eseguire immediatamente, aggiungere il differire il tag il tag <script> per caricare successivamente.
- Per le cose che ha bisogno di correre, ma in realtà non dipendere da niente altro che viene caricato in un ordine particolare, utilizzare il async tag, che verrà eseguito il codice JavaScript in modo asincrono da il caricamento della pagina.
Se stai facendo uso massiccio di JavaScript lato client con framework come Reagire e Vue, è possibile velocizzare il rendering problema di blocco mediante l’implementazione lato server di rendering.
Un altro render blocco risorsa font. Font Web da siti come Google Font sono di grande ricerca, ma rallentano il caricamento della pagina, e nella maggior parte dei casi il blocco di testo da rendering fino a quando vengono scaricati. Da evitare, nella maggior parte dei casi, ma se è necessario includere li puoi caricare in modo asincrono con il tipo di carattere-display: opzionale direttiva.
@font-face {
font-family: ‘CustomFont’;
src: url(“CustomFont.woff”) formato (woff’);
font-display: opzionale;
}
Questo è tecnicamente ancora rendere il blocco, ma solo per un periodo di tempo molto breve, in modo che gli utenti desktop probabilmente non vedi testo cambiare il font. Se si ha realmente bisogno di velocità, è possibile utilizzare font-display: swap, invece, che renderà un carattere di fallback e poi passare alla caricato font una volta che è disponibile.
Utilizzare un CDN e Cache Il Contenuto Dinamico
Un content delivery network (CDN) può accelerare il vostro sito in modo considerevole. Un CDN serve il vostro sito da molti server (chiamati punti di presenza) in tutto il mondo, che riduce drasticamente la latenza per il cliente. Se si desidera effettuare ulteriori richieste al server, sarà molto più veloce con una CDN.
Il tipo di CDN si desidera utilizzare è l’origine tirare CDN, come CloudFlare o Velocemente, che la cache del tuo sito web, in ogni punto di presenza, accelerando il tempo di viaggio e prendendo il carico del server web nel processo. Cdn può anche ridimensionare le immagini a bordo, dal momento che sono in grado di rilevare il dispositivo molto rapidamente e servire versioni più piccole per gli utenti mobili.
Si può anche fare uso di un’origine spingere CDN per servire risorse statiche a più persone di un tradizionale monolitico web server è in grado di gestire. Questo è spesso utilizzato per l’hosting di video, ma può servire a immagini e file.
Un’origine tirare CDN, inoltre, migliora la latenza, riducendo i viaggi server web al database ogni volta che il contenuto dinamico è richiesto. WordPress e PHP sono i principali colpevoli di questo; ogni volta che un post viene richiesto, script PHP, sarà recuperato il contenuto della pagina dal database. Questo è del tutto inutile fare più volte al secondo. La memorizzazione nella cache risolve questo problema memorizzando i “risultati” di una richiesta per un minuto o giù di lì, il che significa che il database viene spiati, molto meno spesso. Se non si dispone di un CDN, è comunque possibile implementare la cache di WordPress con plugin come W3 Total Cache.
Sfruttare La Cache Del Browser
Browser il contenuto della cache in modo che le future visite sarà più veloce. Questo non ha un effetto sul primo caricamento della pagina, quindi è davvero utile per i siti che spesso hanno più visite per utente in un breve lasso di tempo (si pensi daily news, social media, etc.). Se questo vale anche per le risorse comuni come il vostro logo, che verrà visualizzato in ogni pagina. Avrai voglia di cache di queste in modo che se un utente fa clic in giro sul vostro sito, non dovrete perdere tempo a ricaricare la roba che ha già.
Questo viene fatto con l’header cache-control. È possibile utilizzare un CDN per ottenere un controllo più preciso le vostre regole di cache, ma il controllo da web server dovrebbe funzionare altrettanto bene.
In nginx, il max-age parte dell’header cache-control è impostato con la scadenza della direttiva. Per esempio, per impostare tutte le immagini, CSS, JavaScript e file memorizzati nella cache per un anno, si potrebbe utilizzare:
posizione ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
scade 365 giorni all’anno;
}
Il problema con la cache in questo modo è che se si desidera apportare modifiche ai file memorizzati nella cache, tali modifiche non si propagano per i clienti fino alla loro scadenza, che, idealmente, dovrebbero essere un lungo periodo di tempo. La soluzione a questo è quello di utilizzare la versione nomi di file e modificare le versioni se hai bisogno di modifiche:
<link rel=”stylesheet” href=”styles_v1.0.css” />
O anche:
<link rel=”stylesheet” href=”stile.i css?v1″ />
In ogni modo, dovrete essere consapevoli di ciò che si memorizza nella cache, e per quanto tempo. Si dovrebbe davvero utilizzare la cache del browser su cose come statico homepage; se si desidera memorizzare nella cache il contenuto HTML, è necessario utilizzare un intero sito CDN per l’inserimento nella cache sul lato server.
Inoltre, è possibile impostare il controllo di cache modalità con add_header:
posizione ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
scade 365 giorni all’anno;
add_header Cache-Control “pubblica”;
}
“Pubblico”, consente di qualcosa di cache, tra cui una CDN. Non utilizzare questo per tutto ciò che richiede l’autenticazione. “Privato” cache qualcosa su un browser, ma non su Cdn. “No-store” consente di disattivare la memorizzazione nella cache del tutto.