Afbeeldingen optimaliseren voor Google PageSpeed

Leg een bruikbare uitgangssituatie vast

Open PageSpeed Insights, voer de openbare URL van de te testen pagina in en start een test voor mobiel of desktop.

1. Test de gepubliceerde URL inclusief exact pad.
2. Noteer mobiel of desktop.
3. Leg de genoemde afbeelding en huidige URL vast.
4. Bewaar afmetingen en bestandsgrootte bij het rapport.
5. Bepaal het doel: grootte, ontdekking, stabiliteit of iets anders.

Kies een representatieve pagina vóór brede wijzigingen: een product met gebruikelijke galerij of een artikel met typerende omslag. De homepage beschrijft niet automatisch elke template.

Kies een gerichte oplossing

Is het geleverde beeld te groot voor zijn plek, maak passende varianten. Is codering het probleem, vergelijk WebP via JPG naar WebP of PNG naar WebP.

Verschuift de lay-out bij het verschijnen, reserveer ruimte. Begint het hoofdbeeld laat, bekijk hoe het ontdekt wordt. De Core Web Vitals-gids legt de verschillen uit.

Begrijp de twee soorten meetgegevens

PageSpeed Insights combineert een Lighthouse-labtest met echte gebruikersgegevens waar beschikbaar. Die bestrijken de afgelopen 28 dagen en kunnen alle pagina’s met hetzelfde protocol, dezelfde hostnaam en dezelfde poort betreffen, in plaats van alleen deze pagina. Kleine sites kunnen onvoldoende gegevens hebben; dat is geen mislukte test. Zie Googles PageSpeed-documentatie.

Een nieuwe export kan de volgende labtest beïnvloeden, terwijl historische gegevens niet meteen uitsluitend de nieuwe pagina tonen. Noteer welk rapportdeel je vergelijkt, zodat directe labwinst niet wordt verward met alle gebruikerservaringen.

Controleer of de praktijkgegevens deze URL of de hele origin beschrijven. Een origin omvat pagina’s met hetzelfde protocol, dezelfde hostnaam en poort; de gegevens bewijzen niet dat één aangepaste productpagina beter presteert. Houd paginagerichte laboratoriumtests gescheiden van dat bredere beeld. Maak ook onderscheid tussen een geschatte besparing in bytes en een gemeten LCP-verbetering: een kleiner bestand hoeft niet eerder zichtbaar te zijn.

Controleer of de wijziging live staat

Publiceer het bestand en werk waar nodig de verwijzing bij. Controleer het echte browserverzoek. Een lokale export verandert niets voor bezoekers. Blijft de oude versie, onderzoek cache en gegenereerde varianten.

Test dezelfde URL en apparaatcategorie. Herhaal onverwachte schommelingen en vergelijk de concrete bevinding, niet alleen punten. Verander hosting, scripts en alle afbeeldingen niet tegelijk als je wilt weten wat hielp.

Wanneer andere knelpunten belangrijker zijn

Onderzoek na de beeldproblemen de overige vertragingen. Trage antwoorden, zware scripts of laat renderen kunnen overheersen. Extra compressie maakt dan beelden slechter zonder de oorzaak te verhelpen.

Noteer pagina, origineel, vervanging en resultaat. Zo blijft het proces herhaalbaar en herken je terugval na wijzigingen in thema of lay-out.

Voorbeeld: van rapportbevinding naar ingreep

Stel dat het mobiele rapport een te grote productfoto aanwijst. Bewaar rapport, pagina-URL, beeld-URL en weergavematen. Publiceer een kleinere kopie met dezelfde uitsnede op een testpagina en bevestig het verzoek vóór de nieuwe meting. Dit is een voorbeeldwerkwijze, geen gemeten scorewinst.

Noteer datum, apparaatcategorie, afmetingen, bestandsgrootte, LCP, layoutverschuivingen en kwaliteit. Herhaal vergelijkbare tests en bekijk hun spreiding; vergelijk niet de beste nieuwe met de slechtste oude test. Een kleiner bestand zonder LCP-winst kan betekenen dat een andere fase overheerst.

Beslis of de wijziging blijft

Behoud een ingreep die het probleem oplost zonder details, tekst of lay-out te verslechteren. Start het verzoek nog laat, onderzoek ontdekking en laadinstellingen. Is het bestand binnen maar onzichtbaar, controleer rendering en verschijningseffecten. Alleen compressie lost dat niet op.