Temat
- #Optymalizacja przeglądarki
- #Ładowanie strony
- #Ładowanie zasobów
Przeglądarki zazwyczaj renderują w następującej kolejności.
- parsowanie HTML (od góry do dołu, head -> body):
1. Parsowanie HTML i tworzenie DOM
2. Ładowanie i zastosowanie plików CSS (blokowanie renderowania)
3. Ładowanie i wykonanie skryptów (blokowanie renderowania)
4. Renderowanie zawartości sekcji <body> (obrazy, tekst itd.)
Kontrolowanie priorytetu zasobów przeglądarki pozwala na optymalizację szybkości ładowania strony.
Poniżej chciałbym zapisać główne atrybuty, które mogą poprawić kolejność renderowania.
- JavaScript: async, defer, module
- CSS: preload, media
- obrazy: loading="lazy", srcset, sizes
- inne: prefetch, preconnect, dns-prefetch
JavaScript
async : Pobierany równolegle z parsowaniem HTML i uruchamiany natychmiast po pobraniu. Jeśli jakiś zasób strony jest powiązany z tym JS, lepiej usunąć atrybut async.
defer : Pobierany równolegle z parsowaniem HTML i uruchamiany po zakończeniu parsowania HTML. = kolejność jest gwarantowana. Jeśli skrypt powinien zostać uruchomiony po pełnym wyrenderowaniu HTML, lepiej dodać atrybut defer.
Przeglądarka domyślnie ładuje najpierw HTML, ale jeśli w tagu head znajduje się źródło skryptu, renderowanie jest blokowane. Dodanie powyższych dwóch atrybutów zapobiega blokowaniu renderowania HTML.
CSS
styleshee : Wartość domyślna. Jest to element blokujący renderowanie i jest używany tylko wtedy, gdy CSS musi być załadowany.
preload : Pobiera zasób w tle, bez blokowania renderowania. Po wywołaniu zdarzenia onload zmienia się na arkusz stylów i styl jest stosowany.
media: Renderowanie odbywa się tylko wtedy, gdy spełnione są warunki rozmiaru ekranu.
Obrazy
loading="lazy" : Obraz jest ładowany, gdy pojawia się na ekranie. (gdy pozycja przewijania jest w pobliżu elementu zawierającego obraz)
srcset : Wybiera optymalny obraz dla rozmiaru ekranu. (optymalizacja rozmiaru obrazu)
sizes : Podaje przeglądarce wskazówki, jak wybrać odpowiedni obraz w zależności od rozmiaru okna przeglądarki.
W przypadku ostatniego tagu img, gdy dostępne są obrazy o szerokości 480px i 1024px, atrybut size powoduje wyświetlenie obrazu o szerokości 480px, gdy max-width wynosi 600px, a w przeciwnym razie obrazu o szerokości 1024px.
* W handlu elektronicznym na jednej stronie może być kilkadziesiąt obrazów, więc zmniejszenie rozmiaru obrazu ma duży wpływ.
Na przykład, na stronie z wynikami wyszukiwania znajduje się co najmniej 20 obrazów, a wyszukiwanie jest uruchamiane 100 000 razy dziennie...
Inne
rel="prefetch": Pobiera zasoby przed przejściem do innej strony, aby poprawić szybkość ładowania następnej strony.
rel="preconnect": Wstępnie konfiguruje połączenie sieciowe dla określonego linku. (duże filmy, czcionki itd.)
rel="dns-prefetch": Przyspiesza ładowanie zasobów poprzez wcześniejsze wyszukiwanie DNS zewnętrznych zasobów. (głównie zewnętrzne CDN)
* preconnect vs dns-prefetch
preconnect to połączenie TCP (DNS - uścisk dłoni TCP - uścisk dłoni TLS), więc jest to operacja obciążająca zasoby przeglądarki. Używaj go, gdy musisz szybko załadować zewnętrzne zasoby. (bardzo ważny zasób i szybkie renderowanie tego zasobu jest ważne)
dns-prefetch wykonuje tylko wyszukiwanie DNS, więc jest lżejsze. Nadaje się do mniej ważnych zasobów, które będą ładowane później.
Komentarze0