Opravte chybu LCP „viac ako“ v základných webových živinách na GSC
Obsah:
Google zverejnil novú správu vo vyhľadávaníkonzola s názvom Core Web Vitals. Tieto nahradili správy o rýchlosti a budú sa považovať za hodnotiaci faktor v roku 2021. Core Web Vitals sa bude považovať za hodnotiaci faktor spolu s Page Speed, HTTPS. Prívetivosť pre mobilné zariadenia a ďalšie faktory na stránke.
Core Web Vital berie do úvahy prvky UX a UI na stránke, aby zistil priemer stránky pre tri základné metriky,
- LCP: Najväčšia obsahová farba
- FID: Prvé oneskorenie vstupu
- CLS: Kumulatívny posun rozloženia
Nie je možné vyriešiť žiadnu konkrétnu jednotlivo kódovanú opravuproblémy, ale na vyriešenie chýb môžete optimalizovať webovú stránku. Tu uvediem niektoré z postupov, ktoré vám môžu pomôcť vyriešiť problém s najväčšou obsahovou farbou (LCP) ‘Viac ako' pre vaše webové stránky.
↑ Čo je to LCP?
Metrické prehľady najväčšej obsahovej maľby (LCP)čas vykreslenia najväčšieho prvku obsahu viditeľného vo výreze. Zjednodušene povedané, je to čas potrebný na načítanie hlavného prvku na viditeľnú obrazovku po začiatku načítania stránky.
Na zaistenie dobrého používateľského zážitku by sa weby mali usilovať o to, aby sa najväčší obsahový náter vyskytoval už v prvom 2,5 sekundy stránky, ktorá sa začína načítavať.
↑ Aké prvky sa berú do úvahy pri LCP?
Typy prvkov považovaných za farbu s najväčším obsahom sú:
<img>prvkov<obrázok>prvky vo vnútri<svg>element<video>prvkov- Prvok s obrázkom pozadia načítaný cez server
url ()funkcia - Prvky na úrovni bloku obsahujúce textové uzly alebo iné podradené textové prvky na úrovni riadku.
↑ Aké sú príčiny vysokého LCP?
- Pomalé doby odozvy servera
- JavaScript a CSS blokujúce vykreslenie
- Pomalé načítanie zdrojov
- Vykresľovanie na strane klienta
↑ Ako optimalizovať webovú stránku a opraviť vysoký LCP?
Použite dobrý hosting s dobrou dobou odozvy anízka miera latencie. Uistite sa, že optimalizujete servery. Na rýchle dodanie statických prostriedkov použite bezplatné CDN tretích strán, ako sú Cloudflare, jsDelivr, Statically. Ak pracujete na WordPress, existuje niekoľko doplnkov, ktoré vám môžu pomôcť vykonať prácu za vás.
Používajte komprimované obrázky s obrazovými formátmi novej generácieako JPEG XR, JPEG 2000 alebo WebP. Tieto moderné formáty pomáhajú urýchliť načítanie obrázka o 50%. Existuje niekoľko doplnkov pre WordPress, ktoré vám automaticky pomáhajú komprimovať a prevádzať obrázky za behu. Použite tiež obrazové CDN ako WP-Photon na zníženie šírky pásma servera a zvýšenie rýchlosti servera.
Na načítanie statického kódu HTML môžete použiť služby Cachestránka, ktorá sa nezmení na každú žiadosť, ukladanie do pamäte cache môže zabrániť zbytočnému opätovnému vytvoreniu. Cache Plugins uloží kópiu vygenerovaného HTML na vašom serveri a keď je stránka vyžiadaná, server uvoľní Cache load, čo môže znížiť Time to First Byte (TTFB) a minimalizovať využitie zdrojov.
Môžete tiež použiť služby ako Cloudflare, ktoréprevádzkuje pracovníkov služieb na pozadí prehliadača a dokáže zachytiť požiadavky zo servera. Berú kompletnú HTML cache stránky a slúžia HTML stránkam ako prvé, čo môže výrazne skrátiť čas načítania.
Ďalšou dôležitou vecou, ktorú je potrebné zvážiť, je optimalizácia webových stránok tak, aby bol dobrý LCP
- Odstráňte JavaScript a CSS blokujúce vykreslenie
- Odložiť nekritické CSS
- Minifikujte zdroje
- Predbežne načítajte dôležité zdroje
Podrobnejšiu príručku o tom, ako optimalizovať web, aby ste znížili LCP a zrýchlili načítanie svojich stránok pre lepšie UX, nájdete na oficiálna stránka Web.Dev.
Záver: So zavedením základnej webovej stránky vitals v GSCa považuje sa to za hodnotiaci faktor. LCP je veľmi dôležitá metrika, ktorú treba opraviť, pretože berie na vedomie čas potrebný na načítanie najväčšieho prvku vo výreze zariadenia. Poskytol som niekoľko predbežných opráv a riešení na optimalizáciu webu pre nízky LCP.
Triky