Hoe kunt u uw Google Core Web Vitals-scores verbeteren?

(23 aug.2020)

Volgende tijdperk voor prestaties van webpaginas

Het is een paar maanden geleden dat ik aan het werk ben over strategieën om de prestaties van webpaginas op de websites van mijn bedrijf te verbeteren en om eerlijk te zijn is het echt een interessant stuk werk om met jullie te delen.

Ik begrijp dat werken aan de prestaties van webpaginas niet nieuw is ding en mensen hebben veel ideeën en trucs bedacht om de laadsnelheid van je pagina te verhogen. Maar nu lijkt het alsof dat niet meer genoeg is en moet je naar het volgende niveau gaan !!

Zoals jullie zouden moeten weten over het belang van SEO (Search Engine Optimization) en het naar voren brengen van de resultaten van je webpagina, niet alleen op de eerste pagina met Google-resultaten, maar bovenaan dezelfde eerste pagina is echt een geweldige deal! Om een ​​lang verhaal kort te maken – ik kan u garanderen dat hierna de Google Core Web Vitals een van deze grootste bijdragen zullen leveren aan de SEO-rangschikking van Google-zoekresultaten.

Kort & Eenvoudige uitleg over Google Core Web Vitals

Core Web Vitals, geïntroduceerd in het eerste kwartaal van dit jaar, zijn een reeks statistieken met betrekking tot snelheid, reactievermogen en visuele stabiliteit van uw webpagina.

Google heeft deze gedefinieerd als de Core Web Vitals:

  • Grootste inhoudelijke verf : de tijd die nodig is om de hoofdinhoud van een pagina te laden. Een ideale LCP-meting is 2,5 seconden of sneller.
  • Vertraging eerste invoer : de tijd die een pagina nodig heeft om interactief te worden. Een ideale meting is minder dan 100 ms .
  • Cumulatieve lay-outverschuiving : De hoeveelheid onverwachte lay-outverschuiving van visuele pagina-inhoud. Een ideale meting is kleiner dan 0,1 .

Deze set metrische gegevens is ontworpen om site-eigenaren helpen bij het meten van de gebruikerservaring die ze bieden als het gaat om laden, interactiviteit en visuele stabiliteit.

Over het algemeen worden uw paginaprestaties hierna gerangschikt zoals hieronder.

Volledige lijst met statistieken die worden overwogen voor statistieken over paginaprestaties.

In het volgende gedeelte worden in wezen de ideeën of methoden besproken om de prestaties van uw paginas te verbeteren en CWV-scores.

Tips om uw Core Web Vitals-scores te verbeteren

Hieronder staan ​​enkele methoden dat hielp me om mijn Core Web Vitals-scores drastisch te verbeteren en ook om de algehele paginaprestaties te verbeteren.

  1. Maak effectief gebruik van browser- en CDN-cache (verbetert FID en LCP)
    Dit is een heel eenvoudige benadering ch om uw FID- en LCP-scores te verbeteren. Zorg ervoor dat uw statische items worden bediend vanaf een CDN (als het AWS is, kunt u deze in Cloudfront cachen). Dit resulteert dus in het snel ophalen van de bronnen in uw browsers. Om de tweede tijdsbelasting te verbeteren, moet u ervoor zorgen dat de items die aan de clientzijde zijn bereikt, in uw browser worden opgeslagen.
    cache-control: max-age=120 – betekent dat de geretourneerde bron geldig is voor 120 seconden, waarna de browser een nieuwere versie moet aanvragen.
    U kunt uw dynamische paginas ook in de cache plaatsen uw CDN met de juiste TTL-waarde op basis van uw toepassingsgedrag.
  2. Stel exacte formaatkenmerken of afmetingen in voor uw media en advertenties (verbetert CLS)
    Dit is iets heel belangrijks om uw CLS-scores te verbeteren. Zorg ervoor dat u de juiste height:XXpx; width: YYpx hebt ingesteld op uw afbeelding of mediatags. Nogmaals, dit is erg belangrijk in ieder geval voor de componenten die zich boven de vouw bevinden. Een kortere weg hiervoor is dat als je geen ideeën meer hebt om de exacte hoogte van de afbeelding te krijgen, je kunt instellen als height:auto;, wat echt heeft geholpen voor mij. Afgezien van media, moet u, als uw site advertenties weergeeft, ervoor zorgen dat u de juiste advertentieruimten met de juiste afmetingen heeft ingesteld, omdat het omhoog of omlaag duwen van de componenten op de pagina uw CLS-score zeker zal verlagen. Houd dus ook advertenties in de gaten!
  3. Lazy load afbeeldingen met juiste resolutie op basis van apparaattype (verbetert LCP)
    Dit is echt een snelle overwinning voor jou! Er zijn veel Lazy-loading-pakketten in de wereld die u op uw webpagina kunt gebruiken om alle afbeeldingen op uw pagina lui te laden.Dit verlaagt het totale paginagewicht en de laadtijd voor het weergeven van uw pagina in de browser. Een ander belangrijk onderdeel is dat u vooraf de resolutie definieert van de afbeelding die u wilt laden op basis van het apparaattype. U zou niet “afbeeldingen met dezelfde resolutie in verschillende apparaattypen moeten laden.
  4. Gebruik SSR en CSR effectief op uw webpagina (verbeter FID & LCP)
    U moet weten dat Google Server Side Rendered (SSR) -paginas promoot en aanmoedigt voor het verkrijgen van goede SEO-waarden. Maar idealiter is het een afweging met SEO versus paginalaadprestaties. Als uw pagina te groot is qua inhoud en als u besluit de hele pagina op de server weer te geven, zal het zeker meer tijd kosten om zowel de hele pagina als de pagina te laden het gewicht zal ook hoog zijn. Lang verhaal kort – mijn aanbeveling is dat het beter is om de SSR-render uit te voeren voor uw paginacomponenten die boven de vouw verschijnen en de rest van de componenten weer te geven vanaf de clientzijde die onder de vouw verschijnt. Op deze manier krijgt de gebruiker de pagina boven de vouw geladen en wordt de rest van de pagina asynchroon weergegeven zonder de gebruikerservaring te belemmeren.
  5. Gebruik code Splits & uw middelen op in delen (verbetert FID & LCP)
    Het is altijd geen goed idee om enorme (alles boven 100Kb is enorm) activa (vooral JS-bestanden) in uw applicatie te hebben. Gebruik dus beter pakketten zoals “webpack” om zware activa op te splitsen in kleine brokken die uw activa asynchroon zullen laden in uw browser (als u het h2-protocol inschakelt). U kunt ook gebruikmaken van de functies voor het splitsen van codes om uw paginacomponenten op te splitsen in afzonderlijke bestanden in plaats van deze in een enkel HTML-bestand te verpakken.
  6. Comprimeer al uw statische bestanden met Brotli-compressie (verbetert LCP)
    Ik moedig Brotli aan om uw statische bestanden te comprimeren, wat veel betere co mpressieverhoudingen vergeleken met andere bibliotheken op de markt. Houd er tegelijkertijd rekening mee dat wanneer u Brotli met een hogere compressieverhouding gebruikt, dit zeker uw build- en pakkettijd in de DevOps-pijplijnreis zal verlengen. Voor mij was het prima om de bouwtijd van de applicatie op te offeren, aangezien ik meer waarde krijg in termen van prestaties bij het laden van paginas.
  7. Optimaliseer het API-verzoek en responsinhoud (verbetert FID & LCP)
    Dit is superbelangrijk om in overweging te nemen, aangezien elke byte hier van belang is als we het hebben over paginaprestaties. Ik vertrouw erop dat u er geen spijt van zult hebben terug te gaan en uw API-verzoeken & -antwoorden voor het vullen van uw pagina te controleren. Zorg ervoor dat u alleen de gegevens terugkrijgt die u nodig heeft om uw pagina worden weergegeven op basis van de API-reacties. Een ander dom ding dat u mogelijk een fout kunt maken, is dat uw API-aanroepen intern zelf worden aangeroepen in plaats van openbare eindpunten of via internet te gebruiken – omdat het altijd duur is in termen van tijd waarin u roept uw ​​APIs aan via internet wanneer uw APIs worden gehost in hetzelfde subnet of op zijn minst in hetzelfde netwerk!
  8. Verklein de totale pagina / document size (verbetert LCP)
    Idealiter, als uw bestemmingspagina zwaar is (ik zou elke pagina met> 80Kb als zwaar categoriseren), zal dit zeker slecht bijdragen aan de LCP-score omdat het de ophaal- en downloadsnelheid van uw pagina proportioneel zal verhogen. Zorg er dus voor dat u geen ongebruikte grote hoeveelheid gegevens van de server ontvangt en laad alleen de gegevens die nodig zijn voor het weergeven van uw pagina.
  9. Gebruik NEXT-GEN-beeldformaten (verbetert LCP)
    JPEG 2000, JPEG XR en WebP zijn beeldformaten met superieure compressie- en kwaliteitskenmerken in vergelijking met hun oudere JPEG- en PNG-tegenhangers. Als u uw afbeeldingen in deze indelingen codeert in plaats van in JPEG of PNG, betekent dit dat ze sneller worden geladen en minder mobiele gegevens verbruiken. U kunt elk soort tool op de markt gebruiken om de afbeeldingen naar NEXT-GEN-geformatteerde afbeeldingen te converteren of u kunt zelfs een runtime-afbeeldingservice bouwen die een realtime afbeeldingsconversie van JPEG naar WebP kan uitvoeren en in de browser kan weergeven.
  10. Terugval naar de door de browser ondersteunde lettertypen inschakelen (verbetert FID)
    Het is bewezen dat lettertypen kan uw prestatiescores echt naar beneden halen als de browser het laden van uw aangepaste lettertype dat in uw toepassing wordt gebruikt, vertraagt, tenzij het een standaardlettertype is dat door de browser wordt ondersteund. In dit geval is een snelle oplossing voor u om terug te vallen op het laden uw lettertype met de lettertypen die standaard worden ondersteund door de browser. Hieronder ziet u een voorbeeld van een codefragment over het gebruik van andere lettertypen.
@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;
}

Alle bovenstaande tips kunnen stapsgewijs in uw applicatie worden geïmplementeerd en nogmaals, zoals eerder vermeld, zijn de Core Web Vitals-scores geëvolueerd van de echte gebruiker gegevens en niet meer van enige “Lab” -gegevens. Het kost dus tijd om de verbeteringen in uw score weer te geven, wat meestal 28 dagen is om na te denken. U kunt nog steeds de PageSpeed-tool van google gebruiken – https://developers.google.com/speed/pagespeed/insights/ om uw CWV-scores op te halen.

Ik hoop dat het je helpt en ik wens je veel succes met je werken! Proost!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *