Jak snížit požadavky HTTP / S ve WordPressu

Jak snížit požadavky HTTP / S ve WordPressu

Zde je příběh, který se vám bude líbit, pokud chcete zrychlit svůj web WordPress.


Jednoho dne jsem si vytvořil lesklý web. Všechno jsem vyšel a přidal jsem WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, živé rádio (ach ano, udělal jsem), Cookie Notice, sociální média a spoustu dalších pluginů.

Stejně jako vy, i já jsem se snažil zapůsobit na své návštěvníky, tak jsem si myslel. Ale pak se věci nesnesitelně zpomalily. Po hodně úzkosti jsem vystřelil GTMetrix vyplavit problém.

K mému zděšení jsem viděl toto:

Výsledky testu rychlosti gtmetrix

Byl jsem ohromen? Peklo na NAW! Chtěl jsem skórovat perfektní A a zkrátit dobu načítání stránky na méně než dvě sekundy.

Takže jsem stiskl tlačítko znovu vyzkoušet, ale hádejte co? Stále stejný špatný výsledek. Byl jsem zděšen, dokonce naštvaný. Ale nevzdávám se snadno, protože taková věc je nepřijatelná.

Víš, co jsem udělal dál? Web jsem testoval na Pingdom protože GTMetrix to může sát. Níže jsou však opět sklíčené výsledky:

výsledky testů rychlosti nástroje pingdom

Byl jsem podrážděný. Příslovným trnem v mém těle byly nepochopitelné HTTP požadavky, které jsem viděl, protože jsem dokázal rychle vyřešit mnoho dalších problémů.

Aby toho nebylo málo, používal jsem téma elektronického obchodování WordPress, které načítalo miliarda prvky k vytvoření domovské stránky. Na mou obranu to vypadalo neuvěřitelně. Někteří uživatelé souhlasili s tím, že design byl na místě, takže jo, já jsem nespadl na trik sám ��

Skvělý vizuální design a nízké rychlosti však nejdou ruku v ruce. Potřeboval jsem řešení a rychle.

Jak mohu snížit požadavky HTTP na svém webu WordPress?

Pokaždé, když navštívíte web WordPress, přesune se mezi prohlížečem a servery webu mnoho dat. Jinými slovy, WordPress vytváří požadavky HTTP na různé servery, aby vytvořil, co uživatelé uvidí, když načtou váš web.

Pokud váš web WordPress vyžaduje načtení mnoha prvků, budete mít více požadavků HTTP a naopak. Další požadavky HTTP znamenají pomalý web, špatnou uživatelskou zkušenost (UX), špatné skóre SEO a nízké míry konverze.

Webové stránky WordPress jsou obvykle dynamické, což znamená, že vykreslení webu v prohlížeči vyžaduje mnoho různých částí. Dobrou zprávou je, že můžete snížit požadavky HTTP a výrazně zrychlit svůj web.

A v dnešním příspěvku se přesně naučíte!

Zprávy od GTMetrix a Pingdom obvykle ukazují, kde problém leží. Otestujte proto svůj web pomocí obou nástrojů a zjistěte oblasti, které musíte vylepšit. Díky připraveným přehledům můžete snížit požadavky HTTP / S a zrychlit váš web WordPress.

Krok 1: Declutter

Kluci, pokud máte na webu WordPress hodně věcí, budete mít příliš mnoho požadavků HTTP. Je to bez přemýšlení. Prvním krokem ke snížení požadavků HTTP je odmítnutí.

Tím myslím tím, že se zbavím všech pluginů, které nepotřebuješ. Doplňky WordPress přicházejí se spoustou souborů, ať už jde o PHP, CSS nebo JavaScript (JS). Každý soubor, který spustí každý plugin, vytvoří požadavek HTTP.

Pokud máte spoustu pluginů, budete mít rozhodně více požadavků HTTP. Čím méně pluginů, tím méně požadavků. Je to jednoduché.

Co dělat?

Proveďte audit svých pluginů. Které pluginy musíte mít k provozování svých webových stránek? Existují doplňky, které nepotřebujete? Máte pluginy, které se napojují na servery třetích stran? Zvládnete to bez těchto pluginů?

Chcete-li snížit požadavky HTTP, odinstalujte všechny potřebné doplňky, které nepotřebujete. Pokud potřebujete plugin občas, nainstalujte jej pouze tehdy, když jej potřebujete. Poté plugin odinstalujte.

Totéž platí pro témata a obsah WordPress, který nepoužíváte. Vyčistěte všechny ty věci. Odstraňte vše, co nepotřebujete; je to dobré pro rychlost a bezpečnost vašeho webu.

Můžete jít další kilometr a načítat pluginy selektivně. Pokud například potřebujete pouze načíst kontaktní formulář 7 na svou kontaktní stránku, můžete zastavit načítání dalších pluginů na konkrétní stránku..

To by bylo úžasné, nesouhlasíte? A myslet si, že potřebuješ jen Doplněk CleanUp WordPress plugin.

Doplněk WU CleanUp WordPress

Plugin je snadno použitelný a docela efektivní. Nebo jak uvádí vývojář:

„Asset CleanUp“ prohledá vaši stránku a detekuje veškerá načtená aktiva. Při úpravě stránky / příspěvku musíte pouze vybrat CSS / JS, které není nutné načíst, čímž se sníží nadýmání.

Vyčistěte již nainstalovanou instalaci; zbavte se nevyžádané pošty – komentář obsahuje spam. Jo jo, odstranit nefunkční odkazy a optimalizovat svou databázi, zatímco na to stejně. Jedná se o významné oblasti, které je třeba zvážit, pokud jde o zvýšení rychlosti vašeho webu, ale já se snižuji.

Vraťme se ke snížení požadavků HTTP.

Krok 2: Optimalizace obrázků

Web bez obrázků je, fádní. Říká se, že obrázek mluví tisíce slov, a to je v pohodě. Každý obrázek však odpovídá požadavku HTTP. Chcete-li přidat zranění k soli, patří obrázky mezi prvky, které se načítají dlouho.

Přesto nemůžeme ignorovat skutečnost, že většina témat WordPress (čtecí weby) se spoléhá na obrázky a na to přijde mnoho obrázků. S ohledem na to, jak můžete snížit požadavky HTTP optimalizací obrázků?

Pro začátek se zbavte všech obrázků, které nepoužíváte. Buďte nemilosrdní; zbavit se toho všeho nafouknutého – nepotřebuješ to. Poté zkomprimujte a optimalizujte obrázky a odstraňte zbytečná data souborů.

Plugin WP pro kompresi

Informace a stahováníZobrazit ukázku

I když si můžete vybrat z několika doplňků, máme rádi WP Compress. I když se jedná o prémiovou službu, výkonnou automatickou optimalizaci obrázků, bezeztrátovou kompresi, cloudové zpracování s cílem snížit zatížení serveru, podporu obrázků WebP, automatické změny velikosti a další, aby investice stála za to (další informace najdete v naší recenzi). Navíc můžete získat 100 obrázků zdarma – můžete to alespoň zkusit.

Optimalizace obrázků nesnižuje vaše požadavky na HTTP sama o sobě, ale snižuje velikost vašich obrazových souborů, což se překládá tak, aby se rychlost stránky zrychlila.

Chcete-li snížit požadavky HTTP, využijte sílu Skřítci obrázků CSS. Pro nezasvěcené je sprite soubor obrázků vložených do jednoho obrazového souboru.

Poté pomocí triků CSS můžete vybrat, kterou část obrázku chcete zobrazit. Jak to však snižuje požadavky HTTP? Tady je analogie.

Řekněme, že na své domovské stránce potřebujete pět obrázků. Chcete-li načíst svůj web, provede instalace WordPress pět výletů na server, kde získáte obrázky. Nyní, pokud vložíte všech pět obrázků do jednoho obrazového souboru (sprite), instalace WordPress provede pouze jednu cestu.

Vidíš, kam s tím půjdu? Čím méně výletů, tím menší požadavky HTTP. Nejlepší na tom je, že při vytváření a implementaci obrazových skřítků CSS nemusíte potit. Můžete použít nástroj jako Generátor Sprite CSS. Implementace obrazových skřítků CSS je snadná, pokud víte, jak se pohybujete kolem CSS.

Profesionální tip: Pokud váš web používá HTTP / 2, který podporuje asynchronní načítání obrázků a skriptů, můžete na obrázky SPS zapomenout. GTMetrix při hodnocení výkonu nebere v úvahu HTTP / 2, takže se nemusíte bát, pokud se zdá, že vaše obrázky vytvářejí spoustu HTTP požadavků.

Ale já říkám: Pokud obrazové skvrny CSS mohou na vašem webu výrazně snížit požadavky HTTP a vy víte, jak je implementovat, jděte na to a zkuste další sekundy mimo dobu načítání stránky. Zda máte HTTP / 2.

Koneckonců jeden soubor obrázku vyžaduje jeden požadavek HTTP. Deset samostatných obrázků vyžaduje 10 požadavků HTTP atd. Vím, že se unášíš.

Krok 3: Kombinujte a minifikujte HTML, CSS a JavaScript

Hlavní příčinou mnoha požadavků HTTP na mém webu WordPress byly externí soubory CSS a JavaScript. Jo, bojoval jsem s 43 JS skripty a 22 CSS soubory. To je neuvěřitelných 66 požadavků HTTP.

Z asi 130 požadavků HTTP tvořily externí požadavky CSS a JavaScript asi 51% problému! To je prostě směšné. Díky, GTMetrix, narazím do pěstí.

Pokud zkombinuji a minimalizuji těchto 44 souborů JS a 22 CSS, mohu výrazně snížit požadavky HTTP, velikost webové stránky a čas potřebný k načtení. O čem to ale všechno je „kombinování“ a „minifikace“?

Podle Raelene Morey Words by Birds (jsem velký fanoušek ��), minifikace je proces „… odstranění zbytečných znaků, jako jsou komentáře, formátování, mezera a nové řádky ze souborů HTML, CSS a JavaScript, které nejsou nutné pro kód ke spuštění. “

Minifikace zmenší velikost souboru odstraněním všech ostatních znaků a ponechá pouze kód. Pokud však máte více než 66 externích skriptů, minimalizace nebude pro minimalizaci požadavků HTTP nutně. K tomu je třeba kombinovat soubory CSS a JavaScript.

Raelene opět říká:

Kombinace souborů je zatím stejná, jako by to znělo. Pokud například vaše webová stránka načte 5 externích souborů CSS a 5 externích souborů JavaScriptu, zkombinování vašeho CSS a JavaScriptu do jednoho samostatného souboru by mělo za následek pouze 2 žádosti místo 10.

Chápeš to? Určitě doufám. Kombinace souborů snižuje požadavky HTTP. Na druhou stranu zmenšení zmenší velikost souboru. Zkombinujte je a zabijete dva ptáky stejným kamenem.

Existují doplňky? Ano, samozřejmě!

Plugin mezipaměti WP Rocket WordPress

Info & DownloadView The Demo

Existuje několik pluginů WordPress, které kombinují a minifikují vaše soubory. Dobrým příkladem je plugin WP Rocket. V zásadě je to jeden z nejlepších pluginů pro ukládání do mezipaměti, který vám nabízí funkce, jak zkombinovat a minifikovat soubory několika kliknutími.

Další populární (a volný, uvolnit) možnost je Automatická aktualizace zapojit.

Mimochodem, zatímco na to, snížit počet externích souborů CSS a skripty JS? Například, a nezmíníme-li zde jména, opravdu potřebujete platformu pro komentáře třetích stran? Potřebujete živý rozhlasový plugin?

Nezáleží na tom, co říkám, eliminujte všechny externí skripty a soubory, které nepotřebujete.

Krok 4: Upravte soubory CSS a JavaScript blokující vykreslování

V některých případech nemusí být kombinace souborů možností, zejména u souborů a skriptů třetích stran, které se často mění. V takových případech můžete odložit načítání takových aktiv. HTTP / 2 podporuje asynchronní načítání souborů, což znamená, že se všechny soubory načítají současně.

Pokud z nějakého důvodu neprobíhá asynchronní načítání (možná nepoužíváte HTTP / 2 nebo skripty nejsou asynchronní), mohou tyto soubory váš web výrazně zpomalit.

Nezapomeňte, že se vaše webové stránky načítají shora dolů. Pokud máte v horní části stránky blokování vykreslování CSS a JS, prohlížeč zastaví načítání, dokud nebudou soubory plně načteny. Uživatelé tak uvidí prázdnou stránku, dokud se nenačtou skripty, což zabere čas.

Jak? Přesuňte všechny skripty blokující vykreslení z horní do dolní části webové stránky. Ale pozor zde; nemusíte přesouvat všechny skripty dolů. Říkám to, protože vaše stránka může vyžadovat CSS a JS, aby poskytovala důkladně poutavý zážitek.

Pokud odložíte některé soubory CSS nebo JavaScript, vaši uživatelé mohou vidět zkreslenou verzi své webové stránky, dokud se stránka plně nenačte, což je přesně opak toho, čeho chcete dosáhnout..

Odkládejte tedy pouze skripty, které nejsou nutné pro načtení stránky. Uživatelé tak nebudou čekat věk, než se načte vaše stránka. Proč? Protože k doručení zprávy budete potřebovat méně požadavků HTTP.

Neomezuje požadavky na HTTP per se (protože všechny skripty a soubory se nakonec načtou), ale snižuje počet požadavků HTTP potřebných k vykreslení vaší stránky.

Je to skoro jako líné načítání obrázků; obrázek se načte, pouze když je ve výřezu, nikoli když se načítá zbytek (a nejdůležitější části) stránky.

Mimochodem, oprava CSS a JS blokujících vykreslení může odhalit soubory a skripty, které nepotřebujete vytvářet webovou stránku..

Pokud například načtení nějakého externího sociálního skriptu JS trvá dlouho, můžete jej odložit. Kromě toho ji můžete vyloučit a do svého tématu integrovat sociální sdílení.

Vyloučíte požadavky HTTP a zrychlíte svůj web při zachování stejné funkce. Chápu, že funkce kódování vašeho tématu je pro většinu začátečníků vysoká objednávka, proto se obraťte na pokročilého uživatele WP nebo vývojáře.

Jako alternativu můžete použít plugin WP Rocket k opravě skriptů blokujících vykreslení, ale buďte opatrní. Přečtěte si jejich dokumentaci, protože pokud věci zkazíte, můžete web snadno rozbít.

Existují bezplatné možnosti? Samozřejmě! Pracujeme s WordPress, pamatujete? Můžete použít Async JavaScript, mimo jiné pluginy.

Krok 5: Použijte mezipaměť a CDN

Věděli jste, že ukládání do mezipaměti a CDN mohou snížit vaše požadavky HTTP? Na první pohled se to nezdá být skutečností, ale když vezmete v úvahu, co se děje za scénami, můžete využít caching a CDN ve svůj prospěch.

Ukládání do mezipaměti zahrnuje ukládání statických souborů do prohlížeče, aby si uživatelé při následujících návštěvách soubory nestahovali. Řekněme, že máte plugin pro mezipaměť a uživatel si při první návštěvě stáhne váš obsah v mezipaměti.

Při následujících návštěvách váš web nebude na server žádat. Místo toho bude sloužit v mezipaměti z prohlížeče, čímž se sníží požadavky HTTP a zvýší se rychlost vašeho webu.

CDN (nebo Content Ddoručení Network) je síť serverů umístěná po celém světě. CDN používá také ukládání do mezipaměti, ale pro ještě rychlejší rychlosti vám poskytovatel CDN obsluhuje váš v mezipaměti obsah ze serveru, který je nejblíže k návštěvníkovi.

Kratší vzdálenosti znamenají rychlejší doručení obsahu a ukládání do mezipaměti znamená, že váš web nemusí znovu stahovat stejný obsah z centrálního serveru. Dává vám to smysl?

Cloudflare CDN Plugin

A nejlepší ze všeho je řada volných možností CDN (nebo alespoň bezplatné zkušební verze, takže můžete doslova vidět rozdíl, který to dělá). Ve WPExplorer používáme a vysoce doporučujeme CLoudflare, ale zvolte CDN, o kterém si myslíte, že pro vás nejlépe funguje.

Bonus: Zajistěte podporu protokolu HTTP / 2

Možná děláte vše pro snížení požadavků HTTP, ale váš webhostitel může být příčinou vašich potíží. Nebuďte překvapeni; ptát a myslet, kdo – v této době a věku – používá něco jiného než HTTP / 2?

Pravděpodobně ani nevíte co HTTP / 2 je vše kolem. Pro začátečníky HTTP / 2 podporuje mimo jiné asynchronní načítání souborů. Má oproti HTTP 1.0 další výhody, ale je to lekce na další den.

Pokud používáte HTTP 1.0 nebo nižší, všimnete si značného počtu HTTP požadavků.

Nebuď rychlý soudce; Viděl jsem poskytovatele webhostingu, kteří stále používají HTTP 1.0 a starší verze PHP. Ano, dokonce se zjevnými výhodami HTTP / 2 a PHP 7. Nejsem ani blafující; někteří jejich zákazníci ke mně přicházejí, když některé z jejich pluginů nefungují a je to dráždivé!

Ale opravdu, proč? Skutečnost, že někteří poskytovatelé webhostingu se neobtěžují faktem, že PHP 5.6 je zastaralý a má bezpečnostní chyby, je jen něco jiného. A pokud nepodporují HTTP / 2, je to pro vás skutečně jistota.

KeyCDN HTTP / 2 Test

Kontaktujte svého hostitele nebo použijte Nástroj KeyCDN abyste zkontrolovali, zda váš server podporuje HTTP / 2. Nejlepší webhosting podporuje HTTP / 2 a nejnovější verzi PHP. Pokud váš hostitel v obou případech zaostává, požádejte jej, aby upgradoval nebo si vybral lepšího webového hostitele.

Závěrečná slova

Snížení požadavků HTTP na vašem webu WordPress je pouze o odstranění věcí, které nepotřebujete. Pokud máte na svém webu WordPress hodně věcí, budete mít spoustu požadavků HTTP a relativně pomalou rychlost stránky.

Chcete-li omezit požadavky HTTP, odmítněte web, optimalizujte obrázky, opravte skripty blokující vykreslení, používejte ukládání do mezipaměti a zajistěte, aby váš hostitel podporoval HTTP / 2. Kromě toho se snažte vytvářet jednoduché a čisté weby, které nevyžadují načtení tuny aktiv.

Pokud máte dotazy, dejte nám vědět v sekci komentářů níže. Fandí rychlejším webům a velké budoucnosti!

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