Hvernig á að draga úr beiðnum HTTP / S í WordPress

Hvernig á að draga úr beiðnum HTTP / S í WordPress

Hér er saga sem þú munt elska ef þú vilt flýta fyrir WordPress síðuna þína.


Um daginn byggði ég glansandi vefsíðu. Ég fór allt út og bætti við WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, lifandi útvarpi (ó já ég gerði það), Cookie Notice, samfélagsmiðlar og fullt af öðrum viðbótum.

Rétt eins og þú, var ég beygður af því að vekja hrifningu gesta minna, eða svona hugsaði ég. En þá urðu hlutirnir óþolandi hægt. Eftir mikla angist, rak ég upp GTMetrix að skola málið út.

Mér til mikillar óánægju sá ég þetta:

niðurstöður gtmetrix hraðaprófa

Var ég hrifinn? Helvíti til NAW! Mig langaði til að skora fullkomið A og minnka hleðslutíma síðunnar í undir tvær sekúndur.

Svo ég sló á endurprófunarhnappinn, en giska á hvað? Enn sama veikinda niðurstaðan. Ég var agndofa, jafnvel reið. En ég gefst ekki upp auðveldlega vegna þess að svona hlutur er óásættanlegur.

Veistu hvað ég gerði næst? Ég prófaði heimasíðuna á Pingdom vegna þess að GTMetrix getur sogið það. En hér að neðan eru dapurleg úrslit, enn og aftur:

niðurstöður hraðprófs fyrir pingdom verkfæri

Ég var áhyggjufullur. Orðtakandi þyrnirinn í holdinu mínu voru rangar HTTP beiðnir þar sem ég gat lagað mörg önnur mál fljótt.

Til að gera illt verra var ég að nota WordPress þema fyrir netverslun sem hlaðinn a milljarðar þætti til að byggja heimasíðuna. Í vörn minni leit það út ótrúlegt. Sumir notendur voru sammála um að hönnunin væri líka á sínum stað, svo já, ég féll ekki fyrir bragðið eitt og sér

En frábær sjónhönnun og hægur hraði rennur ekki saman. Mig vantaði lausn og hratt.

Hvernig get ég dregið úr HTTP beiðnum á WordPress vefnum mínum?

Í hvert skipti sem þú heimsækir WordPress vefsíðu færast mikið af gögnum á milli vafrans þíns og netþjóna vefsíðunnar. Með öðrum orðum, WordPress gerir HTTP beiðnir til ýmissa netþjóna til að byggja það sem notendur sjá þegar þeir hlaða vefinn þinn.

Ef WordPress vefsvæðið þitt þarf mikið af þáttum til að hlaða, verðurðu að hafa fleiri HTTP beiðnir og öfugt. Fleiri HTTP beiðnir þýða hæga vefsíðu, lélega notendaupplifun (UX), slæma SEO stig og lágt viðskiptahlutfall.

WordPress vefsíður eru venjulega kraftmiklar, sem þýðir að það þarf mikið af mismunandi hlutum til að birta vefsíðuna þína í vafra. Góðu fréttirnar eru að þú getur dregið úr HTTP beiðnum og flýtt fyrir síðuna þína verulega.

Og í færslunni í dag lærir þú nákvæmlega hvernig!

Skýrslur frá GTMetrix og Pingdom sýna venjulega hvar vandamálið liggur. Prófaðu síðuna þína með báðum tækjum til að komast að því hvaða svæði þú verður að bæta. Með skýrslurnar þínar tilbúnar er hér hvernig á að draga úr HTTP / S beiðnum og flýta WordPress vefnum þínum.

Skref 1: Declutter

Krakkar, ef þú ert með mikið af efni á WordPress vefsíðunni þinni, þá muntu hafa of margar HTTP beiðnir. Það er engin heili. Fyrsta skrefið til að draga úr HTTP beiðnum er decluttering.

Með því meina ég að losna við öll viðbótin sem þú þarft ekki. WordPress viðbætur eru með fullt af skrám, hvort sem það er PHP, CSS eða JavaScript (JS). Sérhver skrá sem hvert tappi rekur mun búa til HTTP beiðni.

Ef þú ert með mikið af viðbótum muntu örugglega hafa fleiri HTTP beiðnir. Því færri sem viðbótin er, því færri eru beiðnirnar. Það er einfaldlega einfalt.

Hvað skal gera?

Framkvæmdu úttekt á viðbætunum þínum. Hvaða viðbætur verður þú að hafa til að keyra vefsíðuna þína? Eru til viðbótar sem þú þarft ekki? Ertu með viðbætur sem smella á netþjóna frá þriðja aðila? Geturðu gert án þessara viðbóta?

Til að draga úr HTTP beiðnum skaltu fjarlægja allar viðbætur sem þú þarft ekki. Ef þú þarft tappi öðru hvoru skaltu setja það aðeins upp þegar þú þarft á því að halda. Síðan skaltu fjarlægja viðbótina.

Sama gildir um WordPress þemu og efni sem þú notar ekki. Hreinsaðu allt það. Fjarlægðu allt sem þú þarft ekki; það er gott fyrir hraða og öryggi vefsvæðisins.

Þú getur valið aukalega mílu og hlaðið viðbótum með vali. Til dæmis, ef þú þarft aðeins snertingareyðublað 7 til að hlaða á tengiliðasíðuna þína, geturðu hindrað að önnur viðbætur séu hlaðnar á viðkomandi síðu.

Það væri frábært, ertu ekki sammála? Og að halda að þú þurfir aðeins Hreinsun eigna WordPress viðbót.

WP Asset CleanUp WordPress viðbót

Tappinn er auðveldur í notkun og nokkuð duglegur. Eða eins og verktaki orðar það:

„Hreinsun eigna“ skannar síðuna þína og finnur allar eignir sem eru hlaðnar. Allt sem þú þarft að gera þegar þú breytir síðu / færslu er bara að velja CSS / JS sem ekki er nauðsynlegt að hlaða, á þennan hátt dregur úr uppblástur.

Hreinsaðu upp þinn setja upp þegar hombre; losna við ruslið – athugasemd ruslpóstur innifalinn. Ó já, útrýma brotnum tenglum og hagræða gagnagrunninum á meðan þú ert líka. Þetta eru mikilvæg svæði sem þarf að huga að svo miklu leyti sem auka hraðann á síðunni þinni, en ég týna því.

Förum aftur til að draga úr HTTP beiðnum.

Skref 2: Fínstilltu myndir

Vefsíða án mynda er, jæja, drullusöm. Þeir segja að mynd tali þúsund orð og það sé flott. En allar myndir eru með HTTP beiðni. Til að bæta salti við meiðsli eru myndir efst á meðal þátta sem tekur langan tíma að hlaða.

Við getum samt ekki horft framhjá þeirri staðreynd að flest WordPress þemu (lesið vefsvæði) reiða sig á myndir og margar myndir fyrir það mál. Svo í ljósi þessa, hvernig geturðu dregið úr HTTP beiðnum með því að fínstilla myndirnar þínar?

Til að byrja með, losaðu þig við allar myndir sem þú notar ekki. Vertu miskunnarlaus; losaðu þig við allt það uppþemba – þú þarft það ekki. Eftir það skal þjappa og fínstilla myndir til að fjarlægja óþarfa skráargögn.

WP þjappa viðbót

Þó að það séu ýmsar viðbætur að velja úr, þá líkum við virkilega við WP Compress. Þó að það sé hágæðaþjónusta, er öflug sjálfvirk hagræðing mynda, taplaus þjöppun, skývinnsla til að draga úr netþjóni, WebP myndstuðningi, sjálfvirkri stærð og fleira sem gerir fjárfestinguna vel þess virði (skoðaðu skoðun okkar til að læra meira). Auk þess geturðu gefið upp 100 myndir ókeypis – svo þú getir að minnsta kosti prófað það.

Með því að fínstilla myndir dregur það ekki úr HTTP beiðnum þínum í sjálfu sér, en það dregur úr stærð myndskrár þinna, sem þýðir betri síðuhraða niður línuna.

Einnig til að draga úr HTTP beiðnum skaltu nýta kraftinn á CSS myndhryggur. Fyrir hina óafkomnu er sprite safn af myndum sem settar eru í eina myndskrá.

Notaðu síðan CSS brellur, þú getur valið hvaða hluta myndarinnar sem á að sýna. En hvernig dregur þetta úr HTTP beiðnum? Hér er hliðstæða.

Segðu að þig vantaði fimm myndir á heimasíðunni þinni. Til að hlaða síðuna þína mun WordPress uppsetning þín fara fimm ferðir á netþjóninn til að fá myndirnar. Nú, ef þú setur allar fimm myndirnar í einni myndskrá (sprite), mun WordPress uppsetningin þín aðeins gera eina ferð.

Sérðu hvert ég er að fara með þetta? Því færri sem ferðirnar eru, því minni beiðnir um HTTP. Það besta er að þú þarft ekki að svitna til að búa til og innleiða CSS ímyndarsprey. Þú getur notað tól eins og CSS Sprite rafall. Það er auðvelt að útfæra CSS ímyndarglæður, að því tilskildu að þú veist hvernig þú ferð um CSS.

Pro Ábending: Þú getur gleymt öllu um CSS myndhúð ef vefsíðan þín notar HTTP / 2 sem styður ósamstilltur hleðslu mynda og handrita. GTMetrix tekur ekki tillit til HTTP / 2 við frammistöðu, svo ekki hafa áhyggjur af því að það virðist sem myndirnar þínar séu að búa til tonn af HTTP beiðnum.

En ég segi: Ef CSS myndhryggir geta dregið verulega úr HTTP beiðnum á vefsvæðinu þínu, og þú veist hvernig á að útfæra það sama, farðu þá og sláðu þær auka sekúndur af hleðslutíma síðunnar. Hvort sem þú ert með HTTP / 2 eða ekki.

Þegar öllu er á botninn hvolft þarf staka myndskrá að hafa eina HTTP beiðni. Tíu aðskildar myndir þurfa 10 HTTP beiðnir og svo framvegis. Ég veit að þú færð svífið.

Skref 3: Sameina og fækka HTML, CSS og JavaScript

Helsta orsök margra HTTP beiðna á WordPress vefsíðunni minni voru utanaðkomandi CSS og JavaScript skrár. Já, ég var að stríða við 43 JS forskriftir og 22 CSS skrár. Þetta eru 66 HTTP beiðnir.

Af um 130 HTTP beiðnum voru utanaðkomandi CSS og JavaScript beiðnir um 51% um vandamálið! Það er bara fáránlegt. Takk, GTMetrix, högg hnefann minn.

Ef ég sameina og minnka þessar 44 JS og 22 CSS skrár, get ég dregið úr HTTP beiðnum mínum verulega, stærð vefsíðunnar og tímann sem það tekur að hlaða. En hvað er þetta „að sameina“ og „gera lítið úr“ viðskiptum allt saman??

Samkvæmt Raelene Morey af orðum eftir Fugla (ég er mikill aðdáandi ��), minification er ferlið við „… að fjarlægja óþarfa stafi, eins og athugasemdir, snið, hvítt rými og nýjar línur úr HTML, CSS og JavaScript skrám sem eru ekki nauðsynlegar fyrir kóða til að framkvæma. “

Með því að fínstilla minnkar skráarstærðin með því að eyða öllum öðrum stöfum og skilja aðeins eftir númerið. En ef þú ert með 66+ utanaðkomandi forskriftir, þá gerir minification ekki mikið til að lágmarka HTTP beiðnir. Til þess þarftu að sameina CSS og JavaScript skrárnar þínar.

Aftur segir Raelene:

Að sameina skrár er á sama tíma og það hljómar. Til dæmis, ef vefsíðan þín hleður inn 5 ytri CSS skrám og 5 ytri JavaScript skrám, ef CSS og JavaScript sameinast í eina aðskilda skrá hver og það myndi leiða til aðeins 2 beiðna í stað 10.

Nærðu því? Ég vona það vissulega. Sameining skráa dregur úr HTTP beiðnum. Minification dregur aftur á móti úr stærð skráarinnar. Sameinaðu þá tvo og drepið tvo fugla með sama steini.

Eru til viðbótar? Já auðvitað!

WP eldflaugar WordPress skyndiminni viðbót

Upplýsingar & niðurhal Skoða kynningu

Það eru fullt af WordPress viðbótum til að sameina og gera skrárnar minni. Gott dæmi er WP Rocket tappið. Það er í grundvallaratriðum ein besta skyndiminnisforrit sem býður þér möguleika til að sameina og gera lítið úr skrám með nokkrum smellum.

Annar vinsæll (og frítt) valmöguleikinn er Sjálfvirkni stinga inn.

Við the vegur, þegar þú ert að því, að fækka utanaðkomandi CSS skrám og JS forskriftum? Til dæmis og við erum ekki að nefna nöfn hér, þarftu virkilega athugasemdapall frá þriðja aðila? Þarftu lifandi útvarpstenging?

Það skiptir ekki máli hvað ég segi, útrýmdu öllum utanaðkomandi forskriftum og skrám sem þú þarft ekki.

Skref 4: Aðlaga CSS og JavaScript skrár sem gefnar eru út

Í sumum tilvikum gæti verið að það sé ekki valkostur að sameina skrár, sérstaklega fyrir skrár og forskriftir þriðja aðila sem breytast oft. Í slíkum tilvikum geturðu frestað fermingu slíkra eigna. HTTP / 2 styður ósamstilltur hleðslu skráa, sem þýðir að allar skrár hlaðast samtímis.

Ef þú ert ekki með samstilltur hleðslu í gangi af einhverjum ástæðum (ef til vill notarðu ekki HTTP / 2, eða forskriftirnar eru ekki ósamstilltar), þessar skrár geta hægt vefsíðuna þína verulega.

Hafðu í huga að vefsíður þínar hlaða frá toppi til botns. Ef þú ert að hindra CSS og JS efst á síðunni mun vafrinn hætta að hlaða þangað til skrárnar hafa verið fullar hlaðnar. Sem slíkir munu notendur sjá autt síðu þar til forskriftirnar hlaðast, sem tekur tíma.

Hvernig? Færðu öll forskriftarblokkandi forskriftir frá toppi til botns á vefsíðunni þinni. En vertu varkár hér; þú þarft ekki að færa öll forskrift niður í botn. Ég segi þetta þar sem síða þín gæti þurft CSS og JS til að skila rækilegri upplifun.

Ef þú frestar einhverjum CSS eða JavaScript skrám gætu notendur þínir séð brenglaða útgáfu af vefsíðunni þinni þar til síðunni hleðst að fullu, sem er nákvæmlega hið gagnstæða af því sem þú vilt ná.

Svo frestaðu aðeins forskriftir sem ekki eru nauðsynlegar til að síðunni hleðst inn. Þannig munu notendur þínir ekki bíða á aldrinum eftir að síðunni hleðst inn. Af hverju? Vegna þess að þú þarft færri HTTP beiðnir til að skila skilaboðunum þínum.

Það dregur ekki úr HTTP beiðnum í sjálfu sér (vegna þess að öll forskriftir og skrár munu hlaða að lokum), en það dregur úr fjölda HTTP beiðna sem þarf til að birta síðuna þína.

Það er mjög eins og latur hleðsla fyrir myndir; myndin er aðeins hlaðin þegar hún er á útsýni og ekki þegar restin (og mikilvægustu hlutar) síðunnar hleðst inn.

Við the vegur, með því að laga CSS & JS til að útvega hindrun gæti leitt í ljós skrár og forskriftir sem þú þarft ekki að byggja upp vefsíðu.

Til dæmis, ef það tekur langan tíma að hlaða einhverju utanaðkomandi JS handriti fyrir félagslega samnýtingu, geturðu frestað því. Ofan á það geturðu útrýmt því og byggt félagslega samnýtingu í þemað þitt.

Þú verður að útrýma HTTP beiðnum og flýta fyrir síðuna þína en halda sömu virkni. Mér skilst að kóðunaraðgerðir í þemað þitt séu háar röð fyrir flesta byrjendur, svo hafðu samband við háþróaðan WP notanda eða forritara.

Í staðinn geturðu notað WP Rocket viðbótina til að laga forskriftarblokka handrit, en vertu varkár. Lestu skjöl þeirra því ef þú klúðrar hlutum geturðu brotið vefsíðuna þína auðveldlega.

Eru ókeypis valkostir? Auðvitað! Við erum að vinna með WordPress, manstu? Þú getur notað Ósamstilltu JavaScript, meðal annarra viðbóta.

Skref 5: Notaðu skyndiminni og CDN

Vissir þú að skyndiminni og CDN geta dregið úr HTTP beiðnum þínum? Það virðist ekki vera staðreynd til að byrja með, en þegar þú íhugar hvað gerist á bak við tjöldin geturðu notað skyndiminni og CDN í þágu þín.

Skyndiminni felur í sér að geyma truflanir skrár í vafra svo að notendur sæki ekki skrárnar í síðari heimsóknum. Segðu að þú hafir tappi til skyndiminni og notandinn hali niður skyndiminni efnið í fyrstu heimsókn sinni.

Við síðari heimsóknir biður vefsvæðið þitt ekki við netþjóninn. Í staðinn mun það þjóna skyndiminni úr vafranum, draga úr HTTP beiðnum og auka hraðann á vefsvæðinu þínu.

CDN (eða Content Dafhending Network) er net netþjóna sem eru staðsettir um allan heim. CDN notar skyndiminni líka, en fyrir enn meiri hraða þjónar CDN veitan þínum skyndiminni efni frá netþjóni sem er næst gestinum.

Styttri vegalengdir þýða hraðari afhendingu efnis og skyndiminni þýðir að vefsíðan þín þarf ekki að hlaða niður sama efni frá aðalmiðlaranum upp á nýtt. Er það skynsamlegt fyrir þig?

Cloudflare CDN viðbót

Og best af öllu eru fjöldi ókeypis CDN valkosta (eða að minnsta kosti ókeypis rannsóknir svo þú getur alveg bókstaflega séð muninn sem það gerir). Við hjá WPExplorer notum og mælum mjög með CLoudflare, en veldu CDN sem þér finnst henta þér best.

Bónus: Gakktu úr skugga um að stutt sé með HTTP / 2

Þú gætir verið að gera allt til að draga úr HTTP beiðnum, en vefþjóninn þinn gæti verið orsök eymdarinnar. Ekki vera hissa; að spyrja og hugsa, hver – á þessum tíma og aldri – notar allt annað en HTTP / 2?

Þú veist líklega ekki einu sinni hvað HTTP / 2 snýst allt um. Jæja, til að byrja með, HTTP / 2 styður ósamstilltur hleðslu skráa, meðal annars. Það hefur aðra kosti yfir HTTP 1.0, en það er kennslustund í annan dag.

Ef þú notar HTTP 1.0 eða lægri muntu taka eftir talsverðum fjölda HTTP beiðna.

Ekki vera fljótur að dæma; Ég hef séð vefþjónusta veitendur sem nota enn HTTP 1.0 og eldri útgáfur af PHP. Já, jafnvel með þeim áberandi ávinningi af HTTP / 2 og PHP 7. Ég er ekki einu sinni að bláa; sumir viðskiptavinir þeirra koma til mín þegar tapparnir þeirra virka ekki og það er pirrandi!

En, í raun, af hverju? Sú staðreynd að sumir vefþjónusta veitendur eru ekki að trufla þá staðreynd að PHP 5.6 er úrelt og hefur öryggis varnarleysi er bara eitthvað annað. Og ef þeir styðja ekki HTTP / 2, þá er það raunverulegur samningur fyrir þig.

KeyCDN HTTP / 2 próf

Hafðu samband við gestgjafann þinn eða notaðu hann Tól KeyCDN til að athuga hvort netþjóninn þinn styður HTTP / 2. Besti vefþjónninn styður HTTP / 2 og nýjustu útgáfuna af PHP. Ef gestgjafi þinn er eftirbátur í báðum tilvikum skaltu biðja þá um að uppfæra eða velja betri vefþjón.

Lokaorð

Að draga úr HTTP beiðnum á WordPress vefnum þínum snýst allt um að útrýma hlutum sem þú þarft ekki. Ef þú ert með mikið af efni á WordPress vefsíðunni þinni muntu hafa mikið af HTTP beiðnum og tiltölulega hægum blaðsíðum.

Til að draga úr HTTP beiðnum, slepptu vefsvæðinu þínu, fínstilltu myndir, lagaðu forskriftir sem hindra gjöf, nota skyndiminni og tryggja að gestgjafinn þinn styðji HTTP / 2. Annað en leitast við að búa til einfaldar og hreinar vefsíður sem þurfa ekki tonn af eignum til að hlaða.

Ef þú hefur spurningar, vinsamlegast láttu okkur vita í athugasemdahlutanum hér að neðan. Skál við hraðari vefsíður og mikil framtíð framundan!

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