Hogyan csökkenthetők a HTTP / S kérések a WordPress programban

Hogyan csökkenthetők a HTTP / S kérések a WordPress programban

Ez egy olyan történet, amelyet szeretni fog, ha fel szeretné gyorsítani a WordPress webhelyet.


Másnap fényes weboldalt készítettem. Mindent elmentem, és hozzáadtam a WooCommerce, a Google Tag Manager, a OneSignal, az ügyfélszolgálat, a Yoast, az élő rádió (ó, igen, megtettem), a cookie-k értesítését, a közösségi médiát és egy csomó más plugin-t..

Csakúgy, mint te, én is hajlandó voltam lenyűgözni a látogatóimat, vagy úgy gondoltam. De akkor a dolgok elviselhetetlenül lassúvá váltak. Nagy fájdalom után kirúgtam GTMetrix kiüríteni a kérdést.

Sajnálom, hogy ezt láttam:

gtmetrix sebesség teszt eredményei

Lenyűgözött? Pokol a NAW-hoz! A tökéletes A-t szereztem meg, és az oldalbetöltési időt két másodperc alá csökkentem.

Szóval, megütötte az újbóli tesztelés gombot, de hiszem mi? Még mindig ugyanaz a fájdalmas eredmény. Megdöbbent, még dühös is voltam. De nem feladom könnyen, mert ez a fajta elfogadhatatlan.

Tudja, mit csináltam tovább? Teszteltem a weboldalt Pingdom mert a GTMetrix szopni tudja. Az alábbiakban még egyszer látványos eredmények találhatók:

A pingdom eszközök gyorsteszt eredményei

Lenyűgöztem. A közmondásos tüskék a hibás HTTP kérések voltak, mivel sok más kérdést gyorsan meg tudtam oldani..

A dolgok még rosszabbá tétele érdekében egy e-kereskedelmi WordPress témát használtam, amely a milliárd, ezermillió elemek a honlap készítéséhez. Védekezésemben hihetetlennek tűnt. Egyes felhasználók egyetértettek abban, hogy a formatervezés ponton is van, tehát igen, nem a trükkre estem bele alone

A nagyszerű vizuális formatervezés és a lassú sebesség azonban nem jár együtt. Szükségem volt egy gyors megoldásra.

Hogyan csökkenthetem a HTTP kéréseket a WordPress webhelyen?

Minden alkalommal, amikor ellátogat egy WordPress webhelyre, sok adat mozog a böngésző és a webhely szerverei között. Más szóval, a WordPress HTTP kéréseket küld különféle kiszolgálóknak annak elkészítéséhez, amit a felhasználók látnak, amikor betöltenek az Ön webhelyén.

Ha a WordPress-webhelynek sok elemre van szüksége a betöltéshez, akkor több HTTP-kérés lesz, és fordítva. A több HTTP-kérés lassú webhelyet, rossz felhasználói élményt (UX), rossz SEO pontszámokat és alacsony konverziós arányt jelent.

A WordPress webhelyek általában dinamikusak, vagyis sok különböző részre van szükség ahhoz, hogy webhelyét böngészőben jelenítsék meg. A jó hír az, hogy csökkentheti a HTTP kéréseket és jelentősen felgyorsíthatja webhelyét.

És a mai bejegyzésben pontosan megtudhatja, hogyan!

A GTMetrix és a Pingdom jelentései általában megmutatják, hol rejlik a probléma. Mint ilyen, mindkét eszköz használatával tesztelje webhelyét, hogy megtudja, mely területeket kell javítania. Ha a jelentések elkészülnek, a következőképpen csökkentheti a HTTP / S kéréseket és gyorsíthatja fel a WordPress webhelyet.

1. lépés: Declutter

Srácok, ha nagyon sok cucc van a WordPress webhelyén, akkor túl sok HTTP kérés lesz. Nem bátor. A HTTP kérések csökkentésének első lépése a dekriptelés.

Ezzel úgy értem, hogy megszabadulok az összes olyan plugin-től, amelyre nincs szükséged. A WordPress bővítmények rengeteg fájlt tartalmaznak, legyen az PHP, CSS vagy JavaScript (JS). Minden fájl, amelyet minden plugin elindít, HTTP kérést hoz létre.

Ha van egy csomó beépülő modul, akkor minden bizonnyal több HTTP-kérés lesz. Minél kevesebb a plugin, annál kevesebb a kérés. Ez egyszerűen egyszerű.

Mit kell tenni?

Végezzen ellenőrzést a pluginekkel. Mely plugineknek kell lennie a webhely futtatásához? Vannak olyan bővítmények, amelyekre nincs szükséged? Van olyan beépülő modul, amely harmadik fél szerverein működik? Meg tudja-e cserélni ezeknek a pluginek nélkül??

A HTTP-kérelmek csökkentése érdekében távolítsa el az összes szükséges plugint. Ha alkalmanként szüksége van egy bővítményre, akkor csak akkor telepítse, amikor szüksége van rá. Ezután távolítsa el a plugint.

Ugyanez vonatkozik a WordPress témákra és tartalmakra, amelyeket nem használ. Tisztítsa meg az összes cuccot. Távolítson el minden, amire nincs szüksége; jó a webhely sebességének és biztonságának szempontjából.

Megengedheti az extra mérföldet, és szelektíven töltheti be a bővítményeket. Például, ha csak a 7. kapcsolattartó űrlapra van szüksége a partneroldal betöltéséhez, megállíthatja a többi plugin betöltését az adott oldalra..

Ez fantasztikus lenne, nem ért egyet? És azt hiszem, hogy csak a Asset CleanUp WordPress bővítmény.

WP Asset CleanUp WordPress bővítmény

A plugin könnyen használható és nagyon hatékony. Vagy amint azt a fejlesztő mondja:

Az „Asset CleanUp” beolvassa az oldalt, és felismeri az összes betöltött eszközt. Az oldal / bejegyzés szerkesztésénél csak annyit kell választania, hogy ki kell töltenie a CSS / JS-t, ezáltal csökkentve a duzzadást.

Tisztítsa meg a már telepített telepítést; megszabadulni a levélszeméttől – a spam is beleszámít. Ó, igen, távolítsa el a megszakadt hivatkozásokat, és optimalizálja az adatbázisát, miközben rajta is van. Ezek olyan jelentős területek, amelyeket figyelembe kell venni, amennyiben a webhely sebességének növelése is megy, de én elkerülöm.

Térjünk vissza a HTTP kérések csökkentéséhez.

2. lépés: Optimalizálja a képeket

A képek nélküli weboldal rendkívül rettenetes. Azt mondják, hogy egy kép ezer szót beszél, és ez remek. De minden kép számít HTTP kérésre. A sónak a sérülésekhez való hozzáadása érdekében a képek a legfontosabb elemek között vannak, amelyek betöltése sokáig tart.

Ennek ellenére nem hagyhatjuk figyelmen kívül a tényt, hogy a legtöbb WordPress-téma (olvasott webhely) képeken, és sok tekintetben képeken alapszik. Tehát ennek fényében hogyan csökkentheti a HTTP kéréseket a képek optimalizálásával?

Először is szabaduljon meg minden olyan képről, amelyet nem használ. Legyen könyörtelen; megszabadulni az összes duzzadástól – nincs rá szükséged. Ezután tömörítse és optimalizálja a képeket a felesleges fájl adatok eltávolításához.

WP Compress plugin

Információ és letöltésTekintse meg a bemutatót

Noha számos plugin közül lehet választani, nagyon szeretjük a WP Compress-t. Bár ez prémium szolgáltatás, a képek hatékony automatikus optimalizálása, veszteségmentes tömörítés, felhő-feldolgozás a szerver terhelésének csökkentése érdekében, a WebP képtámogatás, az automatikus átméretezés és még sok más megéri a befektetést (a további információkért nézze meg áttekintésünket). Ezenkívül 100 képpel ingyen jelentkezhet – így legalább kipróbálhatja.

A képek optimalizálása nem csökkenti a HTTP-kéréseket önmagában, de csökkenti a képfájlok méretét, ami jobb oldalsebességet eredményez a sorban.

A HTTP kérések csökkentésének alternatívájaként kihasználhatja a CSS kép frizurák. A nem kívánt személyek számára a sprite egy olyan képgyűjtemény, amelyet egyetlen képfájlba helyeznek.

Ezután a CSS trükkökkel kiválaszthatja, hogy a kép mely részét jelenítse meg. De hogyan csökkenti ez a HTTP kéréseket? Itt egy analógia.

Tegyük fel, hogy öt képre van szüksége a honlapján. A webhely betöltéséhez a WordPress telepítése öt alkalommal jár a kiszolgálón a képek beolvasása érdekében. Most, ha mind az öt képet egyetlen képfájlba (sprite) helyezi, a WordPress telepítése csak egy utazást eredményez.

Látod, hova megyek ezzel? Minél kevesebb az út, annál kevesebb a HTTP kérés. A legjobb az, ha nem kell izzadnia a CSS képfrissítések létrehozása és végrehajtása érdekében. Használhat olyan eszközöket, mint a CSS Sprite Generator. A CSS képfrissítéseinek bevezetése egyszerű, feltéve, hogy megismeri a CSS körül.

Profi tipp: Ha elfelejti a HTTP / 2-et, amely a képek és szkriptek aszinkron betöltését támogatja, akkor elfelejtheti a CSS-képfrissítéseket. A GTMetrix nem veszi figyelembe a HTTP / 2-t a teljesítmény pontozásakor, tehát ne aggódjon, ha úgy tűnik, hogy a képeid nagyon sok HTTP-kérést eredményeznek.

De azt mondom: Ha a CSS képfrissítések jelentősen csökkenthetik a HTTP-kéréseket az Ön webhelyén, és tudja, hogyan kell ezt végrehajtani, akkor keresse meg, és törölje azokat az extra másodperceket az oldal betöltési idejéből. Függetlenül attól, hogy van-e HTTP / 2.

Végül is egy képfájl egyetlen HTTP kérést igényel. Tíz különálló képhez 10 HTTP kérésre van szükség és így tovább. Tudom, hogy megkapod a sodródást.

3. lépés: Kombinálja és tömörítse a HTML, CSS és a JavaScriptet

A WordPress webhelyem számos HTTP kérésének fő oka a külső CSS és a JavaScript fájlok. Igen, 43 JS-szkripttel és 22 CSS-fájlkal küzdöttem. Ez egy óriási 66 HTTP kérés.

Körülbelül 130 HTTP kérésből a külső CSS és a JavaScript kérések mintegy 51% -ot tettek ki a probléma! Ez csak nevetséges. Köszönöm, GTMetrix, ütögesse ököl.

Ha összevonom és tömörítem azokat a 44 JS és 22 CSS fájlt, jelentősen csökkenthetem a HTTP kéréseimet, a weboldal méretét és a betöltéshez szükséges időt. De miről szól ez a „kombináló” és „aprító” üzlet?

Alapján Raelene Morey of Words by Birds (hatalmas rajongó vagyok ��), a tömörítés az a folyamat, amelynek során „eltávolítunk minden felesleges karaktert, például megjegyzéseket, formázást, üres helyet és új sorokat a HTML, CSS és JavaScript fájlokból, amelyek nem szükségesek a végrehajtandó kód. ”

A tömörítés csökkenti a fájl méretét azáltal, hogy eltávolítja az összes többi karaktert, hogy csak a kód maradjon. De ha több mint 66 külső szkriptünk van, a tömörítés nem sokat fog tenni a HTTP-kérelmek minimalizálása érdekében. Ehhez össze kell kapcsolnia a CSS és a JavaScript fájlokat.

Raelene ismét azt mondja:

A fájlok kombinálása ugyanakkor éppen olyan, mint amilyennek hangzik. Például, ha az Ön weboldala öt külső CSS-fájlt és 5 külső JavaScript-fájlt tölt be, a CSS-t és a JavaScriptet egyetlen különálló fájlba egyesítve, mindössze 2 kérés lesz a 10 helyett.

Érted? Biztosan remélem. A fájlok kombinálása csökkenti a HTTP kéréseket. A finomítás viszont csökkenti a fájl méretét. Kombinálja a kettőt, és ugyanazzal a kővel megöl két madarat.

Van pluginek? Természetesen!

WP Rocket WordPress gyorsítótár-bővítmény

Információ és letöltésView a Demo

Rengeteg WordPress beépülő modul van a fájlok összeillesztéséhez és tömörítéséhez. Jó példa erre a WP Rocket plugin. Alapvetően ez az egyik legjobb gyorsítótárazási plugin, amely olyan funkciókat kínál, amelyek fájlok néhány kattintással történő egyesítését és minimalizálását szolgálják.

Egy másik népszerű (és ingyenes) opció a Autoptimize csatlakoztat.

Egyébként, miközben rajta van, csökkentse a külső CSS fájlok és a JS szkriptek számát? Például, és itt nem említünk neveket, valóban szükség van-e harmadik fél kommentálóplatformjára? Szüksége van egy élő rádió pluginre?

Nem számít, mit mondok, távolítsa el az összes külső szkriptet és fájlt, amelyre nincs szüksége.

4. lépés: Állítsa be a Render-blokkoló CSS ​​és JavaScript fájlokat

Bizonyos esetekben a fájlok kombinálása nem biztos, hogy választható, különösen a harmadik fél által készített fájlok és szkriptek esetében, amelyek gyakran változnak. Ilyen esetekben elhalaszthatja az ilyen eszközök betöltését. A HTTP / 2 támogatja a fájlok aszinkron betöltését, azaz az összes fájl egyszerre töltődik be.

Ha valamilyen oknál fogva nem folytatódik az aszinkron betöltése (esetleg nem használja a HTTP / 2-t, vagy a szkriptek nem aszinkronak), ezek a fájlok jelentősen lelassíthatják webhelyét.

Ne feledje, hogy weboldalai fentről lefelé töltődnek be. Ha az oldal tetején van a CSS és a JS-t blokkoló blokk, akkor a böngésző addig hagyja abba a betöltést, amíg a fájlok teljesen betöltődnek. Mint ilyen, a felhasználók üres oldalt fognak látni, amíg a szkriptek betöltődnek, ami időbe telik.

Hogyan? Vigye az összes megjelenítést blokkoló szkriptet a weboldal tetejéről aljára. De itt legyél óvatos; nem kell minden szkriptet lefelé mozgatnia. Ezt mondom, mivel az oldalának esetleg CSS-re és JS-re van szüksége az alaposan vonzó élmény biztosításához.

Ha elhalaszt egy CSS vagy JavaScript fájlt, akkor a felhasználók torzított verzióját láthatják weblapjának, amíg az oldal teljesen betöltődik, pontosan ellentétes azzal, amit elérni szeretne.

Tehát csak halaszthat olyan szkripteket, amelyek nem szükségesek az oldal betöltéséhez. Ily módon a felhasználók nem várják meg az életkorát az oldal betöltéséig. Miért? Mivel kevesebb HTTP-kérésre lesz szüksége az üzenet kézbesítéséhez.

Ez önmagában nem csökkenti a HTTP-kéréseket (mivel az összes szkript és fájl végül betöltődik), de csökkenti az oldal megjelenítéséhez szükséges HTTP-kérelmek számát.

Nagyon hasonlít a képek lusta betöltésére; a kép csak akkor kerül betöltésre, amikor a nézetablakban van, és nem akkor, amikor az oldal többi része (és a legfontosabb részek) betöltődik.

Mellesleg, a render-blokkoló CSS ​​és JS javítása olyan fájlokat és szkripteket tárhat fel, amelyekre nincs szükség weblap készítéséhez.

Például, ha néhány külső közösségi megosztású JS-szkript betöltése hosszú ideig tart, akkor elhalaszthatja azt. Ezen felül kiküszöbölheti, és beépítheti a társadalmi megosztást a témájába.

Ön kiküszöböli a HTTP kéréseket és felgyorsítja webhelyét, ugyanakkor megtartja ugyanazt a funkcionalitást. Megértem, hogy a kódolás a témájába jellemző funkciók a legtöbb kezdő számára megrendelés, ezért érdeklődjön egy haladó WP-felhasználónál vagy fejlesztőnél..

Alternatív megoldásként a WP Rocket beépülő modult is használhatja a render-blokkoló szkriptek javításához, de legyen óvatos. Olvassa el a dokumentációt, mert ha összezavarja a dolgokat, könnyen megbonthatja webhelyét.

Vannak ingyenes lehetőségek? természetesen! Dolgozunk a WordPress-szel, emlékszel? Használhatja a Async JavaScript, többek között a bővítmények között.

5. lépés: Használja a gyorsítótárazást és a CDN-t

Tudta, hogy a gyorsítótárazás és a CDN-k csökkenthetik a HTTP kéréseket? Ez kezdetben nem tűnik ténynek, de amikor figyelembe vesszük, mi történik a színfalak mögött, használhatja a gyorsítótárazást és a CDN-t az Ön előnyeinek érdekében.

Az gyorsítótárolás során statikus fájlokat tárolnak egy böngészőben, hogy a felhasználók ne töltsék le a fájlokat a későbbi látogatások során. Tegyük fel, hogy van egy gyorsítótár-bővítmény, és a felhasználó letölti a gyorsítótárazott tartalmat az első látogatásakor.

A későbbi látogatások során a webhely nem fog kérést tenni a szerver felé. Ehelyett a böngésző gyorsítótárazott erőforrásait szolgálja fel, csökkentve a HTTP kéréseket és növelve a webhely sebességét.

CDN (vagy CTARTALMA Delivery Network) a világ minden tájáról elhelyezett szerverek hálózata. A CDN gyorsítótárazást is használ, de még gyorsabb sebesség elérése érdekében a CDN szolgáltató kiszolgálja az Ön készülékét cache a látogatóhoz legközelebbi szerver tartalma.

A rövidebb távolságok gyorsabb tartalomszállítást jelentenek, a gyorsítótárazás pedig azt jelenti, hogy webhelyének nem kell újból letöltenie ugyanazt a tartalmat a központi szerverről. Van értelme számodra??

Cloudflare CDN plugin

És ami a legjobb: számos ingyenes CDN lehetőség van (vagy legalábbis ingyenes próbaverziók, így szó szerint láthatjuk a különbséget). A WPExplorernél használjuk és erősen ajánljuk a CLoudflare-t, de válassza ki azt a CDN-t, amely úgy érzi, hogy az Ön számára legjobban működik.

Bónusz: Győződjön meg arról, hogy a HTTP / 2 támogatott

Lehet, hogy mindent megteszel a HTTP kérések csökkentése érdekében, de a webgazda okozhatja bántalmait. Ne lepődj meg; kérdés és gondolkodás, aki – ebben az időben és korban – a HTTP / 2-en kívül bármit használ?

Valószínűleg nem is tudod mit HTTP / 2 szól. Nos, a kezdők számára a HTTP / 2 támogatja többek között a fájlok aszinkron betöltését. Más előnyei vannak a HTTP 1.0-hoz képest, de ez egy lecke egy másik napra.

Ha a HTTP 1.0 vagy annál alacsonyabb verziót használ, akkor jelentős számú HTTP kérést fog észrevenni.

Ne gyorsan ítélkezz; Láttam olyan web hosting szolgáltatókat, akik továbbra is használják a HTTP 1.0 és régebbi PHP verziókat. Igen, még a HTTP / 2 és a PHP 7 nyilvánvaló előnyeivel is. Nem is blöffölök; néhány ügyfelük akkor jön hozzám, ha egyes pluginjük nem működik, és ez bosszantó!

De valójában miért? Az a tény, hogy néhány webtárhely-szolgáltatót nem zavar az a tény, hogy a PHP 5.6 elavult és biztonsági réseket tartalmaz, csak valami más. És ha nem támogatják a HTTP / 2-t, akkor az valóban üzletkötő lehet Önnek.

KeyCDN HTTP / 2 teszt

Vegye fel a kapcsolatot a házigazdával, vagy használja A KeyCDN eszköz annak ellenőrzésére, hogy a szerver támogatja-e a HTTP / 2-t. A legjobb webgazda támogatja a HTTP / 2 és a PHP legújabb verzióját. Ha a gazdagépe mindkét esetben elmarad, kérje meg őket, hogy frissítsen, vagy válasszon egy jobb internetes gazdagépet.

Záró szavak

A HTTP-kérelmek csökkentése a WordPress-webhelyen annak a dolgának a kiküszöböléséről szól, amelyre nincs szükség. Ha nagyon sok cucc van a WordPress webhelyén, akkor sok HTTP kéréssel és viszonylag lassú oldalsebességgel fog rendelkezni.

A HTTP-kérelmek csökkentése érdekében tagadja meg webhelyét, optimalizálja a képeket, javítsa a megjelenítés-blokkoló szkripteket, használja a gyorsítótárazást, és ellenőrizze, hogy a host támogatja-e a HTTP / 2-t. Ettől eltekintve törekedjen egyszerű és tiszta webhelyek létrehozására, amelyek nem igényelnek nagy mennyiségű eszköz betöltését.

Ha kérdése van, kérjük, ossza meg velünk az alábbi megjegyzés szakaszban. Örül a gyorsabb webhelyeknek és a nagy jövőnek!

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