Webpagina optimalisatie: “Optimize images” oplossen

Wat betekent de melding “Optimize images” bij website optimalisatie en wat doe je eraan?

Dit is eigenlijk een van de meest eenvoudige optimalisatieslagen om te maken. Het betekent namelijk dat je meer compressie kunt toepassen op de afbeeldingen die genoemd worden in het rapport. Door compressie toe te passen op afbeeldingen kun je soms tot wel 80% van de page load tijd besparen. Dat schiet lekker op!

Afbeeldingen optimaliseren voor het web

Vaak gebruiken beginnende website bouwers afbeeldingen die in raw format worden aangeleverd. Dit zijn vaak afbeeldingen van enkele MBs (Megabytes) groot. Elke byte aan data moet echter gedownload worden wanneer een gebruiker naar jouw website komt. Hoe meer data er verstuurd moet worden, hoe langer het duurt voordat de pagina geladen is. Kortom, elke KB telt.

Het is daarom verstandig om afbeeldingen te optimaliseren voor het web. Dit wil zeggen dat je de afbeeldingen verkleint tot het formaat waarop ze getoond worden op de website, en in ieder geval compressie toepast, zoals bij .jpg bestanden het geval is. Maak in ieder geval bij voorkeur gebruik van .png of .jpg afbeeldingen wanneer je afbeeldingen uploadt naar je website.

Foto-editor programma’s zoals Photoshop, Gimp en Pixelmator beschikken vaak over speciale tools om afbeeldingen geoptimaliseerd voor het web te maken.

Verschillende vormen van compressie

Wanneer je gebruik maakt van compressie om je afbeeldingen te verkleinen, dan laat je in de praktijk data weg die vaak niet direct bijdraagt aan de kwaliteit van de afbeelding. Deze data maakt de afbeelding groter dan nodig is, waardoor het langer duurt om deze te downloaden.

Je kunt bij het optimaliseren van je afbeeldingen gebruik maken van twee compressie methoden:

  1. Lossy compressie (met kwaliteitsverlies)
  2. Lossless compressie (zonder kwaliteitsverlies)

Afbeeldingen die je opslaat in een lossy formaat zien er iets anders uit dan het origineel zonder compressie. Dit hoeft echter geen probleem te zijn. Vaak is dit voor de gebruiker niet of nauwelijks zichtbaar. Deze manier van opslaan is in veel gevallen uitstekend bruikbaar voor webpagina’s. Het vermindert de grootte van afbeeldingen drastisch, terwijl je veel afbeeldingen helemaal niet in hoge resolutie wilt tonen.

Wanneer de afbeeldingen echter een belangrijk aspect van je website zijn (bijvoorbeeld bij een portfolio van een kunstenaar), dan zul je deze liever op een lossless formaat willen opslaan. Alle informatie van de originele afbeelding blijft dan bewaard, maar de afbeelding is toch een stuk kleiner. Uiteraard nemen lossless afbeeldingen een stuk meer ruimte in op de server, waardoor het ook langer duurt om ze te downloaden. Dit is in sommige gevallen echter niet te voorkomen.

Afbeeldingen dimensies aanpassen

Een andere mogelijkheid om afbeeldingen te optimaliseren voor het web is het aanpassen van de afbeelding dimensies. Vaak gebruikt men afbeelding in de originele dimensies (bijvoorbeeld 2000 x 1600 px). Dit is prachtig als je een poster wilt maken, maar voor de meeste websites is dit veel te groot.

Wordt deze afbeelding namelijk getoond op een grootte van bijvoorbeeld 500 x 400 px, dan download de gebruiker wel eerst de originele afbeelding. Vervolgens schaalt de webbrowser van de gebruiker de afbeelding naar het juiste formaat. Hierbij gaan kostbare seconden verloren om de afbeelding te downloaden en te schalen, voordat deze getoond wordt. Upload afbeeldingen dus in de dimensies waarop deze op de website getoond worden. Afbeeldingen kun je eenvoudig “resizen” door gebruik te maken van foto-editor programma’s als Photoshop, Gimp of Pixelmator.

Lees ook ons artikel over Webpagina optimalisatie: “Serve scaled images” oplossen

Zelf bezig met optimalisatie? Gebruik dan deze tools:

Hulp nodig?

Kom je er met bovenstaande handleiding niet uit?

Geen nood! Wij staan je graag bij met raad en daad. 

Meer handleidingen

Webpagina optimalisatie: “Minify CSS, HTML of JavaScript” oplossen

Webpagina aan het optimaliseren? Wat betekent de melding “Minify CSS, HTML of JavaScript” en hoe los je dit op?

Om te begrijpen wat minification is kunnen we het beste even een klein stukje code als voorbeeld nemen. Wij programmeurs proberen code te schrijven die ook leesbaar is voor andere programmeurs. Dit is wel zo handig als je met meerdere mensen werkt aan een stuk software, of als je wilt dat iemand in de toekomst veranderingen kan aanbrengen aan jouw stuk code.

Neem onderstaand stukje Javascript als voorbeeld.

var array = [];
for (var i = 0; i < 20; i++) {
array[i] = i;
}

Hier staat precies hetzelfde als onderstaand stukje code, maar dit is “minified” code.

for(var a=[i=0];++i<20;a[i]=i);

Je ziet dat dit een stuk korter is. In de praktijk betekent minification dat overbodige tekens als enters en spaties, die het voor ons mensen een stuk leesbaarder maken, worden weggelaten. Een computer ziet namelijk geen verschil.

Elke KB telt

Voor een klein stukje code als hierboven maakt dit weinig verschil, maar wanneer je dezelfde techniek toepast op duizenden regels code, dan scheelt dit al gauw weer enkele KBs (Kilobytes), tot MBs (Megabytes) aan data. Data die vervolgens niet over het internet gestuurd hoeven worden van de webserver naar de browser van de gebruiker. Elke KB telt en scheelt download tijd.

Er bestaan verschillende tools op het internet om eenvoudig stukken CSS, HTML of Javascript te “minifyen”. Je kunt hier bijvoorbeeld de volgende tool voor gebruiken: https://www.minifier.org/

Nadat je de betreffende file hebt geminified, kun je deze weer uploaden naar je server.

LET OP! Aanpassingen doen aan HTML, CSS of Javascript bestanden is voor gevorderden gebruikers. Bij fouten loop je het risico de website onbereikbaar te maken. Zorg dus dat je weet wat je doet, of schakel een professional in.

Zelf bezig met optimalisatie? Gebruik dan deze tools:

Hulp nodig?

Kom je er met bovenstaande handleiding niet uit?

Geen nood! Wij staan je graag bij met raad en daad. 

Meer handleidingen

Webpagina optimalisatie: “Enable GZIP compression” oplossen

Ben je lekker bezig met het optimaliseren van je webpagina, krijg je de melding “Enable GZIP compression”. Wat betekent dit en wat doe je eraan?

GZIP compression is een methode om bestanden op de server te bundelen en als het ware samen te drukken, alvorens deze over het internet te versturen naar de browser van de gebruiker. Dit kan al snel 50% schelen in bandbreedte gebruik, waardoor je website een stuk sneller geserveerd zal worden. Het is een vergelijkbaar proces als ZIP. De meeste gebruikers kennen dit waarschijnlijk wel van het versturen van grote bestanden, waarbij de ontvanger het bestand moet UNZIPPEN. GZIP werkt op een vergelijkbare manier, alleen doet de browser het unzippen automatisch voor je.

Wel dient GZIP actief te zijn op de webserver, voordat je dit kunt gebruiken. Dit kun je eenvoudig aan je webhoster vragen. Helaas bieden veel low budget hosting providers dit niet standaard aan, of hebben dit zelfs helemaal onmogelijk gemaakt. Vergeet bij het optimaliseren van je website dan ook niet naar je hosting te kijken. Hiervoor geldt vaak, goedkoop is duurkoop.

Je kunt eenvoudig testen of GZIP actief is voor je eigen website door middel van deze tool: https://checkgzipcompression.com/

Wanneer je hebt geconstateerd dat GZIP nog niet actief is op je website, maar je webhosting provider deze mogelijkheid wel ondersteunt, dan kun je GZIP eenvoudig activeren door een aantal regels op te nemen in je htaccess file.

LET OP! Aanpassingen doen in de htaccess file is voor gevorderden gebruikers. Bij fouten loop je het risico de website onbereikbaar te maken. Zorg dus dat je weet wat je doet, of schakel een professional in.

GZIP compression voorbeeld

Hieronder een voorbeeld dat je kunt toevoegen aan je htaccess file.

Let op, dit is slechts een voorbeeld. Win advies in bij je webhoster, of een professioneel webdesign bureau, voordat je zomaar wijziging doet aan je htaccess file!

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Zelf bezig met optimalisatie? Gebruik dan deze tools: GTmetrix, Pingdom Tools, of Google PageSpeed,

Hulp nodig?

Kom je er met bovenstaande handleiding niet uit?

Geen nood! Wij staan je graag bij met raad en daad. 

Meer handleidingen

Webpagina optimalisatie: “Leverage browser caching” oplossen

Wanneer je bezig bent met het optimaliseren van je webpagina, dan kom je vaak deze melding tegen. Wat betekent dit?

Deze melding klinkt veel ingewikkelder dan hij is. Wanneer je een website bezoekt, moet deze ingeladen worden in de browser. Hoe meer gegevens (data) er over het internet gestuurd moet worden, hoe langer het duurt voordat de pagina zichtbaar is op het scherm. “Da’s logisch”, zoals Johan Cruijff zou zeggen. 🙂

Wat is caching?

Om webpagina’s snel te serveren aan bezoekers wordt er op het internet al sinds jaar en dag gebruik gemaakt van “caching”. Caching is niets anders dan het tijdelijk opslaan van informatie, met het doel deze informatie snel beschikbaar te kunnen stellen voor de bezoeker.

Zodra je een website bezoekt, wordt een deel van deze informatie lokaal opgeslagen op je eigen computer, met behulp van de browser. Dit noemen we browser caching. Het gaat hierbij om “statische elementen” van een webpagina, zoals plaatjes. Gegevens die over het algemeen niet dagelijks wijzigen.

Wanneer je de website een tweede keer bezoekt kijkt je browser eerst in de lokale cache om te zien of er al een gecachte versie van de website op de lokale harde schijf staat. Al deze gegevens hoeven dan namelijk niet over het internet gestuurd te worden, waardoor je de webpagina veel sneller te zien krijgt.

Expiration toevoegen

De melding “leverage browser caching” wil zeggen dat jouw website niet optimaal gebruik maakt van de browser cache. Dit komt doordat de gecachte bestanden standaard een bepaalde “verlooptijd” (expiration) meekrijgen. Dit is de tijd waarop de browser de opdracht krijgt om de gecachte gegevens te verversen. Wanneer deze tijd erg kort is (zeg een paar uur), dan moet de bezoekers alsnog alle gegevens van de server halen, waardoor hij dus geen gebruik maakt van de browser cache. Een gemiste kans!

De bestanden die genoemd worden bij deze melding hebben deze een te korte verlooptijd. Je kunt dit optimaliseren door in je htaccess file per type bestand aan te geven na hoeveel tijd de bestanden opnieuw gecached dienen te worden.

Zelf bezig met optimalisatie? Gebruik dan deze tools: GTmetrix, Pingdom Tools, of Google PageSpeed,

Hulp nodig?

Kom je er met bovenstaande handleiding niet uit?

Geen nood! Wij staan je graag bij met raad en daad. 

Meer handleidingen

Webpagina optimalisatie: “Serve scaled images” oplossen

Wanneer je probeert een webpagina te optimaliseren dan verschijnt vaak de melding “serve scaled images”. Wat betekent dit?

Het klinkt ingewikkeld, maar het is in de praktijk vaak simpel op te lossen. Wanneer je gebruik maakt van bijvoorbeeld de WordPress media bibliotheek, dan zal het vaak voorkomen dat je een afbeelding upload in het formaat (dimensies) dat je voorhanden hebt.

Standaardformaten in WordPress

Als je bijvoorbeeld een plaatje van 600 x 400 px uploadt naar de bibliotheek van WordPress, dan maakt WordPress hier automatisch een aantal verschillende versies van, in verschillende formaten (thumbnail, gemiddeld, en groot). Deze standaardformaten kun je overigens zelf instellen in WordPress.

Op de website wordt echter niet altijd gebruik gemaakt van deze standaard formaten. Het kan zomaar zijn dat je op de frontpage een afbeelding gebruikt van 300 x 200 px groot. WordPress pakt dan de afbeelding die het dichts bij dit formaat past en schaalt de afbeelding vervolgens. Dit gebeurt dan in de browser, waardoor deze kostbare rekenkracht gebruikt voor het tonen van deze afbeelding. De tijd die hiervoor nodig is gaat ten koste van de laadtijd.

Probeer dus te kijken naar welk formaat de afbeelding geschaald wordt en maak handmatig een versie van de afbeelding op dit formaat met een afbeeldingseditor zoals Gimp, Photoshop of Pixelmator.

Zelf bezig met optimalisatie? Gebruik dan deze tools: GTmetrix, Pingdom Tools, of Google PageSpeed.

Hulp nodig?

Kom je er met bovenstaande handleiding niet uit?

Geen nood! Wij staan je graag bij met raad en daad. 

Meer handleidingen

×

Welkom in de Blauwwwdruk chat!

Klik op een van onderstaande namen om een WhatsApp bericht te sturen, of stuur een email naar info@blauwwwdruk.nl

× Kan ik je helpen?