Dit is een door AI vertaalde tekst.

Websiteprestaties meten - PerformanceObserver

Geschreven taal: Koreaans
•
Standaardland: Alle landen
•
Informatietechnologie

뚠뚠멍

4 dagen geleden

Samenvatting van de tekst door durumis AI

Door gebruik te maken van tools voor website-prestatieanalyse (PageSpeed Insights, Lighthouse) kun je de prestaties van je website verbeteren en daarmee je positie in zoekmachines verbeteren. Web Core Vitals zijn daarbij belangrijke indicatoren.
Om de metrics zoals CLS, LCP, FCP en FID te verbeteren, kun je technieken zoals UI-skeletten, beeldoptimalisatie, het verwijderen van render-blokkerende elementen, webfont-optimalisatie en asynchrone JavaScript-verwerking toepassen.
Naast de specifieke methoden om de verschillende metrics te verbeteren, presenteren we diverse technieken voor het verbeteren van website-prestaties (zoals gzip-compressie en web workers). In de toekomst zullen we dieper ingaan op deze onderwerpen.

Via de website die Google aanbiedt

kan de webprestaties eenvoudig worden gemeten.

https://pagespeed.web.dev/
Voer de URL in om te meten of installeer de Chrome-extensie Lighthouse om te meten.

PageSpeed Insights

pagespeed.web.dev

Wat zijn de voordelen van het verbeteren van de indicatoren?

Je kunt beter zichtbaar worden in zoekmachines. SEO maakt veel gebruik van server-side rendering, maar

als de bovengenoemde prestatie-indicatoren laag zijn, zal het effect drastisch afnemen.

Hoe verbeter je ze?

Op de website web.dev wordt gedetailleerd uitgelegd hoe je elke indicator kunt verbeteren.

Met name 3 indicatoren hebben een grote invloed op de score. (Web Core Vitals)

Ik wil de maatregelen die ik heb genomen om de indicatoren te verbeteren, vastleggen.

Hoe meet je lokaal?


export default () => {
if (process.client && 'PerformanceObserver' in window) {
let cumulativeLayoutShiftScore = 0;
let largestContentfulPaint = 0;
let firstInputDelay = 0;
let firstContentfulPaint = 0;

// CLS
const clsObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (!entry.hadRecentInput) {
      cumulativeLayoutShiftScore += entry.value;
    }
  });
});

// LCP
const lcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  largestContentfulPaint = lastEntry.startTime;
});

// FID
const fidObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const firstEntry = entries[0];
  firstInputDelay = firstEntry.processingStart - firstEntry.startTime;
});

// FCP
const fcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const firstEntry = entries[0];
  firstContentfulPaint = firstEntry.startTime;
});

clsObserver.observe({ type: 'layout-shift', buffered: true });
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
fidObserver.observe({ type: 'first-input', buffered: true });
fcpObserver.observe({ type: 'paint', buffered: true });

window.addEventListener('onload', () => {
  console.log('Final CLS Score:', cumulativeLayoutShiftScore);
  console.log('LCP:', largestContentfulPaint);
  console.log('FID:', firstInputDelay);
  console.log('FCP:', firstContentfulPaint);
});
}
};

Voeg de bovenstaande code in. In het geval van Nuxt plaats je deze in de plugins en controleer je de console log.

Cumulative Layout Shift (CLS)

Dit is een meting van de mate waarin de lay-out verandert tijdens het renderen.

Stel bijvoorbeeld dat er een pagina is die een afbeelding-URL ontvangt via een API-antwoord en een 400x400 afbeelding rendert,

dan zal de positie van een bepaalde lay-out 400px verschuiven als gevolg van het renderen van de afbeelding.

Dit is een onverwachte verschuiving voor de gebruiker, wat niet alleen slecht is voor de UX, maar ook indirect een negatieve invloed heeft op de browser tijdens het renderen van het scherm.

het scherm.

Er zijn twee eenvoudige manieren om dit te verbeteren.

1. UI-skelet toepassen

- De meeste websites tekenen een passend skelet voor de afbeeldingsgrootte of de grootte van de componenten. Houd hier rekening mee tijdens de ontwikkeling van het scherm. In Vue kun je v-if en v-else gebruiken om voor elk element een skelet te tekenen.

2. Reserveren van hoogte

- Als er te veel stijl in het skelet zit, wordt het onderhoud complex en kan het averechts werken. Alleen al door de min-height van het te renderen element vast te leggen, kun je al resultaat boeken.

- Bij responsieve websites, waar de afbeeldingsgrootte per apparaat verschilt, is het moeilijk om de hoogte vast te leggen. In dat geval kun je het kleinste apparaat of vh of vw gebruiken.

3. Geef breedte en hoogte op voor afbeeldingelementen

- Je kunt breedte en hoogte als volgt in het afbeeldingelement invoegen.

Zelfs als de werkelijke afbeeldingsgrootte niet 400x400 is, wordt de verwachte afbeeldingsgrootte aan de browser doorgegeven.

4. Gebruik font-display: swap om te voorkomen dat lay-outwijzigingen door weblettertypen ontstaan

- Door een vervangend lettertype op te geven, wordt lay-outverschuiving voorkomen.

Largest Contentful Paint (LCP)

Dit is de tijd die het kost om het grootste element op het scherm te renderen. Meestal is dit een afbeelding, dus intuïtief gezien moet je de laadtijd verkorten.

1. Verminder de afbeeldingsgrootte.

- Controleer of de afbeeldingsgrootte niet te groot is in verhouding tot de rendergrootte.

- Optimaliseer het renderen van afbeeldingen met extensies zoals webp. Webp is ongeveer 30% kleiner dan JPEG als het verliesgevende compressie gebruikt, en ongeveer 20% kleiner dan png als het lossless compressie gebruikt.

- Je kunt ook lazy loading overwegen, waarbij afbeeldingen pas worden geladen wanneer ze in beeld komen.

2. Gebruik caching of een CDN.

3. Verwijder render-blokkerende elementen.

- De meeste prestatie-indicatoren worden hierdoor beïnvloed, dus verwijder ze altijd. De browser haalt eerst de scripts in de head-tag op voordat deze gaat renderen, dus controleer of de scripts in de head-tag (meestal externe scripts) eerst moeten worden gerenderd. Door gebruik te maken van de async en defer-tags kun je dit eenvoudig beheren.

* Ik zal later een aparte blogpost schrijven over de kenmerken van scripts in de head.

4. Minimaliseer de grootte van de bundel.

- Onafhankelijk van de snelheid waarmee afbeeldingen worden gerenderd, moet je dit verbeteren als de overdracht van de server traag is.

Als je een proxyserver zoals nginx gebruikt, kun je gzip-compressie gebruiken.

* Ik zal later een aparte blogpost schrijven over de configuratie van nginx.

First Contentful Paint (FCP)

Dit geeft het moment aan waarop de eerste content op de pagina wordt gerenderd.

1. Verwijder render-blokkerende elementen, zoals hierboven beschreven.

2. Minimaliseer de grootte van de HTML.

- Als je te veel div-tags gebruikt, kan dit leiden tot een sterk geneste boomstructuur en een grotere bestandsgrootte.

3. Externe weblettertypen kunnen een probleem zijn. Gebruik font-display: swap; om het standaardlettertype eerst te renderen.

First Input Delay (FID)

Dit geeft de tijd aan die de browser nodig heeft om de eerste invoer van de gebruiker op de pagina (klik, scrollen, etc.) te verwerken. Soms reageert een knop niet, maar dat betekent niet dat deze niet werkt. Het kan zijn dat de browser wacht op een API-antwoord.

1. Gebruik asynchrone code om te voorkomen dat de JavaScript-mainthread vastloopt door zware taken.

2. Je kunt een webworker gebruiken om een andere taak uit te voeren, los van de mainthread.

* Ik zal later nog een andere blogpost schrijven over webworkers.

Vanwege het maximale aantal karakters zal ik hier stoppen.

Onderwerp

#PerformanceObserver
#Websiteprestaties meten
#Laadsnelheid
#Lay-out optimalisatie
#Web Core Vitals

Samenvatting van de tekst door durumis AI

Door gebruik te maken van tools voor website-prestatieanalyse (PageSpeed Insights, Lighthouse) kun je de prestaties van je website verbeteren en daarmee je positie in zoekmachines verbeteren. Web Core Vitals zijn daarbij belangrijke indicatoren.
Om de metrics zoals CLS, LCP, FCP en FID te verbeteren, kun je technieken zoals UI-skeletten, beeldoptimalisatie, het verwijderen van render-blokkerende elementen, webfont-optimalisatie en asynchrone JavaScript-verwerking toepassen.
Naast de specifieke methoden om de verschillende metrics te verbeteren, presenteren we diverse technieken voor het verbeteren van website-prestaties (zoals gzip-compressie en web workers). In de toekomst zullen we dieper ingaan op deze onderwerpen.