Overzicht van alle afbeeldingen die geladen worden

Optimaliseer de prestaties van je website met de browser inspector console

Als je vertrouwd bent met webdesign, dan weet je waarschijnlijk dat het optimaliseren van de prestaties van je website van cruciaal belang is. Een van de belangrijkste aspecten van prestatieoptimalisatie is ervoor te zorgen dat je afbeeldingen efficiënt worden geladen. Dit kan helpen om de laadtijden van je pagina’s te verkorten en de algehele gebruikerservaring te verbeteren.

In deze handleiding zullen we je laten zien hoe je de Inspector-tools van je browser kunt gebruiken om informatie over de afbeeldingen op je website te verkrijgen en deze gegevens kunt gebruiken om je site te optimaliseren.

Stap 1: open de Inspector Console

Om te beginnen, open je de Inspector-tools van je browser. Je kunt dit meestal doen door met de rechtermuisknop op een willekeurig element op je webpagina te klikken en “Inspecteren” te selecteren. Eenmaal geopend, navigeer je naar het tabblad “Console”. Hier kun je JavaScript-code invoeren en uitvoeren.

Stap 2: plak de onderstaande code

Nu gaan we een JavaScript-functie invoegen die ons zal helpen informatie te verzamelen over de afbeeldingen op de pagina. Plak de volgende code in de console:

function getImgs(sortBy) {
  const imgs = [];

  const resourceListEntries = performance.getEntriesByType("resource");
  resourceListEntries.forEach(
    ({
      name,
      transferSize,
      encodedBodySize,
      decodedBodySize,
      initiatorType,
    }) => {
      if (initiatorType == "img") {
        imgs.push({
          name,
          transferSize,
          decodedBodySize,
          encodedBodySize,
        });
      }
    }
  );

  const imgList = imgs.sort((a, b) => {
    return b[sortBy] - a[sortBy];
  });

  return imgList;
}
console.table(getImgs("encodedBodySize"));

De bovenstaande code definieert een functie genaamd getImgs die informatie verzamelt over afbeeldingen op de pagina en deze sorteert op basis van een opgegeven parameter (in dit geval “encodedBodySize”). De informatie omvat de naam van de afbeelding, de overdrachtsgrootte, de gedecodeerde grootte en de gecodeerde grootte.

Stap 3: voer de code uit

Nu kun je de code uitvoeren door op de “Enter” -toets te drukken. De functie getImgs wordt uitgevoerd en geeft een tabel weer in de console met informatie over de afbeeldingen op de pagina, gesorteerd op basis van de opgegeven parameter.

Dit is handig omdat je hiermee kunt zien welke afbeeldingen op je website de meeste bandbreedte gebruiken (encodedBodySize) en mogelijk optimalisatie vereisen.

Stap 4: optimaliseer je afbeeldingen

Na het verkrijgen van de informatie over je afbeeldingen, kun je overwegen om de afbeeldingen met de grootste encodedBodySize te optimaliseren. Dit kan onder andere inhouden:

• Het gebruik van geoptimaliseerde afbeeldingsindelingen zoals WebP.
• Het comprimeren van afbeeldingen zonder verlies van kwaliteit.
• Het verkleinen van de afbeeldingsdimensies indien mogelijk.

Door deze stappen te volgen, kun je de laadtijden van je webpagina’s verbeteren en een snellere en betere gebruikerservaring bieden aan je bezoekers.

Kortom, het gebruik van de browser Inspector Console in combinatie met aangepaste JavaScript-code kan je waardevolle inzichten verschaffen over de prestaties van je website, met name wat betreft de afbeeldingen. Deze informatie kan je helpen bij het optimaliseren van je site voor een betere gebruikerservaring.