Wydajność i Core Web Vitals

4 min read

TTSWP dodaje audio do Twoich stron bez szkody dla wydajności. Odtwarzacz ładuje się leniwie, zasoby są zoptymalizowane, a nic nie uruchamia się przy ładowaniu strony, jeśli nie jest to konieczne. Oto jak chronimy Core Web Vitals.

Wpływ na Core Web Vitals

LCP (Largest Contentful Paint)

Wpływ: brak

Odtwarzacz audio ładuje się leniwie. Nie renderuje ani nie wczytuje JavaScriptu, dopóki odwiedzający nie przewinie strony w jego pobliże. LCP, który mierzy czas renderowania głównej treści powyżej łamu, pozostaje bez zmian.

Test: uruchom audyty Lighthouse przed i po włączeniu wtyczki. Wyniki LCP mieszczą się w normalnych granicach odchyleń.

CLS (Cumulative Layout Shift)

Wpływ: zero

Miejsce zastępcze odtwarzacza ma dokładnie takie same wymiary jak w pełni załadowany odtwarzacz. Gdy leniwe ładowanie zastępuje placeholder pełnym odtwarzaczem, nie dochodzi do przesunięcia układu.

INP (Interaction to Next Paint)

Wpływ: pomijalny

JavaScript odtwarzacza działa w jednym małym pliku (około 15 KB po kompresji gzip). Procedury obsługi kliknięć są debouncowane i uruchamiane przez requestIdleCallback tam, gdzie jest obsługiwany. Typowy wkład INP: poniżej 5 ms na interakcję.

FID (First Input Delay, zastąpiony przez INP w 2024)

Wpływ: zero

Nic nie blokuje głównego wątku podczas początkowego ładowania strony, ponieważ odtwarzacz ładuje się leniwie.

Rozmiary zasobów

Koszt ładowania na stronę, gdy odtwarzacz jest aktywny:

Zasób Rozmiar (gzip) Kiedy ładowany
Publiczny CSS odtwarzacza 3 KB Gdy odtwarzacz widoczny
Publiczny JS odtwarzacza 15 KB Gdy odtwarzacz widoczny
Pomocnik fali (PRO) 4 KB Gdy fala włączona
Stopka przyklejona JS (PRO) 2 KB Gdy stopka włączona
Ikona menu paska admina 0,5 KB Tylko dla administratorów

Łączny wpływ pierwszego ładowania na odwiedzających: 0 bajtów, dopóki nie przewiną do odtwarzacza.

Zgodność z wtyczkami cache

TTSWP działa z każdą główną wtyczką cache (WP Rocket, LiteSpeed, W3 Total Cache, WP Super Cache, Cache Enabler). Wtyczka automatycznie rejestruje swoje zasoby, aby zapewnić poprawne zachowanie buforowania.

Pliki audio (MP3) mają własne nagłówki cache i ładują się na żądanie z magazynu. Nie zapychają pamięci podręcznej stron.

Zobacz Wtyczki cache.

Dostarczanie przez CDN

W planach płatnych pliki audio są serwowane z Amazon CloudFront. Oznacza to:

  • Audio odtwarza się w ciągu milisekund od kliknięcia Play, nawet dla odwiedzających daleko od Twojego serwera
  • Przepustowość serwera WordPress pozostaje wolna dla HTML

W planie bezpłatnym audio pochodzi z Twojego serwera WordPress. Dla większości blogów jest to wystarczające. Witryny o dużym ruchu mogą zauważyć zwiększone zużycie przepustowości na stronach z dużą ilością audio.

Wpływ na bazę danych

TTSWP dodaje niewielką liczbę tabel i wierszy do bazy danych:

  • Tabela cache audio (jeden wiersz na wygenerowany plik)
  • Tabele statystyk (jeden wiersz na zdarzenie odtwarzania - małe dane całkowite)
  • Wiersze ustawień (kilkadziesiąt opcji)

Rozmiar bazy danych rośnie liniowo wraz z liczbą wpisów z audio. Dla witryny z 500 wpisami całkowity ślad w bazie danych wynosi zazwyczaj poniżej 200 KB.

Pamięć i CPU

  • Narzut pamięci PHP na ładowanie strony admina: ~2 MB
  • Narzut pamięci PHP na publiczną stronę z odtwarzaczem: pomijalny (tylko CSS + JS, brak przetwarzania PHP na gorących ścieżkach)
  • Procesy w tle: brak (żadne zadania cron nie uruchamiają się przy każdym żądaniu)

Testowanie Twojej witryny

Użyj tych narzędzi, aby sprawdzić, czy TTSWP nie obniża wydajności:

Uruchom raz z włączonym TTSWP i raz z tymczasowo wyłączonym. Porównaj wyniki.

Jeśli zauważysz pogorszenie wydajności

Daj nam znać. Traktujemy pogorszenie wydajności jako błąd:

  1. Zanotuj, która strona jest wolna
  2. Uruchom PageSpeed Insights i udostępnij URL
  3. Skontaktuj się z Wsparciem PRO lub napisz na forum WordPress.org

Pomożemy Ci zdiagnozować i naprawić problem.

Powiązane strony