Chcete vyloučit blokování vykreslování JavaScriptu a CSS ve WordPressu?
Pokud testujete svůj web na základě statistik Google PageSpeed, pravděpodobně uvidíte návrh na odstranění bloků vykreslování skriptů a CSS. Neposkytuje však podrobnosti o tom, jak to provést na vašem webu WordPress.
V tomto článku vám ukážeme, jak snadno opravit blokování vykreslování skriptu JavaScript a CSS ve WordPressu a zlepšit tak skóre Google PageSpeed.
Ale předtím se společně objevíme Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu.
Co je blokování vykreslování skriptů JavaScript a CSS?
Blokování vykreslení JavaScriptu a CSS jsou soubory, které zabraňují webové stránce zobrazit webovou stránku před jejich načtením.
Každý web WordPress má téma a doplňky, které přidávají soubory JavaScriptu a CSS na rozhraní vašeho webu. Tyto skripty mohou zvýšit dobu načítání vašeho webu a mohou také blokovat vykreslení stránky.
Prohlížeč uživatele bude muset načíst tyto skripty a CSS před načtením zbytku kódu HTML na stránku. To znamená, že uživatelé na pomalejším připojení budou muset na zobrazení stránky čekat několik milisekund.
Tyto skripty a šablony stylů se nazývají blokátory vykreslení JavaScriptu a CSS.
Majitelé webových stránek, kteří se snaží dosáhnout skóre 100 PageSpeed Google, budou muset toto opravit, aby dosáhli tohoto dokonalého skóre.
Co je skóre Google PageSpeed?
Google PageSpeed Insights je nástroj pro testování rychlosti vytvořený společností Google, který pomáhá majitelům webových stránek optimalizovat a testovat jejich webové stránky. Tento nástroj otestuje vaše webové stránky podle pokynů společnosti Google pro rychlost a nabízí návrhy na zlepšení doby načítání webové stránky.
Ukazuje vám skóre na základě počtu pravidel, která váš web prochází. Většina webových stránek je mezi 50 a 70. Někteří majitelé webových stránek však cítí tlak dosáhnout 100.
Opravdu potřebujete skóre „100“ na Google PageSpeed?
Účel Statistiky Google PageSpeed je poskytnout vám pokyny ke zvýšení rychlosti a výkonu vašeho webu. Nemusíte přísně dodržovat tato pravidla.
Pamatujte, že rychlost je jen jednou z mnoha metrik SEO, které pomáhají Googlu určit, jak hodnotit váš web. Důvodová rychlost je tak důležitá, že se zlepšuje User Experience na vašem webu.
Lepší uživatelské prostředí vyžaduje mnohem více než rychlost. Musíte také poskytnout užitečné informace, lepší uživatelské rozhraní a zapojit obsah pomocí textu, obrázků a videí.
Vaším cílem by mělo být vytvoření rychlého webu, který nabízí skvělý uživatelský dojem.
Během posledního redizajnu BlogPasCher jsme se zaměřili na rychlost a zlepšili uživatelský komfort.
Doporučujeme, abyste jako návrh použili pravidla služby Google Pagespeed. Pokud je můžete snadno implementovat, aniž byste tím narušili uživatelský dojem, je to skvělé. Pokud ne, měli byste se snažit dělat co nejvíce, a pak se nemusíte starat o zbytek.
Díky tomu se pojďme podívat na to, co můžete udělat pro opravu blokování vykreslování JavaScriptu a CSS ve WordPressu.
Pokryjeme dvě metody, které tento problém vyřeší. Můžete si vybrat ten, který nejlépe funguje na vašem webu.
1. Opravte skripty blokování vykreslení a CSS pomocí WP Rocket
Pro tuto metodu použijeme plugin WP Rocket. Tohle je nejlepší WordPress mezipaměť plugin na trhu a umožňuje vám rychle zlepšit výkon vašich webových stránek bez jakýchkoli technických nebo složitých dovedností.
Nejprve musíte nainstalovat a aktivovat plugin WP Rocket. Další podrobnosti naleznete v našem průvodci krok za krokem, jak nainstalovat plugin WordPress..
WP Rocket aktivuje svou mezipaměť s optimálním nastavením. Ve výchozím nastavení nepovoluje možnosti optimalizace JavaScriptu a CSS. Tyto optimalizace mohou potenciálně ovlivnitvzhled vašeho webu nebo určité funkce, proto vám plugin umožňuje povolit tato nastavení jako možnost.
K tomu musíte pokračovat Nastavení »WP Rocket, poté přepněte naOptimalizace souborů '. Odtud přejděte dolů do sekce Soubory CSS a zaškrtněte políčka Minifikujte CSS, Kombinujte soubory CSS et Optimalizujte doručování CSS.
Poznámka : WP Rocket se pokusí minimalizovat všechny vaše CSS soubory, zkombinovat je a načíst pouze potřebné CSS pro viditelnou část vašeho webu. To by mohlo ovlivnitvzhled vašeho webu, takže byste měli svůj web důkladně otestovat na více zařízeních a velikostech obrazovky.
Pak je třeba se posunout do sekce Soubory JavaScript. Odtud můžete zaškrtnout všechny možnosti maximálního zvýšení výkonu.
Soubory JavaScript můžete minifikovat a kombinovat stejně jako soubory CSS.
Můžete také zabránit WordPress v nahrávání souboru. jQuery Migrace. Toto je skript, který WordPress načítá, aby poskytoval kompatibilitu pro pluginy a motivy pomocí starších verzí jQuery.
Většina webů tento soubor nepotřebuje, ale je vhodné zkontrolovat web, abyste se ujistili, že jeho odstranění nemá vliv na vaše téma nebo doplňky.
Poté přejděte o něco dále dolů a zkontrolujte možnosti 'Načíst JavaScript odložený'a'Nouzový režim pro jQuery".
Tyto možnosti zpožďují načítání nepodstatného JavaScriptu a jQuery Safe Mode umožňuje načíst jQuery pro témata, která jej mohou použít inline.
Nezapomeňte kliknout na tlačítko Uložit změny a uložit nastavení.
Poté můžete vymazat mezipaměť ve WP Rocket a poté znovu otestovat svůj web pomocí funkce Statistiky rychlosti stránky Google.
Na našem testovacím webu jsme dokázali dosáhnout 100% skóre na stolních počítačích a problém uvíznutí vykreslení byl vyřešen v skóre mobilních i stolních počítačů.
2. Opravte blokování vykreslování JavaScriptu a CSS pomocí autoptimize
Pro tuto metodu použijeme jiný plugin vytvořený speciálně pro zlepšení doručování souborů CSS a JS na vašem webu. Zatímco tento plugin provede práci, postrádá další výkonné funkce, které nabízí WP Rocket.
První věc, kterou musíte udělat, je nainstalovat a aktivovat plugin Autoptimize. Další podrobnosti naleznete v našem podrobném průvodci o tom, jak nainstalovat plugin WordPress.
Při aktivaci musíte stránku navštívit Nastavení »Autoptimize konfigurovat nastavení pluginu.
Nejprve musíte zaškrtnout možnost 'Optimalizujte kód JavaScript„pod blokem JavaScript možnosti. Ujistěte se, že není zaškrtnuta možnost „Agregovat všechny propojené soubory JS“.
Poté přejděte dolů do oblasti Možnosti CSS a zaškrtněte možnost ' Optimalizace kódu CSS?'. Ujistěte se, že možnost 'Agregujte všechny propojené soubory CSS„není zaškrtnuto.
Nyní můžete kliknutím na tlačítko „Uložit změny a vymazat mezipaměť“ uložit svá nastavení.
Pokračujte a vyzkoušejte svůj web pomocí funkce Page Speed Insights. Na našem demonstračním webu se nám podařilo vyřešit problém s uvíznutím vykreslení pomocí těchto základních nastavení.
Pokud stále existují skripty blokující vykreslení, musíte se vrátit na stránku nastavení pluginu a podívat se na možnosti JavaScript a CSS.
Například můžete povolit, aby plugin zahrnoval JS Inline a odstraňoval skripty, které jsou ve výchozím nastavení vyloučeny, například seal.js nebo jquery.js.
Kliknutím na tlačítko „Uložit změny a vymazat mezipaměť“ uložíte změny a vymažete mezipaměť pluginu.
Až budete hotovi, pokračujte a podívejte se na svůj web znovu pomocí nástroje Page Speed Insights.
Jak to funguje?
Automatická aktualizace svazků všech souborů JavaScript a CSS. Poté vytvoří zkrácené soubory CSS a JavaScripts a zobrazuje synchronizované nebo odložené kopie vašich webových stránek v mezipaměti.
To vám umožní vyřešit problém blokování vizualizace skripty a styly blokování. Mějte však prosím na paměti, že to může mít vliv i na výkon respvzhled vašeho webu.
pomoci
V závislosti na tom, jak pluginy a vaše téma WordPress používají JavaScript a CSS, může být docela obtížné úplně vyřešit všechny problémy s blokování z JavaScript a CSS vykreslování.
I když výše uvedené nástroje mohou pomoci, vaše pluginy mohou pro správnou funkci potřebovat určité skripty na jiné úrovni priority. V takovém případě mohou výše uvedená řešení narušit funkčnost těchto pluginů nebo se mohou chovat neočekávaně.
Google vám stále může ukázat některé problémy, jako je optimalizace doručování CSS. WP Rocket vám to umožní opravit ručně přidáním kritického CSS potřebného k dokonalému zobrazení motivu WordPress.
Může však být docela obtížné vědět, jaký kód CSS budete muset zobrazit.
Objevte také některá témata a prémiové doplňky WordPress
Pomocí dalších pluginů WordPress můžete dát moderní vzhled a optimalizovat přilnavost vašeho blogu nebo webu.
Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.
1. WordPress Speed Optimization Plugin
Snažíte se spravovat více pluginů pro optimalizaci rychlosti webových stránek? Bojíte se, že brání rychlosti provádění vašeho webu? pak bude tento plugin WordPress dokonalým řešením pro všechny vaše starosti.
Tento plugin je navržen tak, aby vám poskytl funkčnost téměř 6-8 různých pluginů WordPress. Musíte jej pouze nainstalovat a nakonfigurovat, abyste viděli výrazné zlepšení v načítání vašich stránek.
Rádi bychom zdůraznili, že to není plugin pro mezipaměť nebo CDN, ale výsledek, který nabízí, je přesto působivý. Neváhejte vyzkoušet tento plugin WordPress, abyste zjistili, čeho je schopen.
Stáhnout | Demo | Web hosting
2. Social Share & Locker Pro
Doplněk Social Share & Locker Pro byl navržen tak, aby pomohl vašemu webu lépe se zviditelnit na sociálních sítích. Pouhými několika kliknutími můžete buď nastavit polohu svých sociálních ikon, nebo zamknout obsah požadováním sdílení na jedné ze sociálních sítí, které nabízíte.
Máte předdefinovaná témata 10 a to by mělo pokrývat nejčastější přání. Všechna její témata jsou sítnice a divy práce.
Se Social Share & Locker Pro budete také moci zobrazit celý název sociálních sítí nebo pouze ikonu. Záleží na vašem designu, dostupném prostoru nebo vašich přáních.
Stáhnout | Demo | Web hosting
3. WordPress PDF Obrázky Lightbox
WordPress PDF Lightbox je a Rozšíření WordPress který umožňuje vytvářet prohlížeče souborů PDF. Prohlížeč PDF je kolekce fotografií, které lze uložit jako PDF.
S tímto rozšířením můžete vytvořit tolik prohlížečů PDF, kolik chcete. Pro každého diváka může správce nastavit některé možnosti, jako například:
- Titulní obrázek: který bude přidán jako první stránka PDF vytvořeného uživatelem
- Maximální počet obrázků na diváka
- Vodoznak image: aplikovat na stránkách PDF
- Odeslání e-mailem: pokud je tato funkce aktivována, a kontaktní formulář nabídne hned po galerii obrázků. Prostřednictvím tohoto formuláře budou moci uživatelé poslat vytvořený PDF e-mailem komukoli.
Stáhnout | Demo | Web hosting
Doporučené zdroje
Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.
- Doplňky 10 WordPress ke zlepšení SEO vašeho webu
- 5 premium WordPress pluginy pro optimalizaci vašich kategorií
- 10 pluginů WordPress pro převod měny
- 10 WordPress pluginy integrovat audio přehrávač na webové stránky
Proč investovat do čističky vzduchu?
Tady ! To je pro tento tutoriál vše. Doufáme, že vám tento článek pomohl naučit se, jak opravit blokování vykreslování JavaScriptu a CSS ve WordPressu. Můžete také vidět naše dokonalý průvodce, jak zrychlit výkon WordPress pro začátečníky.
Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.
Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích. A pokud máte nějaké návrhy nebo připomínky, nechte je v naší sekci commentaires.
...
