Sedan introduktionen av Lighthouse har nya parametrar relaterade till sidhastighet dykt upp. En av de viktigaste av dessa parametrar är First Contentful Paint (FCP). I Lighthouse version 10, från och med juni 2024, är FCP:s inverkan på det totala resultatet 10 %.
För att anta och förstå FCP som ett mått, är det viktigt att först undersöka psykologin bakom det. Konceptet liknar speglar installerade i hissar:
För att kort sammanfatta: Under första hälften av 1900-talet ökade användningen av hissar i höga byggnader avsevärt, men hisssystemen var primitiva jämfört med idag. Därför uppstod idén med att installera speglar i hissar för att få tiden att spendera i hissen att kännas kortare.
Återgå till vårt ämne: Punkten som perceptuellt får dig att vänta under laddningstiden när du försöker komma åt en sida är FCP. Definitionen av First Contentful Paint är den tid det tar för den första texten, bilden, icke-vita duken, etc., att visas för användaren. Enheten för FCP är sekunder.
I Lighthouse bestäms färgskalan för FCP enligt följande:
- 0-2 sekunder: Grön => Snabb
- 2-4 sekunder: Orange => Behöver förbättras
- 4+ sekunder: Röd => Långsam
Enligt HTTP-arkivdata, antalet webbplatser som kan övervägas snabb är 25%, och 50 % av befintliga webbplatser klassificeras som långsamma.
Vad kan göras för att förbättra FCP?
Minska serverns svarstid
Generellt sett kan detta tolkas som förbättringar som behövs på serversidan av servern och programvaran. Så här listar du de problem som negativt påverkar serverns svarstid:
- Serverns delning, konfiguration (dvs. serverinställningar) och serverresurser kan vara problemet. Kapaciteten på din server bör ökas i enlighet med din trafik. I vissa fall kan dåligt skrivna databasfrågor och mycket komplexa programvarukomponenter allvarligt påverka serverns svarstid.
- Att inte använda ett CDN (Content Delivery Network) kan orsaka förseningar i åtkomst till innehåll, vilket påverkar FCP. Eftersom innehållsstorleken ökar, till exempel, om en stor animerad GIF eller video försöker anropas utan ett CDN och huvudservern är på en annan kontinent, kan du behöva överväga CDN-lösningar för att lösa FCP.
- Att inte visa statiskt innehåll med en korrekt och konsekvent cachepolicy kan överbelastas din server i onödan när antalet besökare ökar. Till exempel, om du inte håller din logotyp i långtidscache medan du laddar den på varje sida, skadar du din servers svarstid i onödan.
- Onödiga sidomdirigeringar när du kommer åt sidan kan det påverka din FCP i onödan.
Till exempel, tidigare brukade det finnas inställningar som detta: när en användare ville komma in på en webbplats fanns det en HTTP till HTTPS omdirigering, sedan om den var mobil, en HTTPS till mobil omdirigering (t.ex. https:// www till https://m), och om sidan togs bort och omdirigerades någon annanstans med en 301, kändes det som att användaren fördes från skrivbord till skrivbord på ett skattekontor. Detta är ett extremt exempel för bättre förståelse, men om du omdirigerar en sida till en annan URL med en 301-omdirigering och sedan omdirigerar den sidan till en annan med en 301, kanske du gör samma ologiska inställning.
- Om du använd inte preconnect eller DNS-prefetch prefix när du ansluter till dina tredjepartstjänster och ansluter till många tredjepartstjänster, gör du inget fördelaktigt för FCP.
Minska resurser för renderingsblockering
Jag måste erkänna att denna enda punkt skriven som en rad kan ta månader att åtgärda.
För att uppnå detta finns en lösningsmetod där alla JS, CSS och liknande resurser som blockerar sidrenderingen läses in efter att sidan skapades, men den initialt synliga delen av webbplatsen laddas först medan webbplatsen laddas. Men för att göra detta måste alla JS, CSS och liknande resurser undersökas, och de mest tidskrävande processerna måste separeras. Att använda så få tredjepartstjänster som möjligt hjälper dessutom till att optimera FCP.
