ITFAQ.nl op Windows Server 2016, IIS 10 met WordPress & HTTP/2

13 Oktober jongstleden heeft Microsoft de nieuwste versie van het Windows Server besturingssysteem uitgebracht: Windows Server 2016. De meegeleverde Internet Information Services (IIS, de webserversoftware) versie is IIS 10. Eén van de grootste voordelen is ondersteuning voor HTTP­/2, en ITFAQ.nl draait hier uiteraard al op! :-)

De afgelopen maanden heb ik flink gespeeld en getest met Technical Previews van Windows Server 2016, om de installatie en deployment te stroomlijnen. Hierdoor konden we direct live met een productie webserver op Windows Server 2016 en IIS 10 bij Vevida, toen de RTM-versie uitgebracht werd.

Een tweede voordeel van Windows Server 2016 (HTTP/2 in IIS was de eerste) is: de achterlijke limitatie van 260 karakters voor een bestandspaden kan opgeheven worden. Later meer daarover, nu eerst wat is HTTP/2?.

Een snellere website dankzij HTTP/2 en “Server Push”

HTTP/2 is de opvolger van het oude, en nog steeds gangbare, protocol HTTP/1.1. Dit is wat jouw browser gebruikt om webpagina’s te laden, en nu is er dus een “new kid in town”.

Een nieuwe versie van HTTP was ook wel nodig, de oude versie 1.1 stamt nog uit 1997. En websites zijn behoorlijk veranderd en groter geworden sindsdien. Tijd voor een nieuwe versie dus en dat werd HTTP/2. Klinkt logisch, toch? :-)

Ik zal niet te veel in technische details treden (saai…), maar het hele HTTP is over de kop gehaald. Een nieuwe feature in HTTP/2 is Server Push. Server Push is een technologie waarbij een websitemaker van te voren kan opgeven welke bronnen tegelijkertijd verstuurd moeten worden – van de webserver naar de browser – als een pagina wordt opgevraagd.

Een bron is bijvoorbeeld een .css stylesheet, .js JavaScript, of een afbeelding.

Waar eerder iedere bron afzonderlijk door de browser opgevraagd moest worden, hoeft dat met Server Push dus niet meer. Ik heb vroeger al eens geschreven over HTTP-verzoeken minimaliseren om websites sneller te laden. Hier vind je ook waarom HTTP/1.1 zo traag is: het kan maar 2 bronnen tegelijkertijd opvragen (10 met een beetje vals spelen).

Interessant voor jou:  WordPress wp-login.php toegang beveiligen

Server Push regelt dus op de achtergrond dat al deze bronnen tegelijkertijd, in één verbinding, wordt verstuurd. Zoals de technische omschrijving zegt:

HTTP/2 allows a server to pre-emptively send (or “push”) responses (along with corresponding “promised” requests) to a client in association with a previous client-initiated request. This can be useful when the server knows the client will need to have those responses available in order to fully process the response to the original request.

Request for Comments 7540: Hypertext Transfer Protocol Version 2 (HTTP/2), 8.2. Server Push

Belangrijk in deze tekst is when the server knows the client will need to have those responses available in order to fully process the response to the original request. Met andere woorden: de websitemaker moet er wél wat voor doen!

Websitebronnen sturen met Server Push

De websitemaker kan websitebronnen aanmerken om direct te versturen met de link: HTTP header. Hier op ITFAQ.nl ziet dat er als volgt uit:

link:</wp-content/plugins/click-to-tweet-by-todaymade/assets/css/styles.css>; rel=preload; as=style
link:</wp-content/plugins/disqus-comment-system/media/js/count.js>; rel=preload; as=script
link:</wp-content/plugins/jetpack/modules/subscriptions/subscriptions.css>; rel=preload; as=style
link:</wp-content/plugins/saotn-shortcodes/js/prism.js>; rel=preload; as=script
link:</wp-content/themes/sparkling/inc/css/bootstrap.min.css>; rel=preload; as=style
link:<https://www.itfaq.nl/wp-json/>; rel="https://api.w.org/"
link:</wp-includes/js/wp-emoji-release.min.js>; rel=preload; as=script
link:</wp-includes/css/dashicons.min.css>; rel=preload; as=style
link:</wp-includes/css/admin-bar.min.css>; rel=preload; as=style
link:</wp-content/plugins/saotn-shortcodes/js/cookieconsent.min.js>; rel=preload; as=script
link:</wp-content/plugins/wordpress-seo/css/adminbar-340.min.css>; rel=preload; as=style
link:</wp-content/themes/sparkling/inc/js/skip-link-focus-fix.js>; rel=preload; as=script
link:</wp-content/themes/sparkling/inc/css/font-awesome.min.css>; rel=preload; as=style
link:</wp-content/themes/sparkling/style.css>; rel=preload; as=style
link:</wp-content/plugins/jetpack/modules/widgets/social-media-icons/style.css>; rel=preload; as=style
link:</wp-content/plugins/jetpack/css/jetpack.css>; rel=preload; as=style
link:</wp-includes/js/jquery/jquery.js>; rel=preload; as=script
link:</wp-content/themes/sparkling/inc/js/modernizr.min.js>; rel=preload; as=script
link:</wp-content/themes/sparkling/inc/js/bootstrap.min.js>; rel=preload; as=script
link:</wp-content/themes/sparkling/inc/js/functions.min.js>; rel=preload; as=script
link:</wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css>; rel=preload; as=style
link:</wp-content/plugins/saotn-shortcodes/css/prism.css>; rel=preload; as=style

Belangrijk om op te merken is dat link: vertelt welke bron gestuurd moet worden. Daarbij geeft rel= aan wat ermee moet gebeuren (preload in dit geval), en as= geeft het type aan: script of style.

Hoe dat er in de achtergrond van de browser uitziet:

http/2 waterfall requests itfaq.nl

http/2 waterfall requests itfaq.nl

In de kolom Timeline – Start Time zie je de waterfall, waarin alle bronnen tegelijkertijd beginnen te laden.

De oplettende lezer ziet direct dat een Finishtijd van 7,28 seconden niet echt snel is. Dat komt doordat ik ingelogd ben en WordPress caching daardoor uitgeschakeld is.

HTTP-verbinding altijd veilig & versleuteld in HTTP/2

Een ander groot voordeel van HTTP/2 is, mijns inziens: SSL is verplicht!

Interessant voor jou:  Via FTP een bestand wijzigen

Dit betekent dat de verbinding altijd via SSL / HTTPS verloopt, en daardoor veilig en vertrouwd is. Ook al staat dit niet omschreven in de protocoldetails, het is iets wat browsermakers (Google Chrome, Microsoft Internet Explorer / Edge, Safari, Firefox) hebben afgesproken.

Hierom wil je natuurlijk dat jouw website ook een SSL-certificaat heeft.

HTTP/2 en WordPress?

Zoals de titel van dit artikel al aangeeft: ik gebruik WordPress met HTTP/2 en Server Push. “Hoe dan?“, vraag je je misschien af.

Voor WordPress is de plugin HTTP/2 Server Push ontwikkeld. Deze plugin plaatst de benodigde Link headers automatisch voor jou. Hoef je verder niets voor te doen, handig hè?!

Nu moet je natuurlijk niet direct deze plugin installeren, want als jouw website niet aan de voorwaarden voldoet heb je er niets aan. Die voorwaarden zijn:

  1. hosting op een HTTP/2 capabele webservers (Windows Server 2016 / IIS 10 bij Vevida bijvoorbeeld, of anders Apache 2.4.17 en later, of NGINX 1.9.5 en later)
  2. een SSL-certificaat voor een beveiligde HTTPS verbinding

JavaScript/CSS merging en lazy-loading niet meer nodig

Als je nu zoekt naar manieren om jouw website te optimaliseren (WordPress bijvoorbeeld, of Joomla, Drupal), dan kom je steevast de volgende adviezen tegen:

  • merge JavaScript bestanden
  • merge CSS stylesheet-bestanden
  • Lazy Load afbeeldingen
  • afbeeldingen combineren (sprites)

Mergen is het samenvoegen van meerdere JavaScript of CSS bestanden in één.

Met HTTP/2 hoeft dit niet meer. Sterker nog: het moet niet meer. Deze technieken maken de voordelen van HTTP/2 ongedaan. Maar helaas ondersteunen nog niet alle hostingproviders HTTP/2, en ook alle browserversies nog niet (overzichtje). Dit betekent dat je nog wel jaren moet ontwikkelen voor zowel HTTP/1.1 als HTTP/2 als je websites maakt.

Conclusie HTTP/2

Met HTTP/2 wordt browsen weer wat leuker, want websites laden sneller! Een snellere website is goed voor jouw website SEO, want het is een ranking factor voor Google.

Ook is een SSL-certificaat verplicht, en dat is in deze tijd goed voor jouw privacy – en die van jouw bezoekers!

Binnenkort meer hierover, stay tuned!

Volg ons:
0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *