PRPL to akronim opisujący wzorzec służący do wczytywania i załadowania stron internetowych stają się bardziej interaktywne i szybsze:
- Wczytaj wstępnie ostatnio wykryte zasoby.
- Wyrenderuj początkową trasę tak szybko, jak to możliwe.
- Umieść w pamięci podręcznej pozostałe zasoby.
- Leniwe ładowanie innych tras i niekrytycznych zasobów.
Z tego przewodnika dowiesz się, jak te techniki współgrają ze sobą, ale nadal mogą być przydatne używane niezależnie, aby uzyskać lepsze wyniki.
Audyt strony za pomocą narzędzia Lighthouse
Uruchom Lighthouse, aby określić możliwości poprawy zgodnie z PRPL techniki:
- 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 Run Audits (Uruchom audyty), aby wygenerować raport.
Więcej informacji znajdziesz w artykule Odkrywanie możliwości zwiększenia wydajności za pomocą Lighthouse.
Wstępnie wczytuj najważniejsze zasoby
Lighthouse pokazuje nieudany audyt, jeśli określony zasób jest analizowany i spóźnione pobranie:
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). Wczytuj wstępnie odkryte zasoby, dodając tag <link> z nagłówkiem rel="preload" w nagłówku dokumentu HTML:
<link rel="preload" as="image" href="hero-image.jpg">
Dodanie dyrektywy <link rel="preload"> spowoduje zainicjowanie żądania dotyczącego zasobu i zapisanie go w pamięci podręcznej. Dzięki temu przeglądarka może je w razie potrzeby pobrać.
Aby dowiedzieć się więcej o wstępnym wczytywaniu zasobów krytycznych, przeczytaj Przewodnik po wstępnym wczytywaniu najważniejszych zasobów.
Jak najszybciej wyrenderuj początkową trasę
Jeśli istnieją zasoby, które opóźniają pierwsze wyrenderowanie, Lighthouse wyświetli ostrzeżenie. moment renderowania pikseli na ekranie przez witrynę:
Aby ulepszyć First Paint, Lighthouse zaleca wbudowanie kluczowych skryptów JavaScript
odroczenie pozostałych przy użyciu funkcji
async
a także wbudowanie istotnych elementów CSS
używanych w części strony widocznej na ekranie. Zwiększa to wydajność
Eliminując przesyłanie danych w obie strony do serwera w celu pobrania zasobów blokujących renderowanie.
Jednak z punktu widzenia programowania trudniej jest jednak utrzymywać kod wbudowany,
nie może być osobno buforowana przez przeglądarkę.
Innym sposobem ulepszenia First Paint jest renderowanie po stronie serwera kod HTML strony. Spowoduje to wyświetlanie treści użytkownikowi natychmiast, gdy dostępne będą skrypty są w dalszym ciągu pobierane, analizowane i uruchamiane. Może to jednak zwiększyć pliku HTML, co może negatywnie wpłynąć na działanie Time to Interactive, lub czasu, jakiego potrzebuje, zanim aplikacja stanie się interaktywna i będzie mogła odpowiedzieć na dane wejściowe użytkownika.
Nie ma jednego poprawnego rozwiązania, które pozwoliłoby zmniejszyć pierwsze wyrenderowanie aplikacji. Rozważ tylko wbudowanie stylów i elementów po stronie serwera gdy korzyści przeważają wady aplikacji. Dostępne opcje Dowiedz się więcej o obu tych koncepcjach z tych materiałów.
Wstępnie buforuj zasoby
Dzięki pełnieniu funkcji serwera proxy składniki robocze mogą pobierać zasoby bezpośrednio z pamięci podręcznej a nie z serwera przy kolejnych wizytach. Dzięki temu użytkownicy mogą nie tylko aplikacji w trybie offline, ale powoduje też krótszy czas wczytywania stron do kolejnych wizyt.
Użyj biblioteki innej firmy, aby uprościć proces generowania skryptu service worker chyba że masz bardziej złożone wymagania dotyczące buforowania i udostępniania. Przykład: Workbox udostępnia zbiór narzędzi, które pozwalają utworzyć i utrzymywać skrypt service worker, zasobów pamięci podręcznej. Więcej informacji o mechanizmach Service Worker i niezawodności offline znajdziesz zapoznaj się z przewodnikiem po mechanizmach 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.
Obejmuje to wszystkie typy zasobów, ale duże ładunki JavaScript są szczególnie jest kosztowne ze względu na czas potrzebny przeglądarce na ich analizę i skompilowanie. W razie potrzeby Lighthouse też wyświetla ostrzeżenie.
Aby wysłać mniejszy ładunek JavaScript, który zawiera wyłącznie kod potrzebny podczas użytkownik początkowo wczytuje aplikację, a następnie dzieli cały pakiet i na żądanie dzieli go na fragmenty z leniwym ładowaniem.
Gdy uda Ci się już podzielić pakiet, wczytaj najpierw te, które są bardziej co jest ważne (przeczytaj przewodnik Wstępne wczytywanie kluczowych zasobów). Wstępne wczytywanie umożliwia szybsze pobieranie i pobieranie ważniejszych zasobów przez przeglądarkę.
Poza dzieleniem i wczytywaniem na żądanie różnych fragmentów JavaScriptu Lighthouse zapewnia też kontrolę leniwego wczytywania niekrytycznych obrazów.
jeśli ładujesz na stronie wiele obrazów, odłóż wszystkie, które znajdują się w części strony widocznej po przewinięciu; poza widocznym obszarem urządzenia podczas wczytywania strony (przeczytaj artykuł o używaniu leniwego rozmiaru do leniwego ładowania obrazów).
Następne kroki
Znasz już podstawowe pojęcia związane ze wzorcem PRPL. przejdź do następnego przewodnika w tej sekcji, by dowiedzieć się więcej. Trzeba pamiętać, że nie wszystkie techniki muszą być stosowane razem. Wszelkie działania podjęte przy użyciu dowolnego z poniższych elementów przyniosą zauważamy wzrost wydajności.
- Wstępne wczytywanie kluczowych zasobów.
- Wyrenderuj początkową trasę tak szybko, jak to możliwe.
- Umieść w pamięci podręcznej pozostałe zasoby.
- Leniwe ładowanie innych tras i niekrytycznych zasobów.
Dowiedz się więcej o wzorcach PRPL.