Tag: minify

Geplaatst op door

WordPress website optimaliseren

WordPress website optimalisatie

Merk je op dat jouw WordPress website enorm traag laadt? Hier is wat aan te doen! WordPress is gemakkelijk te optimaliseren. Het ideale van dit platform is dat er de mogelijkheid is tot het installeren van plugins. Er zijn veel plugins beschikbaar die het optimaliseren van jouw website vereenvoudigen. In deze blog behandelen alleen plugins die wij zelf ook getest hebben. Vergeet straks niet het artikel te delen!

Wat kun je precies optimaliseren aan je website.

Binnen WordPress valt er veel te optimaliseren. Zo zijn er diverse plugins te installeren die afbeeldingen comprimeren en optimaliseren. Javascript, HTML en CSS’s bestanden kun je minfyen en samenvoegen. Jouw WordPress website kan aangesloten worden op een CDN netwerk zoals Cloudflare en zo zijn er nog een aantal punten.

Hulp nodig bij het optimaliseren?

Wij staan graag voor je klaar om je te helpen bij het optimaliseren van jouw WordPress website. Ook als je ergens niet uitkomt tijdens het lezen van dit artikel, mag je altijd even contact opnemen. Dit kan telefonisch, per e-mail of via de chat en natuurlijk onze socialmedia kanalen. Wist je dat wij gevestigd zijn in het centrum van Amsterdam? Je mag bij ons altijd een afspraak maken om langs te komen.

GZIP compression inschakelen.

Een van de makkelijkste manieren om je WordPress website sneller te maken is het gebruik van GZIP compression. Wat is GZIP compression? We leggen het je graag uit. Gzip staat voor GNU zip en is een datacompressiemethode. GZIP zorgt er voor dat webpagina’s, stylesheets en scripts geminimaliseerd worden. Over het algemeen kun je met GZIP-resources met veel tekst al verkleinen tot 70 a 90%. Het is daarom niet alleen een van de makkelijkere manieren, maar ook een van de beste manieren om jouw WordPress website te optimaliseren.

Om GZIP compression in te schakelen kun je inloggen via jouw FTP-programma op jouw webserver waar de website staat. In de hoofdfolder (rootfolder) maak je een nieuw bestand aan en noemt het “.user.ini” tot slot geef je het bestand de bestandsrechten 644 mee. Mocht dit bestand al aanwezig zijn, dan open je dit bestand en voeg je vervolgens de volgende code toe:

zlib.output_compression = 1

Sla het .user.ini bestand op en daarna ga je opzoek naar het .htaccess bestand. Het kan zijn dat er geen .htaccess bestand aanwezig is. Deze kun je vrij eenvoudig aanmaken door een nieuw bestand te creëren. Je noemt dit bestand vervolgens ".htaccess" en geeft het de bestandsrechten 644 mee. We openen vervolgens het .htaccess bestand en zetten er de volgende code in:

<IfModule mod_deflate.c>
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
</IfModule>

GZIP-compressie hoort nu volledig geactiveerd te zijn. Het kan ook zijn dat jouw webserver geen GZIP ondersteund, dit merk je gauw genoeg bij het testen van je website. Om je website te testen kun je websites als GTMetrix, PageSpeed Insights, Pingdom gebruiken.

Expired headers toevoegen aan je .htaccess bestand.

Naast GZIP compression kun je ook expired headers instellen voor jouw WordPress website. Expired headers zijn opdrachten die naar het browser gestuurd worden om te bepalen of een bestandstype wel of niet geladen moet worden uit de cache. Ook wordt vanuit de expired headers duidelijk wat het tijdsbestek is van een op te bouwen cache. In het voorbeeld zie je staan “access 1 year”. Dit wil zeggen dat als iemand vandaag jouw WordPress website voor het eerst bezoekt, deze website nog 1 jaar uit de cache wordt opgehaald bij ieder nieuw bezoek. Dit vervalt uiteraard wanneer je zelf jouw browser cache leegt. Hieronder vind je de expires header die je kunt toevoegen aan je .htaccess bestand.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Het optimaliseren van jouw website met caching.

Wat is caching? Dat hoor ik je zeggen! Caching is het tijdelijk opslaan van jouw website in het korte termijn geheugen. Elke keer dat je een website bezoekt wordt deze website opgeslagen in jouw browser in de tijdelijke cache. Waarom dit zo belangrijk is, heeft te maken met de snelheid van jouw pagina’s die moeten inladen. Zonder het gebruik van caching duurt het laden van de pagina’s langer dan als je wel caching zou gebruiken. Op het moment dat je een pagina bezoekt slaat het browser gedeeltes van de pagina op in de cache. Wanneer je zo’n pagina vervolgens op een later moment weer zou bezoeken, controleert je browser eerst of er wellicht iets in jouw cache geheugen is opgeslagen. Mocht dit zou zijn, dan zal de webpagina meteen naar voren komen aangezien deze al opgeslagen staat op de computer in het desbetreffende browser.

Voordelen van WordPress laten cachen.

Naast dat caching zorgt voor een snellere website, wat altijd fijn is voor de gebruikerservaring, zorgt caching ook voor databesparing voor mobiele gebruikers, denk aan gebruikers van smartphones en tablets. Omdat deze groep vaak mobiel internet gebruikt kan dit erg prijzig zijn. Daarom is caching ideaal omdat er zo minder bandbreedte verbruikt wordt omdat de website immers uit de cache opgehaald wordt.

Het gebruik van de caching plugin WP Optimize.

Een van de betere plug-ins om jouw website te cachen is WP Optimize. Met deze plugin kun je naast caching ook gebruik maken van de andere functies. Zo is het ook mogelijk om met deze plugin gebruik te maken van de volgende functies: Database optimalisatie, Comprimeren van afbeeldingen, en tot slot minifying van scripts en stylesheets.

Installeren, activeren en configureren van de plugin WP Optimize.

Ga opzoek in de pluginstore van je backend. “Plugins” > “Nieuwe plugin” > en zoek hier naar WP Optimize. Als het goed is zie je gelijk links bovenaan de desbetreffende plugin staan. Mocht je hem niet kunnen vinden, dan kun je hem hier downloaden. Na het installeren klik je nog even op ‘Activeren’ en je caching plugin is geïnstalleerd.

Het optimaliseren van de database.

Vervolgens klikken we in de linker sidebar op ‘Plugins’ en zoeken de plugin op. Klik op “Optimaliseren”. Je zult dan op het tabblad ‘Database’ uitkomen. We starten dus met het optimaliseren van de database. Dit doen we door op de button “Start alle geselecteerde optimalisaties”. Je kunt eventueel nog op eigen inzicht meer bepaalde selectievakken aanvinken. Persoonlijk laten we de gekozen opties voor optimalisaties staan, en optimaliseren deze. Je zult nu een loader bij alle componenten zien die aan het optimaliseren zijn. Zodra deze loaders gestopt zijn is het proces voltooid en kunnen we naar het volgende tabblad genaamd “Afbeeldingen”.

Afbeeldingen comprimeren en optimizen.

Nadat we de database hebben geoptimaliseerd, kunnen we beginnen met de afbeeldingen. Het is ook mogelijk met deze plugin alle afbeeldingen automatisch te laten comprimeren. Schakel deze functie in door op “Automatisch nieuw toegevoegde afbeeldingen comprimeren”. We zouden dit persoonlijk wel aanraden. Bij “Opties voor compressie” laten we de optie “Aangepast” staan zoals deze al staat ingesteld. Hiermee worden de afbeeldingen naar een gangbaar gegeven gecomprimeerd. Laat de schuif in het midden staan zoals deze al staat ingesteld. Je kunt hem eventueel op eigen gevoel nog iets naar links verplaatsen om de afbeeldingen nog iets meer te comprimeren. Tot slot kun je hier ook nog op geavanceerde opties klikken. Aangezien we enorm veel opties hebben wat betreft comprimeren en optimaliseren kunnen we deze hier helaas niet allemaal behandelen. Verderop in dit artikel lees je ook nog over het optimaliseren van je afbeeldingen met de Smush plugin.

De cache functie gebruiken van WP Optimize.

Nadat we klaar zijn met de afbeeldingen, is het tijd om de cache functie te configureren. Ga hiervoor naar het volgende tabblad ‘Cache’ toe. Gelijk bovenaan de pagina vind je ook een handige video die je uitlegt wat is caching is, hoe het werkt en hoe je het toepast. Om gebruik te maken van de cache functie dien je bovenaan de pagina het schuifje “Zet cachen pagina’s aan” naar rechts te zetten, tot deze blauw opkleurd. Dit kan soms even duren. Nadat dit afgerond is, klik je nog even onderaan de pagina op “Sla wijzigingen op”. Nu is caching geactiveerd en actief. Tot slot voegen we nog een klein stukje code toe in het .htaccess bestand om de website optimaal te laten cachen. Dit stukje code kun je plaatsen onder de code voor GZIP compression wat we eerder in dit artikel hebben geplaatst en opgeslagen. De code is als volgt:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

Sla het bestand op, en verwijderd de cache. Dit doe je vanuit je WordPress backend. Je ziet als het goed is na het activeren van de cachinig optie in de plugin WP Optimize, boven in beeld een knop genaamd “Cache legen”. Hier kun je kiezen voor “Cache geheugen opschonen voor alle pagina’s” of het cache geheugen legen per specifieke pagina. Nadat je de cache geleegd hebt, zijn alle wijzigingen die je aan je pagina hebt gedaan zichtbaar.

Caching performance testen na optimalisatie.

Nadat je caching ingesteld hebt, is het handig om te kijken wat dit doet qua prestaties. Om dit goed te testen, gebruiken we hier GTMetrix Legacy reports voor. Met legacy reports kun je erg goed zien welke bestanden er gecached worden en hoe intensief caching toegepast wordt.

Minify van scripts en stylesheets.

Met de laatste stap die we moeten nemen in deze plugin zijn we aanbeland bij het tabblad “Minify”. Dit is een zeer belangrijk onderdeel om jouw WordPress website nog beter te optimaliseren en sneller te maken. Met deze optie kun je het aantal requests terug dringen. Requests zijn verzoeken die gedaan worden vanaf jouw website. Alle losse onderdelen op jouw website zijn in principe per stuk allemaal requests- en verzoeken. Stel dat je drie afbeeldingen hebt, twee scriptjes en een stylesheet dat ingeladen wordt tijdens het openen van je website, Dan moeten we eerst wachten tot deze ingeladen zijn.

Des te meer verzoeken er verwerkt moeten worden, hoe langer het wachten duurt, en dit wil je dus niet. In dit voorbeeld hebben dus te maken met maximaal 6 verzoeken. Wat uiteraard erg weinig is. Gemiddeld heeft een goede WordPress website zo’n 85 requests. Zit je hierboven dan kan je website al een stuk langzamer worden. Het zou nog mooier zijn om lager dan die 85 requests uit te komen. Dit kunnen we realiseren met de functie Minify.

Minify inschakelen en optimaliseren.

Om bestanden te minifyen zullen we als eerst de optie “Verkleinen inschakelen” actief moeten maken. Zet het schuifje naar rechts tot het blauw opkleurd. Vervolgens zien we drie opties omhoog komen die allen staan aangevinkt. Dit kun je eerst prima aanhouden. Klik nu op de button “Schoon de verkleinde bestanden op”.

Het kan een beetje tricky zijn, de optimalisatie van bestanden als Javascript en CSS stylesheets. Na het wijzigen van de minify settings, legen we eerst de pagina cache weer uiteraard, en testen de website uitvoerig op styling maar ook functionaliteit. Uiteraard kun je ook de website gelijk testen op GTMetrix of andere performance testing websites.

LET OP! Gebruik je Cloudflare? Dan zul je je een keuze moeten maken waar je graag je scripts en stylesheets laat minifyen. Je kunt geen bestanden dubbel minifyen, dit zal in de meeste gevallen voor problemen zorgen.

Het gebruik van de caching plugin WP Fastests Cache.

De volgende plugin die we gaan behandelen is de plugin van Emre Vona genaamd WP Fastests Cache. Deze plugin werkt weer iets anders dan de besproken plugin van WP Optimize. Beide plugins optimaliseren je website door middel van caching. Echter, kun je bij deze plugin jouw CDN netwerk verbinden middels een API. Een API is niets meer dan een integratie.

Inhoudelijk over het optimaliseren van afbeeldingen en caching gaan we hier verder niet op in. We gaan nu bespreken hoe je een koppeling kunt leggen met in dit geval Cloudflare en WP Fastest Cache op jouw WordPress website.

Het grote voordeel van deze integratie is dat je niet meer hoeft in te loggen op Cloudflare om hier je opgebouwde cache te legen. Je hoeft dan na het wijzigen van een pagina of iets dergelijks enkel nog je pagina cache te legen op je WordPress website zelf. Met deze cache flush wordt ook gelijk de cache history bij Cloudflare zelf geflushed. Wel zo handig!

We gaan ervan uit dat je de plugin hebt kunnen vinden in de plugin store van je WordPress backend.  Problemen met het vinden van de plugin? Klik dan hier. Om Cloudflare te koppelen middels een API gaan we naar “Plugins” > “Instellingen” > “CDN”. Nu zie je een tabblad met meerdere iconen. Klik hier op de icoon van Cloudflare (“CDN by Cloudflare”).

Er wordt nu gevraagd om een token op te geven. Dit token kun je enkel genereren als jouw WordPress website al reeds aangesloten is op Cloudflare. In dit geval gaan we er van uit dat dit al bij jouw WordPress website al is gebeurt. Om een API token te genereren moeten we inloggen op Cloudflare. Log nu in op Cloudflare en volg de volgende stappen:

  1. Klik op de juiste domeinnaam die je wilt verbinden met de plugin.
  2. Op het huidige tabblad “Overview” zie je rechtsonder aan de pagina “Get your API token”. Klik hier op.
  3. Nu komen we uit bij een tabblad waar je jouw gegevens en taal kunt wijzigen. Bovenin beeld zien we in het menu staan “API tokens”, deze klikken we aan.
  4. Om een nieuwe API token aan te maken klikken we op “Create Token” en kiezen hierbij “Edit zone DNS” door op “use template” te klikken.
  5. Nu is het de bedoeling de juiste regels aan te maken. We beginnen eerst de permissions in te stellen. Deze moeten als volgt staan: 
    PermissionsZone >> Cache Purge >> Purge
Zone >> Zone Settings >> Edit

    Dit zijn de bovenste twee invoervelden onder elkaar. Zie je geen 2 invoervelden onder elkaar? Klik dan nog even op de “+Add more” button.

  6. Nu stellen we de onderste regel in. Het instellen hangt hier van af wat hoe jouw situatie is. Je kunt deze API ook voor alle domeinnamen instellen binnen jouw Cloudflare omgeving. Kies dan voor “Include >> All zones”. Stel je deze API in voor een specifiek domein, kies dan de optie “Include >> Specific zone” en zoek hier de juiste domeinnaam op. 
    Zone resourcesInclude >> All Zones
Include >> Specific zone > “example.nl”
  7. De laatste stap is om op "Create Token” te klikken. Nu zul je het API token in beeld zien en kun je klikken op “Copy”.

De juist gegenereerde API gaan we implenteren in jouw WordPress website. We keren terug naar het WordPress dashboard. Om de API te implenteren voeren we de volgende stappen uit:

  1. Ga naar “Plugins” > “WP Fastest Cache” > “Instellingen” > “CDN” en klikken op “CDN by Cloudflare”.
  2. We vullen hier de API token in dat wij van Cloudflare hebben ontvangen en klikken op “Next”.
  3. In het volgend scherm krijgen we de “Auto minify” opties te zien. Zoals eerder besproken is, moet je hier opletten of je wilt minfyen via Cloudflare of via jouw eigen WordPress website (WP Fastest Cache). Maak hier een keuze en klik op “Next”.
  4. Je kunt hier nog kiezen om “Rocket Loader” in te schakelen. Maak je keuze en klik op “Next”. Mocht je meer informatie willen weten over de Rocket Loader functie, lees dan het hele artikel hier.
  5. Nu krijgen we het tabblad met “Browser Cache Expiration” in beeld. Hier kunnen we aangeven hoelang we willen dat Cloudflare de cache bewaard. Dit stellen we in op standaard 6 maanden. En klikken hier weer op “Next”.
  6. Ready to go! Jouw WordPress website is nu verbonden middels een API met Cloudflare.

Mocht je na het uitvoeren tegen bepaalde punten aanlopen, waar je hulp bij nodig hebt? Geen probleem! Laat het ons weten en we helpen je graag verder.

Afbeeldingen optimaliseren op jouw WordPress website.

Wist je dat het inladen van (grote) afbeeldingen voor performance verlies leidt? Jouw WordPress website kan door het optimaliseren van grote afbeeldingen stukken sneller worden! Soms kan het comprimeren van afbeeldingen afdoende is. Maar het komt ook voor dat afbeeldingen middels HTML (dus in de code) worden verkleind van bijvoorbeeld 1920x1080 pixels naar 350x190 pixels. Het probleem hierbij is dat de afbeelding zijn ware formaat behoud en daarom eerst de grote afbeelding ingeladen moet worden, terwijl hij maar klein op de website wordt weergegeven. Dit is zonde en zal leiden tot een hoger bounce percentage. We bespreken in dit hoofdstuk de verschillende manieren om jouw afbeeldingen te optimaliseren en te comprimeren.

Afbeeldingen optimaliseren met behulp van Smush.

De makkelijkste manier om jouw WordPress website te optimaliseren, wat afbeeldingen betreft is het gebruik van een plugin. In deze case gebruiken we  de plugin van Smush.

Zoek hiervoor de volgende plugin op “Smush – Lazy Load Images, Optimize & Compress Images” van de uitgever “WPMU DEV” en installeer deze plugin. Na het installeren van de plugin activeer je deze nog even en gaan we naar de instellingen toe. Er zal nu een popup naar bovenkomen en deze gaan we even samen met je door:

  1. Klik allereerst op “Setup starten”.
  2. Je krijgt nu de vraag of je automatische compressie in wilt stellen. Deze vinken we aan. Elke keer als er een nieuwe afbeelding geüpload wordt zal deze automatische gecomprimeerd worden. En we klikken weer op “Volgende”.
  3. Nu wordt er gevraagd of je EXIF-metadata wil verwijderen. Hier kiezen we uiteraard ook weer voor. Het voordeel hiervan is dat de afbeeldingen kleiner worden qua bestandsgrootte. En klikken weer op “Volgende”.
  4. Uiteindelijk zijn we bij een best belangrijk proces aangekomen, het lazy-loaden van afbeeldingen. Dit is afhankelijk van je website of het even soepel werkt. Je zou het kunnen testen, en eventueel bij fouten uit kunnen schakelen. Het is zeker aan te raden, en zal ook leiden tot minder HTTP requests. Na je keuze gemaakt te hebben klikken we op “Volgende”.
  5. De laatste stap is of jij ook gebruikersgegevens wil verzenden bij eventuele fouten of iets anders dergelijks. Maak hier jouw eigen keuze en klik op “Setup wizard afronden”.
  6. Na het afronden van de Setup wizard, worden alle afbeeldingen gecontroleerd.
  7. Vervolgens scroll je iets naar benden op de pagina tot je de button “Bulk smush nu” en hier klikken we op.
  8. Nu worden alle afbeeldingen die aanwezig zijn geoptimaliseerd voor jouw WordPress website.
  9. Nadat de afbeeldingen allemaal geoptimaliseerd zijn scrollen we een klein stukje door naar beneden en zetten bij “Afbeeldingen verkleinen” het schuifje naar rechts, zodat deze blauw opkleurd. We zouden persoonlijk een maximum formaat van 1920 pixels breed en 1080 pixels hoog adviseren. Lager kan soms nog beter zijn, maar dit heeft wel invloed op de kwaliteit van de afbeelding. We klikken vervolgens op “Instellingen bijwerken”.
  10. Gefeliciteerd alle afbeeldingen op jouw WordPress website zijn nu geoptimaliseerd!

We hebben tot nu toe wel de belangrijkste opties besproken die er mogelijk zijn in de plugin van Smush. We willen je zeker aanmoedigen om even rond te kijken en te testen welke mogelijkheden er nog meer zijn voor het optimaliseren en het sneller maken van jouw WordPress website.

Afbeeldingen optimalisatie via GTMetrix (Legacy reports)

Wil je liever geen gebruik maken van plugins die de afbeeldingen optimaliseren? Dan is het ook mogelijk de afbeeldingen allemaal handmatig te optimaliseren. Het uitvoeren van de onderstaande stappen kan erg lastig zijn voor beginners. Gebruik in dat de plugin van Smush zoals hierboven al reeds besproken is.

Via GTMetrix is het vrij eenvoudig om van het originele afbeelding bestand, het geoptimaliseerde bestand te downloaden en terug te plaatsen op de server waar het origineel ook staat. Je kunt de locatie opzoeken door de URL te volgen in GTMetrix. Deze kun je vervolgens herleiden naar het pad van jouw server, zodat je weet waar je deze foto moet terug zetten. Om deze functie te gebruiken moeten we wel ingelogd zijn bij GTMetrix. Je kunt een gratis account aanmaken, en het account instellen op “Legacy Reports”. Bekijk nu onze tutorial hoe je Legacy reports kan instellen!

Hoe optimaliseren we afbeeldingen via GTMetrix? Volg de onderstaande stappen:

  1. Login met je juist aangemaakte account in bij GTMetrix (of bestaand account).
  2. Voer nu jouw URL in en start de test.
  3. Klik bij het tabblad “PageSpeed” op “Optimize images” en bekijk hier de te optimaliseren afbeeldingen.
  4. Je ziet hier als er afbeeldingen te optimaliseren zijn, een rijtje met mogelijke afbeeldingen. Klik hier op “Optimized version”.
  5. De afbeelding zal nu opkomen in een aparte tabblad. Sla deze afbeelding met dezelfde naam op die je ook in de link ziet verschijnen van de vorige tab.
  6. Upload de afbeelding nu in de exacte map via een FTP cliënt. Deze map kun je traceren door het pad te volgen van de afbeelding. Het pad kun je vinden in de URL.
  7. Wis eventuele cache en test je website opnieuw. Je zult zien als je alle afbeeldingen hier geoptimaliseerd hebt, de balk volledig groen zal kleuren.

TIP! Moet je de afbeeldingen nog resizen? Doe dat dan eerst voordat je de afbeeldingen gaat optimaliseren. Anders zul je er dubbel zo veel werk aan hebben.

Geschaalde afbeeldingen gebruiken.

Wat vaak tot een extreem hoge performance boost kan leiden, is het schalen van jouw afbeeldingen. Doe dit in het exacte formaat dat je ook op je website gebruikt. Zo bespaar je veel datagebruik van afbeeldingen die anders onnodig lang moeten inladen. Het is niet de bedoeling om grote afbeeldingen te uploaden in WordPress. WordPress heeft dit zelf al dicht gezet door het upload limiet te verlagen naar 2MB, wat alsnog erg groot is voor een afbeelding voor op je website. Zorg dat je afbeeldingen altijd onder het formaat van 1920 bij1080 pixels blijven. En dat afbeelding maximaal 1MB groot is. Dit is wel echt het uiterste!

We gebruiken in dit geval GTMetrix Legacy reports om te checken of jouw website wel geschaalde afbeeldingen gebruikt. Hiervoor ga je in GTMetrix naar de tab “PageSpeed” en kijkt nu in de rubriek “Serve scaled images”. Mocht jouw pagina geen geschaalde afbeeldingen bevatten, dan zul je ze hier in het overzicht niet tegenkomen. Zijn er afbeeldingen gevonden? Dan zie je nu achter de link van de afbeelding ongeveer deze tekst staan “is resized in HTML or CSS from 3231x1420 to 102x45. “. Dit kun je als volgt uitlezen; de aangetroffen afbeelding heeft een oorspronkelijk formaat van 3231x1420. Deze afbeelding wordt op de website weergegeven in het formaat 102x45.

Het is dan de bedoeling om in bijvoorbeeld Photoshop eerst een nieuw document aan te maken met de volgende waardes: 102 pixel bij 45 pixel hoog. Hier plak je vervolgens de afbeelding in die je weer van GTMetrix kan halen. Sla het bestand op en zet het terug via FTP. Leeg de cache van je website waar nodig en test de website opnieuw. Nu zul je waarschijnlijk ook opmerken dat je de afbeelding opnieuw moet optimaliseren. Doe dit zoals eerder in dit artikel is besproken.

Jouw WordPress website nog beter optimaliseren.

We komen nu aan het einde van dit artikel. We hopen dat je er wat aan hebt, en jouw WordPress website nu goed kunt optimaliseren. Je weet nu hoe je de laadtijd van je WordPress website kunt verbeteren. Ook weet je nu wat grote afbeeldingen kunnen doen met de laadtijd van jouw website of webshop. Tevens hebben we een greep uit het assortiment van cache en optimize plugins gedaan, behandeld en besproken. Er zijn nog zo veel meer plugins en tools beschikbaar. Laat je dan ook niet afschrikken en ga op onderzoek uit en bekijk hoe jij jouw WordPress website nog beter kunt optimaliseren. Heel veel succes gewenst!

Kom je ergens niet uit, geen probleem!

Wij kunnen je helpen bij het optimaliseren van jouw WordPress website. Wil je meer informatie? Neem dan contact met ons op. Wil je langs komen? Dat is mogelijk, wij zijn gevestigd op de Marnixstraat in het centrum van Amsterdam ter hoogte van de Westerstraat.