Hardware.Info developmentblog 29 juni 2016: https, http/2, nieuwe grafieken en meer

36 reacties

Wie sinds circa 10:30 vandaag naar Hardware.Info is gekomen zal het misschien al zijn opgevallen: een groen slotje in de adresbalk! Hardware.Info draait vanaf vandaag volledig via https én via het http/2 protocol. Dat betekent zowel meer veiligheid als betere prestaties. Daarnaast hebben we diverse andere verbeteringen aan de site doorgevoerd, waaronder een interessante aanpassing aan onze grafieken.


Een overstap naar https stond al langere tijd op ons verlanglijstje, maar is bij een site als Hardware.Info niet zo triviaal. Het voordeel van https is dat alle traffic versleuteld over het internet gaat. Weliswaar zijn de loginpagina's en dergelijke zijn al jaren https, maar onder andere Google moedigt website eigenaren al geruime tijd aan om de overstap naar https te maken. Wie surft over het internet zal opvallen dat bij meer en meer sites een groen slotje verschijnt. Hoog tijd dus voor ons om die stap ook te zetten, maar dat was zoals gezegd niet eenvoudig.


Hardware.Info is vanaf vandaag volledig https!

De reden dat de overstap naar https voor ons alles behalve triviaal was, is omdat wij al sinds Hardware.Info versie 4.0 (uit 2010) gebruik maken van Varnish als caching server. Varnish kan complete HTML-pagina's kant en klaar opslaan in geheugen en dat gebruiken we zeer intensief op (vrijwel) alle pagina's op de site. Wanneer je een productpagina, nieuwsbericht of review ophaalt, komt daar geen databaseserver of ander complex backend aan te pas; de pagina's zijn volledig gecached en kunnen direct geserveerd worden. Pas zodra er aanpassingen zijn, bijvoorbeeld een prijs- of specificatiewijziging bij een product, wordt de cache verwijderd en de pagina opnieuw opgebouwd. Varnish heeft 128GB aan geheugen tot z'n beschikking op onze webserver en is de belangrijkste reden waarom Hardware.Info lekker vlot is, ondanks de complexe opbouw van veel pagina's.

Echter, Varnish doet geen https en gaat ook geen https doen. De ontwikkelaar van Varnish is op z'n zachtst gezegd niet bepaald blij met code van de OpenSSL libraries en of dat terecht is of niet, het betekent dat Varnish niet geschikt is en gaat zijn voor versleutelde verbindingen. Overstappen naar een andere caching tussenlaag is voor ons ook geen optie, aangezien we veelvuldig gebruik maken van enkele complexe mechanismes die enkel met Varnish goed te implementeren zijn, zoals bijvoorbeeld het maken van verschillende versies van cache afhankelijk van het type gebruiker (niet ingelogd, ingelogd, admin, etc.).

De oplossing vonden we op een andere manier in de vorm van de Nginx webserver. Nginx staat bekend als bloedsnelle webserver gespecialiseerd in statische content, maar kan ook dienen als proxy. Zodoende kun je Nginx als proxy voor Varnish plaatsen; Nginx verzorgt de versleutelde communicatie met de buitenwereld en zet de verzoeken intern, binnen de server dus, onversleuteld door naar de Varnish cache server.

Nginx is volledig geschikt voor https, maar daarnaast ook voor http/2 en dat is mooie bijvangst. Http/2 is een nieuwe versie van het communicatieprotocol waarmee browsers communiceren met webservers. Het gaat wat te ver om alle voordelen van http/2 in dit nieuwsbericht uiteen te zetten, maar een belangrijk voordeel is dat er één verbinding tussen server en browser wordt opgezet waarover alle afbeeldingen en dergelijke van een webpagina worden verzonden, terwijl er slechts één keer request headers worden uitgewisseld. Bij http/1.1 moet voor ieder element op de pagina, dus onder andere ieder plaatje, een nieuwe connectie worden opgezet. Het voordeel voor jou als gebruiker is dat http/2 een stuk sneller werkt. Alle moderne browsers (onder andere de nieuwste versies van Chrome, Firefox en Edge) ondersteunen het!

Al met al ziet de configuratie van onze web en database server er nu uit als op onderstaande afbeelding. Onze webserver Scorpius is tegenwoordig via twee IP-adressen te bereiken; 217.115.193.91 en 217.115.193.98. Op IP-adres .91 luisteren Varnish naar de http poort (80) en Apache naar de https poort (443). Op .98 komen alle http- en https-requests uit bij Varnish. Alle op Hardware.Info gebruikte domeinen (*.hardware.info, content.hwigroup.net en hwi-static.hwi-group.org) met hwiconnect.net als uitzondering (komen we zo op terug) komen na een DNS-wijziging uit bij Nginx op IP .98. Nginx is zo geconfigureerd dat alle statische content (afbeeldingen, CSS-bestanden, etc.) direct worden geserveerd. Dankzij de juiste tuning, waar we uiteraard ook veel tijd in hebben gestopt, doet Nginx dat als geschreven bloedsnel. De facto betekent dit dat alles op de domeinen content.hwigroup.net en hwi-static.hwi-group.org direct door Nginx wordt geserveerd, Varnish en Apache komen daar niet meer aan te pas.

HTML-requests, ofwel de webpagina's zelf die worden opgevraagd vanaf alle *.hardware.info domeinen, worden doorgeproxy'd naar Varnish, dat op IP-adres 217.115.193.91 draait. Andere websites die we hosten die nog niet om zijn naar https staan in de DNS nog op .91 en komen direct bij Varnish uit. Varnish werkt als vanouds, heeft 128GB geheugen tot z'n beschikking en doet z'n requests intern bij de Apache webserver, waarin PHP7 is geïntegreerd. Apache op zijn beurt luistert naar poort 8080 voor http en poort 443 voor https. Dat laatste is ook vanaf extern te gebruiken. Hwiconnect.net, het domein dat we gebruiken voor onze loginpagina's, staat nog gekoppeld op IP 217.115.193.91 en komt dus rechtstreeks uit bij Apache. Dat is nodig omdat de vele Oauth code, nodig om mensen te laten inloggen via bijvoorbeeld Google of Facebook, niet werkt via een interne proxy. Apache op zijn beurt communiceert voor data weer met onze database server Hydra, waarop MariaDB 10.1 en Elasticsearch draaien. MariaDB heeft een InnoDB bufferpool van 80GB beschikbaar waardoor vrijwel onze complete database vanuit geheugen beschikbaar is. Zelfs wanneer je een niet gecachete pagina opvraagt is Hardware.Info daarmee nog lekker snel.

Voor SSL maken we gebruik van certifcaten gemaakt voor Let's Encrypt, een non-profit organisatie die veilige certifcaten biedt die je eenvoudig automatisch kunt verlengen. Sponsors van Let's Encrypt zijn partijen als Cisco, Facebook, Google, Mozilla en HP die hiermee een bijdrage willen doen aan het omzetten van een zo groot mogelijk gedeelte van het internet naar https. 

Uiteraard wordt alle content van Hardware.Info zélf netjes rechtstreeks via https geserveerd, maar hoe zit het met externe content, bijvoorbeeld afbeeldingen die door lezers worden geplaatst op het forum of in productervaringen? Geen nood, we gaan niemand verplichten per se z'n foto's te hosten op een https compatible server. In plaats daarvan hebben we een proxy gebouwd die afbeeldingen die enkel via http beschikbaar zijn intern op onze server ophaalt en daarna vanaf de Hardware.Info server via https serveert. Die proxy loopt weer via Varnish en is daarmee de enige uitzondering op het feit dat Nginx alle data van content.hwigroup.net direct serveert. Het feit dat de proxy via Varnish loopt, maakt dat we de externe afbeeldingen maar één keer hoeven ophalen. Daarmee lossen we direct op dat productervaringen of forum topics met afbeeldingen van trage externe hosts nu een stuk sneller inladen!

Nieuwe mogelijkheden

De versie van Hardware.Info die volledig via http2 en http/2 werkt is vandaag live gezet, maar vorige week hebben we ook al nieuwe code live gezet. Veel van de vernieuwingen toen was enerzijds grondwerk voor het https-project en anderzijds talloze optimalisaties. Een aantal zaken willen we toch zeker even uitlichten.

Allereerst hebben we de indeling van de categoriepagina's onder de loep genomen. Een belangrijke vernieuwing is dat we Hardware.Info review en productervaringen geschreven door gebruikers nu op één tabblad tonen. Daarmee springen de door onze lezers geschreven reviews meer in het oog. Een andere verandering is dat de menubalk op desktops en laptops nu bovenin vast blijft staan. Dit was een verzoek dat we van menig bezoeker kregen, nadat we dit eerder al voor onze mobiele versie deden. 

Een erg leuke verbeteringen hebben we doorgevoerd bij onze grafieken. Allereerst is de kleurstelling aangepast aan het nieuwe design dat we sinds enige tijd hebben; de gradients zijn verdwenen. Wie vanaf nu over de balken in een grafiek hovert met de muiscursor, ziet hoe de scores van andere producten procentueel afwijken van het product waar je muis op staat. Probeer het bijvoorbeeld maar eens met de grafieken op deze pagina; zo kun je bijvoorbeeld eenvoudig zien dat bij de bovenste Hardware.Info Prestatiescore de GTX 1070 35% sneller is dan de GTX 970.


Hover met je muis over de balken bij onze grafieken en je ziet direct procentuele verschillen.
(Let op: bovenstaande is een statische screenshot. Live voorbeeld hier.)

De lijst met optimalisaties en bugfixes is groot; van een betere melding bij ingeklapte reacties, via wat missende vertalingen tot een zoekbalk die in heel specifieke gevallen uit de lay-out liep. 

Al met al hebben we met de nieuwste versie van de site - Hardware.Info 6.2.3 voor intimi - naar onze bescheiden mening weer een mooie stap gemaakt. Uiteraard hebben we voor toekomstige versies weer mooie plannen op stapel, maar zoals altijd kijken we ook weer uit naar ideeën vanuit jullie. Alle feedback, positief of negatief, is welkom bij de reacties hieronder, of op ons development forum

« Vorig bericht Volgend bericht »
0
*