javascript - Hva er «above-the-fold-innhold» i Google Pagespeed?
Frem til nylig scoret nettstedet mitt (www.heatexchangers.ca) 98 % på Google Page Speed. Det var et par ting jeg ikke kunne gjøre noe med, som for eksempel spørringsstrengen fra webfonter. Jeg var veldig fornøyd med dette, da det representerte alt jeg kunne gjøre.
Nylig la Google til noe annet som påvirker poengsummen for sidehastighet, og jeg får nå bare 89 % på Page Speed og får dette forslaget:
- Eliminer eksterne JavaScript- og CSS-filer som blokkerer gjengivelse i innholdet over brettet.
Forslaget for å fikse dette ser ut til å innebære å trolle gjennom alle mine .css- og .js-filer og separere noen deler av dem og legge dem inline i HTML-en min. Dette forårsaker litt forvirring for meg, da jeg hadde inntrykk av at vi må holde så mye JS og CSS som mulig utenfor HTML-en.
Hva er egentlig "Above the Fold"-innhold? Hvis det er noen få stiler som skrifttype, bakgrunnsfarge osv., kan jeg se at det kanskje ikke er så stor sak å inkludere det inline. Jeg har ikke vært i stand til å finne en liste over nøyaktig hva dette er.
Svar #1
Dette er fordi Google nylig endret verktøyet for sidens hastighet for bedre å gjenspeile et stadig mer mobilt internett. Mobildatanettverk har forskjellige ytelsesegenskaper enn kablet eller wifi, så du må gjøre forskjellige ting for å optimalisere for dem.
Above-the-fold (ATF) er enkelt sagt det som vises på den første skjermen — alt du ikke trenger å rulle for å se. Selvfølgelig varierer dette avhengig av enheten og dens orientering, så du må kanskje generalisere og kanskje finne noen praktiske felles alternativer, kanskje ett som er rettet mot smarttelefoner, ett for nettbrett, og ett for større stasjonære datamaskiner.
Når det gjelder hvilken CSS de snakker om, mener de egentlig all CSS som trengs for å fullstendig style alt innhold som vises ATF. For å bestemme lastetiden for ATF-innholdet ditt, kommer de til å ta et skjermbilde av den endelige versjonen og sammenligne det visuelt med siden etter hvert som den lastes, og når det er tilstrekkelig likt, vil de vurdere det som punktet der ATF-innholdet er lastet.
Dette er en videopresentasjon fra Google om dette emnet:
http://www.youtube.com/watch?v=YV1nKLWoARQ
Vekten ligger på å gi brukerne noe å gjøre innen det første sekundet. Begrunnelsen for å legge CSS-en for ATF-innholdet direkte i HTML reflekterer deres forskning på mobil dataytelse som viser at hvis CSS-en ikke er der, vil den ikke bli lastet raskt nok til å være innen det første sekundet.
De gir også lenker til verktøy som kan være i stand til å automatisere noe av dette. Jeg har ikke prøvd dem, og resultatene kan variere.