Chcete eliminovat soubory (CSS a JS), které blokují načítání stránek na WordPress? Pokud testujete svůj web na Google Insights PageSpeed, pravděpodobně uvidíte návrh na eliminaci skriptů, které blokují načítání stránek. V tomto výukovém programu vám ukážeme, jak opravit tyto soubory, které blokují načítání vašich stránek, a zlepšit tak skóre Google PageSpeed.

Jak opravit vykreslování stránek wordpress

Co blokuje načítání stránek?

Každý web WordPress má téma a doplňky, které přidávají soubory JavaScript a CSS na konec a před tím, než je stránka viditelná v prohlížeči. Tyto skripty mohou prodloužit dobu načítání stránky vašeho webu a mohou také blokovat vykreslení stránky.

Prohlížeč uživatele bude muset před načtením obsahu stránky načíst skripty a CSS. To znamená, že uživatelé na pomalejším připojení budou muset na zobrazení stránky počkat ještě několik milisekund.

Majitelé stránek, kteří se snaží dosáhnout dobrého skóre Google PageSpeed, budou muset tento problém vyřešit.

1 - Jak opravit vykreslení stránky pomocí automatické optimalizace

Tato metoda je jednodušší a doporučená pro většinu uživatelů.

První věc, kterou musíte udělat, je nainstalovat a aktivovat plugin “ Autoptimize “. Další podrobnosti viz náš průvodce krok za krokem, jak nainstalovat plugin WordPress.

Po aktivaci pluginu musíte navštívit stránku „ Nastavení> Automaticky optimalizovat Konfigurace nastavení pluginu.

Automaticky optimalizuje nastavení nastavení wordpressu

Můžete začít zaškrtnutím políčka JavaScript a CSS a poté kliknout na tlačítko „Uložit změny“.

Nyní můžete otestovat svůj Webové stránky pomocí nástroje PageSpeed. Pokud stále existují skripty blokující vykreslování stránky, musíte se vrátit na stránku nastavení pluginu a kliknout na tlačítko „Zobrazit rozšířená nastavení“ nahoře.

Automaticky optimalizovat nastavení pluginu

Zde můžete povolit pluginu zahrnout vložené JS a odebrat skripty, které jsou ve výchozím nastavení vyloučeny, například „seal.js“ nebo „jquery.js“.

Poté přejděte dolů na možnost CSS a povolte pluginu kombinovat všechny soubory CSS.

Kliknutím na tlačítko „Uložit změny a vyprázdnit mezipaměť“ uložíte změny a vymazat mezipaměť plugin.

Až budete hotovi, pokračujte a zkontrolujte své Webové stránky opět pomocí nástroje PageSpeed.

Po optimalizaci svých skriptů JavaScripts nebo CSS pečlivě otestujte své stránky a zjistěte, že vše funguje dobře.

2 - Oprava vykreslování souborů pomocí W3 Total Cache

Tato metoda vyžaduje trochu více práce a je doporučena pro ty, kteří již mají W3 Total Cache webové stránky.

Nejprve budete muset nainstalovat a aktivovat plugin W3 Total Cache. Pokud potřebuješ pomoc, Podívejte se na naši kompletní průvodce W3 Total Cache.

Poté musíte navštívit „Výkon> Obecná nastavení“ a posunout se dolů do sekce „minify“.

Minifikace wordpress plugin w3 celková mezipaměť

Nejprve musíte zaškrtnout políčko „Povolit“ a poté vybrat možnost „Ruční“ pro možnost režimu minifikace.

Klikněte na tlačítko Uložte všechna nastavení Uložení nastavení.

Pak je třeba přidat skripty a CSS, které chcete zmenšit.

Můžete získat adresy URL všech skriptů a stylů, které musí být kombinovány podle Statistik Google PageSpeed ​​Insights.

Pod návrhy, kde se říká, " Zlikvidovat činí blokování JavaScript a CSS ", Klikněte na" Zobrazit, jak vyřešit ". Zobrazí se vám seznam skriptů a šablon stylů.

Najeďte myší na skript a zobrazí se vám úplná adresa URL. Tuto adresu URL můžete vybrat a pomocí klávesové zkratky CTRL + C na klávesnici (Command + C v systému Mac) adresu zkopírovat.

Nyní přejděte do administrátorské desky WordPress a přejděte na výkon > minifier ".

Nejprve musíte přidat soubory JavaScriptu, které chcete komprimovat. Přejděte dolů do sekce JS a poté pod sadou „operace v zónách“ typu vloženého do „neblokujte pomocí„ asynchronizace “pro sekci .

Načítání souborů s celkovou kompresí mezipaměti w3

Pak musíte kliknout na tlačítko Přidat skript Poté začněte přidávat adresy URL skriptů, které jste zkopírovali z nástroje Google PageSpeed.

Až budete hotovi, přejděte dolů do sekce CSS a klikněte na tlačítko „Přidat šablonu stylů“. Nyní začněte přidávat adresy URL stylů, které jste zkopírovali pomocí nástroje Google PageSpeed.

Celková mezipaměť css w3 komprese souborů

Nyní klikněte na tlačítko Uložit nastavení a vyčistit mezipaměť Uložení nastavení.

Navštivte nástroj Google PageSpeed ​​a znovu otestujte svůj web.

Nezapomeňte také pečlivě otestovat svůj web, abyste zjistili, že vše funguje dobře.

To je pro tento tutoriál vše, doufám, že vám umožní zlepšit výkon vašeho WordPress blog.