Analyse og effekter av HTTP-forespørsler på WordPress-ytelse

I dagens verden fører nettsteder som er hurtige til høyere besøkendes engasjement, oppbevaring og konverteringer. Det er mange faktorer som bidrar til nettsiden hastighet; en av disse er Antall HTTP-forespørsler.

I denne veiledningen vil jeg forklare hva HTTP-forespørsler er, hvordan du bestemmer antall HTTP-forespørsler, effektene de har på WordPress-ytelsen, hvordan plugins og temaer ikke hjelper saker og løsninger på problemet.

Hva er en HTTP-forespørsel?

Når en nettleser gjør en nettside, sender den en forespørsel til webserveren via HTTP for statiske ressurser eller komponenter (for eksempel bilder, CSS og JavaScript), og serveren reagerer og sender filene til nettleseren. Dermed en forespørsel sendt av nettleseren til serveren ved hjelp av HTTP refereres til som en HTTP-forespørsel.

Analyse av en HTTP-forespørsel

For bedre å forstå betydningen av en HTTP-forespørsel, ta en titt på HTML-koden på en enkel nettside:

Fra bildet ovenfor kan du se at det er totalt fire HTTP-forespørsler.

Effekten av HTTP-forespørsler på WordPress

I følge Yahoos ytelsesregel:

80% av sluttbrukerens svarstid tilbys på forsiden. Mesteparten av denne tiden er bundet til å laste ned alle komponentene på siden: bilder, stilark, skript, Flash, etc. Redusering av antall komponenter reduserer igjen antallet HTTP-forespørsler som kreves for å gjengi siden. Dette er nøkkelen til raskere sider.

Fra utsnittet ovenfor har vi riktig ut fra det, jo færre antall HTTP-forespørsler, desto raskere er nettstedet. Derfor har et WordPress-drevet nettsted med mange bilder og eksternt refererte CSS- og JavaScript-filer en tendens til å være sakte.

Teller antall HTTP-forespørsler

Bruke Firefox Firebug-utvidelse, og Inspisér element verktøy for Google Chrome og Opera, kan du enkelt bestemme antall HTTP-forespørsler på en nettside.

La oss se hvordan du kontrollerer antall HTTP-forespørsler fra vår WordPress-blogg.

Bruke Firefox

Kontroller at du har installert Firebug-utvidelsen.

• Legg inn WordPress-bloggen din og trykk på F12 nøkkel for å åpne Firebug-konsollen.
• Naviger til Nettverkspanel. Hvis den er deaktivert, bare aktiver den.
• Oppdater ditt WordPress-nettsted, slik at Net Panel vil fange opp og registrere HTTP-forespørslene.
• Du bør se antall HTTP-forespørsler som vises nederst.
  

Bruke Chrome og Opera

I motsetning til Firefox trenger du ikke en utvidelse i Chrome og Opera for å sjekke HTTP-forespørsel heller den innebygde Inspisér element verktøyet brukes.

Trinnene nedenfor gjelder for både Chrome og Opera.

• Last inn din WordPress-blogg.
• Høyreklikk og velg velg Inspisér element.
• Naviger til Nettverkspanel og oppdater ditt WordPress-nettsted.
• Du bør se antall HTTP-forespørsler som vises nederst.
  

Vet du at du installerer de fleste WordPress-plugins, øker antall nettsidekomponenter og øker dermed antall HTTP-forespørsler?

Hvordan plugger og temaer øker HTTP-forespørsler

Mange plugins vi installerer, øker antall HTTP-forespørsler uten bevissthet til oss.

De fleste plugins stole på deres egendefinerte bilder, CSS og JavaScript-fil slik at de kan fungere. De gjør det ved å legge til en lenke som refererer til disse komponentene til WordPress, som igjen øker antall HTTP-forespørsler.

Som et solidt tilfelle bruker vi WP-abonnentskjemaet for å forstå hvordan plugins øker HTTP-forespørsel.

Aktivering av plugin vil legge til et nyhetsbrev abonnement på slutten av innlegget innhold og også inkludere en lenke til sin ekstern stilark til WordPress.

Vise sidekilde av WordPress-siden din etter at plugin-aktiveringen avslører tillegg av en ny CSS-komponent som vist nedenfor, noe som betyr en økning i HTTP-forespørsler.

Som plugins inneholder WordPress-temaer mange CSS- og JavaScript-komponenter. Et typisk tema består av innebygde fonter, CSS og JavaScript-komponenter som fører til økning i antall forespørsler.

Forholdet mellom Minifisering og HTTP-forespørsel

Størrelsen på hver enkelt nettsidekomponent har også effekt på WordPress-ytelsen. Jo mindre størrelse, desto raskere blir HTTP-forespørselen til komponenten fullført fordi nettleseren bruker mindre tid å laste den ned som følge av at den er liten størrelse.
Størrelsen på CSS og JavaScript-komponenten kan reduseres ved reduksjon (fjerner alle unødvendige tegn og hvite mellomrom fra kildekoden).

Slik reduserer du HTTP-forespørsler i WordPress

For å redusere antall HTTP-forespørsler, må vi redusere antallet bilder, CSS og JavaScript-filer på WordPress.

Jeg vet at ideen om å redusere antall bilder på bloggen din kanskje ikke går bra med noen av oss, men du bør prøve så mye som mulig å fjerne bilder som ikke er kritiske for utformingen av nettstedet vårt.

WordPress-temaer bruker bakgrunnsbilder i deres CSS for å forbedre sin skjønnhet. Du kan redusere antall bilder ved å gjøre dem til sprites. Se denne A List Aparts artikkel og Tuts + Screencast for å forstå hvordan CSS sprites fungerer.

Ytelsen til WordPress kan forbedres betraktelig når temaer 'CSS og JavaScript blir kombinert og minifisert.

Det er et par WordPress-plugins som WP Minify og Better WordPress Minify (jeg har brukt og vil anbefale disse pluginene) som henholdsvis kombinerer JavaScript og CSS til en enkelt fil, og dermed reduserer antall HTTP-forespørsler.

Hvis du bruker W3 Total Cache-plugin, trenger du ikke å installere pluginene ovenfor, fordi det har et alternativ å redusere og kombinere CSS og JavaScript.

Som utvikler redigerer jeg plugins som legger til ekstra komponenter i WordPress-bloggen min, klipper CSS og JavaScript lagt til av pluginene og limer dem til temaet mitt CSS og JavaScript-fil slik at de er forenet.

Konklusjon

Betydningen av nettsidenes hastighet kan ikke overbelastes. Et nettsted som er treg, kjører bort besøkende.

Det er mange beste praksis for å øke hastigheten på nettstedet, og det ene reduserer antall HTTP-forespørsler som vi lærte i denne artikkelen.