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

Velocità

Every web developer knows how important it is to optimize his websites' performances to offer the best user experience to our visitors. 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 this first article we'll see how to increase the page loading speed prioritizing content.

Quando si verifica la tua pagina web con Page Speed ​​Insigths, you're likely to get the following suggestion:

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.

Nel Cromo sganciare gli strumenti di sviluppo basta fare clic sul 3 puntini nell'angolo in alto a destra e selezionare l'opzione mostrato nell'immagine qui sotto

strumenti di sgancio per sviluppatori

Nel Firefox il 3 punti sono allineati orizzontalmente e il menu si mostrano 3 opzioni: 'Dock to bottom', 'Dock to left', 'Dock to right' and 'Separate window'

Nel Microsoft Edge è sufficiente fare clic sull'icona

strumenti di sgancio per sviluppatori

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, whereas in Firefox the right tab to use here is called 'Inspector'). 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. It doesn't matter the name you give this file, it's just a temporary file we use to collect all css rules we need to render the above the fold content.

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: it's very easy to use and it doesn't require any installation. 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 this file we're going to past all and every css rule used in our web page. Per essere sicuri che il nostro nuovo file preservare l'ordinamento destra di teh regole css, we'll use the sequence of the link to css files we have in our web page. Se si utilizza Bootstrap, you're likey to have the link to bootsrap before the links to any other css file, isn't it? 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:

Let's analyze it. 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:

The rest of the code just sets how to call the function downloadCssAtOnload() quando il documento è stato caricato: accordingly to the user's browser features, we'll use the 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 (don't forget to 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:

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

È 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. In the next articles of this mini-series we'll see how to optimize our images and how to setup the .htaccess.

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.