Ako znížiť HTTP / S požiadavky vo WordPress

Ako znížiť HTTP / S požiadavky vo WordPress

Tu je príbeh, ktorý sa vám bude páčiť, ak chcete zrýchliť svoj web WordPress.


Jedného dňa som si vytvoril lesklý web. Šiel som von a pridal som WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, živé rádio (ach áno, urobil), Cookie Notice, sociálne médiá a veľa ďalších doplnkov.

Rovnako ako vy, aj ja som sa snažil zapôsobiť na svojich návštevníkov, tak som si myslel. Ale potom sa veci neznesiteľne spomalili. Po mnohých úzkostiach som sa vystrelil GTMetrix vypláchnuť problém.

Na moje zdesenie som videl toto:

Výsledky testu rýchlosti gtmetrix

Bol som ohromený? Do pekla NAW! Chcel som skórovat perfektný A a skrátiť čas načítania stránky na menej ako dve sekundy.

Takže som narazil na tlačidlo opätovného testu, ale hádajte čo? Stále rovnaký výsledok nevoľnosti. Bol som zdesený, dokonca naštvaný. Ale nevzdávam sa ľahko, pretože takáto vec je neprijateľná.

Vieš čo som urobil ďalej? Web som testoval na Pingdom pretože to GTMetrix dokáže. Nižšie sú však nepríjemné výsledky:

Výsledky testov rýchlosti pingdom nástrojov

Bol som rozčúlený. Príslovným tŕňom v mojom tele boli nepochopiteľné HTTP požiadavky, ktoré som videl, pretože som rýchlo vyriešil mnohé ďalšie problémy..

Aby som to ešte zhoršil, používal som tému elektronického obchodu WordPress, ktorá načítala miliardy prvky na zostavenie domovskej stránky. Na moju obranu to vyzeralo neuveriteľne. Niektorí používatelia sa zhodli na tom, že návrh bol na dobrej ceste, takže ja som nespadol len na trik ��

Skvelý vizuálny dizajn a nízke rýchlosti však nejdú ruka v ruke. Potreboval som rýchle a rýchle riešenie.

Ako môžem znížiť požiadavky HTTP na svojej stránke WordPress?

Pri každej návšteve webovej stránky WordPress sa medzi prehliadačom a servermi webových stránok presunie veľa údajov. Inými slovami, WordPress robí HTTP požiadavky na rôzne servery, aby zostavil, čo uvidia používatelia pri načítaní vašich stránok.

Ak vaše webové stránky WordPress vyžadujú veľa prvkov, ktoré sa majú načítať, budete mať viac požiadaviek HTTP a naopak. Viac žiadostí HTTP znamená pomalý web, zlú skúsenosť používateľa (UX), zlé skóre SEO a nízke miery konverzie.

Webové stránky WordPress sú zvyčajne dynamické, čo znamená, že vykreslenie vašich webových stránok v prehliadači vyžaduje veľa rôznych častí. Dobrou správou je, že môžete znížiť požiadavky HTTP a výrazne zrýchliť svoje stránky.

A v dnešnom príspevku sa presne naučíte ako!

Správy od GTMetrix a Pingdom vám zvyčajne ukážu, kde je problém. Otestujte preto svoje stránky pomocou oboch nástrojov a zistite oblasti, ktoré musíte vylepšiť. S pripravenými prehľadmi uvádzame postup, ako znížiť požiadavky na HTTP / S a zrýchliť váš web WordPress.

Krok 1: Declutter

Chlapci, ak máte na svojej webovej stránke WordPress veľa vecí, budete mať príliš veľa požiadaviek HTTP. Nie je to premýšľanie. Prvým krokom k zníženiu požiadaviek HTTP je vzdanie sa.

Tým myslím tým, že sa zbavím všetkých doplnkov, ktoré nepotrebuješ. Doplnky WordPress sa dodávajú s množstvom súborov, či už ide o PHP, CSS alebo JavaScript (JS). Každý súbor, ktorý spustí každý doplnok, vytvorí požiadavku HTTP.

Ak máte veľa doplnkov, určite budete mať viac žiadostí HTTP. Čím menej zásuvných modulov, tým menej žiadostí. Je to jednoduché.

Čo robiť?

Vykonajte audit svojich doplnkov. Ktoré doplnky musíte spustiť na svojich webových stránkach? Existujú doplnky, ktoré nepotrebujete? Máte doplnky, ktoré sa pripájajú k serverom tretích strán? Dokážete to urobiť bez týchto doplnkov?

Ak chcete znížiť požiadavky HTTP, odinštalujte všetky doplnky, ktoré nepotrebujete. Ak doplnok občas potrebujete, nainštalujte ho iba vtedy, keď ho potrebujete. Potom odinštalujte doplnok.

To isté platí pre témy a obsah WordPress, ktorý nepoužívate. Vyčistite všetky tieto veci. Odstráňte všetko, čo nepotrebujete; je to dobré pre rýchlosť a bezpečnosť vášho webu.

Môžete ísť ďalšiu míľu a načítať doplnky selektívne. Ak napríklad na kontaktnú stránku potrebujete načítať iba kontaktný formulár 7, môžete zastaviť načítavanie ďalších doplnkov na túto konkrétnu stránku..

To by bolo úžasné, nesúhlasíte? A myslieť si, že potrebuješ len Doplnok CleanUp WordPress.

Doplnok WordUPress CleanUp programu WP Asset

Doplnok sa ľahko používa a je pomerne efektívny. Alebo ako to hovorí vývojár:

Program „Asset CleanUp“ prehľadá vašu stránku a zistí všetky načítané prostriedky. Pri úprave stránky / príspevku musíte urobiť iba to, aby ste vybrali CSS / JS, ktoré nie je potrebné načítať, čím sa zníži nadúvanie.

Vyčistite svoju inštaláciu už hombre; zbavte sa nevyžiadanej pošty – zahrňte aj spam. Áno, odstráňte nefunkčné odkazy a optimalizujte svoju databázu. Toto sú významné oblasti, ktoré je potrebné vziať do úvahy, pokiaľ ide o zvýšenie rýchlosti vašich stránok, ale odbočujem.

Vráťme sa k zníženiu požiadaviek na HTTP.

Krok 2: Optimalizácia obrázkov

Webové stránky bez obrázkov sú fádne. Hovorí sa, že obrázok hovorí tisíc slov, a to je super. Každý obrázok však zodpovedá požiadavke HTTP. Ak chcete do zranenia pridať soľ, obrázky patria medzi prvkami, ktoré sa načítajú dlho.

Napriek tomu nemôžeme ignorovať skutočnosť, že väčšina tém WordPress (stránky na čítanie) sa spolieha na obrázky a na to veľa obrázkov. Vo svetle toho, ako môžete znížiť požiadavky HTTP optimalizáciou obrázkov?

Pre začiatočníkov sa zbavte všetkých obrázkov, ktoré nepoužívate. Buďte bezohľadní; zbaviť sa všetkého toho nadúvania – nepotrebuješ ho. Potom komprimujte a optimalizujte obrázky, aby ste odstránili nepotrebné súbory.

Doplnok komprimácie WP

Informácie a sťahovanieZobraziť ukážku

Aj keď si môžete vybrať z niekoľkých doplnkov, veľmi sa nám páči program WP Compress. Aj keď sa jedná o prémiovú službu, výkonnú automatickú optimalizáciu obrázkov, bezstratovú kompresiu, cloudové spracovanie na zníženie zaťaženia servera, podporu obrázkov WebP, automatické zmeny veľkosti a ďalšie, aby sa investície oplatili (viac informácií nájdete v našej kontrole). Navyše môžete získať 100 obrázkov zadarmo – takže si to môžete aspoň vyskúšať.

Optimalizácia obrázkov neznižuje vaše HTTP požiadavky ako také, ale znižuje veľkosť vašich obrázkových súborov, čo sa prekladá tak, aby sa rýchlosť stránky rýchlejšie skrátila..

Prípadne znížite požiadavky HTTP, využite výkon Sprites CSS. Pre nezasvätených je sprite súbor obrázkov vložených do jedného obrazového súboru.

Potom pomocou trikov CSS môžete vybrať, ktorá časť obrázka sa má zobraziť. Ako to však znižuje požiadavky HTTP? Tu je analógia.

Povedzme, že ste na svojej domovskej stránke potrebovali päť obrázkov. Ak chcete načítať svoje stránky, inštalácia WordPress vykoná päť ciest na server, aby sa obrázky získali. Ak teraz vložíte všetkých päť obrázkov do jedného obrazového súboru (sprite), inštalácia WordPress vykoná iba jednu cestu..

Vidíš, kam s tým idem? Čím menej ciest, tým menšie požiadavky HTTP. Najlepšie na tom je, že sa nemusíte potiť, aby ste vytvorili a implementovali obrazové skvrny CSS. Môžete použiť nástroj ako CSS Sprite Generator. Implementácia obrazových spritov CSS je jednoduchá za predpokladu, že viete, ako sa pohybujete okolo CSS.

Tip pre profesionálov: Všetko, čo sa týka obrázkov, môžete zabudnúť, ak váš web používa protokol HTTP / 2, ktorý podporuje asynchrónne načítanie obrázkov a skriptov. Spoločnosť GTMetrix pri hodnotení výkonu nezohľadňuje protokol HTTP / 2, takže sa nemusíte báť, ak sa zdá, že vaše obrázky vytvárajú množstvo žiadostí HTTP..

Ale hovorím: Ak obrazové skvrny CSS môžu na vašich stránkach výrazne znížiť požiadavky HTTP a vy viete, ako ich implementovať, choďte na to a tieto ďalšie sekundy vypnite z času načítania stránky. Či už máte HTTP / 2.

Koniec koncov, jeden obrazový súbor vyžaduje jednu požiadavku HTTP. Desať samostatných obrázkov potrebuje 10 HTTP požiadaviek a tak ďalej. Viem, že sa unášate.

Krok 3: Kombinujte a minifikujte HTML, CSS a JavaScript

Hlavnou príčinou mnohých požiadaviek HTTP na mojej webovej stránke WordPress boli externé súbory CSS a JavaScript. Áno, súťažil som s 43 JS skriptmi a 22 súbormi CSS. Toto je neuveriteľných 66 požiadaviek HTTP.

Z asi 130 požiadaviek HTTP sa na externé požiadavky CSS a JavaScript podieľalo približne 51% problému! To je jednoducho smiešne. Vďaka, GTMetrix, narazíš do mojej pästi.

Ak skombinujem a minifikujem týchto 44 súborov JS a 22 CSS, môžem výrazne znížiť požiadavky HTTP, veľkosť webovej stránky a čas potrebný na načítanie. O čom je však toto „kombinovanie“ a „minimalizovanie“ podnikania?

Podľa Raelene Morey Words by Birds (som veľký fanúšik ��), minifikácia je proces „… odstránenia nepotrebných znakov, ako sú komentáre, formátovanie, medzera a nové riadky zo súborov HTML, CSS a JavaScript, ktoré nie sú potrebné pre kód na vykonanie. “

Minifikácia zmenšuje veľkosť súboru tým, že vylučuje všetky ostatné znaky a ponecháva iba kód. Ak však máte viac ako 66 externých skriptov, minimalizáciou požiadaviek protokolu HTTP sa minimalizáciou nepodarí. Preto je potrebné skombinovať súbory CSS a JavaScript.

Raelene opäť hovorí:

Kombinovanie súborov je zatiaľ také, aké to znie. Napríklad, ak vaša webová stránka načíta 5 externých súborov CSS a 5 externých súborov JavaScript, kombinácia vašej CSS a JavaScriptu do jedného samostatného súboru by mala za následok iba 2 žiadosti namiesto 10.

Máš to? Určite to dúfam. Kombinácia súborov znižuje požiadavky HTTP. Na druhej strane minifikácia znižuje veľkosť súboru. Kombinujte tieto dve a zabite dve vtáky tým istým kameňom.

Existujú doplnky? Áno, samozrejme!

Doplnok vyrovnávacej pamäte WP Rocket WordPress

Info & DownloadView The Demo

Existuje niekoľko doplnkov WordPress, ktoré kombinujú a minifikujú vaše súbory. Dobrým príkladom je doplnok WP Rocket. V podstate je to jeden z najlepších doplnkov pre ukladanie do vyrovnávacej pamäte, ktorý vám ponúka funkcie na kombinovanie a minimalizovanie súborov pomocou niekoľkých kliknutí.

Ďalší populárny (a zadarmo) je voľba Autoptimize zapojiť.

Mimochodom, zatiaľ čo na to, znížiť počet externých súborov CSS a skriptov JS? Napríklad, a tu nespomenieme mená, naozaj potrebujete platformu pre komentáre tretích strán? Potrebujete živý rozhlasový doplnok?

Nezáleží na tom, čo hovorím, odstráňte všetky externé skripty a súbory, ktoré nepotrebujete.

Krok 4: Upravte súbory CSS a JavaScript blokujúce vykreslenie

V niektorých prípadoch nemusí byť kombinácia súborov možnosťou, najmä pre súbory a skripty tretích strán, ktoré sa často menia. V takýchto prípadoch môžete odložiť načítanie takýchto aktív. HTTP / 2 podporuje asynchrónne načítanie súborov, čo znamená, že sa všetky súbory načítajú súčasne.

Ak z nejakého dôvodu nemáte asynchrónne načítanie (pravdepodobne nepoužívate HTTP / 2 alebo skripty nie sú asynchrónne), tieto súbory môžu váš web výrazne spomaliť.

Majte na pamäti, že vaše webové stránky sa načítajú zhora nadol. Ak máte v hornej časti stránky blokujúce vykreslenie CSS a JS, prehliadač zastaví načítavanie, kým sa súbory nenačítajú úplne. Používateľom sa preto zobrazí prázdna stránka, kým sa nenačítajú skripty, čo si vyžaduje čas.

Ako? Presuňte všetky skripty blokujúce vykreslenie z hornej do dolnej časti svojej webovej stránky. Ale buďte opatrní tu; nemusíte presunúť všetky skripty naspodok. Hovorím to, pretože vaša stránka bude pravdepodobne potrebovať CSS a JS, aby poskytla skutočne pútavý zážitok.

Ak odložíte niektoré súbory CSS alebo JavaScript, vaši používatelia môžu vidieť skreslenú verziu svojej webovej stránky, kým sa stránka nenačíta úplne, čo je presne opak toho, čo chcete dosiahnuť..

Preto odkladajte iba skripty, ktoré nie sú potrebné na načítanie stránky. Vaši používatelia tak nebudú čakať na načítanie vašej stránky. Prečo? Pretože na doručenie vašej správy budete potrebovať menej požiadaviek HTTP.

Neznižuje per se požiadavky HTTP (pretože všetky skripty a súbory sa nakoniec načítajú), ale znižuje sa počet požiadaviek HTTP potrebných na vykreslenie vašej stránky..

Je to skoro ako lenivé načítanie obrázkov; obrázok sa načíta iba vtedy, keď je vo výreze, nie keď sa načíta zvyšok (a najdôležitejšie časti) stránky.

Mimochodom, oprava CSS a JS blokujúcich vykreslenie môže odhaliť súbory a skripty, ktoré nepotrebujete na vytváranie webovej stránky..

Napríklad, ak načítanie nejakého externého skriptu JS externého zdieľania sociálnych sietí trvá príliš dlho, môžete ho odložiť. Okrem toho ho môžete odstrániť a zabudovať do svojej témy sociálne zdieľanie.

Vylúčite HTTP požiadavky a zrýchlite svoje stránky pri zachovaní rovnakej funkčnosti. Chápem, že funkcie kódovania vo vašej téme sú najvyššou objednávkou pre väčšinu začiatočníkov, preto sa obráťte na pokročilého používateľa WP alebo vývojára.

Ako alternatívu môžete použiť doplnok WP Rocket na opravu skriptov blokujúcich vykreslenie, ale buďte opatrní. Prečítajte si ich dokumentáciu, pretože ak veci rozladíte, môžete web ľahko rozbiť.

Existujú bezplatné možnosti? Samozrejme! Pracujeme s WordPress, pamätáte? Môžete použiť Async JavaScript, okrem iných doplnkov.

Krok 5: Použite vyrovnávaciu pamäť a CDN

Vedeli ste, že ukladanie do pamäte cache a CDN môžu znížiť vaše požiadavky na HTTP? Na prvý pohľad sa to nezdá byť skutočnosťou, ale keď uvažujete o tom, čo sa deje v zákulisí, môžete použiť caching a CDN vo svoj prospech.

Ukladanie do vyrovnávacej pamäte zahŕňa ukladanie statických súborov do prehliadača, aby ich používatelia pri nasledujúcich návštevách nestiahli. Povedzme, že máte doplnok prehliadača a používateľ si pri prvej návšteve stiahne váš obsah z vyrovnávacej pamäte.

Pri nasledujúcich návštevách nebude váš server žiadať server. Namiesto toho bude slúžiť prostriedky z vyrovnávacej pamäte prehliadača, čím sa znížia požiadavky HTTP a zvýši sa rýchlosť vašich stránok.

CDN (alebo Content Delivery Network) je sieť serverov umiestnených po celom svete. CDN používa tiež ukladanie do vyrovnávacej pamäte, ale pre ešte vyššie rýchlosti poskytovateľ CDN slúži vášmu medzipamäte obsah zo servera, ktorý je najbližšie k návštevníkovi.

Kratšie vzdialenosti znamenajú rýchlejšie dodávanie obsahu a ukladanie do vyrovnávacej pamäte znamená, že vaše webové stránky nemusia znova sťahovať rovnaký obsah z centrálneho servera. Dáva to zmysel pre vás?

Zásuvný modul plug-in CDN spoločnosti Cloudflare

A najlepšie zo všetkého je množstvo bezplatných možností CDN (alebo aspoň bezplatné skúšobné verzie, takže môžete doslova vidieť rozdiel, ktorý to robí). Vo WPExplorer používame a vysoko odporúčame CLoudflare, ale vyberte si CDN, ktorý podľa vás najlepšie funguje.

Bonus: Skontrolujte, či je podporovaný protokol HTTP / 2

Možno robíte všetko pre to, aby ste znížili požiadavky HTTP, ale váš webhosting môže byť príčinou vašich ťažkostí. Nebuďte prekvapení; pýtať sa a rozmýšľať, kto – v tomto čase a veku – používa čokoľvek iné ako HTTP / 2?

Pravdepodobne ani nevieš čo HTTP / 2 je o všetkom. Pre začiatočníkov HTTP / 2 okrem iného podporuje asynchrónne načítanie súborov. V porovnaní s protokolom HTTP 1.0 má ďalšie výhody, ale je to lekcia na ďalší deň.

Ak používate HTTP 1.0 alebo nižší, všimnete si značný počet HTTP požiadaviek.

Nebuď rýchly súdiť; Videl som poskytovateľov webhostingu, ktorí stále používajú HTTP 1.0 a staršie verzie PHP. Áno, a to aj so zjavnými výhodami protokolov HTTP / 2 a PHP 7. Ani nehovorím; niektorí z ich zákazníkov prichádzajú ku mne, keď niektoré z ich doplnkov nefungujú a je to nepríjemné!

Ale naozaj, prečo? Skutočnosť, že niektorí poskytovatelia webhostingu sa neobťažujú skutočnosťou, že PHP 5.6 je zastaraný a má bezpečnostné chyby, je len niečo iné. A ak nepodporujú protokol HTTP / 2, je to skutočne ten pravý pre vás.

KeyCDN HTTP / 2 Test

Kontaktujte svojho hostiteľa alebo použite Nástroj KeyCDN aby ste skontrolovali, či váš server podporuje protokol HTTP / 2. Najlepší webhosting podporuje HTTP / 2 a najnovšiu verziu PHP. Ak váš hostiteľ v oboch prípadoch zaostáva, požiadajte ho, aby inovoval alebo si vybral lepšieho webhostingu.

Záverečné slová

Zníženie požiadaviek HTTP na vašom webe WordPress je len o odstránení vecí, ktoré nepotrebujete. Ak máte na webe WordPress veľa vecí, budete mať veľa požiadaviek HTTP a relatívne pomalú rýchlosť stránky.

Ak chcete znížiť požiadavky HTTP, vyraďte svoje stránky, optimalizujte obrázky, opravte skripty blokujúce vykreslenie, použite vyrovnávaciu pamäť a ubezpečte sa, že váš hostiteľ podporuje protokol HTTP / 2. Okrem toho sa snažíte vytvoriť jednoduché a čisté webové stránky, ktoré na načítanie nevyžadujú tonu aktív.

Ak máte otázky, dajte nám vedieť v nižšie uvedenej sekcii komentárov. Zdravím rýchlejší web a veľkú budúcnosť!

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