2013-08-20 11 views
112

Fino a poco tempo fa, il mio sito (www.heatexchangers.ca) ha ottenuto il 98% di Google Page Speed. C'erano un paio di cose che non potevo fare nulla come la stringa di query dai caratteri web. Ero molto contento di questo dato che rappresentava tutto ciò che potevo fare.Che cosa significa "contenuto above the fold" in Google Pagespeed?

Recentemente Google ha aggiunto un'altra cosa che colpisce il punteggio di velocità di pagina e io ora ottenere solo 89% su Page Speed ​​e ottenere questo suggerimento:

  • Eliminare esterno render-blocking JavaScript e CSS nel above-the-fold soddisfare.

Il suggerimento per risolvere questo problema sembra implicare la troll attraverso tutti i miei file .css e .js e separare alcune parti di esse e aggiungerle in linea al mio html. Questo mi sta causando un po 'di confusione poiché avevo l'impressione che dovremmo tenere il più possibile JS e CSS dall'HTML possibile.

Che cosa è esattamente il contenuto di "Above the Fold"? Se sono pochi stili come font, colore di sfondo ecc; quindi posso vedere che potrebbe non essere un affare troppo grande per includere in linea. Non sono stato in grado di trovare una lista di esattamente ciò che è.

+40

Il "piega" è il punto in cui la parte inferiore dello schermo si trova sul 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 'below the fold'. – Coop

+18

Above the Fold è un termine generalmente utilizzato per i giornali, ovvero il contenuto sopra il quale la carta viene piegata orizzontalmente. Di solito per il web design questo è il primo 600px ~ o così (discutibile a seconda di chi chiedi). Non si riferisce agli stili (caratteri, sfondi ecc.), Si riferisce al contenuto e al tipo di j che potrebbe bloccare il rendering di _in_ quel contenuto. Dubito che Google stia suggerendo di utilizzare gli stili in linea, puoi davvero pubblicare i suggerimenti che ti sono stati forniti? –

risposta

98

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 di performance diverse rispetto a quelle cablate o wifi, quindi è necessario fare cose diverse per ottimizzarle.

L'above-the-fold (ATF) è semplicemente la prima schermata - 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 magari trovare alcune opzioni comuni praticabili, forse uno smartphone di destinazione, uno per i tablet e uno per i desktop più grandi.

Per quanto riguarda i CSS di cui stanno parlando, intendono davvero tutti i CSS necessari per lo stile completo di qualsiasi contenuto visualizzato ATF. Per determinare il tempo di caricamento del tuo contenuto ATF, prenderanno una schermata della versione finale e la confronteranno visivamente alla pagina man mano che si carica e quando sarà abbastanza simile, considereranno il punto in cui il contenuto dell'ATF è caricato

Questo è un video di presentazione da parte di Google su questo argomento:

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

L'enfasi è su come ottenere agli utenti qualcosa da fare entro il primo secondo. Il ragionamento alla base del mettere il CSS per i contenuti ATF direttamente nell'HTML riflette la loro ricerca sulle prestazioni dei dati mobili che mostrano che se il CSS non è presente, non verrà caricato abbastanza presto per essere entro il primo secondo.

Forniscono inoltre collegamenti a strumenti che potrebbero essere in grado di automatizzare parte di questo. Non li ho provati e YMMV.

+0

Davvero bello per quando si dispone di una spa angolare ... – Laurenswuyts

+0

@Joshua, ho fatto qualcosa per "Eliminare il rendering di blocco JavaScript e CSS nei contenuti above-the-fold" . Ma rifletti solo sui cellulari. Non in desktop. per questo URL https://www.winni.in/cake-delivery-in-bangalore –

2

Gli approfondimenti su google vi diranno chiaramente quanti% di css che fanno riferimento al contenuto above the fold viene caricato troppo tardi e la pagina potrebbe essere stata resa in precedenza. Di quanto potresti spostare parti di css per ottenere un risultato verde. posso farlo per te: goo.gl/GsRxNc

un link da Google che descrive 'di sopra della piega' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

+0

Puoi chiarire cosa significano le percentuali? Supponiamo che Page Speed ​​sia possibile eseguire il rendering del 55% dei contenuti above the fold senza attendere il caricamento di fogli di stile esterni. Ciò significa che il 45% dei contenuti above-the-fold sono in stile con regole da fogli di stile esterni. Ma non è questo il caso (https://stackoverflow.com/questions/45779900/what-do-percents-regarding-above-the-fold-content-mean). –

-2

Essi si riferiscono a render-blocco js come analisi o di verifica di codice che è il motivo per cui suggeriscono di collocare quei "mi caricare prima di tutto il resto "script nel footer che verranno caricati una volta che l'utente ha il sito sullo schermo.