Ako optimalizovať Core Web Vitals:
Largest Contentful Paint
V prvom zo série článkov troch článkov, ako už samotný názov napovedá, nájdete užitočné tipy a rady, ktoré vám pomôžu pri optimalizácií prvej metriky – Largest Contentful Paint (LCP).
Tento článok je vhodný SEO špecialistov a marketérov, ktorých zaujíma pokročilé SEO:
Ilustračné foto: Karolina Grabowska
Spoločnosť Google začiatkom tohto roka predstavila implementáciu tzv. Core Web Vitals, ktoré sú podmnožinou Web Vitals a ich cieľom je meranie kvality používateľského zážitku na ktorejkoľvek webovej stránke.
Každá metrika z Core Web Vitals predstavuje odlišný aspekt používateľskej skúsenosti. Toto sú aktuálne metriky na ktoré je dôležité sa zamerať v roku 2021:
- Largest Contentful Paint (LCP)
- First input delay (FID)
- Cumulative layout shift (CLS)
O metrikách Core Web Vitals sme už písali v prechádzajúcom článku. Tentokrát sme si posvietili na optimalizáciu prvej metriky – Largest contentful paint.
Largest contentful paint
Largest Contentful Paint (LCP) je dôležitá metrika zameraná na používateľa na meranie vnímanej rýchlosti načítania.
Metrika LCP meria čas vykreslenia najväčšieho obrazového alebo textového bloku viditeľného v časti monitora / mobilu / tabletu “above the fold” – teda takého, ktorý je viditeľný bez scrollovania.
Najbežnejšie príčiny zlého LCP sú:
- Pomalé doby odozvy servera
- JavaScript a CSS blokujúce vykreslenie
- Pomalé načítanie zdrojov
- Client-side rendering
1. Pomalé doby odozvy servera
Optimalizujte svoj server – analýza a zlehttps://u.smedata.sk/blog/article/2/56/562682/562682_article_photo_xwe1sey_900x.jpeg?r=29aepšenie efektívnosti vášho kódu priamo zlepší čas, ktorý trvá, kým prehliadač načíta údaje.
Nasmerujte používateľov na neďaleké CDN – Content Delivery Network (CDN) alebo sieť na doručovanie obsahu, je sieť serverov distribuovaných na rôznych miestach.
Ak je obsah vašej webovej stránky hostený na jednom serveri, načítava sa váš web pomalšie pre používateľov, ktorí sú geograficky ďalej, pretože ich požiadavky na server musia doslova cestovať po celom svete.
Odporúčame preto zvážiť správne použitie siete CDN, aby ste zaistili, že vaši používatelia nikdy nebudú musieť čakať na požiadavky od vzdialených serverov.
Dáta v pamäti cache – snaha o maximalizáciu využitia zdrojov, existuje veľa rôznych spôsobov zapisovania do pamäte servera, ako napríklad:
- nakonfigurované reverzné proxy
- nakonfigurujte a spravujte správanie medzipamäte poskytovateľa cloudu
- použite sieť CDN
Zobrazenie HTML stránok uložených v medzipamäti – pomocou nainštalovanej aplikácie Service Worker API, ktorá beží na pozadí prehliadača a zachytáva požiadavky zo servera, čo umožňuje ukladať do medzipamäte časť alebo celý obsah stránky HTML a aktualizovať medzipamäť iba vtedy, keď sa obsah zmenil.
Nadviažte spojenie s tretími stranami skôr – požiadavky servera na pôvod tretích strán môže mať vplyv aj na LCP, najmä ak sú potrebné na zobrazenie kritického obsahu na stránke.
Pomocou parametra preconnect informujte prehliadač, že má vaša stránka v úmysle nadviazať spojenie čo najskôr.
<link rel=„preconnect“ href=„https://example.com“ />
Môžete tiež použiť dns-prefetch na rýchlejšie vyriešenie vyhľadávaní DNS.
<link rel=“dns-prefetch“ href=“https://example.com“ />
Aj keď oba parametre fungujú odlišne, odporúčame zvážiť použitie nástroja dns-prefetch ako záložného nástroja pre prehliadače, ktoré nepodporujú predbežné pripojenie.
<head>
…
<link rel=“preconnect“ href=“https://example.com“ />
<link rel=“dns-prefetch“ href=“https://example.com“ />
</head>
Používajte Signed Exchanges protocol (SXG) – protokol Signed Exchanges (SXG) umožňuje rýchlejšie používateľské zážitky tým, že poskytuje obsah v ľahko ukladateľnom formáte. Inak povedané vyhľadávanie Google sa bude ukladať do medzipamäte a predbežne načítavať súbory SXG.
Pre webové stránky, ktoré získavajú veľkú časť svojej návštevnosti z Google vyhľadávania, sú súbory SXG dôležitým nástrojom na zlepšenie LCP.
2. JavaScript a CSS blokujúce vykreslenie
Odstránte nekritické Javascript a CSS – aby sa urýchlilo načítanie hlavného obsahu vašej webovej stránky.
Skrátite čas blokovania CSS – zaistite, aby vykreslenie na vašom webe blokovalo iba minimálne množstvo potrebných CSS, a to pomocou nasledujúcich prvkov:
- Minifikujte CSS – pre ľahšiu čitateľnosť môžu súbory CSS obsahovať znaky, ako sú medzery, odsadenie alebo komentáre.
Všetky tieto znaky nie sú pre prehliadač potrebné. Pre minimalizáciou týchto súborov odporúčame tieto znaky odstrániť.Pluginy na minifikáciu súborov CSS:- Pre webpack: optimize-css-assets-webpack-plugin
- Pre hlt: gulp-clean-css
- Pre súhrn: rollup-plugin-css-porter
- Odložiť nekritické CSS – pomocou nástroja Coverage tab v Chrome DevTools nájdite všetky nepoužité CSS na svojej webovej stránke a:
- Odstráňte všetky nepoužívané CSS alebo ich presuňte do inej šablóny štýlov, ak sa používajú na samostatnej stránke vášho webu.
- Pre akékoľvek CSS, ktoré nie sú potrebné na úvodné vykreslenie, použite load CSS na asynchrónne načítanie súborov, ktoré využíva rel = „preload“ a onload.
<link rel=“preload“ href=“stylesheet.css“ as= „style“ onload=“this.rel=’stylesheet“>
- Priamo kritické CSS – zahrňte všetky kritické CSS “cesty” potrebné na vykreslenie najväčšieho viditeľného obrazového alebo textového bloku priamo v elemente <head>.
Skráťte čas blokovania JavaScriptu – svojich používateľov nechajte sťahovať len minimálne množstvo potrebného JavaScriptu.
Dá sa to dosiahnuť optimalizáciou JavaScriptov niekoľkými rôznymi spôsobmi:
- Minifikujte a komprimujte súbory JavaScript
- Odložte nepoužívané JavaScripty
- Minimalizujte nepoužívané polyfill
3. Pomalé načítanie zdrojov
Aj keď zvýšenie času blokovania CSS alebo JavaScript priamo povedie k horšiemu výkonu, čas vyťaženia ďalších typov zdrojov môže mať vplyv aj na časy vykreslenia.
Typy prvkov, ktoré ovplyvňujú LCP, sú:
- <img> prvkov
- <image> prvky vo vnútri prvku <svg>
- prvky <video> (plagátový obrázok sa používa na meranie LCP)
- Prvok s obrázkom na pozadí načítaný pomocou funkcie url () (na rozdiel od gradientu CSS)
- Prvky na úrovni bloku obsahujúce textové uzly alebo iné textové prvky na úrovni riadku
Aby sa tieto súbory načítali čo najrýchlejšie:
- Optimalizujte a komprimujte obrázky
- Predbežne načítajte dôležité zdroje
- Komprimujte textové súbory
- Poskytujte rôzne aktíva na základe sieťového pripojenia (adaptívne zobrazovanie)
- Využitie JS “service worker” pre Cache aktíva
Optimalizujte a komprimujte obrázky – pri mnohých weboch sú obrázky najväčším zobrazovaným prvkom na stránke.
Zlepšenie toho, ako dlho trvá načítanie a vykreslenie týchto typov obrázkov, priamo urýchli LCP, ako to urobiť:
- Na prvom mieste zvážte použitie obrázka, ak to nesúvisí s obsahom, odstráňte ho.
- Komprimujte obrázky (napríklad pomocou nástroja tinypng)
- Preveďte obrázky do novších formátov (JPEG 2000, JPEG XR alebo WebP)
- Používajte responzívne obrázky
- Zvážte použitie CDN obrázkov
Predbežne načítajte dôležité zdroje – dôležité zdroje, ktoré sú deklarované alebo použité v určitom súbore CSS alebo JavaScript, sa môžu niekedy načítať neskôr, ako by sme chceli (napr. písmo vložené hlboko do jedného z mnohých súborov CSS aplikácie). Ak viete, že konkrétny zdroj by mal mať prioritu, pomocou <link rel = „preload“> ho načítajte skôr.
Predbežne je možné načítať veľa typov zdrojov, mali by ste sa však najskôr zamerať na predbežné načítanie dôležitých prvkov, ako sú písma, obrázky alebo videá nad záhybom stránky, a CSS alebo JavaScript s kritickou cestou.
<link rel=“preload“ as=“script“ href=“script.js“ />
<link rel=“preload“ as=“style“ href=“style.css“ />
<link rel=“preload“ as=“image“ href=“img.png“ />
<link rel=“preload“ as=“video“ href=“vid.webm“ type=“video/webm“ />
<link rel=“preload“ href=“font.woff2″ as=“font“ type=“font/woff2″ crossorigin />
Od verzie Chrome 73 je možné použiť predbežné načítanie spolu s responzívnymi obrázkami, pre oveľa rýchlejšie načítanie obrázkov.
<link
rel=“preload“
as=“image“
href=“wolf.jpg“
imagesrcset=“wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w“
imagesizes=“50vw“
/>
Skomprimujte textové súbory – kompresné algoritmy, ako sú Gzip a Brotli, môžu významne zmenšiť veľkosť textových súborov (HTML, CSS, JavaScript) pri ich prenose medzi serverom a prehliadačom.
Gzip je účinne podporovaný vo všetkých prehliadačoch a program Brotli, ktorý poskytuje ešte lepšie výsledky kompresie, je možné použiť takmer vo všetkých nových prehliadačoch.
Poskytujte rôzne aktíva na základe sieťového pripojenia (adaptívne zobrazovanie) – pri načítaní zdrojov, ktoré tvoria hlavný obsah stránky, môže byť efektívne podmienené načítať rôzne prvky v závislosti od podmienok zariadenia používateľa alebo siete.
To je možné vykonať pomocou rozhraní API pre sieťové informácie, pamäť zariadenia a hardvérovú súbežnosť.
Zoznam vlastností, ktoré môžete použiť:
- navigator.connection.effectiveType: Effective connection type
- navigator.connection.saveData: Data-saver enabled/disabled
- navigator.hardwareConcurrency: CPU core count
- navigator.deviceMemory: Device Memory
Využitie JS “service worker” pre Cache aktíva – predbežné načítanie kritických zdrojov pomocou servisného pracovníka môže výrazne skrátiť čas načítania stránky, najmä pre používateľov, ktorí znova načítajú webovú stránku so slabším pripojením (alebo dokonca k nej pristupujú offline).
Namiesto napísania vlastného servisného pracovníka, je možné použiť knižnice, ako napríklad Workbox.
4. Client-side rendering
Ak vytvárate web, ktorý sa väčšinou vykresľuje na strane prehliadača, mali by ste sa obávať účinku, ktorý môže mať na LCP, ak sa použije veľký balík JavaScriptu.
Ak nie sú zavedené optimalizácie, ktoré by tomu bránili, používateľom sa nemusí zobrazovať žiadny obsah na stránke alebo s ním nebude možné komunikovať, kým nedokončí sťahovanie a vykonávanie všetkých dôležitých kódov JavaScript.
Pri vytváraní webuv vykresleného na strane prehliadača odporúčame zamerať sa na nasledujúce optimalizácie:
- Minimalizujte kritický JavaScript
- Použite vykreslenie na strane servera
- Použite predbežné vykreslenie
Minimalizujte kritický JavaScript – Ak sa obsah na vašom webe stane viditeľným alebo s ním možno interagovať až po stiahnutí určitého množstva kódu JavaScriptom, je potrebné a ešte dôležitejšie znížiť veľkosť balíka čo najviac.
Použite vykreslenie na strane servera – minimalizácia množstva JavaScriptu by mala byť vždy prvá vec, na ktorú sa treba zamerať pri weboch, ktoré sú väčšinou vykresľované prehliadačom. Mali by ste však tiež zvážiť kombináciu skúseností s vykresľovaním servera, aby ste čo najviac vylepšili LCP.
To že hlavný obsah stránky sa najskôr vykreslí na serveri, a nie iba na klientovi, však má niekoľko nevýhod:
- Údržba rovnakej aplikácie vykreslenej pomocou JavaScriptu na serveri a klientovi môže zvýšiť zložitosť.
- Spustenie JavaScriptu na vykreslenie súboru HTML na serveri vždy zvýši čas odozvy servera (TTFB) v porovnaní s poskytovaním statických stránok zo servera.
- Stránka vykreslená serverom môže vyzerať, že s ňou možno interagovať, ale nemôže reagovať na žiadny vstup používateľa, kým sa nespustí všetok JavaScript na strane klienta. Stručne povedané, môže to Time to Interactive (TTI) ešte zhoršiť.
Použite predbežné vykreslenie – je samostatná technika, ktorá je menej zložitá ako vykreslenie na strane servera a tiež poskytuje spôsob, ako vylepšiť LCP vo vašom prehliadači.
Pri predbežnom vykreslení je TTI stále negatívne ovplyvnená, ale časy odozvy servera nie sú také ovplyvnené, ako by to bolo pri riešení vykresľovania na strane servera, ktorý dynamicky vykresľuje každú stránku až po jej vyžiadaní.
Potrebujete pomôcť s optimalizáciou webu pre Core Web Vitals? Napíšte nám!
Mohlo by vás zaujímať
Pomáhajú vaše marketingové kampane celofiremným biznis cieľom?
Sales funnel je teda strategický pohľad zhora na proces získavania nových príležitostí u nových ale aj existujúcich zákazníkov.
Prejsť na celý článokTechnická starostlivosť o web postavený na CMS WordPress Copy
Technická správa webovej stránky zabezpečuje správnu funkčnosť webu a eliminuje možnosť hackerských útokov a výpadkov webu.
Prejsť na celý článok