Kako zmanjšati zahteve HTTP / S v WordPressu

Kako zmanjšati zahteve HTTP / S v WordPressu

Tu je zgodba, ki vam bo všeč, če želite pospešiti svoje spletno mesto WordPress.


Drugi dan sem ustvaril sijočo spletno stran. Odpravil sem vse in dodal WooCommerce, Google Tag Manager, OneSignal, službo za pomoč, Yoast, radio v živo (oh, da sem), obvestilo o piškotkih, socialne medije in kup drugih vtičnikov.

Tako kot vi, sem bil navdušen nad navduševanjem svojih obiskovalcev, ali tako sem si mislil. Toda potem so stvari postale neznosno počasne. Po večjih mukah sem izstrelil GTMetrix za odpravo težave.

Na žalost sem videl to:

rezultati test hitrosti gtmetrix

Sem bil navdušen? Pekel NAW! Želel sem doseči popolno A in skrajšati čas nalaganja strani na manj kot dve sekundi.

Torej, pritisnil sem gumb za ponovni test, ampak ugani kaj? Še vedno isti bolezenski rezultat. Bil sem zgrožen, jezen celo. Ampak ne odneham se zlahka, ker je takšna stvar nesprejemljiva.

Veste, kaj sem potem naredil? Preizkusil sem spletno mesto na Pingdom ker ga GTMetrix lahko sesa. Spodaj pa še enkrat žalostni rezultati:

rezultati testiranja hitrosti orodja pingdom

Bil sem ogorčen. Pregovorni trn v mojem mesu je bil navidezni zahtevi HTTP, saj sem lahko hitro odpravil številne druge težave.

Za poslabšanje stvari sem uporabil temo e-trgovine WordPress, ki je naložila program milijarda elementi za sestavljanje domače strani. V mojo obrambo je bilo videti neverjetno. Nekateri uporabniki so se strinjali, da je oblikovanje tudi smiselno, tako da, nisem se spustil samo na trik

Toda odličen vizualni dizajn in počasne hitrosti ne gredo skupaj. Potreboval sem rešitev in hitro.

Kako lahko na svojem mestu WordPress zmanjšam zahteve HTTP?

Vsakič, ko obiščete WordPress spletno mesto, se med brskalnikom in strežniki spletnega mesta premika veliko podatkov. Z drugimi besedami, WordPress na različne strežnike pošilja zahteve HTTP, da ustvarijo to, kar vidijo uporabniki, ko naložijo vaše spletno mesto.

Če vaše spletno mesto WordPress potrebuje veliko elementov za nalaganje, boste imeli več zahtev HTTP in obratno. Več HTTP zahtevkov pomeni počasno spletno mesto, slabo uporabniško izkušnjo (UX), slabe ocene SEO in nizke stopnje konverzije.

Spletna mesta WordPress so običajno dinamična, kar pomeni, da je za brskanje vašega spletnega mesta v brskalniku potrebno veliko različnih delov. Dobra novica je, da lahko zmanjšate zahteve HTTP in znatno pospešite svoje spletno mesto.

V današnjem postu pa se boste natančno naučili kako!

Poročila GTMetrix in Pingdom običajno kažejo, kje je težava. Tako preizkusite svoje spletno mesto z obema orodjema in ugotovite, katera področja morate izboljšati. S pripravljenimi poročili je opisano, kako zmanjšati zahteve HTTP / S in pospešiti svoje spletno mesto WordPress.

1. korak: Declutter

Fantje, če imate na svojem spletnem mestu WordPress veliko stvari, boste imeli preveč zahtev HTTP. To je brez možganov. Prvi korak za zmanjšanje zahtev HTTP je krčenje.

S tem mislim, da se znebite vseh vtičnikov, ki jih ne potrebujete. WordPress vtičniki prihajajo z veliko datotekami, pa naj bodo to PHP, CSS ali JavaScript (JS). Vsaka datoteka, ki jo sproži vsak vtičnik, ustvari zahtevo HTTP.

Če imate vtičnike, boste zagotovo imeli več zahtev HTTP. Manj je vtičnikov, manj je zahtevkov. Preprosto preprosto.

Kaj storiti?

Izvedite revizijo vtičnikov. Kateri vtičniki morate imeti za zagon spletnega mesta? Ali obstajajo vtičniki, ki jih ne potrebujete? Ali imate vtičnike, ki se dotikajo tretjih strežnikov? Ali lahko storite brez teh vtičnikov?

Če želite zmanjšati zahteve HTTP, odstranite vse vtičnike, ki jih ne potrebujete. Če čep potrebujete občasno, ga namestite samo takrat, ko ga potrebujete. Nato odstranite vtičnik.

Enako velja za teme in vsebino WordPress-a, ki jih ne uporabljate. Očistite vse te stvari. Odstranite vse, česar ne potrebujete; je dobro za hitrost in varnost vašega spletnega mesta.

Dodatno kilometrino in vtičniki lahko selektivno prestavite. Na primer, če potrebujete samo kontaktni obrazec 7 za nalaganje na svojo stran s stiki, lahko preprečite, da se drugi vtičniki naložijo na to določeno stran.

To bi bilo super, ali se ne strinjate? In da mislite, da potrebujete samo tisto Asset CleanUp WordPress vtičnik.

WP Asset CleanUp WordPress vtičnik

Vtičnik je enostaven za uporabo in dokaj učinkovit. Ali kot pravi razvijalec:

“Asset CleanUp” pregleda vašo stran in zazna vsa naložena sredstva. Vse, kar morate storiti pri urejanju strani / objave, je samo, da izberete CSS / JS, ki jih ni treba naložiti, s čimer zmanjšate utrip.

Očistite namestitev, ki je že hombra; znebite se smeti – vključena je neželena vsebina. Oh ja, odpravite prekinjene povezave in optimizirajte svojo bazo podatkov, medtem ko je tudi pri njej. To je pomembna področja, ki jih je treba upoštevati, če želite povečati hitrost spletnega mesta, vendar se odpovem.

Vrnimo se k zmanjšanju zahtev HTTP.

2. korak: Optimiziranje slik

Spletno mesto brez slik je dobro. Pravijo, da slika govori tisoč besed in to je v redu. Toda vsaka slika predstavlja zahtevo HTTP. Če želite dodati sol poškodbam, so slike na vrhu med elementi, ki trajajo dolgo.

Kljub temu ne moremo prezreti dejstva, da se večina tem WordPress (beri na spletnih mestih) zanaša na slike in številne slike. Torej, glede na to, kako lahko z optimizacijo slik zmanjšate zahteve HTTP?

Za začetek se znebite vseh slik, ki jih ne uporabljate. Bodi neusmiljen; znebite se vsega tega napihnjenosti – ne potrebujete ga. Po tem stisnite in optimizirajte slike, da odstranite nepotrebne podatke datoteke.

WP Stisnite vtičnik

Informacije in prenosOglejte si predstavitev

Čeprav lahko izbiramo med številnimi vtičniki, nam je zelo všeč WP Compress. Čeprav gre za vrhunsko storitev, močna samodejna optimizacija slik, stiskanje brez izgub, obdelava v oblaku za zmanjšanje nalaganja vašega strežnika, podpora za slike WebP, samodejno spreminjanje velikosti in še več naredijo naložbo vredno (preberite naš pregled, če želite izvedeti več). Poleg tega lahko brezplačno navedete 100 slik – tako lahko vsaj poskusite.

Optimizacija slik ne zmanjša zahtevkov HTTP sam po sebi, ampak zmanjša velikost slikovnih datotek, kar pomeni, da so hitrejše strani hitrejše po vrstici.

Če želite zmanjšati zahteve HTTP, izkoristite moč CSS slike. Nepozvanim je sprite zbirka slik, ki jih damo v eno samo slikovno datoteko.

Nato z uporabo trikov CSS lahko izberete, kateri del slike naj prikazuje. Toda kako to zmanjša zahteve HTTP? Tu je analogija.

Recimo, da potrebujete pet slik na svoji domači strani. Če želite naložiti svoje spletno mesto, bo namestitev programa WordPress naredila pet potovanj v strežnik, da bi dobili slike. Zdaj, če postavite vseh pet slik v eno slikovno datoteko (sprite), bo namestitev programa WordPress opravila samo eno potovanje.

Ali vidite, kam grem s tem? Manj je potovanj, manj jih zahteva HTTP. Najboljši del je, da se ne potrebujete za ustvarjanje in izvajanje CSS-ovih podorov. Lahko uporabite orodje, kot je CSS Sprite Generator. Implementacija slikovnih dokumentov za CSS je enostavna, pod pogojem, da poznate CSS.

Nasvet za profesionalce: Vse o slikah za CSS lahko pozabite, če vaše spletno mesto uporablja HTTP / 2, ki podpira asinhrono nalaganje slik in skriptov. GTMetrix pri ocenjevanju uspešnosti ne upošteva HTTP / 2, zato ne skrbite, če se zdi, da vaše slike ustvarjajo veliko število zahtev HTTP.

Ampak pravim: Če lahko slikovni spodbujevalci CSS na vašem spletnem mestu znatno zmanjšajo zahteve HTTP in veste, kako lahko to implementirate, pojdite na to in izkoristite te dodatne sekunde od časa nalaganja strani. Ne glede na to, ali imate HTTP / 2 ali ne.

Konec koncev ena sama slikovna datoteka zahteva eno samo zahtevo HTTP. Deset ločenih slik potrebuje 10 zahtev HTTP in tako naprej. Vem, da dobite potok.

3. korak: Združite in povežite HTML, CSS in JavaScript

Glavni vzrok za številne zahteve HTTP na mojem spletnem mestu WordPress so bile zunanje datoteke CSS in JavaScript. Ja, trčil sem se s 43 skripti JS in 22 datotekami CSS. To je kar 66 zahtev HTTP.

Od približno 130 zahtev HTTP je bilo zunanjih zahtev CSS in JavaScript približno 51% težave! To je prav smešno. Hvala, GTMetrix, udarite mojo pest.

Če združujem in kombiniram teh 44 datotek JS in 22 CSS, lahko svoje zahteve HTTP znatno zmanjšam, velikost spletnega mesta in čas, potreben za nalaganje. Toda kaj je to “združevanje” in “povezovanje” poslov?

Po navedbah Raelene Morey besed Wird by Birds (jaz sem velik oboževalec ��), minifikacija je postopek “… odstranitve nepotrebnih znakov, kot so komentarji, oblikovanje, beli prostor in nove vrstice iz datotek HTML, CSS in JavaScript, ki niso potrebne za koda za izvedbo. “

Z minimiziranjem zmanjšate velikost datoteke tako, da odstranite vse druge znake in pustite samo kodo. Če imate 66 ali več zunanjih skript, minifikacija ne bo naredila veliko za zmanjšanje zahtev HTTP. Za to morate kombinirati datoteke CSS in JavaScript.

Spet Raelene pravi:

Medtem je kombiniranje datotek tako, kot se sliši. Če na primer vaša spletna stran naloži 5 zunanjih datotek CSS in 5 zunanjih datotek JavaScript, bi združevanje CSS in JavaScript v eno samo ločeno datoteko povzročilo le 2 zahtevi namesto 10.

Ali razumeš? Resnično upam, da bo tako. S kombiniranjem datotek se zmanjšajo zahteve HTTP. Minifikacija na drugi strani zmanjšuje velikost datoteke. Združite dva in z istim kamnom ubijete dve ptici.

Ali obstajajo vtičniki? Seveda!

WP Rocket WordPress predpomnilnik vtičnik

Info & DownloadView Demo

Obstaja na tone WordPress vtičnikov za združevanje in povezovanje datotek. Dober primer je vtičnik WP Rocket. To je v bistvu eden najboljših vtičnikov za predpomnjenje, ki vam ponuja funkcije za združevanje in povezovanje datotek v nekaj klikih.

Še en priljubljen (in prost) možnost je Samodejno optimizirajte vključiti.

Mimogrede, medtem ko v njem zmanjšate število zunanjih datotek CSS in skriptov JS? Na primer, tukaj ne omenjamo imen, ali res potrebujete platformo za komentarje tretjih oseb? Ali potrebujete vtič za radio v živo?

Ni važno, kaj pravim, odpravite vse zunanje skripte in datoteke, ki jih ne potrebujete.

4. korak: Prilagodite CSS in JavaScript datoteke, ki blokirajo upodabljanje

V nekaterih primerih kombiniranje datotek morda ni možnost, zlasti za datoteke in skripte drugih proizvajalcev, ki se pogosto spreminjajo. V takih primerih lahko odložite nalaganje takšnih sredstev. HTTP / 2 podpira asinhrono nalaganje datotek, kar pomeni, da se vse datoteke naložijo hkrati.

Če se iz nekega razloga ne izvaja asinhrono nalaganje (morda ne uporabljate HTTP / 2 ali skripti niso asinhroni), lahko te datoteke znatno upočasnijo vaše spletno mesto.

Upoštevajte, da se vaše spletne strani nalagajo od zgoraj navzdol. Če sta CSS in JS blokirala upodabljanje na vrhu strani, se bo brskalnik prenehal nalagati, dokler se datoteke ne naložijo v celoti. Tako bodo uporabniki videli prazno stran, dokler se skripte ne naložijo, kar pa traja.

Kako? Premaknite vse skripte za preprečevanje upodabljanja od vrha do dna spletne strani. Vendar bodite previdni tukaj; vam ni treba premakniti vseh skript na dno. To trdim, ker bo vaša stran morda potrebovala CSS in JS za temeljito privlačno izkušnjo.

Če odložite nekatere datoteke CSS ali JavaScript, bodo lahko uporabniki videli popačeno različico vaše spletne strani, dokler se stran ne naloži v celoti, kar je ravno nasprotno od tistega, kar želite doseči.

Torej, samo odloži skripte, ki niso potrebne za nalaganje strani. Tako vaši uporabniki ne bodo čakali toliko časa, da se vaša stran naloži. Zakaj? Ker boste za dostavo svojega sporočila potrebovali manj zahtev HTTP.

Ne zmanjša zahtevkov HTTP sam po sebi (ker se bodo vsi skripti in datoteke na koncu naložili), ampak zmanjša število zahtev HTTP, potrebnih za upodabljanje vaše strani.

Podobno je leno nalaganje slik; slika se naloži samo, če je v vidnem polju, ne pa, ko se naložijo ostali (in najpomembnejši deli) strani..

Mimogrede, določitev CSS in JS, ki blokira upodabljanje, lahko razkrije datoteke in skripte, ki jih ne potrebujete za izdelavo spletne strani.

Če na primer traja dolgo nalaganje neke zunanje skripte JS za družabno življenje, jo lahko odložite. Poleg tega jo lahko odpravite in v svojo temo vgradite skupno rabo v družabnih omrežjih.

Odpravili boste zahteve HTTP in pospešili spletno mesto, hkrati pa ohranili enako funkcionalnost. Razumem, da so funkcije kodiranja vaše teme veliko naročilo za večino začetnikov, zato se posvetujte z naprednim uporabnikom WP ali razvijalcem.

Lahko uporabite tudi vtičnik WP Rocket, da popravite skripte za blokiranje upodabljanja, vendar bodite previdni. Preberite njihovo dokumentacijo, ker lahko s tem zrušite svoje spletno mesto.

Ali obstajajo brezplačne možnosti? Seveda! Sodelujemo z WordPressom, se spomniš? Lahko uporabite Async JavaScript, med drugimi vtičniki.

5. korak: Uporabite predvajanje in CDN

Ali ste vedeli, da predpomnjenje in CDN lahko zmanjšajo vaše zahteve HTTP? Sprva se ne zdi dejstvo, ampak ko razmislite, kaj se dogaja v zakulisju, lahko uporabite predpomnjenje in CDN v svojo korist.

Predpomnjenje vključuje shranjevanje statičnih datotek v brskalnik, tako da uporabniki ne bodo prenesli datotek ob naslednjih obiskih. Recite, da imate vtičnik za predpomnilnik, in uporabnik prenese prvo predpomnjeno vsebino.

Ob naslednjih obiskih vaše spletno mesto ne bo postavljalo zahtevkov do strežnika. Namesto tega bo strežnik predpomnil vire iz brskalnika, zmanjšal bo zahteve HTTP in povečal hitrost vašega spletnega mesta.

CDN (ali Cpozorno Delivery Network) je omrežje strežnikov, postavljenih po vsem svetu. CDN uporablja tudi predpomnjenje, vendar za še hitrejše hitrosti ponudnik CDN služi vašim predpomnjeno vsebino s strežnika, ki je obiskovalcu najbližji.

Krajše razdalje pomenijo hitrejšo dostavo vsebine, predpomnjenje pa pomeni, da vam na spletnem mestu ni treba znova prenašati iste vsebine s centralnega strežnika. Vam je to smiselno??

CDF vtičnik Cloudflare

Najboljše pa je, da obstaja več brezplačnih možnosti CDN (ali vsaj brezplačnih preskusov, tako da lahko dobesedno vidite razliko, ki jo ustvari). Pri WPExplorer uporabljamo in toplo priporočamo CLoudflare, vendar izberite CDN, za katerega menite, da deluje najbolje za vas.

Bonus: Zagotovite, da je podprt HTTP / 2

Morda boste storili vse, da bi zmanjšali zahteve HTTP, toda vaš spletni strežnik je lahko vzrok za vaše težave. Ne bodite presenečeni; spraševanje in razmišljanje, kdo – v tem času in starosti – uporablja kaj drugega kot HTTP / 2?

Verjetno sploh ne veste kaj HTTP / 2 je vse približno. No, za začetek HTTP / 2 med drugim podpira asinhrono nalaganje datotek. Ima druge prednosti nad HTTP 1.0, vendar je to še en dan.

Če uporabljate HTTP 1.0 ali nižje, boste opazili veliko število zahtev HTTP.

Ne bodite hitri, da presodite; Videla sem ponudnike spletnega gostovanja, ki še vedno uporabljajo HTTP 1.0 in starejše različice PHP-ja. Da, tudi ob očitnih prednostih HTTP / 2 in PHP 7. niti ne blefiram; nekateri njihovi kupci pridejo k meni, ko nekateri njihovi vtičniki ne delujejo, in to draži!

Ampak res, zakaj? Dejstvo, da nekaterih ponudnikov spletnega gostovanja ne moti dejstvo, da je PHP 5.6 opuščen in ima varnostne ranljivosti, le nekaj drugega. In če ne podpirajo HTTP / 2, je to resnično zastopnik za vas.

KeyCDN HTTP / 2 test

Obrnite se na svojega gostitelja ali uporabite KeyCDN-ovo orodje da preverite, ali vaš strežnik podpira HTTP / 2. Najboljši spletni gostitelj podpira HTTP / 2 in najnovejšo različico PHP. Če gostitelj v obeh primerih zaostaja, jih prosite za nadgradnjo ali izberite boljšega spletnega gostitelja.

Zaključne besede

Zmanjšanje zahtev HTTP na spletnem mestu WordPress pomeni odpravo stvari, ki jih ne potrebujete. Če imate na svojem spletnem mestu WordPress veliko stvari, boste imeli veliko zahtev HTTP in relativno počasne hitrosti strani.

Če želite zmanjšati zahteve HTTP, odstranite spletno mesto, optimizirajte slike, popravite skripte za blokiranje upodabljanja, uporabite predpomnjenje in zagotovite, da vaš gostitelj podpira HTTP / 2. Poleg tega si prizadevajte ustvariti preprosta in čista spletna mesta, za katera ni potrebno naložiti tono sredstev.

Če imate vprašanja, nam to sporočite v spodnjem razdelku za komentarje. Navdušite za hitrejša spletna mesta in veliko prihodnost!

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