Website optimalisatie is voor beheerders van websites, webwinkels en, in het bijzonder, fotografen een lastig verhaal. Foto’s op je website in een hoge kwaliteit zonder kwaliteitsverlies is geen makkelijke klus. Met WordPress, Joomla, Drupal, Magento en PrestaShop is dat echter een fluitje van een cent.

Bij optimalisatie van je website denken veel mensen in eerste instantie aan de lay-out, vindbaarheid in Google (SEO) en andere zaken. Maar er speelt ook een ’technisch’ verhaal een rol in de optimalisatie. En door hier goed op te letten kun je (in principe) ook geld besparen!

Website optimaliseren

Waarom zou je je website moeten of willen optimaliseren?

1. een website die geoptimaliseerd is sneller op het scherm bij de bezoeker. Vooral de ‘startpagina’ moet dus relatief snel laden. Een trage website is een afknapper. Mensen gaan geen 5-10 seconden wachten tot de pagina geladen is.
2. Veel fotografie-websites en webwinkels zijn vaak erg traag omdat de (product)afbeeldingen in een hoge resolutie zijn of onvoldoende geoptimaliseerd voor internet. Dat is niet alleen jammer wegens de snelheid, het kost ook veel bandbreedte (het aantal mb’s dat mensen “downloaden” van je site) en opslagruimte. Eén foto in hoge resolutie is al snel 7 tot 10 mb groot;

Hierdoor heb je dus én een trage website én potentiële hoge kosten én mensen die je website voortijdig verlaten én.. het leidt tot een lage google-ranking.

Voor deze casus ga ik uit van de website erbeefoto.nl die geoptimaliseerd is en een pagina-omvang van +/- 1Mb voor de startpagina heeft. De laadtijd is minder dan 2 seconden (gemeten door Pingdom, vanuit de EU en de VS is slechts een fractie hoger).

Ik heb dit vergeleken met een aantal websites (uiteraard ga ik geen namen noemen!) van fotografen uit de regio en sommige scoren vergelijkbaar, maar er zijn er ook diverse die met een laadtijd van >5 seconden erg slecht scoren.

Hoger in Google

Nu is ‘google ranking’ wel een buzz-word. Het “bovenaan in Google” is heel relatief. Veel mensen willen “bovenaan in Google”, vooral webwinkels natuurlijk, maar beseffen zich niet dat het “bovenaan staan” afhangt van de trefwoorden die mensen intikken (of zelfs volledige zinnen) in Google. Je kunt je eigen site en trefwoorden controleren via bijvoorbeeld deze website.

Daarnaast is er nog een andere weg om ‘hoog in Google’ te eindigen. Afbeeldingen worden veel gezocht door mensen, vooral foto’s. En één van mijn foto’s staat al tijden stijf bovenaan in de Google Image Search. Dit soort resultaten kun je ook beïnvloeden.

Besparen op kosten

Hoe meer ruimte en data je nodig hebt, hoe hoger de kosten voor je hosting. Door te besparen op data en opslag, kun je met een goedkoper hostingpakket toe. Dat is al de eerste winst. Wil je je werk verkopen via je website, dan is een trage website dus ook nog eens een hindernis op dat gebied. Veel mensen zullen niet wachten tot de site geladen is en vertrekken naar een ander. Dat heet de ‘bounce-rate’ (na één pagina, al dan niet helemaal geladen, vertrekken van een bezoeker). Een hoge bounce-rate is eveneens slecht voor je Google-ranking.

Er zijn dus meer dan genoeg redenen om je website ook ’technisch’ te optimaliseren!

Hoe optimaliseer je je website?

Heel veel websites gebruiken een “Content Management Systeem” zoals WordPress. En daar ga ik in dit artikel ook van uit. Ook andere CMS-systemen zoals Joomla en Drupal en webwinkel-systemen zoals Magento en Prestashop kunnen profiteren van de oplossing die hier beschreven wordt.

Gaat het ten koste van de kwaliteit?

Voor fotografen een hele belangrijke vraag: “Gaat dat optimaliseren niet ten koste van de kwaliteit van mijn foto’s?!”. Je kunt daar in principe volmondig “Ja!” op zeggen want: het aantal pixels in de foto wordt minder. Echter, het antwoord is: “Nee!”.

Hoe kan dat? Dat heeft te maken met de beeldschermen. Digitale foto’s en afbeeldingen zijn in een enorm hoge resolutie. Omdat ze geschikt moeten zijn voor afdrukken in, uiteraard, hoge kwaliteit. Maar de PPI van een beeldscherm haalt bij lange na dat getal niet. Een beeldscherm kan simpelweg dat niet weergeven en dus gaat die ‘informatie’ al verloren voordat je het ziet omdat er een scherm ’tussen’ je ogen en de afbeelding zit!

Bij een één megapixel-camera(..) hebben we het over 1 miljoen pixels. Een 5 megapixel digitale fotocamera kan foto’s maken met een resolutie van 2560 x 1920 pixels, bijna 5 miljoen pixels. Dat kun je simpelweg dus niet weergeven op een scherm. Er valt heel wat meer over te vertellen maar de conclusie zal duidelijk zijn. Afbeeldingen bedoeld voor op een scherm kun je behoorlijk optimaliseren. Aan het eind van dit artikel heb ik ook nog een voorbeeld hiervan uit de praktijk.

Voor je begint

Ik neem aan dat het overbodig is te melden, maar toch. Maak altijd een backup van je website voor je begint. Altijd! vertrouw er niet op dat “de hostingfirma” dat wel gedaan heeft of dat de risico’s wel mee vallen. De vraag is namelijk niet óf het fout gaat maar wannéér het fout gaat. Ik heb het in de praktijk helaas toch wel een paar keer gezien bij klanten en als je hele website ‘weg’ is door een plugin of service die faalt is dat vreselijk zuur!

WordPress

De beste en populairste oplossing voor het optimaliseren van afbeeldingen is reSmush. Er zijn diverse plugins beschikbaar waaronder de eigen plugin van reSmush via de WordPress website. Maar je kunt een stap verder zetten en het kost weinig moeite. De bovenstaande afbeelding, een screenshot, is (origineel) 829,5 kB. Nadat reSmush zijn werk doet..?

“The file was compressed from 810.02 KB to 268.36 KB saving 66.87”

Met de plugin WP Optimize kun je niet alleen je afbeeldingen optimaliseren (door slimme compressie via reSmush) maar ook allerlei andere zaken optimaliseren in je wordpress website zoals: tabellen optimaliseren, revisies van documenten verwijderen én: caching gebruiken. Door “caching” wordt je website vele malen sneller dan de standaard WordPress website.

De reden is dat pagina’s worden opgeslagen in een tijdelijk bestand en niet elke keer het hele WordPress-systeem een pagina interactief moet genereren. Daarmee wordt je website tevens minder afhankelijk van de kracht van de server (en de drukte op dat moment op de server). Een handige ‘alles in één’ tool dus!

In een andere WordPress website welke ik beheer (zie afbeelding hiernaast) bespaarde ik minder ruimte op de foto’s omdat die door een eerdere plugin al waren geoptimaliseerd. Toch was er nog ruimte voor verbetering.

Overige systemen

Voor Joomla, Prestashop, Magento en andere CMS-system en webwinkels heeft de reSmush website diverse plugins beschikbaar.

Voorbeeld foto

De “proof is in the pudding” zeggen ze altijd, dus neem ik onderstaand de proef op de som. Deze foto was oorspronkelijk 4,58Mb/20mp/350×350 dpi. Ik heb ‘m iets uigesneden en verkleind naar 1600px op de lange zijde en daardoor is de afbeelding nu 468Kb. Dat is al een aanzienlijk verschil.

(originele foto 1600px lange zijde)

Met reSmush heb ik de foto als “gecomprimeerd” gemarkeerd, waardoor hij niet daadwerkelijk gecomprimeerd wordt maar in de originele resolutie blijft. Daarna heb ik de foto nog een keer naar de website geupload, en nu wel met reSmush laten comprimeren.

(afbeelding bewerkt door reSmush)

Zie je ook maar énig verschil? Voor het menselijk oog is dit, door het computerscherm, niet waarneembaar!

De afbeelding is nu 410Kb. Dat is niet wereldschokkend, maar bedenk dat wanneer je een site hebt met een paar honderd of zelfs duizenden foto’s de winst enorm is. En als op een pagina 10 foto’s geladen moeten worden is een verschil van 50kb/foto toch al weer een halve Mb. In de praktijk is de winst vaak groter zelfs. Dat zorgt dus voor alle eerder genoemde voordelen zoals: minder schijfbeslag, minder datatransfer en bovenal een sneller ladende pagina!

Tot slot

Niet tevreden over het resultaat? In WP Optimze heeft reSmush heeft een ‘undo’ functie. Waarmee je het origineel kunt herstellen. Heel veel succes met het optimaliseren maar nogmaals: vergeet niet vóór je iets dergelijks gaat doen: backup maken!