Chrome har flera inbyggda funktioner för att analysera webbsidor. Idag tittar vi på hur bilder laddas med hjälp av bildfiltret.
Öppna Google Chrome Console (F12)
Gå till fliken Nätverk (Network)
Aktivera filter om det inte redan är aktiverat
Välj “Img”-taggen för att filtrera för bildförfrågningar
- Uppdatera sidan för att se en lista på alla bilder som begärs.
När Webien Image Optimizer är avstängd
Lägg märke till tre saker:
- Den totala filstorleken
- Bildfilstyperna
- Antalet filer som begärs
När Webien Image Optimizer är aktiverad
Nu kan du jämföra resultatet när Webien Image Optimizer är aktiverad:
Se hur filstorleken har minskat drastiskt från 2,8 Mb till under 0,7 Mb och laddningstiden har gått ner från 19 sekunder till 1 sekund.
Lazy load
När vi scrollar ner efter att Webien Image Optimizer har aktiverats ser vi även att bilderna laddas först när de är nära att synas i ditt synfält.
