SEO Workshop: veiligheid en snelheid

Voor een goede ervaring als gebruiker is een veilige en snelle website een must. Dit is bijgevolg zeer belangrijk voor SEO ranking.

Er zijn vele manieren om snelheid te winnen en een paar zaken die essentieel zijn voor veiligheid.

Veiligheid

We zagen reeds hoe externe links die in een apart tabblad openen (target=”_blank”) best het attribuut rel=”noopener, noreferrer” krijgen om onze sessie en cookies te beschermen.

Ook is het belangrijk om dataverkeer op onze website via HTTPS te encrypteren.

Concreet werken websites via het HyperText Transfer Protocol en wordt de S toegevoegd voor “Secure“. Onze domeinnaam krijgt dan ook een groen slotje in de adresbalk.

Wanneer je HTTP gebruikt dan worden gegevens die verstuurd en ontvangen worden niet geëncrypteerd en kan iedereen die deze gegevens onderschept ze lezen. Als je HTTPS gebruikt dan zijn de gegevens onleesbaar en waardeloos voor hackers die de gegevens te pakken krijgen. Enkel de server en de computer zelf kunnen de gegevens met een geheime sleutel vertalen.

De meeste webhosts laten toe om HTTP naar HTTPS om te zetten via een setting aan te passen (aan/uit knop) of door een SSL-certificaat te activeren.

Het SSL certificaat kan je tegenwoordig gratis verkrijgen via Let’s Encrypt. Verder kan je gebruik maken van een gratis Content Delivery Network (CDN), zoals cloudflare, als je moeite hebt om HTTPS op te zetten want zij doen dat automatisch.

Bemerk: als je dataverkeer omzet van HTTP naar HTTPS moet je mogelijks ook een .htaccess bestand toevoegen (of aanpassen) om verwijzingen naar HTTP automatisch over te zetten naar HTTPS.

Code voor .htaccess:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]

Hiernaast wil je ook opmerkzaam zijn als je gebruik maakt van bestaande bibliotheken en plugins die verouderd zijn.

Verouderde inhoud heeft vaak veiligheidsrisico’s die door hackers intussen gekend zijn en dus makkelijk inbreuk kunnen doen op de veiligheid van je site. Een oudere versie van jQuery laat bijvoorbeeld cross-site scripting toe waarbij de sessie of cookies gestolen kunnen worden (en gevoelige informatie!).

Lees meer over Cross Site Scripting in Oudere Jquery

Snelheid

Websites die traag laden en blijven bufferen zijn niet aangenaam voor gebruikers. De gebruiker geraakt gefrustreerd en haakt af. Hierdoor gaat deze terug naar de zoekmachine en een ander zoekresultaat uit de SERP’s selecteren. Natuurlijk wil de zoekmachine onmiddellijk de gewenste resultaten aanbieden en diens gebruikers geen trage, frustrerende ervaring geven op aangeboden zoekresultaten. Bijgevolg heeft dit een sterke invloed op onze ranking.

Speed is definitely a ranking factor? YES.

John Mueller, Google 2019

De website zou sneller dan 2 seconden ingeladen moeten zijn.

We kunnen snelheid eenvoudig verhogen door opnieuw een setting aan te passen. Tegenwoordig bestaat er een verbeterde versie van HTTP die onze website vaak met 50% sneller maakt, genaamd HTTP/2. Het is opnieuw een setting van de webhost die we meestal zelf kunnen aan/uit zetten. Om deze te gebruiken heb je wel eerst HTTPS nodig.

Je kan checken via deze tool als jouw website/webshop HTTP/2 ondersteund.

Tegenwoordig is HTTP2 door de alle browsers ondersteund zoals we zien via CanIUse

Intussen is ook HTTP/3 in gebruik om een verdere snelheidsboost te bieden, maar deze kent nog weinig ondersteuning. Je kan deze link gebruiken om te testen of je website gebruik maakt van HTTP/3.

HTTP/3 is de derde grote versie van het Hypertext Transfer Protocol (HTTP), het protocol dat gebruikt wordt om informatie op het web uit te wisselen. Het is een aanzienlijke verbetering ten opzichte van HTTP/2 en biedt een aantal voordelen, waaronder:

Verhoogde veiligheid: HTTP/3 integreert encryptie op een diepgaandere manier, waardoor de communicatie tussen de server en de client veiliger is.

Snellere laadtijden: Door gebruik te maken van QUIC, een nieuw transportprotocol, kunnen verbindingen sneller worden opgezet en gegevens efficiënter worden overgedragen.

Verder kunnen we bestanden minimaliseren (kleinere bestandsgrootte bekomen door spaties en witruimte te verwijderen -> minify html, css en js bestanden), code asynchroon inladen (niet alles onmiddellijk inladen, pas wanneer deze code nodig is). Deze dingen kan je vaak bekomen met cache-plugins.

Ook zijn afbeeldingen vaak een grote boosdoener voor snelheidsproblemen. We kunnen afbeeldingen comprimeren, meerdere versies aanbieden afhankelijk van het gebruikte toestel (geen 1000 pixels nodig op een smartphone scherm) en lazyloading opzetten waarbij afbeeldingen pas ingeladen worden wanneer ze op het scherm zichtbaar zouden worden.

Voor afbeeldingen kunnen we een srcset attribuut opgeven om meerdere versies aan te bieden afhankelijk van het toestel:

<img srcset="img/kat_large.jpg 3000w, img/kat_medium.jpg 2000w, img/kat_small.jpg 1000w" src="img/kat_fallback.jpg">

We bieden de afbeelding aan in drie formaten (op basis van een breedte in pixels) en gebruiken het normale src-attribuut als fallback indien de srcset door de browser niet ondersteund zou zijn.

Een nieuw formaat wordt nu gebruikt voor afbeeldingen: WebP. Deze zijn gemiddeld 25% kleiner dan jpg’s met nog dezelfde kwaliteit en 3 maal kleiner dan een png. WebP wordt ondersteund door Google Chrome, Firefox, Edge en Opera browser. Er is ook nog het AVIF formaat maar wordt nog niet door iedere browser ondersteund.

Andere manieren om snelheid te verhogen zijn het gebruik van CDN‘s (Content Delivery Networks) zoals Cloudflare waarbij de pagina’s en de foto’s al voorgeladen zijn.