Mezinárodní marketing

Jak zlepšit základní webové údaje na vícejazyčném webu

Jak zlepšit základní webové údaje na vícejazyčném webu
Nick Schäferhoff
Napsal/a
Nick Schäferhoff
Eugène Ernoult
Zkontroloval/a
Eugène Ernoult
Aktualizováno dne
8. dubna 2024
27. května 2025

Core Web Vitals je soubor ukazatelů pro měření kvality uživatelského prostředí na webových stránkách. Google je započítává jako signály pro hodnocení, a proto jsou důležité i pro (vícejazyčné) SEO. Pokud je zanedbáte, riskujete, že se vám návštěvníci i vyhledávače vyhnou.

Abyste se tomuto scénáři vyhnuli, dozvíte se v tomto příspěvku vše, co potřebujete vědět o zlepšení těchto metrik na svých vícejazyčných webových stránkách. Vysvětlíme vám, co jsou Core Web Vitals, jak otestovat aktuální výkonnost vašeho webu a krok za krokem vám poradíme, jak jednotlivé metriky na vašem webu zlepšit.

Co jsou základní webové vitální údaje?

Jak již bylo zmíněno, služba Core Web Vitals měří uživatelskou zkušenost s webovými stránkami. Všechny nějakým způsobem souvisejí s rychlostí načítání a interaktivitou webových stránek. Tyto metriky zavedla společnost Google v roce 2020 a staly se součástí jejího vyhledávacího algoritmu. Pojďme si je projít jednu po druhé.

Největší obsahová barva (LCP)

První z nich je Largest Contentful Paint (LCP). Měří dobu, za kterou se stránka načte, než se stane zobrazitelnou a použitelnou. Určuje to tak, že zjišťuje největší obsahový prvek webové stránky, kterým je často obrázek nebo textový blok, a okamžik, kdy se stane viditelným pro návštěvníky.

Kde najít největší prvek Contentful Paint v nástroji PageSpeed Insights

Tento interval se měří v sekundách a používá se jako skóre LCP. Společnost Google definovala několik mezních bodů, které určují, jakého času by měl váš web dosáhnout.

Největší skóre Contentful Paint pro načasování, které by váš web měl mít

Jak vidíte výše, dobrým výsledkem je až 2,5 sekundy nabití prvku LCP. Doba do 4 sekund je přijatelná, ale měla by se zlepšit, a cokoli nad tuto dobu považuje Google za příliš dlouhé.

Kumulativní posun rozložení (CLS)

Tato další metrika sleduje stabilitu rozvržení webové stránky během jejího načítání, což znamená, jak velký pohyb se projeví, když se na stránce objeví nové prvky. Nazývá se kumulativní posun rozložení (Cumulative Layout Shift, CLS).

Proč na tom záleží?

Vysoká míra CLS může narušit interakci uživatele s vaším webem. Kromě toho, že jednoduše nevypadá dobře, může také způsobit, že ztratí své místo na stránce kvůli pohybujícímu se textu nebo že omylem klikne na nesprávný prvek, protože se posune v nesprávný okamžik.

CLS se vypočítá na základě toho, jak moc se rozložení při načítání pohybuje a jak velké tyto pohyby jsou. Tyto dva poměry se navzájem vynásobí a získá se skóre.

Metrika pro dobré kumulativní skóre posunu rozložení

Skóre CLS nižší než 0,1 je dobré; do 0,25 je třeba zlepšení a cokoli nad touto hodnotou je nepřijatelné.

Jedna poznámka: Pohyb stránky do 500 ms od interakce uživatele se stránkou (například kliknutí) neovlivní vaše skóre CLS. Ty jsou považovány za záměrné.

Interakce s další barvou (INP)

Interaction to Next Paint neboli INP je nejnovějším přírůstkem metrik Core Web Vitals. V březnu 2024 nahradí jedno z původních měření - First Input Delay (FID).

Obě tyto metody sledují dobu mezi interakcí návštěvníka s prvkem stránky a rychlostí jeho reakce. Čím rychlejší reakce, tím samozřejmě lépe.

Zatímco funkce First Input Delay se zabývá pouze první interakcí návštěvníka, funkce Interaction to Next Paint sleduje všechny interakce se stránkou během návštěvy a zobrazuje nejhorší skóre. Tímto způsobem získáte přesnější obrázek o odezvě stránky.

Jaké je dobré skóre INP?

Doba do 200 ms je dobrá a do 500 ms je přiměřená; cokoli nad tuto dobu bude mít negativní dopad na hodnocení vašeho webu společností Google.

Metrika pro dobrou interakci s výsledkem Next Paint

Jak otestovat základní webové funkce vašeho webu

Jakmile víte, co přesně Core Web Vitals jsou, další logickou otázkou je, jak zjistíte, jak si váš web stojí? Nejjednodušší způsob, jak to zjistit, je použít nástroj pro testování rychlosti, jako je PageSpeed Insights.

Domovská stránka služby Page Speed Insights

Jednoduše zadejte adresu URL své webové stránky a spusťte test. Po dokončení se dozvíte nejen to, zda vaše webové stránky prošly hodnocením Core Web Vitals, ale také hodnoty pro každý z uvedených datových bodů.

Jak vypadá neúspěšné hodnocení Core Web Vitals

Pokud jsou k dispozici, získáte kombinaci výsledků z reálného života i z laboratoře. Patří sem i informace ze služby CrUX, kde společnost Google shromáždila údaje o uživatelích webových stránek ze svého prohlížeče Chrome. Pokud je nemá k dispozici, získáte pouze měření z aplikace Lighthouse, která je vypočítává ad hoc.

Dalšími nástroji, které vám mohou poskytnout informace o výkonu Core Web Vitals, jsou GTmetrix, WebPageTest nebo rozšíření Chrome Web Vitals.

Zlepšení základních životních funkcí webu na vícejazyčných webových stránkách

Co tedy máte dělat, když vaše hodnoty nejsou tak hvězdné? Pojďme si o tom nyní promluvit.

Od této chvíle budeme postupně vysvětlovat, jak zlepšit jednotlivé metriky Core Web Vital na vašem vícejazyčném webu. Budeme se zabývat tím, jak to udělat ručně, spolu se snadným způsobem, jak to udělat pro uživatele WordPressu pomocí pluginu WP Rocket.

WP Rocket umožňuje lidem bez technických znalostí rychle a bez námahy implementovat sofistikovaná vylepšení výkonu. Je to snadno jeden z nejvýkonnějších a pro začátečníky nejpřívětivějších pluginů cache.

Obecná zlepšení výkonu

Začněme několika obecnými tipy, jak zajistit rychlé načítání webových stránek:

  • Vyberte si dobrou hostingovou společnost - kvalita poskytovatele hostingu, u kterého jsou vaše webové stránky umístěny, má velký vliv na rychlost jejich načítání. Než se rozhodnete, ujistěte se, že jste se rozhodli pro renomovaného poskytovatele, a přečtěte si několik srovnání rychlosti a uživatelských recenzí.
  • Udržujte své stránky aktualizované - Pokud jsou vaše webové stránky založeny na systému pro správu obsahu, jako je WordPress, nezapomeňte vše aktualizovat. To znamená jak samotný software, tak i všechny pluginy, témata, verze PHP na serveru a vše ostatní, co k webu patří. Jedině tak můžete těžit z nových vylepšení rychlosti.
  • Používejte méně zásuvných modulů - Zároveň se snažte nepřehánět to s přidáváním věcí na své stránky. Každý zásuvný modul a rozšíření obsahuje kód navíc, který může váš web zpomalit. Omezte tedy to, co na webu máte, na naprosté minimum.
  • Vybírejte vysoce kvalitní komponenty - U rozšíření, která dostanou místo na vašich webových stránkách, se ujistěte, že jsou vysoce kvalitní a optimalizovaná pro výkon, jako např. Weglot.

Výše uvedené tipy vytvoří dobrý základ pro obecně rychlý výkon, než se dostanete ke konkrétnějším opatřením.

Oprava největší obsahové barvy

Existují dvě hlavní možnosti, jak vylepšit Largest Contentful Paint: optimalizace rychlosti načítání stránek obecně (jak je popsáno výše) a zrychlení doručování prvků LCP.

Jaký je váš prvek LCP? PageSpeed Insights vám to řekne v části Diagnostika.

Diagnostika, která vám řekne, jaký je váš prvek LCP

Implementace ukládání do mezipaměti a komprese

Ukládání do mezipaměti a komprese jsou dvě základní techniky pro zlepšení výkonu webu. První z nich znamená ukládání vykreslených dat stránky, aby se k nim návštěvníci dostali rychleji. Je to obzvláště účinné, pokud k pohonu svých webových stránek používáte WordPress.

Proč?

V systémech CMS, jako je WordPress, se stránky obvykle vytvářejí dynamicky z kódu PHP a obsahu staženého z databáze. Server je převede do dokumentů HTML a odešle do prohlížeče.

Ukládání do mezipaměti tento proces urychluje tím, že na server ukládá předem vykreslené verze HTML vašich webových stránek, takže je můžete odeslat přímo návštěvníkům. Tím se může eliminovat několikeré obcházení stránek při každé návštěvě a uživatelský zážitek je mnohem rychlejší a lepší.

Komprese je na druhou stranu stejná jako vytváření souborů zip, jen se neprovádí v domácím počítači, ale na serveru. Zmenšuje soubory, které tvoří webové stránky, aby se mohly rychleji stahovat a zobrazovat.

Chcete-li na serveru aktivovat ukládání do mezipaměti i kompresi, musíte upravit soubor .htaccess. Obsahuje důležité směrnice pro fungování webového serveru a obvykle jej najdete v kořenovém adresáři svých webových stránek.

Kde najdete soubor .htaccess v kořenovém adresáři

Můžete do něj zkopírovat a vložit následující kód, který aktivuje obě výše uvedené techniky optimalizace rychlosti:


<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Oba úryvky kódu pocházejí od společnosti GTmetrix a fungují pro servery Apache. Návody pro jiné servery, jako je NGINX, najdete online, například v tomto návodu na KeyCDN.

Pokud se vám to zdá hrozivé, můžete toho dosáhnout pomocí výše zmíněného pluginu WP Rocket. Zde stačí plugin nainstalovat a aktivovat - automaticky implementuje kompresi i ukládání do mezipaměti, a to i pro mobilní zařízení.

Stránka mezipaměti WP Rocket

Optimalizace kódu a doručování kódu

Cokoli, co můžete udělat pro zefektivnění doručování a zpracování kódu vašich webových stránek, pomůže zlepšit Největší Contentful Paint na vašich vícejazyčných webových stránkách. Pojďme si projít několik dobrých možností, jak na to:

  • Odstranění nepotřebných značek - Pokud máte na webu mnoho nadbytečného kódu JavaScript a CSS, můžete zvýšit výkon odstraněním všeho, co není nezbytně nutné.
  • Minifikace - To znamená odstranění bílých znaků a komentářů ze souborů webových stránek. Tím se zmenší velikost souborů, které se rychleji stahují a zpracovávají.
  • Optimalizace CSS a JavaScriptu - zde nastavíte soubory webu tak, aby nebránily načítání zbytku webu. Jedná se o nechvalně známou zprávu "eliminovat zdroje blokující vykreslování", kterou můžete obdržet od nástrojů pro testování rychlosti. Dva oblíbené nástroje pro tento účel jsou atributy defer a async. Respektive přesouvají spouštění JavaScriptu na konec načítací fronty a říkají prohlížeči, aby stahoval soubory na pozadí a spustil je, až když jsou k dispozici.

Pro ruční miniaturizaci můžete použít nástroje jako Minifier nebo Grunt. Optimalizace CSS a JavaScriptu obvykle znamená spoustu analýz toho, co blokuje načítání stránek. Nástroje pro testování rychlosti vás upozorní na problematické skripty.

Stránka Diagnostika

Poté je na vás, abyste k nim ručně přidali značky defer a async. Vypadají takto:


<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

Můžete také rozdělit některé části kódu tak, abyste nejprve načetli pouze to, co je nezbytné. O tom se více dozvíte níže, až budeme mluvit o optimalizaci INP.

Pokud chcete tyto procesy automatizovat, WP Rocket umí kód minifikovat, odstranit nepoužívané CSS, odložit JavaScript a načíst jej asynchronně pouhým zaškrtnutím několika políček.

Optimalizace souborů n WP Rocket

Optimalizace obrázků

Optimalizace obrázků znamená zmenšení velikosti vizuálů na webových stránkách bez snížení kvality. Jedná se o skvělé obecné zlepšení výkonu a zejména pomáhá zlepšit Largest Contentful Paint, protože obrázky často končí jako prvky LCP.

Jak můžete optimalizovat obrázky na svých stránkách?

  • Překlad obrázků - Překlad webových stránek se neomezuje pouze na text. Musíte také převést text v obrázcích a/nebo použít kulturně vhodnější obrázky. Naštěstí vám v této oblasti pomůže společnost Weglot .
  • Komprese - Stejně jako textové soubory můžete z obrázků odstranit nepotřebná data a zmenšit tak jejich velikost.
  • Používejte moderní formáty - Obrázky ve formátech nové generace, jako je WebP nebo AVIF, jsou mnohem menší než JPG nebo PNG a vypadají stejně dobře.
  • Správná velikost vizuálů - Zobrazte obrázky stejně velké, jako se zobrazují na vašich webových stránkách. V opačném případě nutíte návštěvníky načítat zbytečná data.
  • Zapnutí líného načítání - tato technika načítá pouze obrázky, které jsou v prohlížeči skutečně viditelné během počátečního načítání, a ty, které se nacházejí dále na stránce, se načítají při posouvání návštěvníků. Tím se také zabrání plýtvání šířkou pásma u obrázků, které nejsou součástí LCP, takže ty důležité se mohou načíst rychleji.
Dostupné nástroje

Ke kompresi obrázků a jejich převodu do jiných formátů můžete použít nástroje, jako je TinyPNG. Něco jako Image Resizer je také může oříznout na libovolné rozměry, které potřebujete. Možnosti pro to najdete také ve WordPressu v části Nastavení > Média.

Nastavení médií - kde opravit velikosti obrázků

Pokud používáte nejnovější verzi WordPressu (nebo novější než 5.4), měl by váš web mít ve výchozím nastavení povoleno líné načítání.

Pokud chcete automatické řešení, je tu Imagify. Je to jednoduchý plugin pro optimalizaci obrázků, který dobře spolupracuje s WP Rocket. Dokáže automaticky zpracovat vaše obrázky tak, aby byly lehčí a zároveň vyvážené z hlediska kvality a výkonu. Plugin převádí vaše vizuály do formátů WebP a Avif, mění velikost velkých obrázků a automaticky zobrazuje optimalizované verze na vašich webových stránkách WordPress.

Imagify - hromadná optimalizace mediálních souborů

Kromě toho WP Rocket nabízí líné načítání nejen pro obrázky, ale také pro pozadí CSS a vložená média, jako jsou videa. Navíc můžete z líného načítání vyloučit média, pokud to dává smysl.

Nastavení líného načítání médií ve WP Rocket

Použití sítě CDN

Síť pro doručování obsahu (CDN) se skládá z několika vzájemně propojených počítačů umístěných v různých částech světa, které obsahují soubory vašich webových stránek. Jejím účelem je doručit je vašim návštěvníkům z místa, které je jim nejblíže, a to co nejrychleji. To je důležité zejména pro vícejazyčné webové stránky s mezinárodním publikem.

Z tohoto důvodu Weglot automaticky nastaví síť CDN, abyste mohli rychle doručit přeložený obsah po celém světě. Pokud nejste uživatelem služby Weglot , musíte se obvykle zaregistrovat do sítě CDN a nakonfigurovat ji pro svůj web. To se u jednotlivých poskytovatelů liší; zde jsou ukázkové pokyny.

Pokud chcete pomoci, WP Rocket má specializované doplňky pro Sucuri a Cloudflare, dvě populární řešení. Díky nim je konfigurace těchto sítí pro doručování obsahu pro vaše stránky rychlejší a jednodušší.

Doplňky WP Rocket jako CloudFare a Sucuri

V nastavení CDN můžete povolit i jiné sítě zadáním názvu CNAME poskytovatele.

WP Rocket nastavení CDN

WP Rocket má také vlastní síť, nazvanou RocketCDN, kterou můžete automaticky nakonfigurovat přímo v pluginu. Kromě toho může WP Rocket díky své schopnosti zmenšovat soubory s kódem snížit provoz CDN a náklady.

Řešení kumulativního posunu rozložení

Další na našem seznamu základních životních funkcí webu, které je třeba na vícejazyčném webu vylepšit, je CLS. Zde se dozvíte, jak můžete zajistit, abyste v tomto oddělení uspěli.

Zahrnout atributy velikosti obrázku

Jedním z největších faktorů špatného hodnocení CLS jsou často obrázky bez definovaných atributů výšky a šířky.

Pokud neuvedete, jak velký má být obrázek na konečné stránce, prohlížeč pro něj nemůže vyhradit správné množství místa. V důsledku toho, když se skutečná velikost liší od velikosti zástupného symbolu, obrázek najednou vyskočí a zatlačí vše pod sebou. To se může stát zejména u líně načtených médií, která se při prvním načtení stránky nezobrazí.

Prvním pravidlem optimalizace systému CLS je přidat k obrázkům definice výšky a šířky. Jak to uděláte?

V čistém HTML to vypadá jednoduše takto:


<img src="image.jpg" alt="Insert alt text" width="600" height="700">

Pokud používáte editor bloků WordPress, měl by rozměry nastavit automaticky, ale konkrétní rozměry můžete definovat i při vytváření obsahu.

Vytvoření příspěvku na blogu ve WordPressu prostřednictvím ovládacího panelu

Kromě toho má WP Rocket možnost přidat chybějící deklarace šířky a výšky do mediálních souborů, pokud jste některé vynechali.

Přidání chybějících rozměrů obrázků na WP Rocket

Rezervace prostoru pro vložené reklamy, rámečky a reklamní sloty

Stejné pravidlo jako výše platí i pro dynamický obsah, jako jsou vložené prvky nebo reklamy. I ty potřebují definici výšky a šířky, aby se nepohybovaly po zbytku rozvržení stránky.

Problémem je, že ne vždy můžete kontrolovat, jak velké tyto prvky budou, protože často pocházejí ze zdrojů třetích stran. V takovém případě je dobré provést alespoň odhad a rezervovat si místo. I když bude výsledný prvek nakonec větší, posun nebude tak výrazný, což povede k nižšímu skóre CLS.

Editor ve WordPressu také automaticky přidává šířku a výšku vloženého obsahu. Kromě toho, jak již bylo zmíněno, WP Rocket obsahuje možnost líného načítání vložených médií. Tím se automaticky rezervuje potřebný prostor pro jejich načtení.

Optimalizace doručování webových písem

Také písma mohou způsobit posuny v rozvržení, zejména pokud na webu používáte vlastní písma. Dva nejčastější problémy jsou následující:

  • Flash of Unstyled Text (FOUT) - To znamená, že návštěvník nejprve vidí text na webu ve standardním písmu, které se změní v okamžiku, kdy se načte soubor s písmem, což může vést k posunu rozložení.
  • Záblesk neviditelného textu (FOIT ) - zde zpočátku nevidíte vůbec žádný text. Zobrazí se pouze společně se souborem webového písma.

Těmto problémům se můžete vyhnout pomocí následujících strategií:

  • Používání moderních formátů písma - Stejně jako obrázky, i písma se dodávají ve větších a menších souborových formátech. Nejrychleji se obvykle načítají fonty WOFF nebo WOFF2.
  • Definice podobného záložního písma - zavedení záložního písma, které je velmi podobné vašemu skutečnému písmu, snižuje pohyb stránky při přepínání. K nalezení vhodných kombinací můžete použít nástroj Font Style Matcher.
  • Předzásobení písmy - upřednostněte soubory webových písem jejich umístěním na začátek dokumentu a přidáním rel=preload do volání. Prohlížeč je tak načte rychleji.

Pokud používáte WP Rocket, je součástí pluginu možnost přednačíst soubory s písmy. Stačí zadat cestu, kde se nacházejí.

Přednahrávání písem

Mimochodem, součástí optimalizace písma pro vícejazyčné webové stránky je také použití písem, která jsou kompatibilní s různými abecedami. To platí zejména v případě, že na svých stránkách nabízíte jazyky RTL (psané zprava doleva).

Řešení dynamického obsahu

Dynamickým obsahem rozumíme prvky, které se zobrazí po dokončení načítání stránky. Příkladem jsou líně načtené obrázky, bannery, formuláře atd.

Chcete-li, aby jejich dopad na vaše skóre CLS byl co nejmenší, řiďte se stejnými radami jako výše:

  • Předem definujte jejich kontejnery a zadejte jim pevné rozměry.
  • Spojte jejich vzhled s interakcí s uživatelem. Tímto způsobem se vyhnete sankci CLS.

Mimochodem, Weglot je plně schopen překládat dynamický obsah. Nemusíte se tedy obávat, že by mu členové vašeho publika nerozuměli.

Práce na interakci s další barvou

Nakonec si řekneme, jak můžete zajistit, aby váš INP byl v pořádku.

Optimalizace JavaScriptu

JavaScript je obvykle jedním z hlavních faktorů, pokud jde o problémy s Interakcí s Next Paint, zejména s takzvanými "dlouhými úlohami". To jsou úlohy JavaScriptu, jejichž dokončení trvá déle než 50 ms a které mohou blokovat schopnost prohlížeče zpracovávat interakce uživatele na stránce. Kromě toho může mít mnoho skriptů na webu obecně zhoršenou odezvu stránek.

O tom, jak můžete optimalizovat JavaScript, jsme již hovořili v části LCP. Pro INP je konkrétně důležité, abyste se na svých stránkách zabývali dlouhými úlohami. Pokud existují, najdete je ve vývojářských nástrojích Chrome. Jsou označeny malými červenými trojúhelníčky.

Optimalizace úloh JavaScriptu

Zkuste je rozdělit na menší části, které se mohou načítat postupně, aniž by trvale blokovaly hlavní vlákno prohlížeče. Podrobné informace o tom najdete v tomto návodu na web.dev. Minifikace, odložení, asynchronizace a odstranění nepotřebného kódu také pomáhají udržet reakci prohlížeče na interakci s uživatelem.

Pokud používáte WP Rocket, plugin umožňuje podrobně nastavit, které soubory JavaScriptu chcete načítat později a které ne.

Konfigurace souborů pro zpoždění načítání v JavaScriptu

Snížení počtu nepoužívaných CSS

Vše, co platí pro JavaScript, platí i pro CSS. Stahování a zpracování souborů stylů může prohlížeč zaměstnat a zpozdit jeho reakci na vstup uživatele.

Zde můžete také použít nástroje pro testování rychlosti a najít nepoužívané CSS. Kromě toho můžete rozdělit listy stylů tak, aby se klíčové CSS načetlo jako první, nebo je vložit do řádku.

Jak již bylo zmíněno, WP Rocket má možnosti automatického odstranění nepoužívaného CSS.

Optimalizace doručování CSS prostřednictvím WP Rocket

Přidání líného načítání

O líném načítání pro optimalizaci obrázků jsme již hovořili. Může mít také pozitivní dopad na INP, protože uvolňuje prostředky prohlížeče pro reakci na vstup uživatele. Při jeho implementaci dbejte výše uvedených pokynů.

Mimochodem, pokud máte problémy s překladem líně načtených obrázků, Weglot ve výchozím nastavení překládá adresy URL obrázků přidané do atributů data-src nebo srcset. Pokud vaše líné načítání používá vlastní atributy, Weglot je nepřeloží z výroby - budete muset přidat filtr PHP, který je určen speciálně pro integraci s WordPressem.

Pokud používáte integraci Weglot JavaScript a/nebo stále nemůžete přeložit své obrázky, kontaktujte podporu pro více informací.

Zlepšete základní webové údaje na svých vícejazyčných webových stránkách ještě dnes!

Core Web Vitals jsou důležitým ukazatelem kvality použitelnosti vícejazyčných webových stránek. Toto téma zajímá nejen návštěvníky, ale Core Web Vitals má také vliv na umístění ve vyhledávání. Z tohoto důvodu je optimalizace webu pro ně rozhodně něco, co byste měli brát vážně.

Jak jste pravděpodobně viděli výše, není to tak složité. Jde hlavně o to, aby se vaše webové stránky rychle načítaly a zůstaly během této doby stabilní a citlivé. K tomu můžete přijmout několik klíčových opatření, která jsme podrobně popsali výše.

Pokud máte pocit, že práce s kódem a soubory webových stránek je nad vaše síly, můžete se také rozhodnout pro řešení v podobě pluginu, jako je WP Rocket. Ten dokáže optimalizovat vaše stránky za vás, aniž byste potřebovali vývojářské nebo technické dovednosti, a spoustu práce za vás udělá ve výchozím nastavení.

ikona směru
Objevte Weglot

Přidejte se k více než 110 000 značkám, které už překládají své weby s Weglotem

Přeložte svůj web okamžitě s pomocí AI, doladíte ho lidskými úpravami a spustíte ho během několika minut.

V tomto článku se podíváme na:
Ikona rakety

Jste připraveni začít?

Nejlepší způsob, jak pochopit sílu Weglot vyzkoušet si ho na vlastní kůži. Vyzkoušejte ho zdarma a bez jakýchkoli závazků.

Nejlepší způsob, jak pochopit sílu Weglot vyzkoušet si ho na vlastní kůži. Vyzkoušejte ho zdarma a bez jakýchkoli závazků.

Pokud ještě nejste připraveni propojit svůj web, je k dispozici demo webová stránka ve vašem ovládacím panelu.

Přečtěte si články, které by se vám mohly líbit

Ikona FAQ

Časté dotazy

Nic nebylo nalezeno.

Modrá šipka

Modrá šipka

Modrá šipka