Tekst przetłumaczony przez AI.

Pomiar wydajności witryny internetowej - PerformanceObserver

Język pisania: Koreański
•
Kraj odniesienia: Wszystkie kraje
•
TO

뚠뚠멍

4 dni temu

Podsumowanie posta wygenerowane przez AI durumis

Wykorzystanie narzędzi do pomiaru wydajności witryny (PageSpeed Insights, Lighthouse) pozwala na poprawę wydajności i lepszą widoczność w wyszukiwarkach. Wskaźniki Web Core Vitals odgrywają kluczową rolę.
Aby poprawić wskaźniki takie jak CLS, LCP, FCP i FID, można zastosować techniki takie jak szkielety interfejsu użytkownika (UI Skeleton), optymalizację obrazów, usuwanie elementów blokujących renderowanie, optymalizację czcionek internetowych oraz asynchroniczne przetwarzanie JavaScript.
Oprócz omówienia metod poprawy poszczególnych wskaźników, przedstawiamy również inne techniki zwiększania wydajności witryny (np. kompresja gzip, Web Workers) i planujemy w przyszłości pogłębić omawiane zagadnienia.

Za pomocą witryny udostępnionej przez Google

można łatwo mierzyć wydajność witryny.

https://pagespeed.web.dev/
Możesz wprowadzić adres URL, aby go zmierzyć, lub zainstalować rozszerzenie Chrome Lighthouse, aby przeprowadzić pomiar.

PageSpeed Insights

pagespeed.web.dev

Co daje poprawa wskaźników?

Możliwość lepszego wyświetlania się w wyszukiwarkach. SEO często wykorzystuje renderowanie po stronie serwera, ale

jeśli powyższe wskaźniki wydajności są niskie, jego skuteczność znacznie spada.

Jak je poprawić?

Na stronie web.dev szczegółowo opisano, jak poprawić każdy wskaźnik.

Szczególnie 3 wskaźniki mają duży wpływ na wynik (Web Core Vitals).

Chcę zapisać działania podjęte w celu poprawy wskaźników.

Jak mierzyć lokalnie?


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);
});
}
};

Wstaw powyższy kod. W przypadku Nuxt umieść go w pliku plugins i sprawdź dane w konsoli.

Cumulative Layout Shift (CLS)

Mierzy stopień zmian układu podczas renderowania.

Załóżmy, że mamy stronę, na której w odpowiedzi API otrzymujemy adres URL obrazu i renderujemy obraz o rozmiarze 400x400.

Położenie niektórych elementów układu zostanie przesunięte o 400 pikseli w wyniku renderowania obrazu.

Jest to nieprzewidywalny ruch dla użytkownika, który negatywnie wpływa na UX, a także pośrednio na przeglądarkę, która

renderuje ekran.

Istnieją dwa proste sposoby na poprawę.

1. Zastosowanie szkieletu UI

- Większość witryn rysuje odpowiednie szkielety odpowiadające rozmiarowi obrazu lub komponentowi. Podczas tworzenia interfejsu należy wziąć to pod uwagę. W przypadku Vue za pomocą v-if i v-else można narysować szkielet dla każdego elementu.

2. Rezerwacja wysokości

- Zbyt wiele stylów w szkielecie może utrudnić konserwację i przynieść odwrotny skutek. Samo ustawienie min-height dla elementu, który ma być renderowany, może przynieść rezultaty.

- W przypadku stron responsywnych, w których rozmiar obrazu różni się w zależności od urządzenia, trudno jest ustawić stałą wysokość. W takim przypadku można skorzystać z najmniejszego urządzenia jako odniesienia lub użyć vh lub vw.

3. Określenie szerokości i wysokości dla elementu obrazu

- Szerokość i wysokość dla elementu obrazu można ustawić w następujący sposób.

Nawet jeśli rzeczywisty rozmiar obrazu nie wynosi 400x400, informuje to przeglądarkę o przewidywanym rozmiarze obrazu.

4. Użycie font-display: swap w celu zapobiegania zmianom układu spowodowanym przez czcionki internetowe

- Podanie czcionki zastępczej zapobiega przesunięciom układu.

Largest Contentful Paint(LCP)

Czas renderowania największego elementu na ekranie. Zazwyczaj jest to obraz, więc intuicyjnie należy przyspieszyć czas ładowania.

1. Zmniejszenie rozmiaru obrazu.

- Sprawdź, czy rozmiar obrazu nie jest zbyt duży w porównaniu do rozmiaru renderowania.

- Zoptymalizuj renderowanie obrazu za pomocą rozszerzeń takich jak webp. W przypadku użycia kompresji stratnej webp ma o 30% mniejszy rozmiar pliku niż format JPEG, a w przypadku kompresji bezstratnej o 20% mniejszy niż png.

- Można również rozważyć lazy loading, który ładuje obrazy w zależności od położenia paska przewijania.

2. Wykorzystanie pamięci podręcznej lub CDN.

3. Usunięcie elementów blokujących renderowanie.

- Wpływa to na większość wskaźników pomiarowych, dlatego należy je koniecznie usunąć. Podczas renderowania ekranu przeglądarka najpierw pobiera skrypty z tagu head, a następnie renderuje, więc należy sprawdzić, czy skrypty w tagu head (zwykle zewnętrzne skrypty) muszą być renderowane jako pierwsze. Za pomocą tagów async i defer można łatwo nimi zarządzać.

* Atrybuty skryptów w nagłówku zostaną omówione w innym artykule.

4. Minimalizacja rozmiaru pakietów.

- Oprócz wolnego renderowania obrazu, jeśli przesyłanie z serwera jest wolne, należy go poprawić.

Jeśli używasz serwera proxy, takiego jak nginx, możesz użyć kompresji gzip.

* Konfiguracja nginx zostanie omówiona w innym artykule.

First Contentful Paint(FCP)

Oznacza moment, w którym na stronie pojawia się pierwsza treść.

1. Podobnie jak poprzednio, usuń elementy blokujące renderowanie.

2. Zminimalizuj rozmiar pliku HTML.

- Beztroskie otaczanie tagów div może prowadzić do utworzenia bardzo zagnieżdżonego drzewa i zwiększenia rozmiaru pliku.

3. Zewnętrzne czcionki internetowe mogą być problemem. Aktywnie używaj font-display: swap; aby renderować czcionkę domyślną jako pierwszą.

First Input Delay(FID)

Oznacza czas, jaki przeglądarka potrzebuje na obsłużenie pierwszej interakcji użytkownika ze stroną (kliknięcie, przewijanie itp.). Czasami zdarza się, że po naciśnięciu przycisku nic się nie dzieje, ale w rzeczywistości nie jest on niesprawny, a jedynie czeka na odpowiedź API.

1. Dobrze wykorzystuj asynchroniczność, aby główny wątek JavaScript nie był blokowany przez ciężkie operacje.

2. Możesz użyć web workera do wykonywania innych operacji niezależnie od głównego wątku.

* Web workery zostaną omówione w innym artykule.

Ze względu na ograniczenie liczby znaków kończę na tym.

Temat

#Pomiar wydajności witryny
#Optymalizacja układu
#PerformanceObserver
#Prędkość ładowania
#Web Core Vitals

Podsumowanie posta wygenerowane przez AI durumis

Wykorzystanie narzędzi do pomiaru wydajności witryny (PageSpeed Insights, Lighthouse) pozwala na poprawę wydajności i lepszą widoczność w wyszukiwarkach. Wskaźniki Web Core Vitals odgrywają kluczową rolę.
Aby poprawić wskaźniki takie jak CLS, LCP, FCP i FID, można zastosować techniki takie jak szkielety interfejsu użytkownika (UI Skeleton), optymalizację obrazów, usuwanie elementów blokujących renderowanie, optymalizację czcionek internetowych oraz asynchroniczne przetwarzanie JavaScript.
Oprócz omówienia metod poprawy poszczególnych wskaźników, przedstawiamy również inne techniki zwiększania wydajności witryny (np. kompresja gzip, Web Workers) i planujemy w przyszłości pogłębić omawiane zagadnienia.