PRPL to skrót odnoszący się do wzorca służącego do tego, aby strony internetowe wczytywały się i stawały się interaktywne szybciej:
- Wstępne wczytywanie zasobów, które zostały wykryte późno.
- Jak najszybciej wyrenderuj trasę początkową.
- Wstępnie wczytuj w pamięci podręcznej pozostałe zasoby.
- Leniwe ładowanie innych tras i niekrytycznych zasobów.
Z tego przewodnika dowiesz się, jak obie te metody ze sobą współdziałają, ale nadal można ich używać niezależnie, aby osiągać lepsze wyniki.
Sprawdzanie strony za pomocą narzędzia Lighthouse
Uruchom Lighthouse, aby znaleźć możliwości poprawy zgodne z metodami PRPL:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Zaznacz pola wyboru Wydajność i Progresywna aplikacja internetowa.
- Kliknij Przeprowadź audyty, aby wygenerować raport.
Więcej informacji znajdziesz w artykule Odkrywanie możliwości zwiększania skuteczności dzięki Lighthouse.
Wstępnie wczytuj najważniejsze zasoby
Jeśli jakiś zasób zostanie przeanalizowany i pobrany z opóźnieniem, narzędzie Lighthouse wyświetli ten komunikat o niepowodzeniu:
Wstępne wczytywanie to deklaratywne żądanie pobierania, które informuje przeglądarkę, że ma pobrać zasób, który jest niemożliwy do wykrycia dla skanera wstępnego przeglądarki, np. obraz, do którego odwołuje się właściwość background-image. Wstępnie ładuj zasoby wykryte późno, dodając tag <link> z atrybutem rel="preload" w nagłówku dokumentu HTML:
<link rel="preload" as="image" href="hero-image.jpg">
Dodanie dyrektywy <link rel="preload"> zainicjuje żądanie do danego zasobu i zapisze go w pamięci podręcznej. W razie potrzeby przeglądarka może go pobrać.
Więcej informacji o wstępnym ładowaniu zasobów krytycznych znajdziesz w przewodniku Wstępnie wczytuj najważniejsze zasoby.
Jak najszybciej renderuj trasę początkową
Lighthouse wyświetla ostrzeżenie, jeśli istnieją zasoby, które opóźniają pierwsze wyrenderowanie, czyli moment, gdy witryna wyrenderuje piksele na ekranie:
Aby ulepszyć Pierwsze wyrenderowanie, Lighthouse zaleca wbudowanie krytycznego kodu JavaScript i opóźnienie pozostałych za pomocą async, a także wbudowanie newralgicznego CSS w części strony widocznej na ekranie. Poprawia to wydajność, eliminując przesyłanie danych w obie strony do serwera w celu pobrania zasobów blokujących renderowanie.
Jednak kod wbudowany jest trudniejszy w obsłudze z perspektywy programistycznej i nie można go buforować oddzielnie przez przeglądarkę.
Innym sposobem ulepszenia pierwszego wyrenderowania jest wyrenderowanie po stronie serwera początkowego kodu HTML strony. Dzięki temu treści będą wyświetlane od razu użytkownikowi w trakcie pobierania, analizowania i wykonywania skryptów. Może to jednak znacznie zwiększyć ładunek pliku HTML, co może zaszkodzić czasowi do pełnej interaktywności lub skrócić czas potrzebny na stworzenie interaktywnej aplikacji i reagowanie na dane wejściowe użytkownika.
Nie ma jednego prawidłowego rozwiązania, które zmniejszyłoby liczbę pierwszego wyrenderowania w Twojej aplikacji. Rozważ użycie stylów i renderowania po stronie serwera tylko wtedy, gdy korzyści przeważają w przypadku Twojej aplikacji. Więcej informacji o obu tych zagadnieniach znajdziesz w materiałach poniżej.
Wstępnie wczytuj zasoby w pamięci podręcznej
Działając jako serwer proxy, skrypty service worker mogą pobierać zasoby bezpośrednio z pamięci podręcznej, a nie przy kolejnych wizytach z serwera. Dzięki temu nie tylko użytkownicy mogą korzystać z aplikacji w trybie offline, ale także skracają czas wczytywania strony przy wielokrotnych wizytach.
Użyj biblioteki zewnętrznej, aby uprościć proces generowania skryptu service worker, 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 zestaw narzędzi umożliwiających tworzenie i utrzymywanie skryptu service worker do buforowania zasobów. Więcej informacji o mechanizmach Service Worker i niezawodności offline znajdziesz w przewodniku po mechanizmach Service Worker w ścieżce szkoleniowej dotyczącej niezawodności.
Leniwe ładowanie
Jeśli wyślesz za dużo danych przez sieć, Lighthouse wyświetli błąd.
Obejmuje to wszystkie typy zasobów, ale duże ładunki JavaScript są szczególnie kosztowne ze względu na czas potrzebny przeglądarce na ich analizę i kompilację. W razie potrzeby narzędzie Lighthouse wyświetla też ostrzeżenie.
Aby wysłać mniejszy ładunek JavaScript, który zawiera tylko ten kod, który jest potrzebny, gdy użytkownik po raz pierwszy wczytuje aplikację, podziel na żądanie cały pakiet i leniwe ładowanie.
Po podziale pakietu wczytaj wstępnie najważniejsze fragmenty (patrz przewodnik Wstępnie wczytuj najważniejsze zasoby). Wstępne wczytywanie sprawia, że przeglądarka szybciej pobiera i pobiera ważne zasoby.
Poza dzieleniem i wczytywaniem różnych fragmentów JavaScript na żądanie, Lighthouse umożliwia też audyt leniwego ładowania obrazów o mniejszym znaczeniu.
Jeśli wczytujesz na stronie wiele obrazów, na czas ładowania odłóż wszystkie znajdujące się w części strony widocznej po przewinięciu lub poza widocznym obszarem urządzenia (zobacz leniwe ładowanie obrazów).
Dalsze kroki
Skoro znasz już podstawowe pojęcia związane z wzorcem PRPL, przejdź do następnego przewodnika w tej sekcji, aby dowiedzieć się więcej. Pamiętaj, że nie wszystkie te techniki trzeba stosować jednocześnie. Wszelkie działania wymienione poniżej przyniosą zauważalną poprawę skuteczności.
- Wstępnie wczytuj najważniejsze zasoby.
- Jak najszybciej wyrenderuj trasę początkową.
- Wstępnie wczytuj w pamięci podręcznej pozostałe zasoby.
- Leniwe ładowanie innych tras i niekrytycznych zasobów.
Więcej informacji o wzorcach PRPL znajdziesz tutaj.