Jak optimalizovat svůj web pro Core Web Vitals (Adsense)

Závod o vylepšení Core Web Vitals není snadný. Bude to těžší, pokud se při zpeněžení svých webových stránek spoléháte na reklamní program, jako je Google AdSense.

Webové stránky, na kterých běží Google AdSense, mají 10krát vyšší pravděpodobnost, že neuspějí v testu Core Web Vitals, než stejné webové stránky bez Google AdSense. Je to většinou způsobeno množstvím požadavků a aktiv třetích stran, které služba Google AdSense přidává na váš web. Většina těchto aktiv je neoptimalizovaná, velká a uživatelsky nepřívětivá.

Kromě AdSense a reklamních platforem, pokud máte hodně neoptimalizovaných obrázků, JavaScriptu a CSS, zejména nad okrajem, je také velmi pravděpodobné, že neuspějete v testu Core Web Vitals.

Pokud jste se snažili projít testem Core Web Vitals a zlepšit své hodnocení ve vyhledávačích, v tomto článku najdete praktická řešení.

Co jsou Core Web Vitals?

Core Web Vitals jsou metriky založené na Google Lighthouse, které určují, jak web poskytuje dobrý dojem ze stránky. Zatímco při spouštění testu existuje mnoho metrik, nejdůležitějšími metrikami jsou Largest Contentful Paint (LCP), First Input Delay (FID) a Cumulative Layout Shift (CLS).

Společnost Google oznámila , že od května 2021 se tyto metriky stanou součástí signálů pro hodnocení používaných k určení pozic webových stránek ve výsledcích vyhledávání.

Stručně řečeno, můžete říci, že Core Web Vitals neměl být terorem pro webmastery, ale prostředkem ke zlepšení dojmu z webových stránek.

Největší obsahové vykreslení (LCP) : LCP měří dobu, za kterou se načte největší viditelný obrázek nebo blok textu na webové stránce. Pokud se největší viditelný text nebo obrázek načte rychle, vnímá se, že se zbytek obrázků a textu načte rychle. Požadovaná doba načítání je 2.5 sekundy.

Zpoždění prvního vstupu (FID) : FID měří interaktivitu webové stránky. Ta je určena tím, jak dlouho trvá, než prohlížeč začne zpracovávat obslužné rutiny událostí poté, co uživatel klikne na váš web. Tomu se obecně říká první dojem z vašeho webu. Požadovaný čas je 100 milisekund.

Kumulativní posun rozvržení (CLS) : CLS měří posun rozvržení, ke kterému dochází na webové stránce. Když se webová stránka načte a pak se náhle něco objeví nebo zmizí a stránka se musí přizpůsobit, aby se zvětšila nebo zmenšila, měří se právě tento posun. Je to hrozné pro uživatelský zážitek a souhlasím. Skóre, které byste měli dosáhnout, je 0.1.

Jak optimalizovat svůj web pro Core Web Vitals

Chcete-li optimalizovat svůj web, postupujte takto:

1. Začněte s rychlým webhostingem

Pokud máte webhosting s hroznou dobou odezvy, pak každá další věc, kterou zde uvedu, nemusí přinést požadované výsledky. Čím rychleji váš server reaguje na požadavky, tím lépe.

Proč je webový hostitel s rychlým Time to first byte (TTFB) důležitý? Někdo namítne, že na TTFB nezáleží, ale je to tak. To je základ všeho ostatního. Pokud máte uživatele ve městech s pomalým internetem, bude vše znamenat, jak rychle může váš webový hostitel reagovat. Každý webový hostitel může fungovat dobře, pokud máte uživatele primárně z měst se superrychlým internetem.

Zkuste otestovat, jak bude váš webový hostitel reagovat na 3G nebo 2G namísto 4G. Protože pokud se mnoho uživatelů připojuje přes 3G nebo 2G, přidává se to k vašemu skóre Core Web Vitals. Takže každá milisekunda se počítá. Rozdíl mezi získáním 100 ms ve vašem FID a získáním 101 ms je ten, že se 100 ms projdete, ale se 101 ms selžete. Takže pokud vám někdo řekne, že 1 ms nezáleží, může se ten člověk prostě mýlit.

Při výběru webhostingu se vždy ujistěte, že máte datové centrum blíže většině uživatelů vašeho webu. Jejich umístění můžete zjistit v analytických materiálech. Odkud pochází většina vašich uživatelů? Vyberte si datové centrum blíže k nim. Čím blíže, tím lépe.

Osobně jsem si po změně webhostingu všiml významné změny v Field Data Core Web Vitals webové stránky. Nic jiného jsem nedělal.

Pokud hledáte rychlý webhosting, existuje spousta doporučení, která jsou motivována čistě affiliate partnery bez upřímnosti. Pokud používáte WordPress a můžete si ho dovolit, vřele doporučuji Kinsta . Jsou pro WordPress nejlepší. Pokud potřebujete něco levnějšího nebo WordPress nepoužíváte, pak je Cloudways také velmi efektivní.

2. Použijte lehký a rychlostně optimalizovaný motiv

Tento tip je zvláště velmi užitečný pro nekodéry a dokonce i pro kodéry s kratším časem. Zejména pokud používáte WordPress, kde je tolik možností, ujistěte se, že používáte lehké a rychlostně optimalizované téma.

Protože téma je jako kostra vašeho webu, pokud je kostra rozbitá, rozbije se i tělo. To je právě ono.

Existuje dlouhý seznam osvědčených postupů, které byste měli u šablony hledat. Mezi nejčastější špatné postupy patří nadměrná závislost na JQuery, načítání příliš velkého množství CSS/JS kódu, když to není potřeba, velká velikost šablony a další. K otestování dema můžete vždy použít nástroj, jako je Yellow Labs .

Pokud používáte WordPress, můžete se podívat na seznam nejrychlejších šablon WordPress.

3. Optimalizujte své snímky

Obrázky jsou v pohodě. Dělají obsah tak přitažlivým. Ale mohou být zátěží, pokud nejsou optimalizovány. Velké obrázky jako 3 MB určitě ovlivní vaši rychlost. A pokud jsou tyto obrázky viditelné při návštěvě vašeho webu před rolováním, určitě ovlivní vaši metriku LCP.

Pravdou je, že neoptimalizované obrázky zvětšují velikost vaší stránky. Čím větší je velikost stránky, tím déle trvá načítání.

Osobně preferuji optimalizaci každého obrázku před jeho nahráním. Pro optimalizaci obrázků nepoužívám žádnou externí službu. Pokud však používáte WordPress nebo podobný CMS, existují pluginy a řešení pro automatickou optimalizaci obrázků. Existují také cloudová řešení bez ohledu na to, co používáte.

4. Odstraňte nebo zmenšete velikost obrázků na pozadí

Obrázky na pozadí jsou obvykle velmi velké. A může zpomalit dobu načítání, protože se musí nejprve načíst, než se zobrazí smysluplný obsah.

Obrázek na pozadí můžete úplně odstranit, abyste měli web rychlejší. Pokud jsou tak důležité, zvažte jejich optimalizaci na co nejmenší velikost nebo použití vzorů místo obrázků.

5. Použijte mezipaměť prohlížeče

Pokud máte hodně věrných čtenářů, měli byste zvážit ukládání do mezipaměti prohlížeče. Když uživatel poprvé navštíví váš web, prohlížeč ho uloží do mezipaměti. Při každé další návštěvě se načte během okamžiku. To může výrazně zlepšit FID a LCP od druhé návštěvy výše.

Pro uživatele WordPressu vám toho může pomoci většina cachovacích pluginů.

6. Minifikujte JavaScript a odložte nepoužívaný JavaScript

Zatímco JavaScript je úžasný, často blokuje vykreslování. To znamená, že to může ovlivnit dobu načítání a nakonec i FID.

Pokuste se minimalizovat JavaScript odstraněním bílých mezer a komentářů, abyste snížili velikost souboru. Také se ujistěte, že odložíte nekritický JavaScript. To by mělo zlepšit váš FID.

Pro uživatele WordPressu existují pluginy jako Autoptimize , WP Rocket a další, které to za vás udělají.

7. Nastavte atribut velikosti AdSense

Pokud na svém webu provozujete AdSense a potýkáte se s CLS, může to vyřešit všechny vaše problémy. To platilo pro mě a mělo by pro vás.

Pokud máte reklamní jednotku blízko záhlaví, která je viditelná, když ji uživatel navštíví, jedním problémem je, že se reklama nemusí načíst okamžitě. Může se načíst poté, co je stránka již načtena, a když se tak stane, dojde k posunu v rozložení. U responzivních reklamních jednotek je to velmi běžné. Díky tomu je nemožné projít metrikou CLS.

Nejlepší způsob, jak to vyřešit, je trochu upravit kód AdSense. Žádný strach, je to velmi legitimní. Stačí zadat atribut size pro reklamu, zejména výšku. Poté, co to uděláte, již nezaznamenáte změnu rozložení při každém načítání reklamy.

Níže je uveden příklad responzivní reklamní jednotky, kterou jsem použil na svém blogu těsně pod záhlavím. Nahradil jsem své ID majitele stránek a reklamní blok za XXXXXX. Všiml jsem si, že jsem přidal atribut height (min-height: 300px). Ve chvíli, kdy jsem to udělal, byly všechny problémy s CLS navždy pryč.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Co to dělá, je rezervovat tuto velikost na stránce. Kdykoli se tedy zobrazí reklamy, nedojde k žádnému posunu rozvržení, protože jste již nastavili velikost.

8. Nastavte atribut velikosti pro vaše obrázky a další média

Stejně jako u reklam mohou obrázky a další média způsobit změny rozložení, když se načítají na váš web. Možná právě něco čtete, pak se načte obrázek a najednou dojde k posunu rozložení, to, co jste četli, je mimo dohled a vidíte jen něco jiného nebo dokonce omylem kliknete na něco jiného.

Tomuto všemu se můžete vyhnout nastavením atributu velikosti pro vaše mediální soubory. Vaše metrika CLS bude šťastná, že jste to udělali.

9. Lazy Načítání obrázků.

Možná jste na PageSpeed ​​Insight viděli radu, jak odložit načítání obrázků mimo obrazovku . Znamená to jednoduše líně načítat obrázky.

Líné načítání umožňuje zmenšit velikost stránky a také zkrátit dobu načítání stránky, když ji uživatel navštíví. Což je dobré pro metriky CWV.

To pomůže zejména zlepšit LCP.

10. Optimalizujte CSS minifikací a generováním kritických CSS

CSS je to, co dělá web cool, ale velký soubor CSS může být velkým problémem, protože zpomalí vykreslení stránky uživateli.

Když uživatel navštíví váš web, prohlížeč normálně zdrží vykreslení vaší webové stránky uživateli, dokud nenačte, analyzuje a nespustí všechny CSS, na které odkazuje záhlaví vaší webové stránky. Pokud máte velký soubor CSS, může to být velký problém. Zpomalí to váš web.

Kritické CSS může pomoci tím, že načte pouze CSS, které je nezbytné pro načtení stránky. Zatímco zbytek CSS lze načíst asynchronně.

Pomoci může také minimalizace CSS odstraněním prázdných míst a komentářů, aby se zmenšila velikost souboru.

Můžete také odstranit nepoužívané CSS kódy . Pokud služba, kterou používáte, nahrává CSS kódy, které se nepoužívají, můžete je bezpečně odstranit.

Pokud používáte WordPress, existují pluginy jako WP Rocket , LiteSpeed ​​Cache, FlyingPress a další, které vám s tím mohou pomoci.

11. Implementujte chytré načítání AdSense

Tato metoda může téměř úplně eliminovat všechny problémy, pokud je za zpomalení vašeho webu odpovědná služba AdSense.

Jde o chytré načítání AdSense. AdSense se nenačte, dokud uživatel neprovede nějakou akci, jako je rolování nebo kliknutí. Tím se výrazně zkrátí doba načítání a veškeré klíčové funkce webu ovlivněné službou AdSense.

Existuje mnoho pluginů pro WordPress, které vám s tím mohou pomoci, například WP Rocket a Flying Scripts. Pokud vím, tato metoda neporušuje zásady Google AdSense.

Poznámka: I když tato metoda může pomoci zlepšit vnímanou rychlost a skóre stránek, může mít vliv na vaše příjmy z AdSense. Doporučuji vám provést experiment, abyste se ujistili, že se to vyplatí.

12. Pokud můžete, použijte písmo System Stack

Písma zvyšují dobu načítání na jakémkoli webu. A u webových stránek bez obrázků může být váš textový blok zodpovědný za vaše hodnocení LCP. V takovém případě bude vaše skóre LCP přímo ovlivněno vaším písmem.

Přestože se písma Google a Font Awesome neustále zlepšují, používání písma zásobníku systému nabízí výrazné zlepšení. I když ne tak fantazijní v závislosti na zařízení.

13. Použijte CDN

Pokud máte uživatele z různých částí světa, pak použití CDN může pomoci zlepšit vaši rychlost a nepřímo i vaše metriky Core Web Vitals.

CDN v jednoduchém vysvětlení vytváří mnoho kopií vašich webových stránek a ukládá je do různých bodů přítomnosti (POP) v různých částech světa. Když někdo požádá o váš web, obslouží váš web z nejbližšího místa.

Pokud je například váš web hostován ve Spojených státech a máte návštěvníka ze Spojeného království, místo načtení webu ze Spojených států bude CDN zobrazovat váš web ze Spojeného království. Výsledkem bude rychlé dodání. Rychlost.

Můžete si prohlédnout nejlepší CDN, které jsou k dispozici.

14. Nastavte předběžné načítání DNS

Pokud se pro doručování webových stránek spoléháte na externí službu, jako je CDN, pak možná budete muset nastavit předběžné načítání DNS , abyste minimalizovali zpoždění způsobené vyhledáváním DNS.

Předběžné načítání DNS provede předběžné načtení DNS před jeho voláním. Tak, aby se načetl v okamžiku, kdy je konečně zavolán.

15. Optimalizujte skripty třetích stran

Zkontrolujte, zda některé ze služeb, které na svém webu používáte, nepřidávají skripty třetích stran, které by mohly zpomalit vaše weby.

Řešení můžete nahradit požadavky třetích stran, které zpomalují váš web, lepším řešením.

Pokud jde o Google AdSense, další skript třetí strany, můžete udělat jen málo. Nejlepším postupem je použít na stránce maximálně 3 reklamy. Vyhněte se odpovídajícímu obsahu, protože přináší nízké příjmy, ale zkracuje dobu načítání.

16. Odstraňte AdSense nad okrajem

Tato rada je založena na experimentech. Pokud jsou všechny vaše metriky v přehledu vyhledávací konzole dobré, kromě LCP, nejprve se ujistěte, že jsou vaše obrázky a písma optimalizovány. Pokud jsou optimalizovány a stále se vám nedaří LCP, může za to AdSense.

Pokud si to můžete dovolit, odeberte AdSense na měsíc nad okrajem a zjistěte, zda problém zmizí.

Pokud jej nechcete odstranit, můžete jej odložit ručně nebo pomocí pluginu jako Flying Scripts.

17. Přepněte na AMP

AMP znamená Accelerated Mobile Pages (Zrychlené mobilní stránky). Myšlenkou AMP je optimalizovat webové stránky tak, aby se na mobilních zařízeních načítaly rychleji. A projekt AMP s otevřeným zdrojovým kódem samozřejmě zahájila společnost Google.

Zatímco AMP měl původně zrychlit mobilní stránky, může zrychlit i stránky pro počítače.

Stránky AMP jsou trvale rychlejší než stránky pro mobily nebo počítače, podle našeho pozorování někdy až o 100 %.

Pokud je jedinou strategií zpeněžení vašeho webu Google AdSense, můžete zvážit převedení celého webu na AMP. Osobně jsem si všiml, že na blogu, který vlastním, služba AdSense na stránkách AMP někdy převádí více než na mobilních zařízeních a počítačích.

Závěr

Core Web vitals vám může pomoci zlepšit váš web pro vaše uživatele nejen pro Google. Je velmi běžné mít dobré skóre laboratorních dat, ale špatné skóre terénních dat.

To je způsobeno složením vašich uživatelů. Pokud většina vašich uživatelů pochází z míst s pomalým internetem, možná jste odvedli dobrou práci s optimalizací, ale stále selháváte v terénních datech.