Share
In de wereld van vandaag leiden websites die snel leiden tot hogere bezoekersbetrokkenheid, retentie en conversies. Er zijn veel factoren die bijdragen aan de snelheid van websites; een van deze is de aantal HTTP-aanvragen.
In deze tutorial leg ik uit wat HTTP-aanvragen zijn, hoe het aantal HTTP-aanvragen kan worden bepaald, welke effecten ze hebben op WordPress-prestaties, hoe plug-ins en thema's niet helpen en oplossingen voor het probleem.
Wanneer een webbrowser een webpagina aan het weergeven is, stuurt deze via HTTP een verzoek naar de webserver voor statische bronnen of componenten (zoals afbeeldingen, CSS en JavaScript) en de server reageert en verzendt de bestanden naar de browser. Dus een verzoek verzonden door de browser naar de server met HTTP wordt een HTTP-verzoek genoemd.
Lees de HTML-code van een eenvoudige webpagina om de betekenis van een HTTP-verzoek beter te begrijpen:
Uit de afbeelding hierboven kon je zien dat er in totaal vier zijn HTTP-verzoeken.
Volgens de prestatievoorschriften van Yahoo:
80% van de responstijd van de eindgebruiker wordt besteed aan de front-end. Het grootste deel van deze tijd zit vast in het downloaden van alle componenten op de pagina: afbeeldingen, stylesheets, scripts, Flash, enz. Door het aantal componenten te verminderen, wordt het aantal HTTP-verzoeken dat nodig is om de pagina weer te geven verminderd. Dit is de sleutel tot snellere pagina's.
Uit het bovenstaande fragment kunnen we afleiden dat hoe minder het aantal HTTP-verzoeken, hoe sneller de website; Daarom is een WordPress-site met veel afbeeldingen en extern gerefereerde CSS- en JavaScript-bestanden meestal traag.
Firebug-extensie van Firefox gebruiken, en Inspecteer Element tool voor Google Chrome en Opera, u kunt moeiteloos het aantal HTTP-verzoeken van een webpagina bepalen.
Laten we eens kijken hoe we het aantal HTTP-verzoeken van ons WordPress-blog kunnen controleren.
Zorg ervoor dat de Firebug-extensie is geïnstalleerd.
Accentsconagua
F12 sleutel om de Firebug-console te openen.Net Panel. als het is uitgeschakeld, schakelt u het gewoon in.
In tegenstelling tot Firefox hebt u geen extensie in Chrome en Opera nodig om het HTTP-verzoek in plaats van het ingebouwde antwoord te controleren Inspecteer Element gereedschap wordt gebruikt.
De onderstaande stappen zijn geldig voor zowel Chrome als Opera.
Inspecteer Element. Netwerkpaneel en vernieuw uw WordPress-site.
Wist u dat het installeren van de meeste WordPress-plug-ins het aantal webpaginacomponenten verhoogt, waardoor het aantal HTTP-aanvragen toeneemt?
Veel plug-ins die we installeren, verhogen het aantal HTTP-verzoeken onbewust voor ons.
De meeste plug-ins zijn afhankelijk van hun aangepaste afbeeldingen, CSS en JavaScript-bestand om te kunnen functioneren. Ze doen dit door een link toe te voegen die naar deze componenten verwijst naar WordPress, wat op zijn beurt het aantal HTTP-aanvragen verhoogt.
Als een goed voorbeeld, zullen we het WP Subscriber Form gebruiken om volledig te begrijpen hoe plug-ins toenemen HTTP-aanvraag.
Als u de plug-in activeert, voegt u aan het einde van de inhoud van de post een nieuwsbriefaanmeldingsformulier toe en voegt u er ook een link naar toe externe stylesheet naar WordPress.
De. Bekijken pagina bron van uw WordPress-site na activering van de plug-in zal de toevoeging van een nieuwe CSS-component onthullen zoals hieronder getoond, wat een toename in HTTP-verzoeken betekent.
Net als plug-ins bevatten WordPress-thema's veel CSS- en JavaScript-componenten. Een typisch thema bestaat uit ingesloten lettertypen, CSS en JavaScript-componenten die leiden tot een toename van het aantal verzoeken.
De grootte van elke afzonderlijke website-component heeft ook een effect op de WordPress-prestaties. hoe kleiner de maat, hoe sneller de HTTP-aanvraag naar de component wordt voltooid omdat de browser minder tijd besteedt aan het downloaden ervan als gevolg van het kleine formaat.
De grootte van de CSS- en JavaScript-component kan worden verkleind door te minificeren (alle onnodige tekens en witruimte uit de broncode verwijderen).
Om het aantal HTTP-verzoeken te verminderen, moeten we het aantal afbeeldingen, CSS- en JavaScript-bestanden op WordPress verminderen.
Ik weet dat het idee om het aantal afbeeldingen op je blog te verminderen misschien niet goed gaat bij sommigen van ons, maar je moet zoveel mogelijk proberen om alle afbeeldingen te verwijderen die niet essentieel zijn voor de lay-out van onze site.
WordPress-thema's gebruiken background-images in hun CSS om zijn schoonheid te verbeteren. U kunt het aantal afbeeldingen verminderen door ze in sprites te veranderen. Zie dit A List Apart-artikel en Tuts + Screencast om te begrijpen hoe CSS-sprites werken.
De prestaties van WordPress kunnen aanzienlijk worden verbeterd wanneer de CSS- en JavaScript-thema's respectievelijk worden gecombineerd en verkleind.
Er zijn een paar WordPress-plug-ins zoals WP Minify en Better WordPress Minify (ik heb deze plug-ins gebruikt en zal ze aanbevelen) die respectievelijk JavaScript en CSS combineren in één bestand waardoor het aantal HTTP-aanvragen wordt verminderd.
Als u de W3 Total Cache-plug-in gebruikt, hoeft u de bovengenoemde plug-ins niet te installeren omdat deze een optie hebben om CSS en JavaScript te verkleinen en te combineren.
Als ontwikkelaar bewerk ik plug-ins die extra componenten toevoegen aan mijn WordPress blog, de CSS en JavaScript toegevoegd door de plug-ins knippen en plakken in het CSS- en JavaScript-bestand van mijn thema, zodat ze uniform zijn.
Het belang van website-snelheid kan niet genoeg benadrukt worden. Een website die traag is, verdrijft bezoekers.
Er zijn veel praktische tips voor het versnellen van websites en een daarvan is het verminderen van het aantal HTTP-verzoeken dat we in dit artikel hebben geleerd.
