PRPL to akronim, który opisuje wzór służący do przyspieszania wczytywania stron internetowych i ich szybszego uruchamiania:
- Wczytaj wstępnie ostatnio wykryte zasoby.
- Wyrenderuj początkową trasę jak najszybciej.
- Przedwstępne załadowanie pozostałych komponentów.
- Leniwe ładowanie innych tras i niekrytycznych zasobów.
Z tego przewodnika dowiesz się, jak te techniki się wzajemnie uzupełniają, ale też jak można je stosować niezależnie, aby osiągnąć dobre wyniki.
Audytowanie strony za pomocą Lighthouse
Uruchom Lighthouse, aby znaleźć możliwości poprawy zgodne z technikami PRPL:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Zaznacz pola wyboru Skuteczność i Progresywna aplikacja internetowa.
- Aby wygenerować raport, kliknij Wykonaj audyt.
Więcej informacji znajdziesz w artykule Znajdowanie możliwości poprawy wydajności za pomocą Lighthouse.
Wstępnie wczytuj najważniejsze zasoby
Jeśli jakiś zasób jest przeanalizowany i pobierany z opóźnieniem, Lighthouse wyświetla następujący nieudany audyt:
Wstępne wczytywanie to deklaratywne żądanie pobierania, które informuje przeglądarkę, że ma poprosić o zasób, którego skaner wstępnego wczytywania nie może znaleźć (na przykład obraz, do którego odwołuje się właściwość background-image). Przeładuj ostatnio odkryte zasoby, dodając do nagłówka dokumentu HTML tag <link> z wartością rel="preload":
<link rel="preload" as="image" href="hero-image.jpg">
Dodanie dyrektywy <link rel="preload"> spowoduje wysłanie żądania dotyczącego tego zasobu i zapisanie go w pamięci podręcznej. W razie potrzeby przeglądarka może go pobrać.
Więcej informacji o wstępnym wczytywaniu kluczowych zasobów znajdziesz w przewodniku Wstępne wczytywanie kluczowych zasobów.
Jak najszybciej wyrenderuj początkową trasę
Lighthouse wyświetli ostrzeżenie, jeśli istnieją zasoby opóźniające pierwsze wyrenderowanie, czyli w momencie renderowania pikseli na ekranie przez witrynę:
Aby poprawić czas do wyświetlenia pierwszego elementu, Lighthouse zaleca wstawianie w kod HTML krytycznych fragmentów kodu JavaScript, a pozostałe fragmenty kodu JavaScript opóźniać za pomocą atrybutu async. Zaleca się też wstawianie w kod HTML krytycznych fragmentów kodu CSS używanych powyżej zagięcia. Dzięki temu zwiększysz wydajność, eliminując żądania wysyłane do serwera w celu pobierania komponentów blokujących renderowanie.
Jednak ten kod jest trudniejszy w utrzymaniu z perspektywy programistycznej i nie może być oddzielnie przechowywany w pamięci podręcznej przeglądarki.
Innym sposobem na poprawę czasu First Paint jest renderowanie po stronie serwera początkowego kodu HTML strony. Dzięki temu treści są wyświetlane użytkownikowi od razu, podczas gdy skrypty są nadal pobierane, analizowane i wykonywane. Może to jednak znacznie zwiększyć rozmiar pliku HTML, co może negatywnie wpłynąć na czas do interakcji, czyli czas potrzebny aplikacji na stanie się interaktywną i zareagowanie na dane wejściowe użytkownika.
Nie ma jednego prawidłowego rozwiązania, które pozwoli ograniczyć pierwsze wyrenderowanie aplikacji. Rozważ użycie wbudowanych stylów i renderowania po stronie serwera tylko wtedy, gdy korzyści przeważają wady aplikacji. Więcej informacji o tych kwestiach znajdziesz w tych materiałach.
Zasoby wstępnie zapisane w pamięci podręcznej
Podczas ponownych wizyt serwis worker może pobierać zasoby bezpośrednio z pamięci podręcznej, a nie z serwera. Dzięki temu użytkownicy mogą korzystać z aplikacji w trybie offline, a dodatkowo wczytywanie stron przy kolejnych wizytach będzie szybsze.
Aby uprościć proces generowania elementu service worker, użyj biblioteki innej firmy, chyba że masz bardziej złożone wymagania dotyczące buforowania niż te, które może zapewnić biblioteka. Na przykład Workbox udostępnia zbiór narzędzi, które umożliwiają tworzenie i utrzymywanie serwisu workera do buforowania zasobów. Więcej informacji o skryptach service worker i o spójności działania offline znajdziesz w przewodniku po skryptach service worker na ścieżce szkoleniowej dotyczącej niezawodności.
Leniwe ładowanie
Jeśli wysyłasz zbyt dużo danych przez sieć, Lighthouse wyświetli nieudany audyt.
Dotyczy to wszystkich typów zasobów, ale duże ładunki JavaScript są szczególnie kosztowne ze względu na czas potrzebny przeglądarce na ich analizowanie i skompilowanie. W razie potrzeby Lighthouse też wyświetla ostrzeżenie.
Aby wysłać mniejszy ładunek JavaScriptu, który zawiera tylko kod potrzebny do początkowego załadowania aplikacji przez użytkownika, podziel cały pakiet i wczytaj fragmenty na żądanie.
Po podzieleniu pakietu wstępne wczytaj najważniejsze fragmenty (patrz przewodnik Wstępne wczytywanie kluczowych zasobów). Wstępne wczytywanie zapewnia, że przeglądarka pobiera i pobiera ważniejsze zasoby wcześniej.
Oprócz dzielenia i wczytywania na żądanie różnych fragmentów JavaScriptu Lighthouse umożliwia też przeprowadzenie audytu dotyczącego leniwego ładowania niekrytycznych obrazów.
Jeśli strona internetowa zawiera wiele obrazów, podczas wczytywania strony opóźnij wszystkie te, które znajdują się w części strony widocznej po przewinięciu lub poza widocznym obszarem urządzenia (przeczytaj artykuł o używaniu leniwego rozmiaru do leniwego ładowania obrazów).
Następne kroki
Teraz, gdy znasz już podstawowe założenia wzorca PRPL, możesz przejść do następnego przewodnika w tej sekcji, aby dowiedzieć się więcej. Pamiętaj, że nie wszystkie techniki muszą być stosowane jednocześnie. Wszelkie działania podjęte w tym zakresie przyniosą zauważalne zwiększenie skuteczności.
- Wstępnie wczytaj kluczowe zasoby.
- Wyrenderuj początkową trasę jak najszybciej.
- Przedwstępne załadowanie pozostałych komponentów.
- Łatwo wczytuj inne ścieżki i niekrytyczne zasoby.
Więcej informacji o wzorach PRPL znajdziesz w tym artykule.