Hur kan du förbättra dina Google Core Web Vitals-poäng?

Publicerad

(23 aug 2020)

Nästa era på webbsidans prestanda

Det har gått ett par månader jag har jobbat om strategier för att förbättra webbsidans prestanda på mina företagsägda webbplatser och för att vara ärlig är det ett riktigt intressant arbete att dela med er.

Jag förstår att arbetet med webbsidans prestanda inte är ett nytt och människor har kommit med många idéer och knep för att öka din sidhastighetshastighet. Men nu verkar det som att det inte räcker längre och du måste gå vidare till nästa nivå !!

Som ni borde veta om vikten av SEO (sökmotoroptimering) och att ta fram dina webbsidesresultat inte bara på första sidan av google-resultaten utan högst upp på samma första sida är verkligen en hel del! Lång historia kort – låt mig garantera dig att härefter kommer Google Core Web Vitals att bli en av de största bidragsgivarna till SEO-rankningen av Googles sökresultat.

Kort & Enkel förklaring på Google Core Web Vitals

Core Web Vitals, som introducerades under första kvartalet i år, är en uppsättning mätvärden relaterade till hastighet, lyhördhet och visuell stabilitet på din webbsida.

Google har definierat dessa som Core Web Vitals:

  • Största innehållsrika färg : Den tid det tar för en sidas huvudinnehåll att laddas. En perfekt LCP-mätning är 2,5 sekunder eller snabbare.
  • Första ingångsfördröjning : Den tid det tar för en sida att bli interaktiv. En idealisk mätning är mindre än 100 ms .
  • Kumulativ layoutskift : Mängden oväntat layoutförskjutning för visuellt sidinnehåll. En idealisk mätning är mindre än 0,1 .

Denna uppsättning mätvärden designades för att hjälp webbplatsägare att mäta användarupplevelsen de ger när det gäller laddning, interaktivitet och visuell stabilitet.

Som en helhet kommer din sidprestanda att rankas enligt nedan.

Komplett lista över mätvärden som beaktas för sidmått.

Nästa avsnitt talar i grunden om idéer eller metoder för att förbättra din sidbelastningsprestanda och CWV-poäng.

Tips för att förbättra dina Core Web Vitals-poäng

Nedan följer några metoder som hjälpte mig att förbättra mina Core Web Vitals-poäng drastiskt såväl som att förbättra den övergripande sidprestandan också.

  1. Använd effektivt webbläsare och CDN-cache (förbättrar FID och LCP)
    Detta är en mycket enkel metod ch för att förbättra dina FID- och LCP-poäng. Se till att dina statiska tillgångar serveras från ett CDN (om dess AWS kan du cacha det i Cloudfront). Detta leder till att resurserna snabbt kommer in i dina webbläsare. För att förbättra andra gångens belastning, se till att de tillgångar som nått på klientsidan är cachade i din webbläsare.
    cache-control: max-age=120 – betyder att den returnerade resursen är giltig i 120 sekunder, varefter webbläsaren måste begära en nyare version.
    Du kan också cacha dina dynamiska sidor också ditt CDN med rätt TTL-värde baserat på ditt applikationsbeteende.
  2. Ställ in exakta storleksattribut eller dimensioner för dina media och annonser (förbättrar CLS)
    Detta är något mycket viktigt för att förbättra dina CLS-poäng. Se till att du har rätt height:XXpx; width: YYpx inställd på din bild eller mediataggar. Återigen är detta mycket viktigt åtminstone för komponenterna som är ovanför vikningen. En genväg för detta är att om du får slut på idéer för att få den exakta höjden på bilden kan du ställa in som height:auto; vilket verkligen hjälpte för mig. Bortsett från media, om din webbplats visar annonser, se till att du har ställt in korrekta annonsplatser med rätt dimensioner eftersom att trycka upp eller ner på komponenterna på sidan kommer definitivt att sänka din CLS-poäng. Håll därför koll på annonser också!
  3. Lata bilder med hög upplösning med rätt upplösning baserat på enhetstyp (förbättrar LCP)
    Det här är verkligen en snabb vinst för dig! Det finns många Lazy-lastningspaket ute i världen som du kan använda på din webbsida för att lat ladda alla bilder på din sida.Detta kommer att minska den totala sidvikten och laddningstiden för att göra din sida i webbläsaren. En annan viktig del är att fördefiniera upplösningen på bilden du vill ladda baserat på enhetstyp. Du borde inte ladda samma upplösningsbilder i olika enhetstyper.
  4. Använd effektivt SSR och CSR på din webbsida (förbättra FID & LCP)
    Du borde veta att Google marknadsför och uppmuntrar SSR-sidor (Server Side Rendered) för att få bra SEO-värden. Men helst är det en kompromiss med SEO Vs-sidbelastningsprestanda. Om din sida är för stor när det gäller innehåll och om du bestämmer dig för att återge hela sidan på servern kommer det definitivt att ta mer tid att ladda hela sidan såväl som sidan vikten blir också hög. Lång historia kort – min rekommendation är att det är bättre att göra SSR-renderingen för dina sidkomponenter som visas ovanför vikningen och återge resten av komponenterna från klientsidan som visas nedanför vikningen. På detta sätt får användaren sidan laddad ovanför vikningen och resten av sidan gör asynkront utan att hindra användarupplevelsen.
  5. Använd kod Dela & dela upp dina tillgångar i bitar (förbättrar FID & LCP)
    Det är alltid ingen bra idé att ha stora (allt över 100Kb är enorma) tillgångar (speciellt JS-filer) i din applikation. Så använd bättre paket som ”webpack” för att dela upp tunga tillgångar till små bitar som asynkront laddar dina tillgångar i din webbläsare (om du aktiverar h2-protokoll). Du kan också använda koddelningsfunktionerna för att dela upp sidkomponenterna för att separera filer i stället för att packa den i en enda HTML-fil.
  6. Komprimera alla dina statiska tillgångar med Brotli-komprimering (förbättrar LCP)
    Jag rekommenderar att du använder Brotli för att komprimera dina statiska tillgångar vilket ger mycket bättre co mpressionskvoter jämfört med andra bibliotek på marknaden. Tänk samtidigt på att när du använder Brotli med ett högre komprimeringsförhållande kommer det definitivt att öka din bygg- och pakettid i DevOps-pipeline-resan. För mig var det bra att offra applikationens byggtid eftersom jag får ett bättre värde när det gäller sidladdningsprestanda.
  7. Optimera API-begäran och svarsinnehåll (förbättrar FID & LCP)
    Det här är superviktigt att övervägas eftersom varje byte spelar roll här när vi pratar om sidprestanda. Jag litar på att du inte kommer att ångra att gå tillbaka och kontrollera dina API-förfrågningar & svar för att fylla i din sida. Se till att du bara får tillbaka den information du behöver för att din sida ska bli renderad från API-svaren. En annan dum sak du kan göra ett misstag är att dina API-samtal anropas internt i stället för att använda några offentliga slutpunkter eller via internet – eftersom det alltid är dyrt när det gäller anropar dina API: er via internet när du har dina API: er i samma undernät eller åtminstone i samma nätverk!
  8. Minska den totala sidan / dokumentet storlek (förbättrar LCP)
    Helst om din målsida är tung (jag skulle kategorisera vilken sida som helst med> 80Kb som tung), kommer detta definitivt att bidra illa till LCP-poängen eftersom det proportionellt ökar hämtnings- och nedladdningshastigheten på din sida. Så se till att du inte får någon oanvänd stor bit av data från serversidan och ladda bara de data som behövs för att göra din sida.
  9. Använd NEXT-GEN bildformat (förbättrar LCP)
    JPEG 2000, JPEG XR och WebP är bildformat som har överlägsna komprimerings- och kvalitetsegenskaper jämfört med deras äldre JPEG och PNG-motsvarigheter. Kodning av dina bilder i dessa format snarare än JPEG eller PNG innebär att de laddas snabbare och konsumerar mindre mobildata. Du kan använda vilken typ av verktyg som helst på marknaden för att konvertera bilderna till NEXT-GEN-formaterade bilder eller så kan du till och med bygga en runtime-bildtjänst som kan göra en bildkonvertering i realtid från JPEG till WebP och fungera i webbläsaren.
  10. Aktivera reserv för typsnitt som stöds av webbläsaren (förbättrar FID)
    Det är bevisat att teckensnitt kan verkligen sänka dina prestationsresultat om webbläsaren försenas för att ladda ditt anpassade teckensnitt som används i din applikation såvida det inte är ett standardteckensnitt som stöds av webbläsaren. I det här fallet är en snabb vinst för dig att ha en reservmetod när du laddar ditt teckensnitt med de teckensnitt som standard stöds av webbläsaren. Nedan följer ett exempel på kodavsnitt för att ha en reservmetod med andra teckensnitt.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Alla tips ovan kan implementeras stegvis i din applikation och igen som nämnts innan Core Web Vitals-poängen har utvecklats från riktig användare data och inte längre från några ”Lab” -data. Således tar det tid att återspegla förbättringarna i din poäng vilket oftast är 28 dagars tid att reflektera. Du kan fortfarande använda PageSpeed-verktyget från google – https://developers.google.com/speed/pagespeed/insights/ för att få dina CWV-poäng.

Hoppas det hjälper och önskar er all framgång i dina verk! Skål!

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *