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


132

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.


49
La 'piega' è dove la parte inferiore dello schermo è al caricamento della pagina. Quando atterri su un sito Web, qualsiasi contenuto che vedi immediatamente senza scorrere è "above the fold". Tutto ciò che devi scorrere verso il basso per vederlo 'sotto la piega'.
Caribou,

21
Above the Fold è un termine generalmente utilizzato per i giornali, ovvero il contenuto sopra il quale il foglio viene piegato in senso orizzontale. Di solito per il web design questo è il primo 600px ~ o giù di lì (discutibile a seconda di chi chiedi). Non si riferisce agli stili (caratteri, sfondi, ecc.), Si riferisce al contenuto e al tipo di js che potrebbe bloccare il rendering in quel contenuto. Dubito che Google stia suggerendo di utilizzare gli stili in linea, puoi effettivamente pubblicare i suggerimenti che ti sono stati dati?
Christian,

@Coop Perché non fare semplicemente una risposta anziché un commento?
Kolob Canyon,

Risposte:


113

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.


@Joshua, ho fatto qualcosa per "Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold" <noscript> ... </noscript>. Ma rifletti solo sui cellulari. Non nel desktop. per questo URL winni.in/cake-delivery-in-bangalore
V SH

2

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


Puoi chiarire cosa significano le percentuali? Supponiamo che PageSpeed ​​riferisca che il 55% dei contenuti above the fold può essere visualizzato senza attendere il caricamento di fogli di stile esterni. Ciò significa che il 45% dei contenuti above the fold è disegnato con regole di fogli di stile esterni. Ma non è così .
x-yuri,


-1

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.


Questo è corretto. Dovrebbero essere rinviati o caricati asincroni o spostati nel piè di pagina / prima del tag di chiusura </body>, poiché non sono cruciali per la pagina. Il codice cruciale, come lo stile della pagina principale o Bootstrap, deve essere caricato nella parte superiore della pagina o si verificherà FOUC (Flash Of Unstyled Content), quindi l'unica cosa che si può fare su questi componenti cruciali è minimizzarli e unirli in meno file, per ridurre il blocco del rendering. Questo commento è un supporto per il commento di CowboyWillie che è ingiustamente ridimensionato.
Tahi Reu,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.