Slik reduserer du HTTP / S-forespørsler i WordPress

Slik reduserer du HTTP / S-forespørsler i WordPress

Her er en historie du vil elske hvis du vil øke hastigheten på WordPress-nettstedet ditt.


Forleden bygde jeg et skinnende nettsted. Jeg gikk helt ut og la til WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, live radio (oh ja, det gjorde jeg), Cookie Notice, sosiale medier og en haug med andre plugins.

Akkurat som deg, var jeg opptatt av å imponere de besøkende, eller slik trodde jeg. Men så ble ting uutholdelig tregt. Etter mye kval, fyrte jeg opp GTMetrix for å spyle problemet.

Til min forferdelse så jeg dette:

resultatene av gtmetrix hastighet

Ble jeg imponert? Helvete til NAW! Jeg ønsket å score en perfekt A, og redusere lastetiden til under to sekunder.

Så jeg slo på test-knappen, men gjett hva? Fortsatt det samme kvalmende resultatet. Jeg var forferdet, sint selv. Men jeg gir ikke lett fordi den typen ting er uakseptabelt.

Vet du hva jeg gjorde videre? Jeg testet nettstedet på Pingdom fordi GTMetrix kan suge den. Men nedenfor er de dystre resultatene, nok en gang:

pingdom verktøy hastighet testresultater

Jeg ble irritert. Den ordspråklige tornen i kjøttet mitt var de feilaktige HTTP-forespørslene, siden jeg raskt kunne løse mange av de andre problemene.

For å gjøre vondt verre, brukte jeg et e-handel WordPress-tema som lastet inn en milliarder elementer for å bygge hjemmesiden. Til mitt forsvar så det utrolig ut. Noen brukere var enige om at designen var på sin plass også, så ja, jeg falt ikke for trikset alene ��

Men flott visuell design og lave hastigheter går ikke hånd i hånd. Jeg trengte en løsning og raskt.

Hvordan kan jeg redusere HTTP-forespørsler på WordPress-nettstedet mitt?

Hver gang du besøker et WordPress-nettsted, beveger det seg mye data mellom nettleseren og nettstedets servere. Med andre ord sender WordPress HTTP-forespørsler til forskjellige servere for å bygge det brukerne ser når de laster inn nettstedet ditt.

Hvis WordPress-nettstedet ditt krever mange elementer å laste, vil du ha flere HTTP-forespørsler og omvendt. Flere HTTP-forespørsler betyr en treg nettside, dårlig brukeropplevelse (UX), dårlig SEO-score og lave konverteringsfrekvens.

WordPress nettsteder er vanligvis dynamiske, noe som betyr at det tar mange forskjellige deler å gjengi nettstedet ditt i en nettleser. Den gode nyheten er at du kan redusere HTTP-forespørsler og øke hastigheten på nettstedet ditt betydelig.

Og i dagens innlegg lærer du nøyaktig hvordan!

Rapporter fra GTMetrix og Pingdom viser deg vanligvis hvor problemet ligger. Som sådan kan du teste nettstedet ditt ved å bruke begge verktøyene for å finne ut hvilke områder du må forbedre. Når rapportene dine er klare, kan du redusere HTTP / S-forespørsler og få ditt WordPress-nettsted raskere.

Trinn 1: Declutter

Gutter, hvis du har mange ting på WordPress-nettstedet ditt, vil du ha for mange HTTP-forespørsler. Det er ingen brainer. Det første trinnet for å redusere HTTP-forespørsler er dekluttering.

Med det mener jeg å bli kvitt alle pluginene du ikke trenger. WordPress-plugins kommer med mange filer, det være seg PHP, CSS eller JavaScript (JS). Hver fil som hvert plugin avgir, oppretter en HTTP-forespørsel.

Hvis du har massevis av plugins, vil du definitivt ha flere HTTP-forespørsler. Jo færre plugins, jo færre forespørsler. Det er ganske enkelt.

Hva å gjøre?

Gjør en revisjon av pluginene dine. Hvilke plugins må du ha for å kjøre nettstedet ditt? Er det plugins du ikke trenger? Har du plugins som kobles til tredjepartsservere? Kan du klare deg uten disse programtilleggene?

For å redusere HTTP-forespørsler, avinstallerer du alle programtilleggene du ikke trenger. Hvis du trenger en plugin av og til, må du bare installere den når du trenger den. Deretter avinstallerer du plugin-modulen.

Det samme gjelder WordPress-temaer og innhold du ikke bruker. Rengjør alt det der. Fjern alt du ikke trenger; det er bra for nettstedets hastighet og sikkerhet.

Du kan gå den ekstra milen og laste inn plugins selektivt. Hvis du for eksempel bare trenger kontaktskjema 7 for å laste inn på kontaktsiden din, kan du forhindre at andre plugins blir lastet inn på den bestemte siden.

Det ville være kjempebra, er du ikke enig? Og å tro at du bare trenger Asset CleanUp WordPress-plugin.

WP Asset CleanUp WordPress-plugin

Plugin-en er enkel å bruke og ganske effektiv. Eller som utvikleren uttrykker det:

“Asset CleanUp” skanner siden og oppdager alle eiendelene som er lastet. Alt du trenger å gjøre når du redigerer en side / et innlegg er bare å velge CSS / JS som ikke er nødvendig å laste, på denne måten reduserer du oppblåst.

Rydd opp i installasjonen allerede hombre; bli kvitt søppel – kommentar spam inkludert. Å ja, eliminere ødelagte koblinger og optimaliser databasen mens du også er der. Dette er viktige områder du bør vurdere så langt du øker nettstedets hastighet, men jeg taper.

La oss gå tilbake til å redusere HTTP-forespørsler.

Trinn 2: Optimaliser bilder

Et nettsted uten bilder er, vel, trist. De sier at et bilde snakker tusen ord, og det er kult. Men hvert bilde står for en HTTP-forespørsel. For å legge salt til skade, er bilder topp blant elementer som tar lang tid å laste.

Likevel kan vi ikke se bort fra at de fleste WordPress-temaer (les nettsteder) er avhengige av bilder, og mange bilder for den saks skyld. Så, i lys av dette, hvordan kan du redusere HTTP-forespørsler ved å optimalisere bildene dine?

For det første må du kvitte deg med alle bildene du ikke bruker. Vær hensynsløs; bli kvitt all den oppblåstheten – du trenger ikke den. Etter det kan du komprimere og optimalisere bilder for å fjerne unødvendige fildata.

WP-komprimeringsplugin

Info & Last nedVis demonstrasjonen

Selv om det er flere plugins å velge mellom, liker vi virkelig WP Compress. Selv om det er en førsteklasses tjeneste, gjør kraftig autooptimalisering av bilder, tapsfri komprimering, skybehandling for å redusere serverbelastningen, WebP-bildesupport, automatisk størrelse på størrelse og mer, investeringen vel verdt det (sjekk gjennomgangen vår for å lære mer). I tillegg kan du få oppgitt med 100 bilder gratis – slik at du i det minste kan prøve det.

Optimalisering av bilder reduserer ikke HTTP-forespørslene dine i seg selv, men det reduserer størrelsen på bildefilene dine, noe som betyr bedre sidehastigheter på linjen.

Alternativt for å redusere HTTP-forespørsler, utnytt kraften til CSS image sprites. For de uinnvidde er en sprite en samling av bilder satt inn i en enkelt bildefil.

Deretter kan du velge CSS-triks for å velge hvilken del av bildet som skal vises. Men hvordan reduserer dette HTTP-forespørsler? Her er en analogi.

Si at du trengte fem bilder på hjemmesiden din. For å laste inn nettstedet ditt, vil WordPress-installasjonen ta fem turer til serveren for å få bilder. Hvis du nå legger alle de fem bildene i en enkelt bildefil (sprite), vil WordPress-installasjonen bare ta en tur.

Ser du hvor jeg skal med dette? Jo færre turer, desto mindre forespørsler HTTP. Det beste er at du ikke trenger å svette for å lage og implementere CSS-bildespruter. Du kan bruke et verktøy som f.eks CSS Sprite Generator. Det er enkelt å implementere CSS-image sprites, forutsatt at du kjenner deg rundt CSS.

Pro-tips: Du kan glemme alt om CSS-bildespruter hvis nettstedet ditt bruker HTTP / 2 som støtter asynkron lasting av bilder og skript. GTMetrix tar ikke hensyn til HTTP / 2 når du scorer ytelse, så ikke bekymre deg for om det virker som om bildene dine lager massevis av HTTP-forespørsler.

Men jeg sier: Hvis CSS-bildespritt kan redusere HTTP-forespørsler betydelig på nettstedet ditt, og du vet hvordan du implementerer det samme, kan du gå inn for det og slå de ekstra sekundene fra sideinnlastingstiden. Hvorvidt du har HTTP / 2 eller ikke.

Tross alt krever en enkelt bildefil en enkelt HTTP-forespørsel. Ti separate bilder trenger 10 HTTP-forespørsler og så videre. Jeg vet at du får driften.

Trinn 3: Kombiner & Minifiser HTML, CSS og JavaScript

Den viktigste årsaken til mange HTTP-forespørsler på WordPress-nettstedet mitt var eksterne CSS- og JavaScript-filer. Jepp, jeg kjempet med 43 JS-skript og 22 CSS-filer. Det er 66 HTTP-forespørsler.

Av rundt 130 HTTP-forespørsler sto eksterne CSS- og JavaScript-forespørsler for omtrent 51% av problemet! Det er bare latterlig. Takk, GTMetrix, støt knyttneven min.

Hvis jeg kombinerer og minifiserer de 44 JS- og 22 CSS-filene, kan jeg redusere HTTP-forespørslene mine betydelig, størrelsen på nettstedet og tiden det tar å laste inn. Men hva handler denne “kombinere” og “minifisere” virksomheten om?

I følge Raelene Morey of Words by Birds (jeg er en stor tilhenger av ��), er minification prosessen med “… å fjerne unødvendige tegn, som kommentarer, formatering, hvit plass og nye linjer fra HTML-, CSS- og JavaScript-filer som ikke er nødvendige for kode for å utføre. ”

Minifisering reduserer filstørrelsen ved å eliminere alle andre tegn for å bare legge igjen koden. Men hvis du har 66+ eksterne skript, gjør ikke minifisering mye for å minimere HTTP-forespørsler. For det må du kombinere dine CSS- og JavaScript-filer.

Igjen sier Raelene:

Å kombinere filer er i mellomtiden akkurat som det høres ut. Hvis websiden din for eksempel laster inn 5 eksterne CSS-filer og 5 eksterne JavaScript-filer, vil kombinasjon av CSS og JavaScript til en enkelt separat fil resultere i bare to forespørsler i stedet for 10.

Forstår du det? Jeg håper det. Å kombinere filer reduserer HTTP-forespørsler. Minifisering reduserer derimot filstørrelsen. Kombiner de to, så dreper du to fugler med samme stein.

Er det plugins? Ja, selvfølgelig!

WP Rocket WordPress Cache Plugin

Info & NedlastingVis The Demo

Det er massevis av WordPress-plugins for å kombinere og minimere filene dine. Et godt eksempel er WP Rocket-plugin. Det er i utgangspunktet en av de beste hurtigbufring-programtilleggene som gir deg funksjoner for å kombinere og minifisere filer med noen få klikk.

En annen populær (og gratis) alternativet er Autoptimize plugg inn.

Forresten, mens du er på det, redusere antall eksterne CSS-filer og JS-skript? For eksempel, og vi nevner ikke navn her, trenger du virkelig en tredjeparts kommentarplattform? Trenger du en live radio plugin?

Det har ikke noe å si hva jeg sier, fjern alle eksterne skript og filer du ikke trenger.

Trinn 4: Juster CSS- og JavaScript-filer for gjengivelse

I noen tilfeller er det ikke mulig å kombinere filer, spesielt for tredjepartsfiler og skript som endres ofte. I slike tilfeller kan du utsette lastingen av slike eiendeler. HTTP / 2 støtter asynkron innlasting av filer, som betyr at alle filene lastes samtidig.

Hvis du ikke har asynkron lasting av en eller annen grunn (kanskje du ikke bruker HTTP / 2, eller skriptene ikke er asynkrone), kan disse filene redusere nettstedet ditt betydelig.

Husk at websidene dine lastes fra topp til bunn. Hvis du har gjengisblokkerende CSS og JS øverst på siden din, vil nettleseren slutte å laste til filene har blitt lastet helt inn. Som sådan vil brukerne se en blank side til skriptene lastes, noe som tar tid.

Hvordan? Flytt alle gjengivelsesblokkerende skript fra toppen til bunnen av websiden din. Men vær forsiktig her; trenger du ikke å flytte alle skript til bunnen. Jeg sier dette siden siden din kanskje trenger CSS og JS for å levere en grundig engasjerende opplevelse.

Hvis du utsetter noen CSS- eller JavaScript-filer, kan brukerne dine se en forvrengt versjon av websiden din til siden lastes helt inn, noe som er akkurat det motsatte av det du vil oppnå.

Så bare utsett skript som ikke er nødvendig for at siden skal lastes inn. På den måten vil ikke brukerne dine vente i aldre til siden din lastes inn. Hvorfor? Fordi du vil trenge færre HTTP-forespørsler for å levere meldingen.

Det reduserer ikke HTTP-forespørsler i seg selv (fordi alle skript og filer vil lastes etterhvert), men det reduserer antall HTTP-forespørsler som trengs for å gjengi siden din..

Det ligner veldig på lat lasting for bilder; bildet lastes bare når det er i visningsområdet, ikke når resten (og de viktigste delene) av siden lastes inn.

Forresten, ved å fikse gjengivelsesblokkerende CSS & JS kan det hende at du avslører filer og skript du ikke trenger å bygge en webside.

Hvis det for eksempel tar lang tid å laste inn noe eksternt JS-skript for sosial deling, kan du utsette det. På toppen av det kan du eliminere det og bygge sosial deling i temaet ditt.

Du vil eliminere HTTP-forespørsler og øke hastigheten på nettstedet ditt mens du beholder den samme funksjonaliteten. Jeg forstår at kodingsfunksjoner i temaet ditt er en høy rekkefølge for de fleste nybegynnere, så ta kontakt med en avansert WP-bruker eller utvikler.

Som et alternativ kan du bruke WP Rocket-plugin til å fikse gjengivelsesblokkerende skript, men vær forsiktig. Les dokumentasjonen deres, fordi hvis du roter bort ting, kan du ødelegge nettstedet ditt enkelt.

Finnes det gratis alternativer? Selvfølgelig! Vi jobber med WordPress, husker du? Du kan bruke Async JavaScript, blant andre plugins.

Trinn 5: Bruk Cache og CDN

Visste du at cache og CDN-er kan redusere HTTP-forespørslene dine? Det virker ikke som et faktum med det første, men når du vurderer hva som skjer bak kulissene, kan du bruke cache og CDN til din fordel.

Bufring innebærer å lagre statiske filer i en nettleser slik at brukere ikke laster ned filene ved påfølgende besøk. Si at du har en cache-plugin, og at brukeren laster ned bufret innhold på det første besøket.

Ved påfølgende besøk vil ikke nettstedet ditt sende forespørsler til serveren. I stedet vil den tjene hurtigbufrede ressurser fra nettleseren, redusere HTTP-forespørsler og øke nettstedets hastighet.

En CDN (eller Content Delivery Network) er et nettverk av servere som er plassert over hele verden. En CDN bruker hurtigbufring også, men for enda raskere hastigheter betjener CDN-leverandøren din bufret innhold fra en server som er nærmest besøkende.

Kortere avstander betyr raskere levering av innhold, og hurtigbufring betyr at nettstedet ditt ikke trenger å laste ned det samme innholdet fra den sentrale serveren igjen. Er det fornuftig for deg?

Cloudflare CDN-plugin

Og best av alt er det en rekke gratis CDN-alternativer (eller i det minste gratis studier, slik at du bokstavelig talt kan se forskjellen det gjør). Hos WPExplorer bruker og anbefaler vi CLoudflare på det sterkeste, men velg CDN som du føler fungerer best for deg.

Bonus: Forsikre deg om at HTTP / 2 støttes

Du gjør kanskje alt for å redusere HTTP-forespørsler, men webhotellet kan være årsaken til dine lidelser. Ikke bli overrasket; spør og tenker, hvem – i denne tiden og tidsalderen – bruker alt annet enn HTTP / 2?

Du vet sannsynligvis ikke engang hva HTTP / 2 handler om. Vel, for det første støtter HTTP / 2 asynkron lasting av filer, blant annet. Det har andre fordeler i forhold til HTTP 1.0, men det er en leksjon for en annen dag.

Hvis du bruker HTTP 1.0 eller lavere, vil du merke et betydelig antall HTTP-forespørsler.

Ikke vær rask med å dømme; Jeg har sett webhotellleverandører som fortsatt bruker HTTP 1.0 og eldre versjoner av PHP. Ja, selv med de tilsynelatende fordelene med HTTP / 2 og PHP 7. Jeg bløffer ikke engang; noen av kundene deres kommer til meg når noen av pluginene deres ikke fungerer, og det er irriterende!

Men egentlig, hvorfor? At noen webhotellleverandører ikke plages av at PHP 5.6 er utdatert og har sikkerhetsproblemer, er bare noe annet. Og hvis de ikke støtter HTTP / 2, er dette en avtale for deg.

KeyCDN HTTP / 2 Test

Kontakt verten eller bruk KeyCDNs verktøy for å sjekke om serveren din støtter HTTP / 2. Den beste webhotellet støtter HTTP / 2 og den nyeste versjonen av PHP. Hvis verten din henger i begge tilfeller, kan du be dem oppgradere eller velge en bedre webhotell.

Avsluttende ord

Å redusere HTTP-forespørsler på WordPress-nettstedet ditt handler om å eliminere ting du ikke trenger. Hvis du har mange ting på WordPress-nettstedet ditt, vil du ha mange HTTP-forespørsler og relativt langsomme sidehastigheter.

For å redusere HTTP-forespørsler, declutter nettstedet ditt, optimaliser bilder, fikse gjengivelsesblokkerende skript, bruk hurtigbufring og sikre at verten støtter HTTP / 2. Annet enn det, forsøk å lage enkle og rene nettsteder som ikke trenger massevis av eiendeler å laste inn.

Hvis du har spørsmål, vennligst gi oss beskjed i kommentarfeltet nedenfor. Skål til raskere nettsteder og en flott fremtid fremover!

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