Pred pár týždňami spoločnosť Google vydala základnú aktualizáciu z júla 2021.
Teraz už pravdepodobne viete veľa o Google Core Web Vitals.
Všade ste sa o nich dočítali, čo to je a ako ich merať. Ak nie, prejdite na tieto články, aby ste to dohnali: signály Google UX a Základné webové vitamíny.
Jedna otázka však zostáva nezodpovedaná: akonáhle ste zmerali svoje Core Web Vitals, ako ich optimalizujete?
Tento článok bude hovoriť o 15 nástrojoch na optimalizáciu vášho webu pre Google Core Web Vitals. Takže po zistení, čo sa deje, s tým môžete, hmm, niečo urobiť.
Ako optimalizovať svoj web pre Google Core Web Vitals
Zopakujme si, čo už vieme o Google Core Web Vitals. Sú to tri metriky, ktoré vám povedia, akú výkonnosť má vaša webová lokalita z hľadiska používateľského zážitku: Kumulatívna zmena rozloženia, Najväčšie vyfarbenie obsahu a Oneskorenie prvého vstupu.
Na ich meranie môžete použiť nástroje Google pre vývojárov, ako sú Lighthouse, PageSpeed Insights a Search Console. Nájdete tu aj niekoľko odporúčaní na zlepšenie.
Niektoré problémy sa budú riešiť ľahšie ako iné. Napríklad Kumulatívna zmena rozloženia, čiže vizuálna stabilita, bude narušená, ak neuvediete šírku a výšku svojich médií alebo nevyhradíte priestor pre reklamy. A tieto veci bez problémov zvládnete aj sami.
Core Web Vitals sa však týka aj rýchlosti webových stránok, optimalizácie obrázkov, odstraňovania nekritických skriptov tretích strán a rozdelenia dlhých úloh. Na to všetko možno budete potrebovať pomoc. Na to slúžia tieto nástroje.
15 nástrojov na optimalizáciu vašich webových stránok pre Google Core Web Vitals
Tento zoznam som rozdelil na dva. Posledná časť vychádza z odporúčaní Google, ktoré sú skôr technickejšie. Väčšina nástrojov, ktoré spomeniem, je však pre bežných ľudí, takže sa nemusíte báť.
WordPress pluginy a ďalšie nástroje
1. WP Rocket
WP Rocket je doplnok vyrovnávacej pamäte pre WordPress vďaka čomu je rýchlosť načítania vášho webu mimoriadne rýchla. Je to skvelé pre maľovanie s najväčším obsahom a oneskorenie prvého vstupu.
Dosahuje úžasné výsledky použitím série rôznych funkcií hneď po aktivácii:
- Cache. Váš web sa okamžite uloží do vyrovnávacej pamäte. Vytvára statické HTML súbory a sprístupňuje ich budúcim návštevníkom.
- Optimalizácia súborov. WP Rocket oneskoruje spustenie súborov JavaScript až do interakcie používateľa, aby sa skrátil počiatočný čas načítania.
- Databáza. Môžete naplánovať automatické čistenie, aby ste mali čistú databázu, ktorá zrýchli vašu lokalitu.
- CDN. Ako sme stručne vysvetlili v našom Príspevok na platforme hostenia obrázkov, CDN vám pomôže zrýchliť vašu stránku tým, že ju replikuje a umiestni do všetkých hlavných regiónov. WP Rocket ponúka aj túto skvelú službu.
2. Nitro Pack
Podobne ako WP Rocket, aj NitroPack je doplnok WordPress, ktorý zaisťuje, že máte bleskovo rýchlu webovú stránku.
Má automatickú správu vyrovnávacej pamäte, optimalizáciu vykresľovania písma (skvelé pre CLS), integráciu Cloudflare a optimalizáciu obrázkov.
Ich služba zahŕňa aj Amazon CloudFront CDN a zahrievanie vyrovnávacej pamäte, takže vaše najdôležitejšie stránky sú vždy optimalizované.
NitroPack sa neustále aktualizuje, čo je nevyhnutné na udržanie kroku s neustálymi aktualizáciami Google.
3. Huckabuy
Huckabuy sa na tento deň pripravoval: na svojej stránke počítali sekundy do aktualizácie Google. Pochopili dôležitosť Google Core Web Vitals, a preto sa naň tak zamerali rýchlosť strana.
Huckabuy je softvérový produkt, ktorý zlepšuje LCP a FID vašej webovej stránky a podľa ich stránok „webové stránky, ktoré využívajú rýchlosť stránky Huckabuy, zažili v priemere 15-30 bodov zvýšenie skóre rýchlosti stránky Google“.
Ponúka:
- Prístup k serverom vo viac ako 200 mestách poskytuje najrýchlejší spôsob komunikácie s vyhľadávačmi.
- Kompresia a minifikácia obsahu.
- Odloženie snímky.
4. Imagify
Ako už z názvu tušíte, Imagify je služba, ktorá sa špeciálne zaoberá optimalizáciou obrázkov. Tento nástroj vytvorili zakladatelia WP Rocket a jeho cieľom je zjednodušiť web a znížiť hmotnosť vašich obrázkov.
Imagify komprimuje najbežnejšie formáty obrázkov a umožňuje vám meniť veľkosť obrázkov v ich online aplikácii alebo z WordPress.
Doplnok WordPress hromadne komprimuje obrázky. Automaticky skomprimuje existujúce obrázky vášho webu aj všetky nové, ktoré nahráte.
5. Kolibrík
Toto populárne Doplnok WP cache je zadarmo a má veľa funkcií, ktoré sú užitočné pre Core Web Vitals:
- Minifikuje CSS a JavaScript a stará sa o rozmazané a lenivé načítavanie obrázkov. Lenivé načítanie oneskoruje zaťaženie zdrojov, kým nie sú skutočne potrebné.
- Ponúka ukladanie do vyrovnávacej pamäte svetovej triedy.
- Eliminuje zdroje blokujúce vykresľovanie.
- Umožňuje kompresiu textu.
- Hummingbird má tiež kompresiu GZIP na rýchly prenos HTML, JavaScript a CSS.
6. Cloudinary
Rovnako ako Imagify, aj tento nástroj je určený len pre obrázky. Google odporúča zobrazovať obrázky rôznych veľkostí na rôznych zariadeniach. To znamená mať responzívne obrázky pre lepšie UX.
Aj keď Google zvyčajne neodporúča žiadny konkrétny nástroj na optimalizáciu stránok pre CWV, zmieňuje Cloudinary ako možnosť optimalizácie vašich obrázkov.
S týmto nástrojom zmenšite veľkosť obrázkov a videí pri zachovaní vysokej vizuálnej stability, optimalizujte a doručujte cez Cloudinary multi-CDN. Cloudinary vám pomôže doručiť médiá rýchlejšie a udržať si váhu pod kontrolou.
7. Parfuméri
Tento ľahký doplnok pre WordPress vytvorili dvaja bratia a weboví nadšenci. Nástroj má minimálnu a ľahko použiteľnú palubnú dosku, nevyžaduje sa žiadne technické zručnosti.
Znížte požiadavky HTTP, odstráňte kód, optimalizujte databázu a zakážte komentáre a adresy URL. Môžete tiež zakázať Mapy Google a Písma Google, pridať prázdne ikony favicon a odstrániť odkazy na informačné kanály RSS.
8. Čistenie aktív
Tento zosilňovač stránky funguje skvele s WP Rocket. Aktívum zaberie všetky vaše CSS a JavaScript a ponechá si len kritické CSS a JS.
Niektoré z jeho výhod sú:
- Vopred načítajte CSS a JS, miestne písma a písma Google.
- Znížte kód HTML skutočnej stránky.
- Presuňte súbory JS z HEAD do BODY a naopak.
- Ak ste vývojár a chcete niečo nájsť, zdrojový kód ľahko.
9. CloudFlare
Cloudflare je známa tým, že je bezpečnostnou spoločnosťou, ktorá chráni internetové vlastnosti pred škodlivými aktivitami. Cloudflare však ponúka množstvo služieb.
Cloudflare CDN vám umožňuje kontrolovať, ako sa váš obsah ukladá do vyrovnávacej pamäte, a znižuje náklady na šírku pásma. Cloudflare Load Balancing na druhej strane znižuje latenciu a dynamicky distribuuje návštevnosť do najdostupnejších a najcitlivejších serverových fondov.
A majú dátové centrá v 200 mestách po celom svete. Pozrite sa na všetky tie modré bodky!
Nástroje pre vývojárov
10. Comlink
Comlink je webový pracovník. Umožňuje vám spúšťať kód na vlákne na pozadí. Comlink hovorí, že „odstraňuje mentálnu bariéru myslenia o postMessage a skrýva skutočnosť, že pracujete s pracovníkmi“.
To je úžasné: pracovníci poskytujú hlavnému vláknu toľko priestoru na dýchanie, ale sú nedostatočne využívaní, pretože ich riadenie je frustrujúce. Vďaka Comlinku získate API, ktoré ste si priali mať po celý čas.
11. Prístrešok
Penthouse generuje kritické CSS pre vaše webové stránky. Zníženie množstva CSS, cez ktoré musí prehliadač prejsť, robí stránku vykresľovaním oveľa rýchlejšie.
Proces je automatický. Strešný priestor vygeneruje kritický CSS potrebný na dokonalé vykreslenie obsahu stránky nad záhybom stránky.
Ak nechcete písať kód, máte prístup tento generátor CSS kritickej cesty, čo áno, je to presne tak, ako to znie, vytvára CSS kritickej cesty.
12. zvieratka
Tento roztomilý chlapík je tvárou doplnku Webpack, ktorý vkladá vaše kritické CSS a zvyšok lenivo načítava.
Jeho kľúčové vlastnosti sú:
- Odstráni vložené pravidlá CSS zo šablón štýlov s pomalým načítaním
- Orezáva nepoužívané kľúčové snímky CSS
- Podporuje predbežné načítanie a vkladanie kritických písiem
13. Web Packager
Web Packager sa snaží automaticky spĺňať požiadavky Google SXG Cache. Je to v ranej fáze vývoja, ale vyzerá to sľubne. S týmto nástrojom optimalizujete rýchlosť stránky.
Web Packager generuje podpísané výmeny. Môžete ho použiť manuálne alebo automaticky na vytvorenie SXG. Server Web Packager bude fungovať ako reverzný proxy server na obsluhu SXG.
Ak sa chcete dozvedieť viac o tom, ako Web Packager funguje a pozrieť si zoznam alternatívnych nástrojov, prečítajte si tento článok od Google Developers.
14. Reagovať
Okrem manipulácie s vyrovnávacou pamäťou a tretími stranami je optimalizácia servera kľúčom k maľovaniu s najväčším obsahom. Tu prichádza do hry React.
React je knižnica JavaScript. Uľahčuje to vytváranie jednostránkových aplikácií, ktoré spracovávajú rôzne aspekty webovej stránky úplne na klientovi, a nie na serveri.
V prípade, že máte vážne problémy so serverom, prečítajte si Google Opravte preťažený server článok.
15. FontTools
FontTools je open-source knižnica na manipuláciu s písmami napísaná v jazyku Python.
Písma sú relevantné aj pre Google Core Web Vitals, najmä pre Cumulative Layout Shift. Google odporúča použiť FontTools na podmnoženie a optimalizáciu písiem. Týmto spôsobom zabránite náhlym zmenám obsahu a optimalizujete rýchlosť.
FontTools vezme váš súbor s písmom a vytvorí nový so všetkými nepotrebnými glyfmi orezanými.
záver
V tomto príspevku sme sa zaoberali širokou škálou nástrojov, ktoré vám pomôžu optimalizovať váš web pre Google Core Web Vitals.
Pravdou je, že aj keď niektoré z nich boli nástrojmi vývojárov, nemusíte byť technicky zdatní, aby ste zlepšili svoje LCP, FID a CLS. Existuje množstvo nástrojov, ktoré automatizujú všetky procesy, takže sa nemusíte o nič starať.
Nechaj odpoveď