Migliorare la velocità di pagina: Dare la priorità dei contenuti

Ogni sviluppatore web sa quanto sia importante per ottimizzare i suoi siti web’ spettacoli per offrire la migliore esperienza utente per i nostri visitatori. E probabilmente quasi ogni sviluppatore web sa che cosa Google Page Speed ​​Insights è e quanti aspetti del nostro sito web dobbiamo monitorare e regolare per ottenere la massima velocità di caricamento dal nostro server. Questo è il primo di una serie di articoli in cui voglio spiegare in dettaglio come migliorare le prestazioni pagina. In questo primo articolo vedremo come aumentare il contenuto prioritizzazione velocità di caricamento della pagina.

Quando si verifica la tua pagina web con Page Speed ​​Insigths, è molto probabile che il seguente suggerimento:

Ridurre la dimensione del sopra-the fold

Cosa significa questo? Puoi leggere questa pagina Per sapere che cosa esattamente significa Google, ma in sostanza significa che si deve cambiare il modo in cui il codice HTML è resa. In altre parole, è necessario caricare prima ciò che l'utente vede prima e rinviare il download di qualsiasi altra risorsa. Se si desidera un passo-passo come fare, continua a leggere.

Identificazione dei contenuti above the fold

La prima cosa che dobbiamo fare è quello di identificare la sezione della pagina che viene resa prima. Personalmente, Lo faccio con una risoluzione di 1920 X 1080 per essere sicuri di coinvolgere nel processo di ottimizzazione la maggior parte degli utenti (se quello che voglio dire non è chiaro, Io spiego: in un monitor ha una risoluzione di 1366 X 768, come la maggior parte dei notebook ha, verrà visualizzato una determinata sezione della pagina; ma se la risoluzione del monitor è più alta, la sezione della pagina visualizzata sarà più grande, quindi se avete ottimizzato la pagina ad una risoluzione bassa, in monitor più grandi saranno presenti elementi non ottimizzati e questo rallenterà la velocità di rendering).

Così, impostare la risoluzione del monitor al valore massimo disponibile, aprire il browser e passare alla tua pagina web. Una volta che la pagina viene caricata completamente, premere F12 per aprire gli strumenti di sviluppo e scollegarlo.

Una volta strumenti di sviluppo sono sganciate, è possibile consultare la sezione pagina intera reso dal browser e individuare tutti che le parti che sono immediatamente disponibili. Il passo successivo è quello di dare al browser tutte le informazioni necessarie per rendere tale contenuto nel modo giusto, cioè le regole CSS che devono essere applicate.

Identificare le regole CSS necessarie

Assicurarsi di impostare la scheda Elementi attivo nella finestra di Google Developer Tools (lo stesso in Bordo, mentre in Firefox scheda diritto di utilizzare qui si chiama ‘ispettore’). Questa scheda è divisa in 2 pannelli: sul lato sinistro si vede il tag HTML del documento e sul lato rioght le regole CSS che si applicano per l'elemento selezionato. Basta selezionare ogni elemento visibile della pagina ed essere sicuri di copiare tutte le regole che si applicano e incollarli in un nuovo file css. Non importa il nome assegnato questo file, è solo un file temporaneo che usiamo per raccogliere tutte le regole CSS abbiamo bisogno per rendere il sopra il contenuto piega.

Tenete a mente che, se nella sezione visibile della pagina che si sta utilizzando qualche icona (quali le icone FontAwesome o icone della Fondazione) Dovete ottenere anche le regole necessarie per visualizzare le icone!

Minifying css nella sezione di testa

Una volta che avete tutte le regole necessarie per rendere il sopra il contenuto piega, è necessario minify loro, cioè eliminare qualsiasi spazio superfluo o riga vuota che avete nel vostro file CSS temporanei. Per fare questo è possibile utilizzare un plugin di editor di codice yout di scelta, un programma stand-alone o anche qualche servizio online. Personalmente, Ho usato questo Css minifier: è molto facile da usare e non richiede alcuna installazione. Basta copiare tutto il contenuto del file css temporanei (Ctrl + UN, Ctrl + C) e incollarlo nella casella di sinistra (Ctrl + V) chiamato “CSS di input”, quindi fare clic sul pulsante blu Minify e nella casella a destra verrà visualizzato il css minified quasi istantaneamente. Copiarlo e incollarlo nella sezione head della pagina, subito dopo l'ultima meta tag, avvolgendolo con la <stile> etichetta.

Differire il download di altre risorse

Ora abbiamo a che fare con il resto del css usiamo nella nostra pagina web. Primo, creare un nuovo file CSS e chiamarlo style.css. In questo file che andremo a passato tutti ed ogni regola CSS utilizzato nel nostro pagina web. Per essere sicuri che il nostro nuovo file preservare l'ordinamento destra di teh regole css, useremo la sequenza del collegamento al file CSS che abbiamo nella nostra pagina web. Se si utilizza Bootstrap, sei likey di avere il link al bootsrap prima che i link a qualsiasi altro file css, non è vero? Buona, aprire il bootstrap.min.css, copiare tutto il contenuto e incollarlo nella vostra styles.css. Fate lo stesso con qualsiasi altro foglio di stile che si sta utilizzando ed essere sicuri di eliminare il collegamento a tale file dal vostro <testa> sezione. Se qualcuno di voi CSS file non è ancora minified, utilizzare il minifier css per minify il contenuto e incollare nel vostro styles.css versione minified.

Una volta fatto, si dovrebbe finire con un enorme, file css illeggibile: cosa fare con quel? We’ll write a small piece of Javascript to ensure that file will be downloaded only after the entire document has been loaded. Let’s do it.

Nel footer della pagina web, immediatamente prima della </corpo> tag di chiusura, Aggiungi questo:

<script type ="text / javascript">
    funzione downloadCssAtOnload(){
        var d = document.head, n = document.createElement("collegamento");
        n.type ="text / css", n.rel ="foglio di stile",n.href ="css / styles.css",d.appendChild(n)
    }
    Se (window.addEventListener){
        window.addEventListener("caricare", downloadCssAtOnload, falso);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadCssAtOnload);
    }altro{ 
        window.onload = downloadCssAtOnload;	
    }
 </copione>

Analizziamo lo. First we have the function downloadCssAtOnload(). Questa funzione è davvero semplice: che basta creare una <copione> elemento e imposta tutto il suo attributo ai valori desiderati, allora lo aggiunge al documento. In pratica, quando si chiamerà questa funzione, le seguenti righe di codice saranno scritti nel <testa> sezione del nostro documento:

<Tipo di collegamento ="text / css" rel ="foglio di stile" href ="css / styles.css">

The rest of the code just sets how to call the function downloadCssAtOnload() quando il documento è stato caricato: di conseguenza per le caratteristiche del browser dell'utente, useremo il window.addEventListener() metodo, the window.attachEvent() metodo o la window.onload() metodo.

Che cosa circa il javascript?

buon punto! Si può fare esattamente la stessa cosa con il vostro javascript. In primo luogo creare un nuovo file javascript che contiene tutti i JavaScript utilizzata dal tuo sito web (non dimenticate di minify esso). Quindi rimuovere alll elementi script dal tuo piè di pagina del documento, tranne il nostro piccolo frammento di sopra. Infine aggiungere il codice simile a rinviare il caricamento del javascript. Il risultato finale dovrebbe essere simile:

<script type ="text / javascript">
    funzione downloadCssAtOnload(){
        var d = document.head, n = document.createElement("collegamento");
        n.type ="text / css", n.rel ="foglio di stile",n.href ="css / styles.css",d.appendChild(n)
    }
    funzione downloadJSAtOnload(){
        var d = document.createElement("copione");
        d.src ="js / javascript.js",document.body.appendChild(d)
    }
    Se (window.addEventListener){
        window.addEventListener("caricare", downloadJSAtOnload, falso);
        window.addEventListener("caricare", downloadCssAtOnload, falso);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadJSAtOnload);
        window.attachEvent("onload", downloadCssAtOnload);
    }altro{ 
        window.onload = downloadJSAtOnload;	
        window.onload = downloadCssAtOnload;	
    }
 </copione>

Il nuovo codice aggiungerà seguente riga nel piè di pagina del documento:

<script src ="js / javascript.js"></copione>

È tutto. Ora riprovare per testare la tua pagina con Page Speed ​​Insights e si dovrebbe essere in grado di vedere un rilevante miglioramento del tuo punteggio.

Cos'altro?

Per migliorare ulteriormente le nostre prestazioni pagina abbiamo ancora un sacco di lavoro da fare, ma per il momento basta prendere una pausa. Nei prossimi articoli di questa miniserie vedremo come ottimizzare le nostre immagini e come impostare il file .htaccess.

Se avete qualche commento, sentitevi liberi di scriverlo qui: I’ll be happy to hear your thoughts 🙂