Jak zlepšit skóre Google Core Web Vitals?

(23. srpna 2020)

Nová éra výkonu webových stránek

Je to už pár měsíců, co pracuji o strategiích pro zlepšení výkonu webových stránek na mých webových stránkách vlastněných společností a abych byl upřímný, je to opravdu zajímavá práce, o kterou se s vámi mohu podělit.

Chápu, že práce na výkonu webových stránek není nová a lidé přišli se spoustou nápadů a triků, jak zvýšit rychlost načítání stránky. Ale teď to vypadá, že to už nestačí a musíte vstoupit do další úrovně !!

Jak měli byste vědět o důležitosti SEO (optimalizace pro vyhledávače) a zveřejnění výsledků vaší webové stránky nejen na první stránce výsledků Google, ale v horní části stejné první stránky je opravdu hodně! Dlouhý příběh – dovolte mi, abych vám zaručil, že dále bude služba Google Core Web Vitals jedním z těchto největších přispěvatelů do žebříčku SEO výsledků vyhledávání Google.

Krátká & Jednoduché vysvětlení k základním webovým serverům Google

Základní webové portály, představené v prvním čtvrtletí letošního roku, představují sadu metrik souvisejících s rychlostí, odezvou a vizuální stabilitou vaší webové stránky.

Google definoval tyto jako základní webové vitály:

  • největší obsahová malba : Čas potřebný k načtení hlavního obsahu stránky. Ideální měření LCP je 2,5 sekundy nebo rychlejší.
  • Zpoždění prvního vstupu : Čas potřebný k tomu, aby se stránka stala interaktivní. Ideální měření je menší než 100 ms .
  • Kumulativní posun rozložení : Množství neočekávaného posunu rozložení vizuálního obsahu stránky. Ideální měření je menší než 0,1 .

Tato sada metrik byla navržena tak, aby pomozte majitelům webů měřit uživatelský komfort, který poskytují při načítání, interaktivitě a vizuální stabilitě.

Celkově bude výkon vaší stránky celkově seřazen níže.

Kompletní seznam metrik uvažovaných pro metriky výkonu stránky.

Následující část v zásadě hovoří o nápadech nebo metodách, jak zlepšit výkon při načítání stránky a skóre CWV.

Tipy pro zlepšení skóre Core Web Vitals

Níže uvádíme několik metod což mi pomohlo drasticky zlepšit skóre Core Web Vitals a také zlepšit celkový výkon stránky.

  1. Efektivně využívat mezipaměť prohlížeče a CDN. (zlepšuje FID a LCP)
    Jedná se o velmi jednoduchý přístup ch ke zlepšení skóre FID a LCP. Ujistěte se, že vaše statická aktiva jsou poskytována z CDN (pokud je to AWS, můžete je uložit do mezipaměti v Cloudfront). Výsledkem je tedy rychlé získání prostředků do vašich prohlížečů. Chcete-li vylepšit druhé časové zatížení, ujistěte se, že prostředky, které se dostaly na straně klienta, jsou uloženy v mezipaměti ve vašem prohlížeči.
    cache-control: max-age=120 – znamená, že vrácený zdroj je platný pro 120 sekund, po kterých musí prohlížeč požádat o novější verzi.
    Vaše dynamické stránky můžete také uložit do mezipaměti také v vaše CDN se správnou hodnotou TTL na základě chování vaší aplikace.
  2. Nastavte atributy a rozměry přesné velikosti pro média a reklamy (vylepšuje CLS)
    To je něco velmi důležitého pro vylepšení skóre CLS. Zkontrolujte, zda máte ke svému obrázku nebo jakýmkoli mediálním značkám správně nastaven height:XXpx; width: YYpx. To je opět velmi důležité alespoň pro součásti, které jsou nad záhybem. Jednou zkratkou je, že pokud vám docházejí nápady na získání přesné výšky obrazu, můžete jej nastavit jako height:auto;, což mi opravdu pomohlo. Kromě médií, pokud váš web zobrazuje reklamy, ujistěte se, že jste nastavili správné reklamní bloky se správnými rozměry, protože posunutí nahoru nebo dolů po komponentách na stránce určitě sníží vaše skóre CLS. Sledujte tedy také reklamy!
  3. Líné načítání obrázků se správným rozlišením podle typu zařízení (zlepšuje LCP)
    Toto je pro vás opravdu rychlá výhra! Na světě existuje spousta balíčků Lazy loading, které můžete použít na své webové stránce k línému načtení všech obrázků na vaší stránce.Tím se sníží celková váha stránky a doba načítání pro vykreslení stránky v prohlížeči. Dalším důležitým prvkem je to, že předem definujte rozlišení obrázku, který chcete načíst, na základě typu zařízení. Neměli byste načítat obrázky se stejným rozlišením v různých typech zařízení.
  4. Efektivně používejte na své webové stránce SSR a CSR (vylepšete FID & LCP)
    Měli byste vědět, že Google propaguje a podporuje stránky SSR (Server Side Rendered) pro získání dobrých hodnot SEO. V ideálním případě však kompromis s výkonem načítání stránky SEO Vs. Pokud je vaše stránka z hlediska obsahu příliš velká a pokud se rozhodnete vykreslit celou stránku na serveru, bude určitě trvat déle, než se načte celá stránka i stránka váha bude také vysoká. Dlouhý příběh krátký – moje doporučení je, že je lepší udělat vykreslení SSR pro komponenty vaší stránky, které se objeví nad záhybem, a zbytek komponent vykreslit ze strany klienta, která se objeví pod záhybem. Tímto způsobem uživatel načte stránku načtenou nad záhybem stránky a zbytek stránky asynchronně vykresluje, aniž by to bránilo uživatelskému dojmu.
  5. Použít kód Rozdělení & rozdělení vašich aktiv na bloky (zlepšuje FID & LCP)
    Vždy není dobrý nápad mít ve své aplikaci obrovská aktiva (zejména cokoli nad 100 kB) (zejména soubory JS). Lepší využití balíčků jako „webpack“ k rozdělení těžkých aktiv na malé bloky, které budou asynchronně načítat vaše aktiva do svého prohlížeče (pokud povolíte protokol h2). Můžete také využít funkce rozdělení kódu k rozložení komponent vaší stránky na samostatné soubory, spíše než jejich zabalení do jediného souboru HTML.
  6. Komprimujte všechna svá statická aktiva pomocí Brotliho komprese (zlepšuje LCP)
    Doporučuji používat Brotli ke kompresi vašich statických aktiv, což dává mnohem lepší ko kompresní poměry ve srovnání s jinými knihovnami na trhu. Zároveň mějte na paměti, že když používáte Brotli s vyšším poměrem komprese, určitě to zvýší váš čas sestavení a zabalení v cestě kanálu DevOps. Pro mě bylo v pořádku obětovat čas sestavení aplikace, protože získávám lepší hodnotu z hlediska výkonu načítání stránky.
  7. Optimalizujte požadavek API a obsah odezvy (vylepšuje FID & LCP)
    Je nesmírně důležité vzít v úvahu, že zde záleží na každém bajtu, když mluvíme o výkon stránky. Věřím, že nebudete litovat, že se vrátíte zpět a zkontrolujete své odpovědi na & odpovědi na vyplnění stránky. Ujistěte se, že dostáváte zpět pouze data, která potřebujete, aby vaše stránka mohla nechte se vykreslit z odpovědí API. Další hloupá věc, kterou byste mohli udělat chybu, je, že vaše volání API jsou vyvolána interně sama, spíše než pomocí jakýchkoli veřejných koncových bodů nebo přes internet – protože je to vždy drahé, pokud jde o vyvolávají vaše API přes internet, pokud máte své API hostované ve stejné podsíti nebo alespoň ve stejné síti!
  8. Zmenšit celkovou stránku / dokument velikost (vylepšuje LCP)
    V ideálním případě, pokud je vaše vstupní stránka těžká (zařadil bych jakoukoli stránku s> 80 kB jako těžkou), rozhodně to špatně přispěje ke skóre LCP protože to úměrně zvýší rychlost načítání a stahování stránky. Ujistěte se tedy, že ze strany serveru nedostáváte nevyužitý velký objem dat a načtěte pouze data, která jsou potřebná pro vykreslení vaší stránky.
  9. Používejte obrazové formáty NEXT-GEN (vylepšuje LCP)
    JPEG 2000, JPEG XR a WebP jsou obrazové formáty, které mají ve srovnání se svými staršími formáty JPEG a PNG protějšky. Zakódování obrázků do těchto formátů, nikoli do formátu JPEG nebo PNG, znamená, že se budou načítat rychleji a spotřebovávají méně celulárních dat. K převodu obrázků na obrázky ve formátu NEXT-GEN můžete použít jakýkoli druh nástroje na trhu, nebo můžete dokonce vytvořit runtime obrazovou službu, která dokáže převést obraz v reálném čase z JPEG na WebP a sloužit v prohlížeči.
  10. Povolit záložní řešení pro písma podporovaná nativním prohlížečem (vylepšuje FID)
    Je prokázáno, že písma může opravdu snížit vaše výkonnostní skóre, pokud prohlížeč zpoždění načte vaše vlastní písmo, které se používá ve vaší aplikaci, pokud to není výchozí písmo podporované prohlížečem. V tomto případě je pro vás rychlou výhrou mít záložní přístup při načítání vaše písmo s písmy, která jsou ve výchozím nastavení podporována prohlížečem. Níže je ukázkový fragment kódu, který má záložní přístup k jiným písmům.
  11. data a už ne z jakýchkoli „laboratorních“ dat. Trvá tedy nějaký čas, než se projeví vylepšení skóre, což je většinou 28 dní na promítnutí. K získání skóre CWV můžete stále používat nástroj PageSpeed od google – https://developers.google.com/speed/pagespeed/insights/ . / p>

    Doufám, že to pomůže a přeji vám mnoho úspěchů ve vašich dílech! Na zdraví!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *