Google PageSpeed Insights – Del 3
JavaScript og CSS er kanon, og noget som virkelig kan skabe nogle gode ting på en hjemmeside. Men at bruge Javascript og CSS, har også en bagside hvis man ikke tænker sig om.
JavaScript og CSS er noget man typisk ser indsat imellem head tagget i et html dokument (HTML er den type kode din hjemmeside spytter ud, så ja stort set alle hjemmesider består af et HTML dokument). Javascript og CSS er klient siddet, forstået på den måde at før der reelt bliver gjort noget med det, skal det hentes ned og fortolkes på brugerens computer i deres browser.
Det er derfor ikke på samme måde som med serversidekode som jeg snakkede om i del 2, og som omhandlede reducering af svartid. Men serversidekode bliver fortolket på serveren og derefter smidt ud til brugeren.
Hvad er gengivelsesblokkerende Javascript og css?
Nogle tror at det der bliver skrevet i Google PageSpeed Insights, er at JavaScriptet eller CSS filen er blokkeret, og dermed ikke loader. Dette er ikke tilfældet. JavaScriptet og CSS filen er blokkerende. Altså loader det, men blokerer for at andet bliver arbejdet med så længe de loades og fortolkes. Når browseren er færdig med at fortolke elementet, går den videre til næste element.
Men man kan reelt sige at hvis din eksterne javascript/CSS fil bliver hentet ind allerede imellem head tagget, eller lige efter det startende bodytag. Så er det i sit udgangspunkt blokkerende. Det samme gælder faktisk også inline javascript, det er også blokkerende i sit udgangspunkt.
Dette er fordi inline JavaScript skal fortolkes og JavaScript + CSS filer som sagt skal hentes ned og fortolkes, og dette stopper altså renderingen af sitet, og lader resten af sitet vente på sig til dette er færdig med fortolkningen.
Hvad er rendering?
Det er vigtigt at forstå hvad rendering er, da det giver et meget godt billede af hvorfor et javascript eller en css fil i sit udgangspunkt er blokkerende, hvis det fx indsættes mellem head taggene.
Når en hjemmeside hentes ned, hentes der et HTML dokument, hvori der er det man kalder HTML kode. Det kunne se ud sådan:
Der er både en CSS og javascript fil, og ydermere bliver der hentet et billed ind som indhold. Men når dokumentet er hentet ned, så begynder browseren at fortolke. Dette gør den som et træ, også kaldet dokument træ eller DOM tree.
Det vil sige den starter med at se, her har vi <html></html> inde i den er der først <head></head> og derefter <body></body>. Og da browseren fortolker fra toppen og ned, vil den først starte med at se på head hvori CSS og Javascript jo også bliver hentet ind. Det betyder så at mens det bliver gjort, venter den med at fortolke det der er mellem body taggene. Men når den er færdig med at fortolke det der er i head, så går den videre med at fortolke body, og her finder den så billedet, der i øvrigt ikke er blokkerende, men som skal hentes ned.
Hvordan kan man gøre Javascript og CSS ikke blokkerende?
Processen og hvad man gør, er forskellig alt efter om vi snakker Javascripts eller CSS filer. Så jeg vil dele det op i disse to kategorier.
Fjern gengivelsesblokkerende JavaScript
Når nu du forstår hvad rendering er, kan man i udgangspunktet sige at første step er at få dem ned under folden, jeg anbefaler typisk, lige før det afsluttende bodytag. Og hvad sker der så? Jo javascripts er ikke længere I googles øjne blokkerende. Og så er det punkt væk og af vejen.
Nej ikke rigtig, for det er noget vås at sige at det ikke er blokkerende, for blokkerende er det, se fx herunder på billedet, hvor den loader med javascripts nede ved det afsluttende bodytag som skrevet ovenfor, og som får grønt lys hos Google. Læg mærke til den blå streg, som viser at noget blokkerer for renderingen af sitet.
Dette er jo fordi javascript i sit udgangspunkt er blokkerende, uanset hvor det er placeret i HTML koden.
Men hvad kan man så gøre ved det? Jo man skal på en eller anden måde fortælle browseren af de her scripts, må du gerne vente med at fortolke, hente ned fint, fortolke nej. Det kan man gøre på flere måder. Man skal dog lige være obs på at man ikke altid kan bruge den samme metode til alle. Den vej jeg typisk vælger at det man kalder asynkron load. Det ser ud sådan:
async gør det at filen hentes mens siden bliver renderet, og filen fortolkes så når filen er hentet ned.
Defer gør det at filen hentes efter siden er renderet, og filen fortolkes når filen er hentet ned.
Og så er der den normale, som jo stopper sidens rendering, mens filen loades og fortolkes.
Nogen gange skal man bruge en kombi af alle 3, da det kommer an på hvad javascriptet indeholder og bruges til, samt hvad javascriptet er afhængig af.
Men prøv at se på dette eksempel som viser hvordan renderingen går når man fx bruger async: læg igen mærke til den blå streg.
Forskellen er stor, faktisk renderes siden 50% hurtigere end i før viste eksempel, fordi javascriptene nu ikke er blokkerende mere. Husk på, Google gav det andet grønt lys selvom de reelt var blokkerende stadig. Så stol ikke altid på hvad Google PageSpeed Insights fortæller dig.
Fjern gengivelsesblokkerende CSS
At fjerne gengivelsesblokkerende CSS, er lidt sværere, da det også indbefatter det Google PageSpeed Insights kalder Prioriter Synligt Indhold, men det vil jeg ikke komme så meget ind på her, da det er et kapitel for sig.
Det jeg vil fokuserer på er det at fjerne gengivelsesblokkerende CSS, og det er der også her flere måder at gøre det på. Første skridt er at få fjernet kald til CSS filer 100%. Det vil sige at din side faktisk ikke skal hente nogen CSS filer ind på hjemmesiden overhovedet. Hvordan man fjerner dem er forskelligt fra system til system, men har du et custom, burde denne manøvre være nem. I wordpress skal man ind og kode for at fjerne de styles som bliver hentet ind, det kan du læse mere om her.
Dernæst skal du faktisk også her loade css filerne asynkront. Og dette kan man gøre via javascript, hvilken måde du gør det på er op til dig, for der er 1000 måder at gøre netop det.
Ud over det for at du undgår at siden hopper og danser, skal du lige få hele eller dele af dit hoved stylesheet (CSS) ind i head, mellem style tags. Dette er også starten på det at Prioritere Synligt indhold.
Hej Kim
det var en god læsning. Men det jeg lige står og mangler et svar på, kommer du ikke nærmere på… desværre. Det er hvordan jeg fjerner gengivelsesblokkerende css. Kan du uddybe det med nogle eksempler. Jeg bruger selv prestashop.
mange tak
Jonas
Det eneste du reelt skal, er at loade en ekstern fil via javascript. Det kan se ud på mange måder, og der er mange måder netop at loade en ekstern fil på. en søgning på Google Giver ret mange resultater, hvad der virker i din løsning, eller hvad der virker for dig. Kommer jo an på hvad du selv kan og ikke kan. Fælles er dog, at du skal loade dem via javascript, og at de skal deaktiveres i prestashop, sådan at du ikke både loader dem via link tag og via javascript.
Hej
Tak for dit indlæg.
Ved du om der findes nogle addons der gøre det her for en ??
Vh Dan
Der findes mange plugins, men de fleste gør det ikke til fulde, men i stedet gør som jeg beskriver lige er nok til at Google giver det grønt lys. Det er også klart, da det ikke er muligt at lave et plugin som bare gør det der rent faktisk skal til, pr automatik. Så derfor kræver det altid noget manuelt arbejde og ikke mindst tests.