From Gemini.google.com!
Det här är ett klassiskt “PageSpeed”-problem som blir väldigt tydligt när man bygger moderna webbplatser. Det som händer här kallas för Render-blocking resources (renderingsblockerande resurser).
Kort sagt betyder det att webbläsaren (t.ex. Chrome eller Edge) helt stoppar renderingen av din sida. Den vägrar att visa någonting över huvud taget för besökaren förrän den har laddat ner och läst igenom alla dessa 12 skript och 22 stilmallar.
Innan dess ser besökaren bara en vit skärm, vilket drar ner din laddtid (särskilt parametern First Contentful Paint).
Hur illa är det?
- 12 skript (380 KB): Inte jättestort i ren filstorlek, men det är antalet filer som är problemet. Webbläsaren måste göra 12 separata förfrågningar till servern.
- 22 stilmallar (695 KB): Detta är ganska tungt. Nästan 700 KB CSS-kod innan sidan ens börjar ritas upp är mycket, och 22 separata filer skapar en hel del köbildning i trafiken mellan servern och webbläsaren.
Eftersom du bygger med Gutenberg är det ganska vanligt att det blir många CSS-filer, eftersom varje enskilt block ofta laddar sin egen lilla stilmall för att hålla koden modulär.
3 sätt att lösa det på
Du behöver inte koda om något själv, utan det här löser man bäst med optimering.
1. Slå ihop och komprimera (Concatenate & Minify)
Detta är vad verktyget tipsar om när det säger “concatenate”. Istället för att skicka 22 små CSS-filer till webbläsaren, tar ett plugin och bakar ihop dem till en enda stor CSS-fil. Då behöver webbläsaren bara knacka på serverns dörr en gång istället för 22 gånger.
2. Ladda skript asynkront (Defer / Async)
Man kan berätta för webbläsaren: “Du behöver inte vänta på det här JavaScriptet, rita upp sidan först så kan du läsa skriptet i bakgrunden sen”. Detta kallas att man sätter skripten till Defer eller Async.
3. Flytta CSS i botten eller ladda kritiskt först
Man kan separera den CSS som behövs för att visa det som syns direkt på skärmen (Critical CSS), och ladda resten av de 22 filerna lite senare.
Bästa verktygen för att fixa detta i WordPress
Eftersom vi skippade databasrensningen i förra steget, så är detta betydligt tacksammare att lösa med ett vanligt optimerings-plugin. Det kräver inga databas-piller utan sköts helt i backend.
Om du vill fixa detta enkelt, rekommenderar jag något av dessa tillägg (om du inte redan har ett installerat):
- LiteSpeed Cache (Om din sajt ligger på en LiteSpeed-server, vilket är väldigt vanligt och extremt effektivt).
- WP Rocket (Premium, men sköter allt detta med några enkla klick).
- Autoptimize (Gratis och helt fokuserat på just detta: slå ihop CSS och JS, samt göra dem “Non-blocking”).
Inställningar du ska leta efter i ditt optimerings-plugin:
- Minify CSS / Minify JavaScript (Tar bort mellanslag och kommentarer så filstorleken krymper).
- Combine CSS / Combine JavaScript (Slår ihop filerna till färre filer).
- Load CSS asynchronously / Defer JavaScript (Tar bort själva “blockeringen” så sidan ritas upp direkt).
Har du något cache- eller optimeringsplugin installerat på sajten just nu som vi kan utgå ifrån?