Verbeter de websiteprestaties pagina per pagina

Kies reizen om te meten

Selecteer een startpagina, een servicepagina, een afbeelding-zware lijst, een artikel en het contactformulier. Test ten minste één mobiele en één desktopbreedte met representatieve apparaten en verbindingen. Noteer de datum, recente wijzigingen en elementen die zichtbaar zijn in de eerste viewport.

Afzonderlijke laboratoriummetingen, die helpen een probleem te reproduceren, uit beschikbare veldgegevens, die de echte bezoekerservaring beschrijft. Als het verkeer te laag is voor een stabiele maatregel, presenteer dan niet één score als een trend. Web.dev legt meethulpmiddelen uit en hun gebruik.

• Geselecteerde pagina's en apparaten.
• reproduceerbare basislijn.
• taak die de bezoeker moet voltooien.

Vind de reden voor langzaam laden

Identificeer het belangrijkste element dat zichtbaar is tijdens het laden en de bron die het levert. Een extra grote heldfoto, late verzoek of scriptafhankelijkheid kan LCP vertragen. Gebruik een afbeelding die geschikt is voor het weergegeven formaat, met HTML-dimensies, responsieve varianten en verstandige prioriteit; Stel de hoofdafbeelding niet zonder reden uit.

Onderzoek vervolgens lettertypen, CSS, JavaScript en serverreacties. Verwijder echt ongebruikte bronnen en vermijd het downloaden van elke off-screen kaart onmiddellijk. De Afbeeldingsgids Behandelt visuele voorbereiding en alternatieven.

Voorkom verschuivingen en houd interacties responsief

Reserveer ruimte voor afbeeldingen, insluitingen en berichten die verschijnen na het laden. Controleer CLS tijdens het lezen, niet alleen in de eerste screenshot. Late lettertypen en banners kunnen een knop verplaatsen, net zoals een bezoeker deze probeert te gebruiken.

Probeer voor INP belangrijke acties: open een menu, filter een lijst, kies een optie en corrigeer een formulier. Als het antwoord traag is, inspecteer dan lange JavaScript-taken en de weergave die door elke actie wordt geactiveerd. Een eenvoudigere interface kan meer helpen dan een andere bibliotheek.

Stel een budget in en controleer na vrijgave

Stel evenredige limieten in voor hoofdafbeeldingen, kaarten en nieuwe scripts. Vergelijk bytes die daadwerkelijk zijn gedownload op mobiel in plaats van de totale grootte van de afbeeldingenbibliotheek. Noteer wat is verwijderd, gecomprimeerd of uitgesteld en bevestig dat de visuele kwaliteit en toegankelijkheid geluid blijven.

Herhaal reizen na elke wijziging en na de implementatie. Volg LCP, INP en CLS wanneer real-user-gegevens beschikbaar zijn, zonder te beloven dat een score de zoekrangschikking garandeert. Google-begeleiding over pagina-ervaring Plaatst deze statistieken binnen het bredere nut van de site.

• bytes en vertragingen voor en na.
• Geen visuele of functionele regressie.
• Controles op prioriteitspagina's en apparaten.

Een traag bestand vinden met onderscheid tussen netwerk, compressie en cache.

Fictief geval: een beeld verschijnt traag ondanks lichte HTML. Vergelijk fasen en groottes onder gelijke omstandigheden, daarna met cache. Details van andere origins kunnen beperkt zijn. Grootte nul bewijst op zichzelf geen kosteloze of onmiddellijke overdracht.

• Bestand, cachestatus en zichtbaarheidsgrenzen zijn vastgelegd zonder ontbrekende gegevens als winst te presenteren.

• MDN Resource Timing

  Documentatie van beschikbare netwerktijden en groottes voor geladen bestanden.

Laadomstandigheden vergelijken

Voorgestelde situatie: na meerdere bezoeken lijkt een pagina snel, maar bij het eerste bezoek langzaam. De cache verandert de waarneming.

Noteer apparaat, netwerk, cache en pagina. Vergelijk hoofdinhoud en verzoeken in meerdere overeenkomstige omstandigheden voordat u een verbetering concludeert.

• Omstandigheden noteren
• Hoofdinhoud bepalen
• Meerdere waarnemingen vergelijken

• De nuttige beelduitsnede controleren

  Hoe websiteafbeeldingen te kiezen en voor te bereiden