Jak vydělat méně požadavků HTTP ve WordPress a GTmetrix YSlow

Na vašem webu WordPress je třeba podat méně požadavků HTTP?


To jen znamená, že musíte snížit počet prvků (požadavků) načtených na vašem webu.

Vyžadujte méně požadavků HTTP

Kombinace souborů CSS a JavaScript může pomoci, ale existují i ​​další optimalizace, které mohou snížit požadavky HTTP, jako je selektivní deaktivace pluginů, které není třeba načítat na konkrétních stránkách, zakázání skriptů a stylů WooCommerce na stránkách, které nejsou elektronickým obchodem, nebo vyhýbání se vysokému CPU pluginy, které generují vysoký počet požadavků a zpomalují váš web.

Méně požadavků HTTP je doporučení v GTmetrix, Pingdom a dalších nástrojích pro testování rychlosti. Níže uvedená doporučení pomohou snížit požadavky a zrychlit váš web.

1. Kombinujte styly CSS + JavaScript

Kombinace stylů CSS + JavaScript znamená, že musíte zkopírovat / vložit vše do souborů CSS do jednoho souboru. To umožňuje prohlížečům, aby namísto více požadavků provedli jeden požadavek na soubor CSS. Většina pluginů pro mezipaměť má možnost kombinovat soubory CSS + JavaScript.

Krok 1: V nastavení pluginu pro mezipaměť vyhledejte možnost kombinovat a minifikovat CSS + JavaScript.

Krok 2: Povolte každé nastavení po jednom a výsledky testu v GTmetrix.

Minifikujte kombinaci souborů CSS

Minifikujte kombinaci souborů JavaScriptu

Krok 3: Zkontrolujte, zda na vašem webu nejsou viditelné chyby. Pokud uvidíte chyby, podívejte se na zdrojový kód, najděte problematické soubory a vyloučte je z nastavení minifikace CSS nebo JavaScript. Pokud například posuvník zmizí při aktivaci určitého nastavení, zkontrolujte soubory posuvníku ve zdrojovém kódu a problematický soubor vyloučte. Pokud nevidíte chyby, není to nutné.

Soubory CSS můžete také ručně kombinovat v aplikaci WordPress v části Vzhled > Editor motivů. Jednoduše zkopírujte a vložte obsah všech souborů do jednoho souboru CSS.

Soubory CSS WordPress

2. Selektivně deaktivujte pluginy

Mnoho pluginů běží na celém vašem webu, dokonce i na stránkách, kde nejsou potřeba.

Kontaktní formuláře, sociální sdílení, bohatý úryvek, posuvník a některé další doplňky je třeba načíst pouze u určitých typů obsahu. Můžete je zakázat kdekoli jinde pomocí Vyčištění aktiv.

Zakázáním pluginů na stránkách, na kterých se nemusí načítat, se projeví méně požadavků HTTP. Toto není omezeno na pluginy; skripty a styly lze také zakázat na určitých stránkách (např. skripty, styly, fragmenty košíku lze zakázat na stránkách, které nejsou předmětem elektronického obchodování).

Krok 1: Nainstalujte nástroj CleanUp nebo Perfmatters (oba vám umožňují selektivně deaktivovat doplňky).

Krok 2: Upravte stránku nebo příspěvek, přejděte dolů do části Vyčištění aktiv a zkontrolujte, které soubory CSS + JavaScript se na stránku načítají. Mohou to být pluginy, motivy nebo externí skripty.

Zakázat externí skripty WordPress

Krok 3: Zakažte všechny doplňky a požadavky, které na této stránce nepotřebujete. Můžete je zakázat na jedné stránce, na celém svém webu, podle typu příspěvku, nebo je pomocí RegEx (regulární výrazy) zakázat na konkrétních vzorech adres URL.. RegEx je součástí pouze s Perfmatters nebo Asset CleanUp Pro.

3. Zakažte skripty, styly, fragmenty vozíku WooCommerce

Webové stránky WooCommerce přirozeně generují více požadavků HTTP.

Nejen, že obvykle vyžadují více pluginů, ale také načítají další skripty WooCommerce, styly, a fragmenty vozíku. Stejně jako v předchozím kroku můžete selektivně deaktivovat pluginy, můžete také selektivně deaktivovat načítání požadavků WooCommerce na celém vašem webu..

Pomocí nástroje CleanUp nebo Perfmatters Asset je deaktivujte na stránkách, kde se nemusí načítat:

Vyčištění aktiv WooCommerce

Perfmatters je také umožňuje zakázat jedním kliknutím:

optimalizace woocommerce perfmatters

4. Vyvarujte se vysokých pluginů CPU

Vysoké pluginy CPU mohou generovat tunu požadavků HTTP.

Jedná se obvykle o sociální sdílení, statistiku (analytiku), posuvníky, portfolia, tvůrce stránek, kalendáře, chat a pluginy kontaktních formulářů. V zásadě se vyhněte jakémukoli pluginu, který stahuje externí požadavky z vnějších webů, spouští probíhající procesy nebo se načte jen dlouhou dobu.

Krok 1: Zkontrolujte, zda jsou v GTmetrix Waterfall nebo Sledování dotazů.

Plugin Slow-WordPress

Krok 2: Vyhněte se známým vysokým pluginům CPU.

  1. Přidat toto
  2. Sledování podvodných kliknutí AdSense
  3. All-In-One Kalendář událostí
  4. Zálohujte kamaráda
  5. Beaver Builder
  6. Lepší soubory WordPress Google XML Sitemap
  7. Kontrola přerušeného odkazu (použijte kontrolu odkazu Dr. Link)
  8. Neustálý kontakt pro WordPress
  9. Kontaktní formulář 7
  10. Zobrazit všech 65 pomalých pluginů

Krok 3: Nahraďte pomalé pluginy rychlejšími a lehčími pluginy. Vyžaduje se výzkum a testování.

5. Nahraďte pluginy kódem

Mnoho pluginů se můžete vyhnout jejich nahrazením kódem.

Příklady:

  • Písma Google: hostujte svá písma místně
  • Sledovací kód Google Analytics: vložte ručně
  • Obsah: vytvořte jej ručně v HTML + CSS
  • Vložené tweety nebo Mapy Google: namísto toho si udělejte snímek obrazovky
  • Vložený widget Facebook: nahradit skutečným widgetem Facebook

Konsolidace pluginů také pomáhá. Jedním z klasických příkladů je použití WP Rocket, který přichází s hostováním písem, analytikou a Facebook Pixel místně, líným načítáním obrázků + videí, čištěním databáze, předběžným načítáním, kontrolou srdečního rytmu a integrací Cloudflare a více CDN. U ostatních pluginů pro mezipaměť (protože většina z nich tyto funkce nemá), budete muset nainstalovat 6-7 dalších pluginů, abyste dosáhli těchto optimalizací rychlosti, když jsou vestavěny do WP Rocket.

6. Odstraňte externí skripty

Externí skripty jsou cokoli, co přitahuje požadavky z externích webů.

Písma Google lze kombinovat do 1 souboru. Videa lze načítat líně a prvek iframe nahradit obrázkem náhledu. Mnoho skriptů lze optimalizovat, jiné ne. Níže uvádíme několik příkladů.

  • Písma Google: kombinujte písma a hostujte je místně pomocí pluginů jako WP Rocket, Autoptimize, OMGF, Self-Hosted Google Fonts a Asset CleanUp.
  • Google Analytics: kód sledování hostitele lokálně ve WP Rocket / CAOS Analytics.
  • Google AdSense: načtěte asynchronně a zkuste Cloudflare Rocket Loader.
  • Google mapy: udělejte sceenshot mapy Google a přidejte odkaz na trasu jízdy, když lidé kliknou na obrázek (to vypadá stejně dobře jako mapa)!
  • Správce značek Google: obvykle se snaží kombinovat více skriptů více než užitku. Měl by být používán pouze na velkých, neoficiálních stránkách.
  • Vložená videa: použijte WP Rocket nebo WP YouTube Lyte pro líné načítání videí a nahraďte iframe obrázkem náhledu (videa jsou velmi těžkým prvkem).
  • Vložené widgety + příspěvky: pořizovat snímky obrazovky místo jejich vkládání.
  • Facebook Pixel: WP Rocket může přidat mezipaměť prohlížeče na Facebook Pixel.
  • Gravatary: kromě deaktivace gravantářů pro mě nic nefungovalo (WP Rocket je nepoužívá ani na svém blogu). Můžete však zkusit Harrys, FV nebo Optimum Gravatar Cache, nebo zkusit rozbít nebo skrýt rozšiřitelné komentáře.
  • Pluginy pro sociální sdílení: nechvalně generovat žádosti z Facebooku, Twitteru a sociálních sítí, aby se obnovovaly podobné počty. Zkuste rychlejší plugin jako Sociální Mops, Mashsharer, Sociální SnapAddToAny, Sociální sdílení WP, nebo Snadné sociální sdílení

7. Kombinujte písma Google

Písma Google lze kombinovat a vygenerovat 1 požadavek místo více požadavků.

Google-Fonts-GTmetrix

Následující doplňky mají možnosti pro optimalizaci písem Google:

  • WP Rocket
  • Vyčištění aktiv
  • Automatická aktualizace
  • OMGF

Nejlepší metodou je však lokální hostování písem Google. To zahrnuje stahování vašich písem přímo z webu Google Fonts, přičemž je minimální počet písem a jejich hmotnost. Dále použijte nástroj jako Transfonter nebo převést písma na webové soubory písem. Poté nahrajete nové soubory webových písem do složky wp-content / uploads, přidáte vlastní písmo do CSS a vyzkoušíte, zda funguje. Znovu si prohlédněte tento odkaz, kde naleznete kompletní výuku.

Převod písma Transfonter-Google-Font

7. Minifikujte HTML, CSS, JavaScript

Minifikování souborů se obvykle provádí pomocí pluginu mezipaměti (viz krok 1).

Ale někdy to může poškodit váš web. V takovém případě byste museli každé nastavení otestovat jeden po druhém, zkontrolovat problematické soubory ve zdrojovém kódu a poté tyto soubory vyloučit z minifikace pomocí pluginu pro mezipaměť. Pokud nevidíte viditelné chyby, nemusíte to dělat.

8. Optimalizujte doručování CSS

To by mělo opravit prostředky blokující vykreslení položka v nástroji PageSpeed ​​Insights.

WP Rocket, Autoptimize a další podobné pluginy by měly mít možnost optimalizovat poskytování CSS. Jednoduše přejděte do nastavení a ujistěte se, že je toto povoleno a mělo by to opravit.

Optimalizujte doručování CSS

9. Odložte / načtěte kombinované soubory JavaScript asynchronně

Asynchronní JavaScript znamená načtení souborů po stránka se stahuje.

To lze provést pomocí WP Rocket nebo Async JavaScript a měl by opravit odebrat položku JavaScriptu blokující vykreslení. Async JavaScript vám dává plnou kontrolu nad skripty, ke kterým chcete přidat atribut „async“ nebo „odložit“, zatímco raketa WP Rocket automaticky blokuje JavaScript jediným kliknutím.

Soubory JavaScript

10. Lazy Load Videos

Vložená videa jsou externí zdroje, které generují požadavky HTTP.

Nabití může trvat 2+ sekundy! I když je nemůžete úplně eliminovat, můžete zpoždění načítání videí dokud uživatelé neposouvají dolů (líné zatížení) a neklikají na tlačítko přehrát.

Zde máte několik možností: pomocí nástroje WP Rocket můžete povolit líné načítání a nahradit prvek iframe YouTube obrázkem náhledu. Ale pokud nemáte WP Rocket, můžete buď vyzkoušet Doplněk WP YouTube Lyte nebo to následujte výukový program na lehkých vložkách YouTube. Oba fungují dobře.

Zde je příklad (a skvělé video o rychlosti WordPress):

11. Přidejte CDN

CDN mohou pomoci vytvořit méně požadavků HTTP.

Namísto toho, aby váš původní server odpověděl na požadavek, datová centra CDN uvolní šířku pásma a zároveň zmírní zatížení původního serveru. Cloudflare je zdarma, takže je to bez přemýšlení.

Více CDN = více datových center = rychlejší doručování obsahu a další vykládání zdrojů. Mnoho lidí začíná s Cloudflare a nakonec se podívá do StackPath při použití více CDN (v současné době používám oba). KeyCDN je také dobrý. Tomu se říká „řetěz“ CDN.

Nastavení více CDN
S Cloudflare vám přiřadí 2 jmenníky, které změníte v registru své domény. U jiných CDN, jako je StackPath a KeyCDN, vám přidělí adresu CDN, kterou vložíte do pole CDN URL ve vašem mezipaměti (většina z nich ji má), nebo používají CDN Enabler.

Více CDN

12. Minimalizace přesměrování

Zbytečné přesměrování může způsobit další požadavky HTTP.

Musíte se podívat na přehled GTmetrix a zjistit, co způsobuje tuto chybu. Je generován externím skriptem nebo pluginem na vašem webu? Vyzkoušeli jste optimalizaci tohoto skriptu nebo hledali lehčí plugin? Je to proto, že jste změnili verzi vaší domény na jinou než WWW nebo HTTPS, ale neaktualizovali jste všechny odkazy / obrázky na vašem webu, aby odrážely novou verzi?

Minimalizujte chyby přesměrování

Časté příčiny

  • Špatné doplňky
  • Externí skripty
  • Změněno na WWW vs Non-WWW, ale neaktualizované odkazy
  • Změněno na HTTPS vs. non-HTTPS, ale neaktualizované odkazy

13. Optimalizace obrázků

Chcete-li snížit požadavky HTTP způsobené obrázky, existují 3 primární způsoby, jak optimalizovat obrázky:

Served Scaled Images: změna velikosti velkých obrázků tak, aby byly menší. GTmetrix vám řekne, které obrázky jsou příliš velké a správné rozměry, na které by se měly oříznout / změnit jejich velikost. Zkuste vytvořit podváděcí list pro dimenzi obrázku změřením rozměrů vašich posuvníků, obrázků blogu v plné šířce, widgetů a dalších oblastí vašeho webu. Před odesláním nezapomeňte změnit velikost obrázků na správné rozměry. Pokud tak učiníte, neměli byste nikdy zobrazovat chyby v měřítku obrázku.

Optimalizace obrázků (bezeztrátová komprese): ke komprimaci obrázků použijte plugin jako ShortPixel (doporučeno), Smush nebo Imagify. Přestože tyto pluginy říkají bezeztrátové, někdy si můžete všimnout malé ztráty kvality. Proto je nejlepší zálohovat obrázky a otestovat několik z nich před hromadnou optimalizací všech obrázků na vašem webu, abyste se ujistili, že jste s kvalitou spokojeni.

Určete rozměry obrázku: přidejte do HTML nebo CSS obrázku šířku + výšku. To se provádí automaticky v aplikaci Visual Editor, ale ne ve vlastním HTML, v některých tvůrcích stránek a případně v dalších oblastech webu WordPress. GTmetrix vám ukáže, které obrázky mají tyto chyby, a poskytne vám jejich správné rozměry. Chcete-li chybu opravit, budete muset najít obrázek na hlavním panelu WordPress, upravit HTML nebo CSS a poté přidat šířku + výšku.

Stále je třeba vydělávat méně požadavků HTTP?

Pokud stále potřebujete pomoc, zanechte mi komentář. WordPress urychluje skupinu Facebook je také užitečné, nebo si nás můžete najmout na služby WordPress s rychlostí před + po zprávách GTmetrix.

WordPress urychluje skupinu Facebook

Často kladené otázky

&# x1f680; Co způsobuje požadavky HTTP?

Požadavky HTTP jsou cokoli, co vytváří požadavek na server (například jeden obrázek vytvoří 1 požadavek). Karta Vodopád GTmetrix vám řekne všechny požadavky na načítání na stránku.

&# x1f680; Co je 5 věcí, které můžete snížit požadavky HTTP?

5 jednoduchých věcí, které můžete udělat, je kombinovat soubory CSS + JavaScript, líné načítání obrázků a videí, vyhýbat se našemu seznamu vysokých pluginů pro CPU, selektivně deaktivovat pluginy z určitých stránek / příspěvků pomocí Perfmatters nebo Asset CleanUp a optimalizovat vaše písma.

&# x1f680; Pomůže zásuvný modul mezipaměti snížit požadavky HTTP?

Ano, dobrý plugin pro mezipaměť by měl pomoci minimalizovat a kombinovat soubory a také snížit požadavky HTTP, pokud je správně nakonfigurován. Mám návody pro téměř každý plugin pro mezipaměť.

&# x1f680; Oprava dalších položek GTmetrix sníží požadavky HTTP?

Ano, v mnoha případech to bude obzvláště minimalizovat a kombinovat soubory, eliminovat chyby přesměrování a použití CDN může také pomoci.

&# x1f680; Který plugin pro mezipaměť snižuje požadavky HTTP nejvíce a jak jej konfigurovat?

Doporučuji WP Rocket, který byl ve většině průzkumů na Facebooku hodnocen jako první a má více funkcí pro optimalizaci rychlosti než většina pluginů pro mezipaměť, což je důvod, proč v GTmetrix obvykle přináší lepší skóre a časy načítání. Podívejte se na můj tutoriál o konfiguraci nastavení WP Rocket.

Děkuji za přečtení :)

Na zdraví,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map