Zastanawiasz się, czy asynchroniczne wczytywanie skryptów JavaScript naprawdę może mieć tak istotny wpływ na szybkość Twojej strony internetowej? Uwierz mi, to jeden z najważniejszych czynników, które należy wziąć pod uwagę, jeśli chcesz stworzyć witrynę, która będzie się przeładowywać błyskawicznie! Nie potrzebujemy tu żadnych wysublimowanych technologii czy skomplikowanych sztuczek – wystarczy po prostu zrozumieć, na czym polega to całe zamieszanie z asynchronicznością.
Dlaczego szybkość ładowania się strony jest taka ważna?
Wyobraź sobie, że wchodzisz na stronę internetową i musisz czekać całe sekundy, zanim faktycznie pojawi się ona na Twoim ekranie. Pewnie od razu stałbyś się zniecierpliwiony i zacząłbyś się rozglądać za inną witryną, która załaduje się szybciej. Niestety, takie sytuacje zdarzają się naprawdę często. Ludzie dzisiejszych czasów mają bardzo małą tolerancję na wolne strony. Chcą uzyskać potrzebne informacje błyskawicznie, a każda sekunda oczekiwania tylko pogarsza ich wrażenie na temat danej witryny.
Dlatego kwestia szybkości ładowania się stron jest tak istotna z punktu widzenia użytkowników. Ale czy wiesz, że to także ważny czynnik z perspektywy wyszukiwarek internetowych? Tak, tak – Google i inne silniki wyszukiwawcze biorą pod uwagę prędkość stron podczas indeksowania i pozycjonowania witryn. Jeśli Twoja strona ładuje się wolno, może to negatywnie wpłynąć na jej widoczność w wynikach wyszukiwania. A kto chciałby mieć witrynę, która jest trudno dostępna dla potencjalnych klientów?
Jak asynchroniczne ładowanie skryptów może poprawić wydajność?
No dobrze, przechodzimy do sedna tematu. Kluczem do błyskawicznego ładowania się stron jest właśnie asynchroniczne wczytywanie skryptów JavaScript. Czym to w ogóle jest? W skrócie, chodzi o to, że zamiast blokować cały proces renderowania strony, dopóki wszystkie skrypty się nie wczytają, pozwalamy im ładować się niezależnie, w tle.
Wyobraź sobie to tak: masz stronę, na której używasz kilku skryptów JavaScript. Bez asynchronicznego ładowania, przeglądarka musi poczekać, aż wszystkie te skrypty się załadują, zanim będzie mogła wyświetlić całą zawartość strony. Oznacza to, że użytkownik będzie zmuszony patrzeć na pustą stronę przez dłuższą chwilę. Ale gdy włączysz asynchroniczne ładowanie, przeglądarka może rozpocząć renderowanie strony już po pobraniu pierwszego skryptu, a pozostałe ładują się równolegle w tle. To sprawia, że cała witryna wyświetla się dużo szybciej!
Oczywiście, nie wszystkie skrypty można ładować asynchronicznie. Są takie, które muszą być wczytane w ściśle określonej kolejności lub przed początkiem renderowania strony. Ale w większości przypadków możesz śmiało skorzystać z tej techniki i zdecydowanie poprawić wydajność Twojej witryny.
Jak wdrożyć asynchroniczne ładowanie skryptów?
Jeśli jesteś początkującym webmasterem, możesz myśleć, że wdrożenie asynchronicznego ładowania skryptów to skomplikowany proces. Nic bardziej mylnego! Tak naprawdę wystarczy dodać tylko jeden atrybut do znacznika <script> w Twoim kodzie HTML.
Oto przykład standardowego wczytywania skryptu:
“`html
“`
A oto ta sama linijka kodu, ale z asynchronicznym ładowaniem:
“`html
“`
Widzisz tę różnicę? Wystarczy dodać słowo async i gotowe! Od tej pory przeglądarka będzie ładować ten skrypt niezależnie od renderowania reszty strony.
Oczywiście, można też użyć atrybutu defer zamiast async. Różnica między nimi polega na tym, że async powoduje, że skrypt ładuje się i wykonuje natychmiast po pobraniu, bez względu na to, co dzieje się z resztą strony. Natomiast defer sprawia, że skrypt zostanie wykonany dopiero po zakończeniu parsowania całego dokumentu HTML, ale wciąż przed DOMContentLoaded.
Który atrybut wybrać? To zależy od Twoich konkretnych potrzeb. Jeśli masz skrypt, który nie zależy od innych elementów na stronie i nie musi być wykonany w ściśle określonej kolejności, async będzie idealnym rozwiązaniem. Jeśli natomiast Twój skrypt jest zależny od innych zasobów lub musi być uruchomiony w konkretnym momencie, lepiej użyć defer.
Zaawansowane techniki asynchronicznego ładowania
Oprócz podstawowego użycia atrybutów async lub defer, istnieją też bardziej zaawansowane techniki asynchronicznego ładowania skryptów JavaScript. Jedną z nich jest dynamiczne generowanie znaczników <script> za pomocą JavaScript.
Oto przykład:
“`javascript
// Utwórz nowy element