In mei 2015 werd aangekondigd dat de specificatie voor HTTP2 was afgerond en vrijgegeven. HTTP2-aanbiedingen aanzienlijke prestatievoordelen voor elke website, dus aangezien de meeste websites worden aangedreven door WordPress, was het slechts een kwestie van tijd voordat we moesten weten hoe we het moesten instellen en wat HTTP2 is.
Dus hier zijn we met een complete gids en/of tutorial van wat HTTP2 is, waarom je HTTP2 op je website zou moeten inschakelen, wat de voordelen zijn en tot slot - hoe je het daadwerkelijk kunt doen.
Dus laten we beginnen met de eerste paar dingen.
Wat is HTTP2?
HTTP2 is de nieuwste versie van HTTP (HyperText Transfer Protocol) die zodanig is geoptimaliseerd dat uw website veel sneller laadt, zonder dat u daar extra moeite voor hoeft te doen. Als je eenmaal HTTP2 hebt ingesteld, zijn er geen optimalisaties meer nodig zoals minificatie, combinaties en andere hacks die we eerder uitvoerden - deze zijn rechtstreeks in het protocol zelf ingebouwd.
(Op CollectiveRay, we maken graag onze websites prachtige en snel!)
Voordat we echt naar HTTP2 gaan, laten we een beetje terugkijken op HTTP en waarom een nieuwe versie van HTTP nodig was.
Wat is HTTP?
Het HyperText Transfer Protocol (ook bekend als HTTP) is gewoon een manier waarop uw browser communiceert met de webserver van de website die u bezoekt.
Er zijn veel manieren waarop twee (of meer) machines via internet communiceren. HTTP is degene die wordt gebruikt voor het browsen op websites. Met de opkomst van sites als YouTube en Twitch die veel verkeer over HTTP vervoeren, blijft dit protocol er een die het meeste verkeer vervoert. Het is zeker degene die het meest "zichtbaar" is, omdat het betrokken is bij al het browsen op de website.
Immers, hoe vaak typ je elke dag https://?
Zonder al te veel in detail te treden, wordt het HTTP-protocol gebruikt door de browser van de bezoeker om alle inhoud van een website op te vragen.
Het gesprek gaat ongeveer als volgt:
browser: Hallo server op www.collectiveray.com - kunt u mij de inhoud van deze website geven?
server: Hallo browser, dit is de HTML-inhoud van www.collectiveray.com
<html xmlns:og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" LANG="en-gb" dir="ltr" klasse='com_content bekijk artikel itemid-388 j35 mm-hover'>
...
browser: Geweldig, nu zie ik dat ik ook de inhoud van deze js-bestanden nodig heb: collectiveray. Js, jquery.min.js, jquery-ui.min.js ... en ook de inhoud van deze bestanden: styles.css, jquery.min.css, ... Stuur mij ook de volgende afbeeldingen: favicon.ico, logo.jpg, blog-header.jpg, advertentie1.jpg, ...
server:
- Hier is de inhoud van het bestand collectiveray. Js
- En hier is de inhoud van het bestand jquery.min.js
- En hier is jquery-ui.min.js
- ...
- en hier is de afbeelding voettekst-icon.jpg ...
Echt en waar, de server en browser spelen digitaal tennis met de gegevens van de website die je bezoekt.
Elk heen en weer van de server stuurt een klein deel van de website. Dit blijft gebeuren totdat alle inhoud van de siteserver naar de browser is verzonden.
Een andere zeer goede analogie die is gebruikt om HTTP1 te beschrijven, is die van een ober die drankjes uit de bar haalt en slechts één drankje krijgt elke keer dat ze de bar bezoeken.
Natuurlijk is deze methode om één "ding" tegelijk te krijgen niet erg efficiënt, en hier beginnen de problemen met HTTP...
Het web is sneller gegroeid dan de mogelijkheden van HTTP
HTTP bestaat al heel lang. Toen het werd bedacht en gemaakt, was internet een heel andere plek.
Bandbreedte werd gemeten in bits, niet in tientallen megabits. Om bruikbaar te zijn, werden websites dus voornamelijk gemaakt van tekst en hyperlinks. Beelden waren schaars.
Snel vooruit naar de moderne tijd.
Websites, thema's en allerlei functionaliteiten hebben websites qua middelen steeds zwaarder gemaakt. Uw gemiddelde website bevat honderden verschillende bestanden en afbeeldingen.
Websites die honderden bronnen moeten gebruiken, zijn aan de orde van de dag.
Als u bijvoorbeeld van plan bent een WordPress-lidmaatschapssite te maken, gebruikt u deze handleiding geschreven door CollectiveRay, heb je lidmaatschapsthema's, plug-ins en tal van andere bronnen nodig, die allemaal verschillende bronnen nodig hebben om correct te kunnen functioneren.
Om het nog ingewikkelder te maken, vraagt elke site informatie op van verschillende servers voor allerlei soorten scripts van derden (bijvoorbeeld Google Analytics-scripts, Facebook-deelknoppen, Google Ads of AdSense, e-mailmarketing en allerlei andere platforms).
Het aantal keren dat een browser nodig heeft om bestanden van de websiteserver op te halen, blijft groeien en groeien.
Dit is op zich geen probleem, hoewel het steeds groter wordende aantal bestanden betekent dat de omvang van de gedownloade gegevens steeds groter wordt.
Dit betekent dat de enorme hoeveelheid gegevens die moet worden gedownload steeds groter wordt. Dit maakt het laden van sites over het algemeen langzamer.
Om het nog erger te maken, is het maken van een verbinding tussen de browser en de server een technisch dure operatie en kost tijd. Naarmate het aantal verschillende bronnen dat nodig is voor een website toeneemt, neemt ook de tijd die nodig is om een site te laden toe.
Bij gebruik van HTTP-versie 1 moet namelijk elke keer dat een nieuw bestand nodig is, een nieuwe (dure) verbinding worden gemaakt.
Dit betekent dat sites die snel wilden laden een hele optimalisatieoefening moesten doorlopen.
Hoe maak je een website sneller (pre-HTTP2-versie)
Zoals te zien is in ons eenvoudige voorbeeld, had HTTP v1 een aantal beperkingen gezien de huidige staat van het web, waardoor websites traag werden. Nu heb je waarschijnlijk honderden artikelen gezien die je laten zien hoe je je WordPress website sneller.
Wij hebben zelf ook zo'n artikel omdat als WordPress-ontwikkelaars, we jagen altijd op de behoefte aan snelheid - en we zijn pas blij als we een A-snelheidsclassificatie halen.
Overigens hebben we veel verschillende artikelen voor degenen die meer willen weten over WordPress, bekijk de tutorials sectie op Collectiveray.
Wat de meeste van deze artikelen die WordPress willen versnellen, doen, is een manier vinden om de beperkingen van HTTP1 te omzeilen. Ze voeren tijdelijke oplossingen uit om ervoor te zorgen dat de sites niet worden vertraagd door al deze verbindingen.
Dit is de reden waarom er zo'n dringende behoefte was aan HTTP2, niet alleen voor WordPress, maar voor elke andere website die er is. Er moest iets worden gedaan om de inherente problemen van HTTP1 aan te pakken (zowel op browser- als op webserverniveau).
Dus wat waren de oplossingen/oplossingen om een website sneller te maken met HTTP v1? We noemden ze meestal: Verminderen, visfuik, Recyclen. Voor meer uitleg hierover raden we je aan ons artikel over het sneller maken van websites hierboven te lezen.
- Maak een lichtgewicht site die gebruikmaakt van a minimale hoeveelheid JS-, CSS- en afbeeldingsbestanden
- Verminder het aantal verzoeken voor verschillende CSS-bestanden en JS-bestanden door zoveel mogelijk van deze bestanden samen te voegen (minder aanvragen door de combinatie van bestanden)
- Het aantal verzoeken om afbeeldingen verminderen door: één afbeelding maken die ze allemaal combineert in één en CSS-sprites gebruiken
- Verwijder eventuele extra plug-ins (om het aantal afbeeldingen, CSS-bestanden en JS-bestanden die ze aan de site toevoegen te verminderen)
- De vereiste gegevens comprimeren zodat het kleiner van formaat is (en dus sneller te vervoeren) (u zou bijv WordPress GZIP-compressie inschakelen om de grootte van de gegevens die moeten worden overgedragen, kleiner te maken)
- Maak gebruik van browsercaching in WordPress met behulp van een plug-in, zodat als een gebruiker uw website binnen een korte tijdspanne opnieuw bezoekt, ze dezelfde bestanden niet opnieuw zullen downloaden
- Andere acties...
In wezen wilden we het aantal afzonderlijke verzoeken tussen de server en de browser verminderen. Ook wilden we de omvang van deze verzoeken verkleinen.
Dus hoe verbetert HTTP/2 dit allemaal?
Voer HTTP/2 . in
HTTP/2 is geschreven met de bedoeling deze inherente problemen op te lossen. Een van de belangrijkste doelen van HTTP2 is om:
Verlaag de latentie om de laadsnelheid van pagina's in webbrowsers te verbeteren. (Bron: WikiPedia)
en introduceert de volgende verbeteringen:
- is binair, in plaats van tekstueel
- is volledig gemultiplext, in plaats van geordend en blokkerend
- kan daarom één aansluiting gebruiken voor parallellisme
- gebruikt headercompressie om overhead te verminderen
- stelt servers in staat om reacties proactief naar clientcaches te "pushen"
Wacht wat? Maak je geen zorgen - laten we proberen dit in eenvoudiger bewoordingen uit te leggen.
- Binair in plaats van tekstueel: dit is iets dat de overdracht en het ontleden van de gegevens veel efficiënter maakt. Binaire gegevensoverdracht is ook veel less vatbaar voor fouten. Tekstuele gegevens zijn bedoeld voor menselijke consumptie. Binaire gegevens zijn ontworpen voor gebruik door machines, terwijl het gebruik van binaire gegevens voor het overbrengen van gegevens inherent sneller is.
- Volledig gemultiplext: nogmaals, simpel gezegd, met HTTP was het probleem dat elke verbinding de neiging had om de verbindingen te blokkeren die daarna moesten plaatsvinden. Stel je voor dat je in de rij staat om deel te nemen aan je favoriete sportwedstrijd, maar in plaats van meerdere toegangspunten te hebben, had je maar 1 tourniquet. Je kunt je voorstellen dat het heel erg traag kan gaan. Met multiplexen kunnen meerdere bestanden en verzoeken tegelijkertijd worden overgedragen. In het voorbeeld van een voetbalwedstrijd hebben we, in plaats van dat er één persoon tegelijk naar binnen gaat, 10 poorten, met 10 tourniquets die samen naar binnen gaan.
- Gebruik één aansluiting voor parallellisme: zoals we eerder vermeldden, wanneer een verbinding duur is om te maken als je deze blijft maken en sluiten voor elke bron die je nodig hebt, zul je een serieus overheadprobleem creëren. Met multiplexen kan dezelfde verbinding steeds opnieuw worden gebruikt. Stel je de verbinding voor als een pijp waardoor data blijft stromen totdat je geen data meer hebt. Houd er ook rekening mee dat voor elke website de browser doorgaans met meerdere webservers praat voor verschillende scripts en bronnen van derden (Facebook-scripts voor delen, Twitter, Google Analytics, advertentienetwerken, enz.) Eén verbinding hebben voor elk van deze efficiënter is.
- Koptekstcompressie is ook een andere efficiënte manier om een aantal van de overheadkosten te verwijderen die gepaard gaan met het moeten ophalen van verschillende bronnen van dezelfde of meerdere webservers. Nogmaals, meestal in plaats van meerdere heen en weer reizen, is één reis meestal voldoende.
- Stelt servers in staat om proactief bronnen te pushen: dit is een manier waarop de server, in plaats van te wachten tot de clientbrowser de verschillende bronnen opvraagt, zoals in ons eerste voorbeeld, proactief bronnen zal sturen die de browser uiteindelijk nodig heeft of waar hij om vraagt. Dit wordt HTTP/2 Server-push genoemd.
Als we terug moeten naar de analogie van de ober die één drankje tegelijk bracht, dan is het grootste voordeel dat de ober nu een dienblad gebruikt om alle drankjes bij elkaar te brengen. En ze nemen ook drankjes uit de bar die ze waarschijnlijk nodig hebben als ze in het restaurant zijn.
Wat is SPDY? (ook bekend als Speedy)
Voordat HTTP2 echt werd geboren, had iemand anders geprobeerd de problemen met HTTP op te lossen. Dit was een onderzoeksproject van een aantal Google-technici die hadden geprobeerd een aantal problemen met HTTP1.1 op te lossen.
SPDY-doelen waren:
- Sta multiplexen toe om gelijktijdige verzoeken toe te staan - en lost zo de problemen van latentie op die ontstaan door meerdere verbindingen te hebben
- Geef prioriteit aan bronnen, zoals de belangrijkste bronnen van een site die als eerste worden verzonden
- Comprimeer HTTP-headers om de efficiëntie te verbeteren, zoals hierboven besproken
- Implementeer ook server push zoals hierboven besproken
In een eerste blog uitgegeven door de ingenieurs die het protocol schreven, werd beweerd dat het zou maak het web 2 keer sneller. Hoewel zowel de belangrijkste browsers als de belangrijkste webservers SPDY ondersteunden, was er weinig echte adoptie.
Het onderzoek was echter van cruciaal belang voor de uiteindelijke release van HTTP2, aangezien de eerste versie van HTTP2 SPDY als basis gebruikte.
Wat moet ik doen om HTTP/2 in te schakelen?
Voordat u HTTP2 inschakelt, moet u weten welke implicaties er op uw site zijn.
Welke browsers ondersteunen HTTP/2?
Op het moment van schrijven ondersteunen de meeste populaire clientbrowsers HTTP/2 volledig. FireFox, Chrome en browsers op basis van Blink (dwz Opera en Yandex) ondersteunen HTTP2. Microsoft Edge ondersteunt ook HTTP2, terwijl Apple ondersteunt het ook in Safari. Statistieken van sites als Kan ik gebruiken? laten zien dat de huidige wereldwijde distributie van ondersteuning meer dan 95% bedraagt.
Als de browser HTTP2 niet ondersteunt, en de website wel HTTP2, zal er een sierlijke terugval zijn naar HTTP1, dus er is absoluut geen probleem voor elke bezoeker als je HTTP/2 inschakelt. Er kunnen alleen voordelen zijn.
Welke servers ondersteunen HTTP/2
Apache, Nginx, LiteSpeed, IIS en de meest populaire serverimplementaties ondersteunen HTTP/2 - u kunt controleren of uw favoriete webserver of de webserver die u gebruikt, heeft hier ondersteuning voor http2.
Of je HTTP2 daadwerkelijk kunt gebruiken, hangt er echter van af of je hostingbedrijf dit heeft geactiveerd. U moet dus de daadwerkelijke beschikbaarheid van HTTP/2 bij uw hostingbedrijf bevestigen. De onderstaande afbeelding is een lijst met servers die http/2 ondersteunen.
Simpel gezegd, of uw website momenteel HTTP/2 ondersteunt, hangt volledig af van uw hostingbedrijf of de server waarop u uw website host. We gebruiken InMotion hosting (en hier is onze InMotion hosting review en in wezen hoe onze VPS tarieven), die HTTP2 al een aantal jaren volledig ondersteunen.
We gebruiken echter ook StackPath om onze bronnen te bedienen, die ook HTTP/2 ondersteunt.
De meeste hostingbedrijven ondersteunen tegenwoordig HTTP2 op hun servers, dus dit hoeft geen probleem te zijn.
Je kunt gebruiken deze tool van KeyCDN om te bepalen of uw site momenteel HTTP/2 ondersteunt. Deze HTTP/2-test kan u vertellen of u aanvullende acties moet uitvoeren of niet.
Uw website moet veilig zijn om HTTP2 in te schakelen
Momenteel ondersteunen alle browsers alleen versleutelde HTTP2.
Dit betekent dat om uw site HTTP/2 te kunnen ondersteunen, u uw site via een beveiligde (TLS/SSL) verbinding moet hebben. We zijn hier heel diep op ingegaan in ons artikel over het opzetten van een beveiligd WordPress-certificaat op uw server.
Om te recapituleren hoor
- Veilige sites krijgen een boost in het SEO-rangschikkingssignaal
- Ze beschermen de gegevens die van en naar de site worden verzonden (vooral belangrijk voor wachtwoorden, creditcardgegevens en andere gevoelige gegevens)
- Er is een sterke beweging naar volledig beveiligde websites, en als u geen beveiliging op uw site implementeert, zal uw website zeker achterblijven
U moet een beveiligd certificaat aanschaffen via uw hostingservicebedrijf. Hostingbedrijven zoals In beweging kunt u een gedeeld certificaat gebruiken, maar als u het met uw domein wilt gebruiken, wordt het ten zeerste aanbevolen dat u uw eigen certificaat aanschaft.
Hulp nodig met je website?
Huur een doorgelichte website-expert in voor slechts $ 65. Meld u vandaag nog aan om gratis te chatten.
Chat met een expertAndere sites zoals WordPress.com (in tegenstelling tot WordPress.org) - lees hier over het verschil difference - zorg al voor beveiligde certificaten.
Installatie van het certificaat is iets dat doorgaans wordt gedaan door uw hostingserver. Het is een eenmalig iets, dus u hoeft zich geen zorgen te maken.
Zodra dat is gebeurd, hoeft u alleen maar een permanente 301-omleiding uit te voeren via uw .htaccess-bestand.
Nogmaals, hosts zoals InMotion hosting kan dit allemaal voor je regelen, als je niet geneigd bent om dit soort technische aanpassingen zelf te doen (wat een klein risico op downtime met zich meebrengt als het niet goed wordt gedaan).
Is er een plug-in die ik kan gebruiken voor HTTP2?
We noemden een van de voordelen van het gebruik van HTTP2, namelijk de mogelijkheid om een server-push uit te voeren van items die de browser nodig heeft. Dit is natuurlijk iets dat op CMS-niveau moet gebeuren, dus dit heeft ondersteuning nodig van WordPress of je favoriete CMS.
Hoewel dit nog niet op het kernniveau wordt ondersteund, kunt u uw thema's of plug-ins zodanig aanpassen dat ze de mogelijkheid implementeren om een
Link:<...> rel="prefetch"
header voor elk in de wachtrij geplaatst script en elke stijl terwijl WordPress ze in de paginabron uitvoert.
Als u uw site in het algemeen sneller wilt maken, door prefetch en andere opdrachten in te schakelen om uw site snel te maken, raden we u ten zeerste aan WP Rocket - een premium plug-in die de snelheid van uw site aanzienlijk verhoogt. Als u een gratis plug-in wilt, kunt u gebruik maken van dit.
Bekijk WP Rocket om uw site sneller te maken
Dit is in feite een extra echt voordeel halen uit de functies die worden ingeschakeld door HTTP/2.
Laatste aanbeveling
Dus je bent hier omdat je je site sneller wilde maken door HTTP2 in te voeren, toch?
Dit is alleen een van vele manieren om uw website sneller te maken. Naast deze technologie zul je nog een aantal andere optimalisaties moeten doen als je je website sneller wilt maken, zoals
- Een plug-in voor paginacaching implementeren
- Schakel cache op PHP-niveau in, zoals OpCache
- Afbeeldingen optimaliseren voor prestaties
- Schakel een CDN in (gratis of anderszins)
- Browsercaching en gzip-compressie inschakelen
- Google-lettertypen optimaliseren
- DNS-prefetching inschakelen
- Lazy loading van afbeeldingen inschakelen
- Minificatie en aaneenschakeling inschakelen
- etc etc
Klinkt als een hoop werk toch? Het is!
At CollectiveRay, we besteden soms meerdere dagen werken om onze website slechts een paar fracties van een seconde sneller te pushen. Dit komt omdat onze website op Joomla draait, dus we hebben niet veel van de plug-ins die beschikbaar zijn voor andere populaire CMS-opties zoals WordPress.
Voor onze klanten installeren we bijvoorbeeld altijd WP Rocket. Op de websites waar het wordt geïnstalleerd, laden we ze altijd in minder dan 3 seconden, met als typische resultaten dat de website in minder dan 1 seconde laadt.
Het mooie is echter dat we geen van het handmatige werk hoeven te doen dat we voorheen moesten doen, dus we bespaar uren van tijd en frustratie, en we krijgen uitstekende resultaten om op te starten.
Bekijk WP Rocket om uw site snel te maken
Veelgestelde Vragen / FAQ
Moet ik HTTP2 gebruiken?
Ja, u moet indien mogelijk HTTP2 op uw website inschakelen en gebruiken. HTTP2 maakt je website sneller en er zijn absoluut geen nadelen ten opzichte van HTTP versie 1. Zelfs als een client een oude browser gebruikt die HTTP2 niet ondersteunt, is er een sierlijke fallback naar HTTP.
Wat is het verschil tussen HTTP en HTTP2?
Er zijn een aantal verschillen en verbeteringen tussen HTTP en HTTP2. HTTP2 is binair, in plaats van tekstueel, waardoor het inherent sneller is. Het is volledig gemultiplext, in plaats van geordend en blokkerend, zodat meerdere verbindingen tegelijkertijd kunnen worden gebruikt. Het maakt gebruik van headercompressie om overhead te verminderen en stelt servers in staat om reacties proactief naar clientcaches te "pushen". Al deze verbeteringen maken HTTP2 veel sneller dan HTTP.
Vereist HTTP2 SSL?
Ja, HTTP2 wordt alleen ondersteund in versleutelde modus, dus uw website moet ook veilige SSL/TLS-certificaten implementeren om gebruik te kunnen maken van HTTP2.
Ondersteunen browsers HTTP2?
Meer dan 95% van de momenteel gebruikte websitebrowsers ondersteunt HTTP2. Zelfs als de browser HTTP2 niet ondersteunt, zal er een sierlijke terugval naar HTTP zijn.
Conclusie: laten we het web sneller maken met HTTP2
At CollectiveRay, zijn we altijd gefixeerd geweest op het snel maken van onze websites. HTTP2 is tegelijkertijd een evolutie en een revolutie, en we hopen echt dat dit artikel je helpt bij het opzetten van WordPress HTTP2.
Laat hieronder een reactie achter en vertel ons wat je nog meer wilt weten.
Hulp nodig om dingen voor elkaar te krijgen? Probeer deze best beoordeelde betaalbare optredens op Fiverr!
Klik hier voor experts op het gebied van WordPress-snelheidsoptimalisatie.
Klik hier om een volledige WordPress-website te maken.
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...