Kuidas vähendada HTTP / S taotlusi WordPressis

Kuidas vähendada HTTP / S taotlusi WordPressis

See on lugu, mis teile meeldib, kui soovite oma WordPressi saiti kiirendada.


Teisel päeval ehitasin üles läikiva veebisaidi. Käisin kõik välja ja lisasin WooCommerce, Google Tag Manager, OneSignal, kasutajatoe, Yoast, reaalajas raadio (oh jah, ma tegin), küpsisteteate, sotsiaalmeedia ja hunniku muid pistikprogramme.

Nii nagu sina, olin ka oma külastajatele muljet avaldanud või mõtlesin nii. Kuid siis muutusid asjad talumatult aeglaseks. Pärast suurt ahastust vallandasin end GTMetrix et see teema välja tõsta.

Oma nördimuseks nägin seda:

gtmetrix kiiruskatse tulemused

Kas mulle avaldati muljet? Põrgu NAW-le! Tahtsin saada täiusliku A-taseme ja vähendada lehe laadimisaega vähem kui kahe sekundini.

Niisiis, ma tabasin uuesti testimisnuppu, aga arvake mis? Ikka sama kurnav tulemus. Olin jahmunud, isegi vihane. Kuid ma ei loobu kergelt, sest selline asi on vastuvõetamatu.

Kas sa tead, mida ma järgmisena tegin? Testisin veebisaiti Pingdom sest GTMetrix suudab seda imeda. Kuid allpool on veel kord masendavad tulemused:

pingdom tööriistade kiirtesti tulemused

Ma olin ärev. Vanasõna okas minu lihas oli ekslike HTTP-taotluste nägemine, kuna suutsin paljud muud probleemid kiiresti lahendada.

Olukorra halvendamiseks kasutasin veebipoe WordPress teemat, mis laadis a miljardit elemendid kodulehe loomiseks. Minu kaitses tundus see uskumatu. Mõned kasutajad nõustusid, et kujundus oli ka punkt, nii et jaa, ma ei langenud üksi trikkiks ��

Kuid suurepärane visuaalne disain ja aeglane kiirus ei käi käsikäes. Ma vajasin kiiret lahendust.

Kuidas ma saan oma WordPressi saidil HTTP-taotlusi vähendada??

Iga kord, kui külastate WordPressi veebisaiti, liigub teie brauseri ja veebisaidi serverite vahel palju andmeid. Teisisõnu, WordPress esitab erinevatele serveritele HTTP-päringuid, et luua seda, mida kasutajad teie saidi laadimisel näevad.

Kui teie WordPressi sait nõuab laadimiseks palju elemente, siis on teil rohkem HTTP-päringuid ja vastupidi. Rohkem HTTP-päringuid tähendab aeglast veebisaiti, kehva kasutajakogemust (UX), halbu SEO tulemusi ja madalaid konversioonimäärasid.

WordPressi veebisaidid on tavaliselt dünaamilised, mis tähendab, et veebisaidi muutmiseks brauseris on vaja palju erinevaid osi. Hea uudis on see, et saate vähendada HTTP-taotlusi ja oma saiti märkimisväärselt kiirendada.

Ja tänases postituses saate teada, kuidas täpselt!

GTMetrixi ja Pingdomi aruanded näitavad tavaliselt teile, kus probleem peitub. Seetõttu testige oma saiti mõlema tööriista abil, et teada saada valdkonnad, mida peate parandama. Kui teie aruanded on valmis, saate juhiseid HTTP / S taotluste vähendamiseks ja WordPressi saidi kiirendamiseks teha järgmiselt.

1. samm: dekoltee

Poisid, kui teie WordPressi veebisaidil on palju kraami, siis on teil liiga palju HTTP-päringuid. See ei ole aju. Esimene samm HTTP taotluste vähendamiseks on dekrüptimine.

Selle all mõtlen ma lahti kõikidest pistikprogrammidest, mida te ei vaja. WordPressi pistikprogrammides on palju faile, olgu selleks siis PHP, CSS või JavaScript (JS). Iga fail, mille iga pistikprogramm käivitab, loob HTTP-päringu.

Kui teil on palju pistikprogramme, on teil kindlasti rohkem HTTP-taotlusi. Mida vähem pistikprogramme, seda vähem taotlusi. See on täiesti lihtne.

Mida teha?

Viige läbi oma pistikprogrammide audit. Millised pistikprogrammid peate oma veebisaidi käitamiseks? Kas on pluginaid, mida te ei vaja? Kas teil on pistikprogramme, mis kasutavad kolmanda osapoole servereid? Kas saate ilma nende pistikprogrammideta hakkama??

HTTP-taotluste vähendamiseks desinstallige kõik pistikprogrammid, mida te ei vaja. Kui vajate aeg-ajalt pistikprogrammi, installige see ainult siis, kui seda vajate. Pärast seda desinstallige pistikprogramm.

Sama kehtib WordPressi teemade ja sisu kohta, mida te ei kasuta. Puhastage kõik asjad ära. Eemaldage kõik, mida te ei vaja; see on kasulik teie veebisaidi kiirusele ja turvalisusele.

Võite läbida täiendava miili ja laadida pluginaid valikuliselt. Näiteks kui vajate oma kontaktide lehele laadimiseks ainult kontaktvormi 7, võite peatada teiste pistikprogrammide laadimise sellel konkreetsel lehel.

See oleks fantastiline, kas pole nõus? Ja arvate, et vajate ainult seda Vara puhastamise WordPressi pistikprogramm.

WP Asset CleanUp WordPressi pistikprogramm

Pistikprogrammi on lihtne kasutada ja üsna tõhus. Või nagu arendaja ütleb:

„Asset CleanUp” skannib teie lehte ja tuvastab kõik laaditud varad. Lehe / postituse redigeerimisel peate tegema ainult CSS / JS-i valimise, mida pole vaja laadida, vähendades sel viisil ülespuhumist..

Puhastage oma install juba hombre; rämpsust lahti saada – lisatud on ka rämpspost. Jah, kõrvaldage katkised lingid ja optimeerige oma andmebaasi, samal ajal kui see on olemas. Need on olulised valdkonnad, mida tuleks arvestada nii palju, kui teie saidi kiiruse suurendamine läheb, kuid ma kaldun kõrvale.

Läheme tagasi HTTP-taotluste vähendamise juurde.

2. samm: optimeerige pilte

Piltideta veebisait on noh, üksluine. Nad ütlevad, et pilt räägib tuhat sõna ja see on lahe. Kuid iga pilt moodustab HTTP-päringu. Soola lisamiseks vigastustele on pildid esikohal elementide hulgas, mille laadimine võtab kaua aega.

Sellegipoolest ei saa me ignoreerida tõsiasja, et enamik WordPressi teemasid (loetud saite) toetuvad piltidele ja paljudele piltidele. Kuidas saaksite seda silmas pidades oma piltide optimeerimise abil vähendada HTTP-taotlusi??

Alustuseks vabastage kõik pildid, mida te ei kasuta. Ole halastamatu; vabaneda kõigest sellest paistetusest – te ei vaja seda. Pärast seda tihendage ja optimeerige pilte, et eemaldada ebavajalikud failiandmed.

WP tihendamise pistikprogramm

Kuigi valida on paljude pluginate vahel, meeldib meile WP Compress tõesti. Kuigi see on premium-teenus, muudab piltide võimas automaatne optimeerimine, kadudeta tihendamine, pilvitöötlus teie serveri koormuse vähendamiseks, WebP-piltide tugi, automaatne suuruse muutmine ja palju muud – investeering on seda väärt (vaadake meie arvustust, et saada lisateavet). Lisaks saate tasuta piltidega 100 pilti avaldada – nii saate vähemalt proovida.

Piltide optimeerimine ei vähenda teie HTTP-päringuid iseenesest, vaid vähendab teie pildifailide mahtu, mis tähendab, et lehe parem kiirus real.

HTTP-taotluste vähendamiseks võite kasutada ka CSS pilt spritiseerib. Tahtmatuks on sprite piltide kogum, mis on koondatud ühte pildifaili.

Seejärel saate CSS-i trikkide abil valida, millist pildi osa näidata. Kuid kuidas see vähendab HTTP-taotlusi? Siin on analoogia.

Oletame, et vajate oma kodulehele viit pilti. Saidi laadimiseks teeb WordPressi installimine piltide saamiseks serverisse viis reisi. Kui paned kõik viis pilti ühte pildifaili (sprite), teeb WordPressi install ainult ühe reisi.

Kas sa näed, kuhu ma sellega lähen? Mida vähem sõite, seda vähem on HTTP-päringuid. Parim osa on see, et te ei pea CSS-i pildispritside loomiseks ja rakendamiseks higistama. Võite kasutada sellist tööriista nagu CSS Sprite Generaator. CSS-i pildispritside juurutamine on lihtne, kui teate oma teed CSS-is.

Pro näpunäide: Võite unustada kõik CSS-i pildispritsid, kui teie veebisait kasutab HTTP / 2, mis toetab piltide ja skriptide asünkroonset laadimist. GTMetrix ei arvesta toimivuse punktide arvutamisel HTTP / 2-ga, nii et ärge muretsege, kui tundub, et teie pildid tekitavad palju HTTP-taotlusi.

Aga ma ütlen: Kui CSS-piltide kirjeldus võib teie saidil HTTP-taotlusi märkimisväärselt vähendada ja teate, kuidas sama rakendada, siis otsige seda ja jätke need täiendavad sekundid teie lehe laadimisajast vabaks. Kas teil on HTTP / 2 või mitte.

Lõppude lõpuks nõuab üks pildifail ühte HTTP-päringut. Kümme eraldi pilti vajavad 10 HTTP-taotlust ja nii edasi. Ma tean, et saate triivi.

3. samm: ühendage ja minimeerige HTML, CSS ja JavaScript

Minu WordPressi veebisaidil paljude HTTP-päringute peamiseks põhjuseks olid välised CSS- ja JavaScripti failid. Jah, võistlesin 43 JS-i skripti ja 22 CSS-failiga. See on ilmatu 66 HTTP-taotlust.

Ligikaudu 130 HTTP-taotlusest moodustasid välised CSS- ja JavaScripti-taotlused umbes 51% probleemist! See on lihtsalt naeruväärne. Tänan, GTMetrix, põrutage mu rusikat.

Neid 44 JS- ja 22 CSS-faili kombineerimisel ja minimeerimisel saan oluliselt vähendada oma HTTP-taotlusi, veebisaidi suurust ja laadimiseks kuluvat aega. Kuid milles seisneb selle äri ühendamine ja minimeerimine?

Vastavalt Raelene Morey of Words by Birds (olen suur fänn ��), minifitseerimine on protsess, mille käigus eemaldatakse HTML-, CSS- ja JavaScripti failidest kõik mittevajalikud märgid, näiteks kommentaarid, vormindamine, tühik ja uued read, mis pole kood täitmiseks. ”

Minimeerimine vähendab faili mahtu, kõrvaldades kõik muud märgid, jättes ainult koodi. Kuid kui teil on üle 66 välise skripti, ei tee minimeerimine HTTP-taotluste minimeerimiseks palju. Selleks peate ühendama oma CSS- ja JavaScripti-failid.

Jälle ütleb Raelene:

Vahepeal on failide ühendamine just selline, nagu kõlab. Näiteks kui teie veebileht laadib 5 välist CSS-faili ja 5 välist JavaScripti faili, siis CSS-i ja JavaScripti ühendamine üheks eraldi failiks annaks 10-st asemel vaid 2 taotlust.

Kas saad aru? Ma kindlasti loodan seda. Failide ühendamine vähendab HTTP-taotlusi. Minimeerimine seevastu vähendab faili mahtu. Kombineerige need kaks ja tapate kaks lindu sama kiviga.

Kas on pluginaid? Jah, muidugi!

WP raketi WordPressi vahemälu pistikprogramm

Teave ja allalaadimineVaadake esitlust

Failide ühendamiseks ja minimeerimiseks on palju WordPressi pluginaid. Hea näide on WP Rocketi pistikprogramm. See on põhimõtteliselt üks parimatest vahemälupistikprogrammidest, mis pakub teile funktsioone failide ühendamiseks ja minimeerimiseks mõne hiireklõpsuga.

Veel üks populaarne (ja tasuta) valik on Automaatne optimeerimine sisse panema.

Muide, kui sellel olete, vähendage väliste CSS-failide ja JS-skriptide arvu? Näiteks ja me ei nimeta siin nimesid, kas vajate tõesti kolmanda osapoole kommentaariplatvormi? Kas vajate reaalajas raadio pistikprogrammi??

Pole tähtis, mida ma ütlen, kõrvaldage kõik välised skriptid ja failid, mida te ei vaja.

4. samm. Reguleerige CSS-i ja JavaScripti faile Renderdi blokeerimine

Mõnel juhul ei pruugi failide ühendamine olla valikuvõimalus, eriti muude tootjate failide ja skriptide puhul, mis muutuvad sageli. Sellistel juhtudel saate selliste varade laadimist edasi lükata. HTTP / 2 toetab failide asünkroonset laadimist, mis tähendab, et kõik failid laaditakse samaaegselt.

Kui teil pole mingil põhjusel asünkroonset laadimist (võib-olla te ei kasuta HTTP / 2 või skriptid pole asünkroonsed), võivad need failid teie veebisaiti märkimisväärselt aeglustada.

Pidage meeles, et teie veebilehti laaditakse ülalt alla. Kui teie lehe ülaosas on renderdavad blokeerivad CSS ja JS, peatab brauser laadimise, kuni failid on täielikult laaditud. Selliselt näevad kasutajad tühja lehte kuni skriptide laadimiseni, mis võtab aega.

Kuidas? Liigutage kõik renderdamist blokeerivad skriptid oma veebilehe ülaosast alla. Kuid olge siin ettevaatlik; ei pea te kõiki skripte põhja viima. Ütlen seda, kuna teie leht vajab põhjalikult kaasahaarava kogemuse pakkumiseks CSS-i ja JS-i.

Mõne CSS- või JavaScripti-faili edasilükkamisel võivad kasutajad näha teie veebisaidi moonutatud versiooni, kuni leht täielikult laeb, mis on täpselt vastupidine sellele, mida soovite saavutada.

Niisiis, lükake edasi ainult skripte, mis pole lehe laadimiseks vajalikud. Nii ei oota teie kasutajad, et teie leht laaditakse. Miks? Kuna teate edastamiseks on vaja vähem HTTP-päringuid.

See ei vähenda HTTP-taotlusi iseenesest (kuna kõik skriptid ja failid laaditakse lõpuks), kuid vähendab teie lehe renderdamiseks vajalike HTTP-taotluste arvu..

See sarnaneb väga piltide laisa laadimisega; pilt laaditakse ainult siis, kui see on vaateaknas, mitte siis, kui ülejäänud leht (ja kõige olulisemad osad) laaditakse.

Muide, renderdamist blokeeriva CSS-i ja JS-i parandamine võib paljastada faile ja skripte, mida te ei vaja veebilehe loomiseks.

Näiteks kui mõne välise sotsiaalse jagamise JS-skripti laadimine võtab kaua aega, saate selle edasi lükata. Lisaks saate selle kaotada ja luua oma teema ühiskondliku jagamise.

Kõrvaldate HTTP-taotlused ja kiirendate oma saiti, säilitades samas funktsionaalsuse. Mõistan, et funktsioonide kodeerimine teie teemasse on enamiku algajate jaoks pikk järjekord, nii et pöörduge WP edasijõudnud kasutaja või arendaja poole.

Alternatiivina võite renderdamist blokeerivate skriptide parandamiseks kasutada WP Rocketi pistikprogrammi, kuid olge ettevaatlik. Lugege nende dokumentatsiooni, sest kui ajate asja segamini, saate oma veebisaidi hõlpsalt rikkuda.

Kas on tasuta võimalusi? Muidugi! Teeme koostööd WordPressiga, mäletate? Võite kasutada Async JavaScripti, teiste pistikprogrammide hulgas.

5. samm: kasutage vahemällu salvestamist ja CDN-i

Kas teadsite, et vahemällu salvestamine ja CDN-id võivad teie HTTP-päringuid vähendada? See ei tundu alguses fakt, kuid kui arvate kulisside taga toimuvat, saate vahemälu ja CDN-i kasutada oma eeliseks.

Puhverdamine hõlmab staatiliste failide salvestamist brauserisse, nii et kasutajad ei laadiks faile alla järgmistel visiitidel. Oletame, et teil on vahemälu plugin ja kasutaja laadib teie vahemällu salvestatud sisu alla esimesel külastusel.

Järgmistel külastustel ei esita teie sait serverile päringuid. Selle asemel teenindab see brauseri vahemällu salvestatud ressursse, vähendades HTTP-taotlusi ja suurendades teie saidi kiirust.

CDN (või Cpidev Deraelu Network) on kogu maailmas asuvate serverite võrk. CDN kasutab ka vahemällu salvestamist, kuid veelgi suurema kiiruse korral teenindab CDN-teenuse pakkuja teie vahemällu sisu serverile, mis on külastajale kõige lähemal.

Lühemad vahemaad tähendavad kiiremat sisu edastamist ja vahemällu salvestamine tähendab, et teie veebisait ei pea uuesti sama sisu keskserverist alla laadima. Kas sellel on mõtet??

Cloudflare CDN pistikprogramm

Ja mis kõige parem, on mitmeid tasuta CDN-valikuid (või vähemalt tasuta prooviversioone, nii et näete üsna sõna-sõnalt selle erinevust). WPExploreris kasutame ja soovitame tungivalt CLoudflare’i, kuid valige CDN, mis teie arvates sobib teie jaoks kõige paremini.

Boonus: veenduge, et HTTP / 2 oleks toetatud

Võib-olla teete kõik selleks, et vähendada HTTP-taotlusi, kuid teie hädad võivad põhjustada teie veebi. Ärge üllatage; küsib ja mõtleb, kes kasutab selles ajas ja vanuses kõike muud kui HTTP / 2?

Tõenäoliselt ei tea sa isegi HTTP / 2 on kõik. Alustuseks toetab HTTP / 2 muu hulgas failide asünkroonset laadimist. Sellel on lisaks HTTP 1.0-le ka muid eeliseid, kuid see on õppetund teisele päevale.

Kui kasutate HTTP 1.0 või madalamat, märkate märkimisväärset arvu HTTP päringuid.

Ärge hinnake kiiresti; Olen näinud veebimajutusteenuste pakkujaid, kes kasutavad endiselt HTTP 1.0 ja vanemaid PHP versioone. Jah, isegi koos HTTP / 2 ja PHP 7 ilmsete eelistega. Ma ei bluffi isegi; mõned nende kliendid tulevad minu juurde, kui mõni nende pistikprogrammidest ei tööta, ja see on ärritav!

Aga tõesti, miks? See, et mõnda veebimajutusteenuse pakkujat ei häiri asjaolu, et PHP 5.6 on aegunud ja sellel on turvaauke, on lihtsalt midagi muud. Ja kui nad ei toeta HTTP / 2, on see teie jaoks tõesti tehingupüüdur.

KeyCDN HTTP / 2 test

Võtke ühendust oma hostiga või kasutage KeyCDN-i tööriist et kontrollida, kas teie server toetab HTTP / 2. Parim veebi toetab HTTP / 2 ja uusimat PHP versiooni. Kui teie host on mõlemal juhul mahajäänud, paluge neil uuendada või valida parem veebi.

Lõppsõnad

HTTP-taotluste vähendamine oma WordPressi saidil seisneb kõigi asjade eemaldamises, mida te ei vaja. Kui teie WordPressi veebisaidil on palju asju, on teil palju HTTP-päringuid ja suhteliselt aeglane lehekiirus.

HTTP-taotluste vähendamiseks tühjendage oma sait, optimeerige pilte, parandage renderdamist blokeerivaid skripte, kasutage vahemälu ja veenduge, et teie host toetab HTTP / 2. Peale selle püüdke luua lihtsaid ja puhtaid veebisaite, mille laadimiseks pole vaja palju vara.

Kui teil on küsimusi, andke meile sellest teada allpool olevas kommentaaride jaotises. Rõõm kiiremate veebisaitide järele ja suur tulevik ees!

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