Gebruik je een visual editor zoals Visual Composer of een andere "builder" in een thema zoals Enfold, Divi of Avada?
Dan kun je daar smalle kolommen maken en daar plaatjes in zetten. Grote kans dat je je plaatjes te groot gebruikt. En dat vertraagt je site. Wij laten zien hoe simpel het is om de juiste afmeting te kiezen en je site enorm te versnellen. Met puur het kiezen van een kleiner formaat is je site sneller zonder dat je hoeft te programmeren!

Stap 1, bekijk je pagina om te zien je een blok gebruikt met plaatjes erin

De Google page speed tool helpt je om te identificeren welke plaatjes te groot worden ingeladen. Je kunt ook kiezen voor de developer tool inspector van je browser of de firebug inspector.

Als je een plaatje van (in dit geval) 2554 x 2554 pixels hebt dat je eigenlijk maar op 600 x 600 pixels toont .. duurt het laden onnodig lang en dat willen we natuurlijk niet. We focussen op het plaatje met de lamp in onderstaand voorbeeld. Je ziet dat er vier kolommen zijn met daarin in iedere kolom een plaatje. De stappen moet je voor ieder plaatje doen, het kost je minder dan een minuutje om een plaatje kleiner te maken.

pagina

Stap 2, ga naar pagina bewerken

Als je weet welk plaatje te groot in de HTML wordt ingeladen, ga dan naar pagina bewerken en ga naar de blokken waar dat ene blok in staat.

bewerk-scherm

Stap 3, bewerk het blok

Klik op blok bewerken. Zie je al dat het plaatje hier al erg groot getoond wordt? Groter zelfs dan je op de voorkant van de site ziet.

Ga met je muis over het plaatje en klik er eenmaal op om het plaatje te selecteren. Nu verschijnt een klein menu met een paar opties.
Klik op het potlood om het plaatje qua instellingen te wijzigen.

bewerk-item-in-blok

 

Stap 4, stel nu de nieuwe kleinere afmetingen in

Het is een simpel klusje: Kies bij de dropdown van "Afmeting" voor een afmeting die dichterbij de echt getoonde afmeting komt. In dit geval konden we kiezen voor 600 x 600 pixels. Dat is aanzienlijk kleiner en dus ook meteen veel sneller in laadtijd.

 

kies-hier-een-kleiner-formaat

Klaar! Nouja .. voor dit ene plaatje dan.

Stap 5, herhaal voor alle plaatjes

Dit kun je dus voor alle plaatjes op je site doen, in blokken maar ook plaatjes die je in je pagina, widgets of blogberichten gebruikt.
Als je alles hebt bijgewerkt zul je zien dat je laadsnelheid omhoog gaat en je testscores ook aanzienlijk beter zijn. En dat alles zonder ook maar een regel code aan te raken! Makkelijk toch?


Geef je reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Geef je reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Ervaringen van anderen

Lees ook

  • Kaartjes WordCampNL WCNL2016 zijn te koop!

    WordCampNL

    De kaartjes voor het WordPress event van het jaar zijn beschikbaar! Mede mogelijk gemaakt door ManagedWPHosting.nl die ook dit jaar weer trotse sponsor is! Wij hebben alle WordCampNL's sinds de eerste editie in 2012 bezocht. Ieder jaar weer halen we veel energie uit de community en zijn we ook blij al je vragen te beantwoorden. Bemachtig de […]

  • Kaartjes WordCampNL WCNL2015 zijn te koop!

    WordCampNL

    De kaartjes voor het WordPress event van het jaar zijn beschikbaar! Mede mogelijk gemaakt door ManagedWPHhosting.nl die ook dit jaar weer trotse Silver Sponsor is! Bemachtig ze snel op https://netherlands.wordcamp.org/2015/2015/08/17/tickets-voor-wcnl-editie-2015-zijn-beschikbaar/ Zien we je daar? ps: Bekijk ook snel de goodie bag of .. als je echt niet kunt wachten kijk dan op onze homepage: http://www.managedwphosting.nl/

  • Makkelijk javascript in je footer zetten

    Plugin

    Ken je dat? Je moet "even" ergens wat javascript neerzetten. Een stukje code van bijvoorbeeld Google of Facebook, of wellicht een andere dienst. Hoe doe je dit nu makkelijk zonder in de code te moeten duiken en met garanties dat het blijft werken?