Jak odstranit zdroje blokující vykreslování ve WordPressu [Plugins or Manually]

Optimalizace rychlosti webových stránek: Odstranění zdrojů blokujících vykreslování

V současném digitálním prostředí s vysokou konkurencí je rychlost načítání webových stránek klíčová pro úspěch online podnikání. Vyhledávače, jako je Google, kladou velký důraz na rychlé načítání stránek, protože vědí, že plynulý uživatelský zážitek je nezbytný.

Studie ukazují, že rychlejší načítání stránek vede k vyššímu zapojení uživatelů a lepšímu konverznímu poměru. Dokonce i jednosekundové zpoždění při načítání stránky může způsobit snížení konverzí až o 7 %. Z toho vyplývá, že majitelé webových stránek by měli optimalizaci výkonu brát jako prioritu.

Google bere rychlost webových stránek velmi vážně a zohledňuje ji při hodnocení ve výsledcích vyhledávání. Rychleji načítané weby se tedy umísťují výše, přitahují více návštěvníků a generují vyšší příjmy. Jak ale splnit požadavky Googlu a dosáhnout rychlého načítání vašeho webu?

Jednou z klíčových strategií je odstranění zdrojů, které mohou blokovat načítání webu, jako jsou například soubory CSS a JavaScript. Nicméně, odstranění těchto zdrojů může být náročné a časově náročné, zvláště pro ty, kteří nemají technické znalosti.

V tomto článku vám vysvětlíme, co jsou zdroje blokující vykreslování, jak ovlivňují výkon webu a jak je odstranit z vašeho webu WordPress. Pojďme společně optimalizovat váš web pro rychlost a úspěch!

Co jsou zdroje blokující vykreslování?

Za zdroj blokující vykreslování je považován každý zdroj, který se musí načíst před zobrazením webové stránky. Tyto zdroje mají negativní dopad na výkon a efektivitu webu a prodlužují dobu potřebnou k načtení stránky.

Soubory CSS nebo JavaScript mohou blokovat vykreslování stránky. Důležitost načítání se ale liší v závislosti na jejich okamžité potřebě.

Když uživatel navštíví stránku, prohlížeč nejprve zpracuje kód HTML a zobrazí jeho obsah. Při narazení na soubory CSS a JavaScript je také stáhne a zpracuje. Pokud zdrojové soubory obsahují další kódy nebo nepoužité části, načítání webové stránky trvá déle.

Typy zdrojů blokujících vykreslování

Ve WordPressu jsou soubory CSS a JavaScript obecně považovány za zdroje blokující vykreslování. Prohlížeč je považuje za kritické a vyžaduje jejich načtení před zobrazením stránky. Existuje však více zdrojových souborů, které mohou blokovat vykreslování webové stránky.

Zde je seznam zdrojů blokujících vykreslování:

Proč jsou zdroje blokující vykreslování problémem?

Pokud váš web WordPress obsahuje zdroje blokující vykreslování, může to vést k horšímu umístění ve výsledcích vyhledávání. I když jste nyní na prvních pozicích, weby s lepší optimalizací vás mohou v budoucnu předstihnout.

Webové stránky se zdroji blokujícími vykreslování musí před zobrazením stránky načíst a zpracovat další soubory. Uživatelé tedy musí počkat, než se stránka zobrazí. To má vliv na klíčové metriky výkonu webových stránek:

• Největší obsahové vykreslení (Largest Contentful Paint): Doba načtení primárního obsahu stránky.
• První obsahové vykreslení (First Contentful Paint): Doba potřebná k vykreslení prvního obsahu DOM na webu.
• Celková doba blokování (Total Blocking Time): Doba od prvního vykreslení obsahu do doby, kdy se stránka stane zcela interaktivní.

Přestože zdroje blokující vykreslování nejsou pro načítání webu nezbytné, mohou zabránit vykreslení stránky. Je proto důležité tyto zdroje odstranit, aby byla navigace na vašem webu pro uživatele plynulá.

Pojďme se podívat podrobněji na to, proč jsou zdroje blokující vykreslování problém:

Pomalé načítání stránky

Jednou z hlavních nevýhod je pomalejší načítání webu. Pokud obsahuje zdrojové soubory s nepotřebnými elementy, doba načítání se prodlužuje. To ovlivní hodnocení ve výsledcích vyhledávání, sníží zapojení uživatelů a zvýší míru okamžitého opuštění webu.

Blokování vykreslování

Prohlížeč může přestat vykreslovat stránku při setkání se zdroji blokujícími vykreslování. Chce nejdříve načíst a zpracovat tyto zdroje. V důsledku toho jsou uživatelé frustrováni kvůli pomalé nebo nereagující stránce a opustí váš web.

Pokud se zdroj načítá pomalu, prohlížeč může proces načítání vzdát. To vede k nefunkčním stránkám nebo chybějícím informacím.

Snížené zapojení uživatelů

Zpoždění vykreslování snižuje uživatelský zážitek. Uživatelé očekávají rychlé načítání a obvykle opouštějí pomalu načítané weby. Přejdou raději na web, který se načítá rychleji.

Pomalé načítání stránek má negativní dopad na spokojenost zákazníků a pověst značky. S tím klesá i návštěvnost a míra konverze.

Existuje několik metod, jak odstranit zdroje blokující vykreslování z WordPressu. Představíme vám manuální metody, jak na to. Poté si ukážeme, jak toho dosáhnout pomocí některých osvědčených pluginů WordPress.

Manuální odstranění zdrojů blokujících vykreslování

Nemusíte se bát manuálního procesu. Provedení těchto kroků vám pomůže naučit se některé techniky optimalizace výkonu WordPress. Podívejte se na toto video, abyste lépe porozuměli diskutovaným konceptům.

#1. Identifikace zdrojů blokujících vykreslování

Než odstraníte zdroje blokující vykreslování, musíte je nejprve identifikovat. Postupujte podle těchto kroků, abyste zjistili zdroje blokující vykreslování na vašem webu:

• Přejděte na Google PageSpeed Insights.
• Zadejte adresu URL vašeho webu do vyhledávacího pole.
• Kliknutím na tlačítko "Analyzovat" získáte statistiky vašeho webu.

• Sjeďte dolů a zkontrolujte sekci Příležitosti.
• Pokud vaše stránka obsahuje zdroje blokující vykreslování, budou zde uvedeny.

#2. Použití atributů "defer" a "async" pro JS

Po identifikaci zdrojů blokujících vykreslování je čas je odstranit pro zlepšení výkonu. Jedním z přístupů je použití metody "defer" nebo "async" pro soubory JavaScript.

Atribut "defer" umožňuje prohlížeči stáhnout soubor JS a spustit jej až po dokončení načítání stránky. Ostatní prvky stránky se tak mohou načítat souběžně se souborem JavaScript. Tím se zkracuje doba potřebná k načtení stránky.

Atribut "async" umožňuje prohlížeči stáhnout soubor JS ihned, jakmile je k dispozici, bez blokování ostatních prvků stránky. Soubor JS se tedy může načítat paralelně s ostatními elementy, což urychluje proces načítání.

Použitím atributů "defer" nebo "async" můžete odstranit zdroje blokující vykreslování a zvýšit rychlost vašeho webu.

#3. Použití atributu "media" pro podmíněné CSS

Dalším přístupem je využití atributů "media" pro podmíněné CSS. Tento atribut umožňuje definovat jedinečné soubory CSS pro stolní a mobilní prohlížeče.

Můžete zahrnout jeden soubor CSS určený pro stolní zařízení a další pro mobilní zařízení. Prohlížeč bude načítat soubor CSS pro stolní počítače pouze tehdy, pokud k němu uživatel přistupuje ze stolního zařízení. Stejně tak se mobilní CSS načte pouze při přístupu z mobilního zařízení. Načtením specifických CSS pro dané zařízení snížíte zdroje blokující vykreslování a zrychlíte načítání webu.

#4. Odložení nekritického CSS

Kromě atributu "media" zkuste odložit nekritické CSS. Nejprve načtěte pouze základní CSS a zbytek až po načtení stránky.

Například, můžete mít velký soubor CSS pro celý web. Pro zobrazení obsahu v zobrazené oblasti (nad okrajem) potřebujete jen malou část tohoto souboru. Odložením nekritického CSS se obsah nad okrajem zobrazí rychle a zbytek CSS se načte během načítání stránky.

#5. Odstranění nepoužívaného CSS a JS

Odstranění nepoužívaných souborů CSS a JavaScript je další technika, jak eliminovat zdroje blokující vykreslování. Tyto soubory mohou zatěžovat stránku a prodlužovat dobu načítání.

Odstraněním nepotřebných souborů CSS a JS snížíte počet zdrojů blokujících vykreslování. Můžete využít nástroje jako PurifyCSS nebo UnusedCSS k odstranění nepoužívaného CSS.

#6. Lokální načítání vlastních písem

Vlastní písma mohou také omezovat vykreslování. Místo závislosti na externích zdrojích, jako jsou Google Fonts, byste měli svá vlastní písma načítat lokálně. Zajistíte, že se vaše písma budou načítat rychle a efektivně bez zpomalování výkonu webu, což povede k rychlejšímu a responzivnějšímu webu.

#7. Minifikování JS a CSS

Minifikace souborů CSS a JavaScript zlepší výkon webu. Minifikací odstraníte nepotřebné znaky, jako jsou mezery a komentáře, čímž zmenšíte velikost souborů a zrychlíte načítání.

Můžete použít nástroje jako MinifyJS nebo CSSNano pro minifikaci souborů. Uchovejte si kopii původních souborů pro případ, že byste je někdy potřebovali upravit.

Odstranění zdrojů blokujících vykreslování pomocí pluginů

V této části vám ukážeme, jak odstranit zdroje blokující vykreslování pomocí pluginů WordPress. Tyto pluginy jsou oblíbené a efektivně odstraňují zdroje blokující vykreslování. Navíc můžete zlepšit výkon bez jakýchkoli speciálních technických znalostí.

#1. W3 Total Cache

W3 Total Cache (W3TC) zlepšuje celkový uživatelský zážitek z webu WordPress. Eliminuje zdroje blokující vykreslování, zlepšuje SEO, klíčové metriky webu a další. Plugin používá funkce jako je integrace CDN.

Pro odstranění zdrojů blokujících vykreslování nainstalujte a aktivujte W3 Total Cache a postupujte takto:

• Přejděte do sekce Výkon na hlavním panelu WordPress a klikněte na Obecná nastavení.
• Pod nadpisem Minifikace povolte Minifikaci a jako režim vyberte Ruční.
• Klikněte na Uložit všechna nastavení.

• Zjistěte všechny soubory Javascript a CSS blokující vykreslování pomocí Google PageSpeed Insights.
• Vraťte se do Výkon > Minifikovat.
• V sekci js nejprve klikněte na Povolit pro nastavení JS Minify. V části Operace vyberte možnost Neblokování s typem "odložit" pro značku Před .
• Přejděte do správy souborů JS, vyberte aktivní motiv a klikněte na Přidat skript. Vložte adresy URL JavaScriptu, které Google PageSpeed Insights označil jako problémové.

• Přejděte dolů do sekce CSS. Vyberte svůj motiv a klikněte na Přidat šablonu stylů. Zkopírujte a vložte adresy URL z PageSpeed Insights, které mají problémy.

• Klikněte na tlačítko Uložit nastavení a vymazat mezipaměť.

#2. JCH Optimize

JCH Optimize zlepšuje výkon webu WordPress měřený pomocí Google PageSpeed. Plugin vylepšuje FCP, LCP, SI, CLS, TTI a další. Celková uživatelská zkušenost a výkon webu se tedy výrazně zlepší.

Po instalaci a aktivaci JCH Optimize postupujte podle těchto procesů:

• Přejděte do Nastavení > Optimalizace JCH a přejděte na Nastavení základních funkcí.

• Povolte doručování Optimalizace CSS pro odstranění blokování CSS. Tato funkce automaticky určí základní CSS potřebné k zobrazení obsahu nad okrajem každé stránky. Dále jej vloží do části <head> HTML kódu každé stránky.

• Odkaz na předběžné načtení se použije k asynchronnímu načtení zřetězených souborů CSS.
• Pro odstranění zdrojů blokujících JavaScript je třeba do značky <script> zahrnout atributy async nebo defer. Pokud existují závislosti, může se změnit pořadí načítání.
• Na panelu Optimalizace JCH přejděte do části Automatické nastavení kombinování souborů.
• Klikněte na Optimum, tím aktivujete automaticky Defer/Async Javascript.

• Aktivace optimálního nastavení odloží nebo načte JavaScript asynchronně.
• Pokud jsou soubory JavaScript načítány dynamicky, nelze je odložit.

#3. Speed Booster Pack

Pro zlepšení celkového výkonu a použitelnosti vašeho webu je Speed Booster Pack dalším skvělým pluginem WordPress. Zajistíte si lepší hodnocení ve vyhledávačích, jako je Google. Zvýší se vám provoz i rychlost webu.

Po instalaci a aktivaci Speed Booster postupujte takto:

• Přejděte na Speed Booster Pack na hlavním panelu WordPress.
• Pro odstranění prostředků blokujících JavaScript klikněte na Aktiva a přejděte dolů. Přejděte na možnost Optimalizovat JavaScript. Můžete odložit všechny soubory JS a vložený JS nebo vybrat vlastní nastavení a zahrnout pouze vybrané skripty JS.
• Poté povolte Přesunout JavaScript do zápatí. To přesune všechny soubory JS a vložený JS do spodní části zdrojů vaší stránky.

• Klikněte na možnost Optimalizovat CSS pro odstranění zdrojů blokujících CSS.

• Máte možnost aktivovat Critical CSS, které optimalizuje doručování CSS podle doporučení Google. Tato možnost odloží všechny soubory CSS a vloží styl vašeho obsahu nad okrajem.

Můžete povolit Inline all CSS pro vložení všech souborů CSS do HTML výstupu. Můžete také minifikovat již vložené CSS.

• Uložte všechna nastavení pluginu pro odstranění zdrojů blokujících vykreslování.

#4. Autoptimize

Autoptimize je další plugin pro snadnou optimalizaci a odstranění zdrojů blokujících vykreslování. Plugin zjednodušuje JS a CSS skripty tím, že je přesouvá do zápatí, agreguje, minifikuje a ukládá do mezipaměti. CSS optimalizuje vložením do hlavičky stránky, inline kritického CSS a odkazem na úplný agregovaný CSS. Navíc automaticky minimalizuje HTML pro lepší optimalizaci.

Nainstalujte a aktivujte plugin Autoptimize a poté postupujte podle těchto kroků:

• Přejděte do Nastavení > Autoptimize na řídicím panelu WordPress.
• V sekci Možnosti JavaScriptu zaškrtněte políčko Optimalizovat kód JavaScript.
• V sekci Možnosti CSS zaškrtněte políčko Optimalizovat kód CSS.
• Klikněte na Uložit změny a vyprázdnit mezipaměť.

To obvykle stačí k vyřešení problémů. Výsledek se ale může lišit v závislosti na motivu a pluginech vašeho webu. Znovu spusťte svůj web pomocí PageSpeed Insights pro ověření, zda jsou problémy vyřešeny. Pro další optimalizaci postupujte takto:

• Pod možnostmi JavaScript a CSS máte k dispozici spoustu možností.
• Můžete také povolit Aggregate CSS a Aggregate JS Files.
• Klikněte na Uložit změny.

#5. WP Rocket

WP Rocket je prémiový plugin WordPress pro optimalizaci výkonu a mezipaměti. Zahrnuje i odstranění zdrojů blokujících vykreslování. V důsledku toho se výrazně zvýší výkon webu a skóre PageSpeed.

Po instalaci a aktivaci WP Rocket postupujte podle těchto kroků:

• Klikněte na WP Rocket, přejděte na kartu Optimalizace souborů a do sekce Soubor CSS.
• Povolte doručování Optimalizace CSS.

• Přejděte do sekce Soubor JavaScript a vyberte Načíst JavaScript odloženo. Můžete také vyzkoušet Nouzový režim pro Jaquery, ale pokud to naruší design, vraťte se zpět.
• Uložte změny.

Výhody odstranění zdrojů blokujících vykreslování

Rychlejší načítání stránky má velký vliv na SEO webu. Google preferuje rychlejší weby. Stránky, které dosáhnou skóre nad 90, budou mít vyšší prioritu ve výsledcích vyhledávání. Pomocí výše uvedených pluginů můžete dosáhnout následujícího skóre PageSpeed:

Rychlejší načítání stránky vede k lepšímu zapojení uživatelů. Uživatelé pravděpodobně zůstanou na webu, který se rychle načítá a kde mohou pohodlně nakupovat nebo procházet stránky.

Odstranění zdrojů blokujících vykreslování také zlepší uživatelský zážitek na mobilních zařízeních, kde uživatelé používají pomalejší sítě a mají omezená data.

Závěr

Zmínili jsme manuální i automatizované (pluginové) procesy pro odstranění zdrojů blokujících vykreslování. Pokud chcete optimalizovat každý aspekt výkonu, můžete to udělat ručně. Pokud chcete dosáhnout lepších výsledků s minimální námahou, vyzkoušejte pluginy, které jsme zmínili.

Viděli jsme, že s optimalizací lze dosáhnout vynikajících výsledků. Nyní je řada na vás, abyste optimalizovali svůj web WordPress a poskytli uživatelům výjimečný zážitek s minimálními technickými znalostmi.

Můžete také prozkoumat další tipy, jak urychlit načítání vašich stránek.