Zwiększanie szybkości strony internetowej za pomocą wskazówek dotyczących zasobów: Preload, Prefetch i Preconnect

W dzisiejszym dynamicznym świecie cyfrowym szybkość strony internetowej jest najważniejsza. Użytkownicy oczekują, że strony będą ładować się szybko i odpowiadać natychmiast. Wolne czasy ładowania mogą prowadzić do złego doświadczenia użytkownika, wyższych wskaźników odrzuceń i ostatecznie utraty klientów. Wskazówki dotyczące zasobów to potężne narzędzia, które mogą pomóc programistom zoptymalizować czas ładowania strony, informując przeglądarkę, które zasoby są ważne i jak je priorytetyzować. Ten artykuł omawia trzy kluczowe wskazówki dotyczące zasobów: preload, prefetch i preconnect oraz zawiera praktyczne przykłady implementacji.

Zrozumienie wskazówek dotyczących zasobów

Wskazówki dotyczące zasobów to dyrektywy, które instruują przeglądarkę o zasobach, których strona internetowa będzie potrzebować w przyszłości. Pozwalają one programistom proaktywnie informować przeglądarkę o krytycznych zasobach, umożliwiając jej pobranie lub nawiązanie połączenia z nimi wcześniej niż w normalnych okolicznościach. Może to znacząco skrócić czas ładowania i poprawić postrzeganą wydajność.

Trzy podstawowe wskazówki dotyczące zasobów to:

Preload: Pobiera krytyczne zasoby potrzebne do początkowego ładowania strony.
Prefetch: Pobiera zasoby, które prawdopodobnie będą potrzebne do przyszłych nawigacji lub interakcji.
Preconnect: Nawiązuje wczesne połączenia z ważnymi serwerami stron trzecich.

Preload: Priorytetyzacja krytycznych zasobów

Co to jest Preload?

Preload to deklaratywne pobieranie, które pozwala poinformować przeglądarkę o pobraniu zasobu potrzebnego do bieżącej nawigacji tak wcześnie, jak to możliwe. Jest to szczególnie przydatne w przypadku zasobów, które są późno odkrywane przez przeglądarkę, takich jak obrazy, czcionki, skrypty lub arkusze stylów ładowane przez CSS lub JavaScript. Wstępne ładowanie tych zasobów zapobiega ich blokowaniu renderowania i poprawia postrzeganą szybkość ładowania strony internetowej.

Kiedy używać Preload

Używaj preload dla:

Czcionek: Wczesne ładowanie niestandardowych czcionek może zapobiec flashowaniu nieprzeformatowanego tekstu (FOUT) lub flashowaniu niewidocznego tekstu (FOIT).
Obrazów: Priorytetyzacja obrazów znajdujących się powyżej linii przewijania zapewnia szybkie ładowanie, poprawiając początkowe wrażenia użytkownika.
Skryptów i arkuszy stylów: Wczesne ładowanie krytycznych plików CSS lub JavaScript zapobiega blokowaniu renderowania.
Modułów i Web Workers: Wstępne ładowanie modułów lub Web Workers może poprawić responsywność aplikacji.

Jak zaimplementować Preload

Możesz zaimplementować preload za pomocą tagu <link> w sekcji <head> dokumentu HTML:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Wyjaśnienie:

rel="preload": Określa, że przeglądarka ma wstępnie załadować zasób.
href="/path/to/resource": URL zasobu do wstępnego załadowania.
as="type": Określa typ wstępnie ładowanego zasobu (np. font, style, script, image). Atrybut as jest obowiązkowy i kluczowy dla przeglądarki, aby prawidłowo priorytetyzować i obsługiwać zasób. Użycie poprawnej wartości as zapewnia, że przeglądarka stosuje odpowiednią politykę bezpieczeństwa treści (CSP) i wysyła poprawny nagłówek Accept.
type="mime/type": (Opcjonalne, ale zalecane) Określa typ MIME zasobu. Pomaga to przeglądarce wybrać właściwy format zasobu, zwłaszcza w przypadku czcionek.
crossorigin="anonymous": (Wymagane dla czcionek ładowanych z innego źródła) Określa tryb CORS dla żądania. Jeśli ładujesz czcionki z CDN, prawdopodobnie będziesz potrzebować tego atrybutu.

Przykład: Wstępne ładowanie czcionki

Wyobraź sobie, że masz niestandardową czcionkę o nazwie „OpenSans” używaną na Twojej stronie internetowej. Bez preload, przeglądarka odkrywa tę czcionkę dopiero po przetworzeniu pliku CSS. Może to spowodować opóźnienie w renderowaniu tekstu z właściwą czcionką. Wstępne ładowanie czcionki może wyeliminować to opóźnienie.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Przykład: Wstępne ładowanie krytycznego pliku CSS

Jeśli Twoja strona internetowa ma krytyczny plik CSS, który jest niezbędny do renderowania początkowego widoku, jego wstępne ładowanie może znacząco poprawić postrzeganą wydajność.

<link rel="preload" href="/styles/critical.css" as="style">

Najlepsze praktyki dotyczące Preload

Priorytetyzuj krytyczne zasoby: Wstępnie ładuj tylko zasoby, które są niezbędne do początkowego ładowania strony. Nadmierne użycie preload może negatywnie wpłynąć na wydajność.
Używaj poprawnego atrybutu as: Zawsze określaj poprawny atrybut as, aby zapewnić, że przeglądarka obsługuje zasób poprawnie.
Dołącz atrybut type: Dołącz atrybut type, aby pomóc przeglądarce wybrać właściwy format zasobu.
Używaj crossorigin dla czcionek z innych źródeł: Podczas ładowania czcionek z innego źródła upewnij się, że uwzględniłeś atrybut crossorigin.
Testuj wydajność: Zawsze testuj wpływ preload na wydajność, aby upewnić się, że faktycznie poprawia czasy ładowania. Użyj narzędzi takich jak Google PageSpeed Insights lub WebPageTest, aby zmierzyć wpływ.

Prefetch: Przewidywanie przyszłych potrzeb

Co to jest Prefetch?

Prefetch to wskazówka dotycząca zasobów, która mówi przeglądarce o pobraniu zasobów, które prawdopodobnie będą potrzebne do przyszłych nawigacji lub interakcji. W przeciwieństwie do preload, który skupia się na zasobach potrzebnych do bieżącej strony, prefetch przewiduje następny ruch użytkownika. Jest to szczególnie przydatne do poprawy szybkości ładowania kolejnych stron lub komponentów.

Kiedy używać Prefetch

Używaj prefetch dla:

Zasobów następnej strony: Jeśli wiesz, że użytkownik prawdopodobnie przejdzie do określonej strony, wstępnie pobierz jej zasoby.
Zasobów dla interakcji użytkownika: Jeśli interakcja użytkownika wyzwala ładowanie określonych zasobów (np. okna modalnego, formularza), wstępnie pobierz te zasoby.
Obrazów i zasobów na innych stronach: Wstępnie pobierz obrazy lub zasoby używane na innych stronach, które użytkownik prawdopodobnie odwiedzi.

Jak zaimplementować Prefetch

Możesz zaimplementować prefetch za pomocą tagu <link> w sekcji <head> dokumentu HTML:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Wyjaśnienie:

rel="prefetch": Określa, że przeglądarka ma wstępnie pobrać zasób.
href="/path/to/resource": URL zasobu do wstępnego pobrania.

Przykład: Wstępne pobieranie zasobów następnej strony

Jeśli Twoja strona internetowa ma jasny przepływ użytkownika, taki jak wieloetapowy formularz, możesz wstępnie pobrać zasoby dla następnego kroku, gdy użytkownik jest na bieżącym kroku.

<link rel="prefetch" href="/form/step2.html">

Przykład: Wstępne pobieranie zasobów dla okna modalnego

Jeśli Twoja strona internetowa używa okna modalnego, które ładuje dodatkowe zasoby po otwarciu, możesz wstępnie pobrać te zasoby, aby zapewnić płynne wrażenia użytkownika.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Najlepsze praktyki dotyczące Prefetch

Używaj oszczędnie: Prefetch powinno być używane oszczędnie, ponieważ może zużywać przepustowość i zasoby, nawet jeśli użytkownik nie potrzebuje wstępnie pobranych zasobów.
Priorytetyzuj prawdopodobne nawigacje: Wstępnie pobieraj zasoby dla stron lub interakcji, które są najbardziej prawdopodobne.
Rozważ warunki sieciowe: Prefetch najlepiej nadaje się dla użytkowników z niestabilnymi i szybkimi połączeniami internetowymi. Unikaj wstępnego pobierania dużych zasobów dla użytkowników z wolnymi lub ograniczonymi połączeniami. Możesz użyć Network Information API do wykrywania typu połączenia użytkownika i odpowiedniego dostosowania prefetchingu.
Monitoruj wydajność: Monitoruj wpływ prefetch na wydajność Twojej strony internetowej, aby upewnić się, że zapewnia ona czyste korzyści.
Wykorzystaj dynamiczne prefetching: Wdrażaj prefetching dynamicznie w oparciu o zachowanie użytkownika i dane analityczne. Na przykład, wstępnie pobieraj zasoby dla stron, które są często odwiedzane przez użytkowników znajdujących się aktualnie na bieżącej stronie.

Preconnect: Nawiązywanie wczesnych połączeń

Co to jest Preconnect?

Preconnect to wskazówka dotycząca zasobów, która pozwala na nawiązanie wczesnych połączeń z ważnymi serwerami stron trzecich. Nawiązanie połączenia obejmuje kilka kroków, w tym wyszukiwanie DNS, nawiązanie połączenia TCP i negocjacjację TLS. Kroki te mogą dodać znaczące opóźnienie do ładowania zasobów z tych serwerów. Preconnect pozwala na zainicjowanie tych kroków w tle, dzięki czemu, gdy przeglądarka potrzebuje pobrać zasób z serwera, połączenie jest już nawiązane.

Kiedy używać Preconnect

Używaj preconnect dla:

Serwery stron trzecich: Serwery hostujące czcionki, CDN, API lub wszelkie inne zasoby, od których zależy Twoja strona.
Często używane serwery: Serwery, do których często uzyskuje dostęp Twoja strona.

Jak zaimplementować Preconnect

Możesz zaimplementować preconnect za pomocą tagu <link> w sekcji <head> dokumentu HTML:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Wyjaśnienie:

rel="preconnect": Określa, że przeglądarka powinna nawiązać pre-połączenie z serwerem.
href="https://example.com": URL serwera do nawiązania pre-połączenia.
crossorigin: (Opcjonalne, ale wymagane dla zasobów ładowanych za pomocą CORS) Określa, że połączenie wymaga CORS.

Przykład: Preconnect do Google Fonts

Jeśli Twoja strona internetowa używa Google Fonts, nawiązanie pre-połączenia z https://fonts.gstatic.com może znacząco zmniejszyć opóźnienia w ładowaniu czcionek.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Atrybut crossorigin jest tutaj kluczowy, ponieważ Google Fonts używa CORS do serwowania czcionek.

Przykład: Preconnect do CDN

Jeśli Twoja strona internetowa korzysta z CDN do serwowania statycznych zasobów, nawiązanie pre-połączenia z nazwą hosta CDN może zmniejszyć opóźnienie w ładowaniu tych zasobów.

<link rel="preconnect" href="https://cdn.example.com">

Najlepsze praktyki dotyczące Preconnect

Używaj rozważnie: Nawiązywanie pre-połączeń z zbyt wieloma serwerami może w rzeczywistości pogorszyć wydajność, ponieważ przeglądarka ma ograniczone zasoby do nawiązywania połączeń.
Priorytetyzuj ważne serwery: Nawiąż pre-połączenie z serwerami, które są najbardziej krytyczne dla wydajności Twojej strony.
Rozważ DNS-Prefetch: Dla serwerów, z którymi nie potrzebujesz pełnego pre-połączenia, ale nadal chcesz wcześnie rozwiązać DNS, rozważ użycie <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch wykonuje tylko wyszukiwanie DNS, co jest mniej zasobożerne niż pełny preconnect.
Testuj wydajność: Zawsze testuj wpływ preconnect na wydajność, aby upewnić się, że zapewnia on czyste korzyści.
Łącz z innymi wskazówkami dotyczącymi zasobów: Używaj preconnect w połączeniu z preload i prefetch, aby osiągnąć optymalną wydajność. Na przykład, nawiąż pre-połączenie z serwerem hostującym Twoje czcionki, a następnie wstępnie załaduj pliki czcionek.

Łączenie wskazówek dotyczących zasobów dla optymalnej wydajności

Prawdziwa moc wskazówek dotyczących zasobów polega na strategicznym ich łączeniu. Oto praktyczny przykład:

Wyobraź sobie stronę internetową, która używa niestandardowej czcionki hostowanej na CDN i ładuje krytyczny plik JavaScript.

Preconnect do CDN: Nawiąż wczesne połączenie z CDN hostującym plik czcionki i plik JavaScript.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Preload czcionki: Priorytetyzuj ładowanie czcionki, aby zapobiec FOUT.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Preload pliku JavaScript: Priorytetyzuj ładowanie pliku JavaScript, aby zapewnić jego dostępność, gdy jest potrzebny.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Narzędzia do analizy wskazówek dotyczących zasobów

Kilka narzędzi może pomóc w analizie skuteczności wskazówek dotyczących zasobów:

Google PageSpeed Insights: Zawiera zalecenia dotyczące optymalizacji wydajności strony internetowej, w tym użycia wskazówek dotyczących zasobów.
WebPageTest: Pozwala testować wydajność strony internetowej z różnych lokalizacji i warunków sieciowych.
Chrome DevTools: Panel sieciowy w Chrome DevTools pokazuje czas ładowania zasobów i może pomóc w identyfikacji możliwości optymalizacji.
Lighthouse: Zautomatyzowane narzędzie do poprawy jakości stron internetowych. Posiada audyty dotyczące wydajności, dostępności, progresywnych aplikacji internetowych, SEO i nie tylko.

Częste błędy i jak ich unikać

Nadmierne użycie wskazówek dotyczących zasobów: Używanie zbyt wielu wskazówek dotyczących zasobów może negatywnie wpłynąć na wydajność. Skup się na najważniejszych zasobach.
Nieprawidłowy atrybut as: Użycie nieprawidłowego atrybutu as dla preload może spowodować, że zasób nie zostanie poprawnie załadowany.
Ignorowanie CORS: Brak uwzględnienia atrybutu crossorigin podczas ładowania zasobów z innego źródła może spowodować błędy ładowania.
Nietestowanie wydajności: Zawsze testuj wpływ wskazówek dotyczących zasobów na wydajność, aby upewnić się, że zapewniają one czyste korzyści.
Nieprawidłowe ścieżki: Dokładnie sprawdź i upewnij się, że wszystkie ścieżki plików i adresy URL określone dla wskazówek dotyczących zasobów są poprawne, w przeciwnym razie doprowadzi to do błędu.

Przyszłość wskazówek dotyczących zasobów

Wskazówki dotyczące zasobów stale ewoluują, a nowe funkcje i ulepszenia są dodawane do specyfikacji przeglądarki. Bycie na bieżąco z najnowszymi osiągnięciami w zakresie wskazówek dotyczących zasobów może pomóc w dalszej optymalizacji wydajności Twojej strony. Na przykład, modulepreload to nowsza wskazówka dotycząca zasobów, zaprojektowana specjalnie do wstępnego ładowania modułów JavaScript. Ponadto, atrybut priority dla wskazówek dotyczących zasobów pozwala określić priorytet zasobu w porównaniu z innymi zasobami. Wsparcie przeglądarek dla tych funkcji wciąż się rozwija, dlatego przed ich wdrożeniem sprawdź zgodność.

Wniosek

Wskazówki dotyczące zasobów to potężne narzędzia do optymalizacji czasu ładowania strony internetowej i poprawy doświadczenia użytkownika. Strategicznie używając preload, prefetch i preconnect, możesz proaktywnie informować przeglądarkę o krytycznych zasobach, zmniejszać opóźnienia i poprawiać postrzeganą wydajność swojej strony. Pamiętaj o priorytetyzacji krytycznych zasobów, rozsądnym stosowaniu wskazówek dotyczących zasobów i zawsze testuj wpływ wprowadzonych zmian na wydajność. Przestrzegając najlepszych praktyk opisanych w tym artykule, możesz znacząco poprawić wydajność swojej strony internetowej i zapewnić lepsze wrażenia swoim użytkownikom na całym świecie.