Defer vs Async JavaScript — jak to wpływa na Core Web Vitals
Dowiedz się, kiedy stosować async JavaScript, a kiedy defer, aby uzyskać najlepsze wyniki Core Web Vitals
Defer vs Async JavaScript — jak to wpływa na Core Web Vitals
W tym artykule pokażę różnicę między defer a async JavaScript i dlaczego wpływa to na Core Web Vitals
Za każdym razem, gdy przeprowadzam audyt Core Web Vitals klienta, często stwierdzam, że na stronie nie ma wyraźnego rozróżnienia między blokującym parser (sync), asynchronicznym lub odroczonym JavaScript. To szkoda, ponieważ różne skrypty mają różne optymalne momenty wykonania.
Table of Contents!
W skrócie:
„Zwykły” JavaScript w sekcji head strony jest wykonywany przed rozpoczęciem parsowania HTML, skrypty async nie blokują rozpoczęcia parsowania, ale są wykonywane natychmiast po pobraniu. Skrypty z atrybutem defer są wykonywane po zakończeniu parsowania strony.
Ogólnie rzecz biorąc, atrybut async jest dobrym wyborem dla skryptów, które nie muszą wchodzić w interakcję z DOM, np. skryptów ładujących obrazy lub filmy. Atrybut defer jest dobrym wyborem dla skryptów, które muszą wchodzić w interakcję z DOM, np. skryptów inicjalizujących widżety lub dodających nasłuchiwanie zdarzeń. Pomiń oba atrybuty, jeśli skrypt wprowadza znaczące zmiany w widocznym obszarze wyświetlania.
1. Synchroniczny JavaScript (Sync):
Domyślnie skrypty JavaScript w sekcji head strony są synchroniczne. Gdy kod JavaScript jest wykonywany synchronicznie, natychmiast blokuje główny wątek przeglądarki do momentu pełnego wykonania skryptu. Oznacza to, że przeglądarka musi czekać na zakończenie wykonywania kodu JavaScript przed przejściem do innych zadań, takich jak renderowanie DOM. W rezultacie synchroniczny JavaScript może znacząco wpływać na szybkość i responsywność strony, szczególnie w przypadku większych i złożonych skryptów. Gdy strona zawiera synchroniczny JavaScript, przeglądarka nie może ładować innych zasobów ani renderować strony do momentu wykonania JavaScript, co prowadzi do potencjalnych opóźnień w ładowaniu strony.
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Example</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
2. Asynchroniczny JavaScript (Async):
Asynchroniczny JavaScript pozwala przeglądarce kontynuować wykonywanie innych zadań, podczas gdy skrypt jest pobierany w tle. Używając atrybutu async w tagu <script>, programiści wskazują, że skrypt nie jest zależny od DOM i może być wykonywany niezależnie. Przeglądarka nie czeka na zakończenie ładowania skryptu async przed kontynuowaniem renderowania strony. W rezultacie skrypty async mogą poprawić szybkość strony, szczególnie na wolniejszych łączach, ponieważ nie blokują ścieżki krytycznego renderowania.
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Należy pamiętać, że skrypty async mogą być uruchamiane w nieprzewidywalnej kolejności, ponieważ wykonują się natychmiast po pobraniu, niezależnie od ich kolejności w dokumencie HTML. Jeśli skrypty są od siebie zależne, użycie async może powodować błędy zależności.
3. Odroczony JavaScript (Defer):
Odroczony JavaScript, oznaczony atrybutem defer w tagu <script>, pozwala na pobieranie skryptów w tle, podczas gdy przeglądarka kontynuuje parsowanie dokumentu HTML. Podobnie jak async, odroczone skrypty nie blokują ścieżki krytycznego renderowania, co przyspiesza ładowanie strony. Kluczowa różnica polega jednak na tym, że odroczone skrypty zachowują kolejność wykonania, uruchamiając się w kolejności, w jakiej pojawiają się w dokumencie HTML. Odroczone skrypty są wykonywane po pełnym sparsowaniu DOM, tuż przed wywołaniem zdarzenia DOMContentLoaded.
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Example</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Użycie defer jest korzystne dla skryptów, które opierają się na DOM i muszą być wykonane w określonej kolejności, szczególnie przy manipulacji DOM. Zapewnia to, że niezbędne elementy DOM są dostępne w momencie uruchomienia skryptu. Może to być korzystne dla skryptów wykonujących manipulację DOM lub mających zależności od innych skryptów.
| Atrybut | Kiedy skrypt jest ładowany | Kiedy skrypt jest wykonywany |
|---|---|---|
none | W tle | Przed zbudowaniem DOM |
async | W tle | Natychmiast po załadowaniu |
defer | W tle | Po sparsowaniu reszty strony, w kolejności występowania w HTML |
Jak async i defer poprawiają szybkość strony?
Synchroniczny JavaScript (Sync) może znacząco spowolnić ładowanie strony i zmniejszyć responsywność witryny, szczególnie jeśli skrypty są duże lub ich wykonanie zajmuje dużo czasu.
Asynchroniczny JavaScript (Async) może poprawić szybkość strony, pozwalając niezależnym skryptom ładować się równolegle z innymi zasobami. Należy jednak zadbać o prawidłowe zarządzanie zależnościami, aby uniknąć nieoczekiwanego zachowania.
Odroczony JavaScript również może poprawić szybkość strony, nie blokując ścieżki krytycznego renderowania. Zapewnia gotowość DOM przed wykonaniem skryptów, które na nim polegają, co prowadzi do bardziej przewidywalnej i kontrolowanej kolejności wykonania.
Najlepsze praktyki:
- Używaj asynchronicznego (async) dla niezależnych skryptów, które nie polegają na DOM i mogą być wykonywane w dowolnej kolejności.
- Używaj odroczonego (defer) dla skryptów zależnych od DOM, które muszą być wykonywane w określonej kolejności, szczególnie przy manipulacji DOM.
- Unikaj synchronicznego JavaScript, gdy tylko to możliwe, ponieważ negatywnie wpływa na szybkość strony i user experience.
Stosując odpowiednią technikę ładowania plików JavaScript, możesz zoptymalizować szybkość strony, poprawić user experience i zapewnić płynniejsze interakcje na swoich stronach. Zrozumienie różnic między sync, async i defer oraz ich wpływu na ładowanie strony jest kluczowe dla budowania wydajnych aplikacji webowych.
Należy pamiętać, że skuteczność użycia atrybutów sync, async lub defer może się różnić w zależności od konkretnego kontekstu i zawartości witryny. Regularne testowanie i analiza wydajności są kluczowe dla dostrojenia strategii ładowania strony i zapewnienia optymalnych wyników w różnych scenariuszach.
Idąc o krok dalej — ładowanie skryptów na żądanie
Async i defer mogą przyspieszyć stronę, nie blokując parsera, ale warto pamiętać, że „odraczanie skryptów” nie rozwiąże wszystkich problemów. Na przykład Largest Contentful Paint jest podatny na konkurencję sieciową i procesorową powodowaną przez odroczone i asynchroniczne skrypty. Interaction to Next Paint również jest dotknięte przez skrypty wykonywane wcześnie podczas ładowania strony. Dlatego, gdy tylko to możliwe, powinieneś ładować skrypty na żądanie, aby mieć większą kontrolę nad ich wpływem na wydajność strony. Ciekawi Cię to? Przeczytaj, jak ładujemy skrypty na żądanie
Make decisions with Data.
You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.
- 100% Capture
- Data Driven
- Easy Install
