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).

Google oznámil že od května 2021 se tyto metriky stanou součástí jejich hodnotících signálů používaných k určení pozice 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á barva (LCP): LCP měří dobu, kterou trvá načtení největšího viditelného obrázku nebo textového bloku na webové stránce. Pokud se největší viditelný text nebo obrázek načítá rychle, má se za to, že zbytek vašich obrázků a textu se načte rychle. Potřebná doba načítání je 2.5 sekund.

Zpoždění prvního vstupu (FID): FID měří interaktivitu webové stránky. To je určeno 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á doba pro uběhnutí je 100 milisekund.

Kumulativní posun rozlož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 najednou něco objeví nebo zmizí a stránka se musí přizpůsobit, aby byla větší nebo menší, měří se tento posun. Je to hrozné pro uživatelskou zkušenost a souhlasím. Skóre, které byste měli projít, 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 a web host, vždy zajistěte, aby bylo datové centrum blíže většině uživatelů vašeho webu. Jejich umístění můžete najít ve své analýze. Odkud pochází většina vašich uživatelů? Vyberte si datové centrum blíž 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ého webhostingu, existuje spousta doporučení, která jsou řízena čistě přidruženými společnostmi bez upřímnosti. Pokud provozujete WordPress a můžete si to dovolit, vřele doporučuji Kinsta. Jsou nejlepší pro WordPress. Pokud potřebujete něco levnějšího nebo nepoužíváte WordPress, pak Cloudways je také velmi účinný.

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 v tématu hledat. Některé z nejběžnějších špatných postupů jsou příliš závislé na JQuery, načítání příliš velkého množství CSS/JS, když není potřeba, velká velikost motivu a další. Vždy můžete použít nástroj jako Žluté laboratoře, abyste otestovali demo.

Pokud používáte WordPress, můžete si prohlédnout seznam nejrychlejší témata 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ší, kteří to mohou udělat za vás.

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 viděli radu týkající se PageSpeed ​​Insight odložit snímky mimo obrazovku. Jednoduše to znamená líné načítání obrázků.

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 se také odstranit nepoužívané CSS. Pokud služba, kterou používáte, tlačí CSS, které se nepoužívají, je bezpečné je odstranit.

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

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ů WordPress, které vám s tím mohou pomoci, WP Rocket a Flying Scripts jsou příkladem. Tato metoda, pokud vím, 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 dopad na vaše příjmy z AdSense. Doporučuji provést experiment, abyste si byli jisti, zda to stojí za to

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 se podívat na nejlepší CDN tam venku.

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

Pokud se při doručování svých webových stránek spoléháte na externí službu, jako je CDN, možná budete muset nastavit předběžné načítání DNS minimalizovat zpoždění kvůli vyhledávání 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. Myšlenkou AMP je optimalizovat webové stránky tak, aby se na mobilních zařízeních načítaly rychleji. A samozřejmě AMP open source projekt 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.

Proč investovat do čističky vzduchu?

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.