Che cosa sono i "contenuti above the fold" in Google Pagespeed?

Fino a poco tempo fa, il mio sito (www.heatexchangers.ca) ha ottenuto il 98% su Google Page Speed. C'erano un paio di cose di cui non potevo fare nulla come la stringa di query dai caratteri web. Sono stato molto contento di questo in quanto rappresentava tutto ciò che potevo fare.

Recentemente Google ha aggiunto qualcos'altro che influisce sul punteggio della velocità della pagina e ora ottengo solo l'89% sulla velocità della pagina e ottengo questo suggerimento:

• Elimina JavaScript e CSS esterni che bloccano il rendering nei contenuti above the fold.

Il suggerimento per risolvere questo problema sembra coinvolgere il trolling attraverso tutti i miei file .css e .js, separandone alcune parti e aggiungendoli in linea al mio HTML. Questo mi sta causando un po 'di confusione, dato che avevo l'impressione che dobbiamo tenere il maggior numero possibile di JS e CSS dall'HTML.

Che cos'è esattamente il contenuto "Above the Fold"? Se si tratta di alcuni stili come font, colore di sfondo ecc; allora vedo che potrebbe non essere un affare troppo grande per includere in linea. Non sono stato in grado di trovare un elenco di cosa sia esattamente.

Questo perché Google ha recentemente modificato lo strumento di velocità della pagina per riflettere meglio un Web sempre più mobile. Le reti di dati mobili hanno caratteristiche prestazionali diverse rispetto a quelle cablate o wifi, quindi è necessario fare cose diverse per ottimizzarle.

Above-the-fold (ATF) è semplicemente il primo schermo: tutto ciò che non è necessario scorrere per vedere. Ovviamente, questo varia a seconda del dispositivo e del suo orientamento, quindi potrebbe essere necessario generalizzare e forse trovare alcune opzioni comuni praticabili, forse uno destinato agli smartphone, uno per tablet e uno per desktop più grandi.

Per quanto riguarda i CSS di cui stanno parlando, intendono davvero tutti i CSS necessari per dare uno stile completo a qualsiasi contenuto visualizzato ATF. Per determinare il tempo di caricamento del contenuto ATF, eseguiranno una schermata della versione finale e la confronteranno visivamente con la pagina mentre si carica e quando sarà abbastanza simile, considereranno il punto in cui il contenuto ATF è caricato.

Questa è una presentazione video di Google su questo argomento:

http://www.youtube.com/watch?v=YV1nKLWoARQ

L'enfasi è sul fare in modo che gli utenti facciano qualcosa nel primo secondo. Il ragionamento alla base dell'inserimento del CSS per il contenuto ATF direttamente nell'HTML riflette la loro ricerca sulle prestazioni dei dati mobili, dimostrando che se il CSS non è presente, non verrà caricato abbastanza presto per essere entro il primo secondo.

Forniscono anche collegamenti a strumenti che potrebbero essere in grado di automatizzare parte di questo. Non ho provato loro e YMMV.

google page approfondimenti ti dirà chiaramente quante% di CSS che fanno riferimento al contenuto above the fold viene caricato troppo tardi e la pagina potrebbe essere stata visualizzata in precedenza. Quindi potresti spostare parti di CSS per ottenere un risultato ecologico. posso farlo per te: goo.gl/GsRxNc

un link da Google che descrive "above the fold" https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Il contenuto above the fold è la parte della pagina Web che è visibile in una finestra del browser al primo caricamento della pagina. Google vuole vedere i CSS incorporati estratti dal tuo file CSS principale e iniettati nel tag head, consentendo di caricare prima tutto ciò che vedi per primo.

fonte - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Si riferiscono a js che bloccano il rendering come codice analitico o di monitoraggio, motivo per cui suggeriscono di posizionare gli script "caricami prima di tutto il resto" nel piè di pagina poiché verranno quindi caricati una volta che l'utente ha il sito sullo schermo.