5 manieren om de paginasnelheid van uw website te verbeteren met HTTP / 2
Advertentie
HyperText Transfer Protocol versie 2, of HTTP / 2, is de nieuwste standaard voor HTTP. De updates van het protocol zullen de snelheid, efficiëntie en beveiliging van webverkeer verbeteren. De overgang is echter niet automatisch.
Dit artikel heeft als doel u enig inzicht te geven in wat HTTP / 2 voor u betekent en hoe u uw website of server kunt configureren om te profiteren van de nieuwe functies.
Wat HTTP / 2 voor u betekent
Voor gewone gebruikers zijn de wijzigingen van HTTP / 1.1 in HTTP / 2 behoorlijk onzichtbaar.
Alle browsers hebben een geldig Transport Layer Security (TLS) -certificaat nodig om websites via HTTP / 2 te kunnen bedienen. Dus naast het sneller laden van pagina's, zal er ook een verhoging van de website-beveiliging zijn.
Voor webontwerpers en -eigenaren kan HTTP / 2 de laadsnelheid van uw site op alle apparaten verbeteren.
Elke moderne browser ondersteunt al de nieuwe protocolstandaard (hoewel deze mobiele browsers geen HTTP / 2 ondersteunen). In gevallen waarin de browser of server HTTP / 2 niet ondersteunt, wordt de HTTP / 1.1-standaard automatisch gebruikt.
Welke invloed heeft HTTP / 2 op het websiteontwerp?
De wijzigingen die zijn geïntroduceerd in HTTP / 2 zijn van invloed op hoe we websites en servers optimaliseren voor efficiëntie en snelheid.
Dankzij nieuwe functies die zijn geïntroduceerd in HTTP / 2, kunnen we veel van de tijdelijke oplossingen en optimalisatietechnieken van HTTP / 1 negeren. Dit omvat niet langer het invoegen van scripts in HTML of het combineren van bestanden om serververzoeken te verminderen. Domein sharding is ook niet langer nuttig.
In sommige gevallen hebben deze tijdelijke oplossingen zelfs een negatieve invloed op uw paginasnelheid als HTTP / 2 wordt weergegeven.
Het grootste deel van het internetverkeer is mobiel, dus houd rekening met mobiele internetsnelheden en houd uw mediabestanden klein en geoptimaliseerd voor deze apparaten. U moet ook doorgaan met het verkleinen van uw JavaScript (JS), HTML en CSS.
Als u niet zeker weet waarom u uw bestanden moet verkleinen, is een goed begin ons artikel over hoe en waarom uw JavaScript moet worden verkleind. JavaScript-compressoren: hoe en waarom uw JS verkleinen JavaScript-compressoren: hoe en waarom uw JS verkleinen Uw JavaScript verkleinen is een manier om de responstijden van websites te versnellen en gelukkig voor u is het een eenvoudig proces. Vandaag laat ik je alles zien wat je moet weten. Lees verder
HTTP-concepten die u moet kennen
Als u niet bekend bent met de termen waarnaar in dit artikel wordt verwezen, volgt hier een korte introductie
Inlining Script is om JavaScript rechtstreeks toe te voegen aan een HTML-document met de tag. In HTML / 1.1 worden kleine JavaScript-bestanden verwijderd en worden serververzoeken minder en worden scripts sneller geladen.
Het verminderen van het aantal bestanden is niet langer zo'n groot probleem voor de paginasnelheid in HTTP / 2 dankzij Multiplexing, Stream Prioritization en Server Push .
Multiplexing is een nieuwe functie in HTML / 2 die meerdere datastromen mogelijk maakt via een enkele Transmission Control Protocol (TCP) -verbinding.
Datastromen is een HTML / 2-term die wordt gebruikt voor bidirectionele gegevensstromen. We kunnen elke stream prioriteren dankzij hun unieke ID, die ons zal helpen de gegevenslevering te optimaliseren.
Streamprioritering is een andere nieuwe functie in HTML / 2. Dit geeft ons de mogelijkheid om een server te vertellen om resources en bandbreedte toe te wijzen aan geprioriteerde datastromen . Dit zorgt voor een optimale levering van inhoud met hoge prioriteit aan klanten.
Domain Sharding is het verdelen van websitebronnen over meerdere sites of domeinen om de gelijktijdige downloadbeperking in HTML / 1.1 te omzeilen.
In HTML / 2 zullen Multiplexing en Server Push gelijktijdig sneller en efficiënter downloaden dan Domain Sharding . In feite is er momenteel geen ondersteuning om deze functies in meerdere domeinen te gebruiken.
Met Server Push kan een server meerdere antwoorden verzenden voor één clientverzoek. Kortom, de server kan veronderstellingen maken over welke bestanden een browser nodig heeft om een pagina te laden, zonder dat de browser hier specifiek om vraagt.
We zullen ons nu richten op enkele van de wijzigingen die website-eigenaren moeten aanbrengen om websites te optimaliseren voor HTTP / 2. Lees voor een dieper inzicht in deze concepten ons vorige artikel: “Wat is HTTP / 2 en hoe beïnvloedt dit de toekomst van internet? Wat is HTTP / 2 en hoe beïnvloedt dit de toekomst van internet? Wat is HTTP / 2 en hoe beïnvloedt dit de toekomst van internet? Het internet zal efficiënter worden dankzij de komst van HTTP / 2. Maar wat is het en hoe verbetert het op HTTP? Lees verder ".
5 Website wijzigingen aan te brengen voor HTTP / 2 optimalisatie
De belangrijkste veranderingen waar u als website-eigenaar rekening mee moet houden, zijn gerelateerd aan het omgaan met websitebronnen. Specifiek met betrekking tot hoe de server van uw website zal communiceren met een browser en hoe de bestanden worden afgeleverd.
Hieronder staan de meest voorkomende wijzigingen die u moet overwegen om uw website van HTTP / 2 te optimaliseren.
1. Combineer uw CSS of JavaScript niet
U moet niet langer uw websitebronnen samenvoegen of combineren. In HTTP / 1.1 vermindert dit het aantal HTTP-aanvragen en de bestanden die moeten worden gedownload om uw website weer te geven.
Elk HTTP-verzoek zal latentie toevoegen, dus bij HTTP / 1.1 is het downloaden van een enkel bestand vaak efficiënter dan het downloaden van meerdere bestanden. Minder bestanden helpen ook om de limiet voor gelijktijdige downloads in HTTP / 1.1 te omzeilen.
Omdat HTTP / 2 meerdere downloads toestaat zonder meerdere serververzoeken, is het aantal bestanden minder belangrijk bij het optimaliseren voor snelheid. In combinatie met caching zijn specifieke bestanden beter in HTTP / 2.
In feite kunt u met meer specifieke bestanden het grootste deel van uw website bedienen via uw Content Delivery Network (CDN) en de browsercache van de gebruiker. Het betekent ook dat de browser geen enkel groot bestand van uw server hoeft te downloaden en te parseren wanneer u kleine wijzigingen aanbrengt op uw website.
2. Inline scripts niet in HTML
Het insluiten van CSS- en JS-bestanden in uw HTML-document verbetert de laadsnelheid van uw pagina in HTTP / 1.1. Net als bij het combineren van bestanden, vermindert dit het aantal bestanden en serververzoeken.
Door scripts in HTML in te voegen bij gebruik van HTTP / 2, wordt uw paginasnelheidoptimalisatie door caching verminderd, doordat een browser niet meer in staat is om activa afzonderlijk te cachen.
Het zal ook elke verbetering van Stream Prioritization doorbreken, omdat alle ingesloten script en inhoud hetzelfde prioriteitsniveau krijgen als uw HTML-inhoud.
Profiteer van multiplexing en server push in plaats van activa te plaatsen om HTTP-aanvragen te verminderen. Hierdoor kunnen browsers meer bronnen met minder aanvragen downloaden en de laadsnelheid van uw pagina verbeteren.
Kortom, houd uw bronnen gescheiden en indien mogelijk klein.
3. Stop met het gebruik van CSS Image Sprites
Image Sprites zijn afbeeldingen die bestaan uit veel kleinere afbeeldingen (zoals die hierboven). CSS geeft vervolgens aan welke delen van de afbeelding moeten worden weergegeven.
Zoals bij de meeste HTTP / 1.1-oplossingen, gebruiken we afbeeldingssprites deels om serververzoeken te verminderen. In HTTP / 2 kunt u veilig afzonderlijke afbeeldingen gebruiken zonder de laadsnelheid van uw pagina negatief te beïnvloeden.
Kleinere bestanden worden sneller en efficiënter gedownload dankzij multiplexing en server push.
4. Gebruik geen Domain Sharding
Domein sharding wordt gebruikt om de gelijktijdige downloadbeperkingen in HTTP / 1 te omzeilen. Deze beperking ligt meestal tussen vier en acht per domein en wordt door browsers gedeeltelijk ingesteld om DDOS-aanvallen te verminderen.
Het scherpen van uw website over vier domeinen kan bijvoorbeeld in theorie een kwart van de tijd in HTTP / 1.1 bedienen.
Domein sharding is niet langer nodig dankzij de multiplexing van HTTP / 2.
Merk op dat browsers niet kunnen profiteren van multiplexen en parallelle downloads over meerdere domeinen in HTTP / 2. Sharding zal ook de streamprioritering van HTTP / 2 onderbreken, waardoor de voordelen van het gebruik van HTTP / 2 verder worden verminderd.
5. Profiteer van Server Push
Mogelijk is de belangrijkste verbetering van HTTP / 2 server push.
Wanneer u in HTTP / 1.1 vraagt om een pagina te bekijken, verzendt de server eerst het HTML-document. Uw browser zal dit vervolgens gaan parseren en afzonderlijk CSS-, JS- en mediabestanden opvragen waarnaar in het document wordt verwezen.
In HTTP / 2 stelt server push een server in staat om vereiste bronnen naar een browser te pushen zonder een afzonderlijk verzoek. Dit omvat CSS- en JavaScript-bestanden, evenals media, en zal HTTP-aanvragen verminderen en het laden van pagina's versnellen.
Smashing Magazine heeft een geweldige uitgebreide gids over de serverpush van HTTP / 2 met inzicht in hoe het werkt en hoe het in te schakelen.
Uw server configureren voor HTTP / 2
De meeste serverimplementaties ondersteunen al HTTP / 2. Als u echter een gedeelde host gebruikt, moet u bij uw serverbeheerder controleren of deze HTTP / 2 heeft geactiveerd. Als je nieuwsgierig bent, heeft GitHub een lijst met serverimplementaties die HTTP / 2 ondersteunen.
Nginx-servers bieden native ondersteuning voor HTTP / 2, terwijl u mogelijk Apache-servers moet configureren om HTTP / 2-ondersteuning in te schakelen.
Als uw website HTTPS-geactiveerd is (een HTTP / 2-vereiste), kunt u controleren of uw website wordt geleverd met HTTP / 2 op http2.pro. Dat gezegd hebbende, als u Cloudflare als uw CDN gebruikt, wordt alle inhoud van hun servers via HTTP / 2 weergegeven zonder dat u wijzigingen hoeft aan te brengen.
Specifieke WordPress-hosts beperken soms de configuratiewijzigingen die u kunt aanbrengen, met name in hun lagere lagen. Dat gezegd hebbende, raden we Bluehost aan voor uw WordPress-sites. Bluehost biedt gratis SSL en CDN en zal uw websites bedienen via HTTP / 2.
HTTP / 2 is slechts de eerste stap
HTTP / 2 is een enorme verbetering ten opzichte van de vorige standaard en u zou nu enig inzicht moeten hebben in de voordelen die u kunt behalen door het te implementeren.
Ingeschakelde websites worden sneller geladen en veiliger, wat ook uw zoekranglijst zal verbeteren. HTTP / 3 is al onderweg en het configureren van uw website voor HTTP / 2 zal uw uiteindelijke sprong naar HTTP / 3 veel soepeler maken.
Naast het instellen van uw website voor HTTP / 2, moet u ook deze manieren gebruiken om uw website sneller te laten laden 7 manieren om uw website of blog sneller te laten laden voor bezoekers 7 manieren om uw website of blog sneller te laten laden voor bezoekers Hier zijn enkele toptips om uw site te versnellen en ervoor te zorgen dat uw bezoekers blijven hangen. Lees verder .
Ontdek meer over: HTTP / 2, Webontwikkeling.
