Efektywne wczytywanie kodu JavaScript innej firmy

Aby skrócić czas wczytywania i poprawić wygodę użytkowników, unikaj typowych problemów z używaniem skryptów innych firm.

Jeśli skrypt zewnętrzny spowalnia wczytywanie strony, możesz poprawić wydajność na 2 sposoby:

  • Usuń je, jeśli nie wnoszą wyraźnej wartości do witryny.

  • Zoptymalizuj proces wczytywania.

Z tego posta dowiesz się, jak zoptymalizować proces wczytywania skryptów zewnętrznych za pomocą tych technik:

  1. Używanie atrybutu async lub defer w tagach <script>

  2. Nawiązywanie wczesnego połączenia z wymaganymi punktami początkowymi

  3. Leniwe ładowanie

  4. Optymalizacja sposobu obsługi skryptów zewnętrznych

Użyj konta async lub defer

Skrypty synchroniczne opóźniają konstrukcję i renderowanie DOM, dlatego należy zawsze ładować skrypty zewnętrzne asynchronicznie, chyba że muszą one zostać uruchomione przed wyrenderowaniem strony.

Atrybuty async i defer informują przeglądarkę, że może zająć się analizą kodu HTML podczas wczytywania skryptu w tle, a potem wykonać skrypt po jego wczytaniu. Dzięki temu pobieranie skryptu nie blokuje konstrukcji DOM ani renderowania stron. W efekcie użytkownik może wyświetlić stronę, zanim wszystkie skrypty zostaną wczytane.

<script async src="script.js">

<script defer src="script.js">

Różnica między wartościami async i defer polega na tym, kiedy rozpoczynają one wykonywanie skryptów.

async

Skrypty z atrybutem async są uruchamiane przy pierwszej możliwości po zakończeniu pobierania i przed zdarzeniem load okna. Oznacza to, że możliwe (i prawdopodobnie) skrypty async nie będą wykonywane w takiej kolejności, w jakiej występują w kodzie HTML. Oznacza to również, że mogą one przerwać tworzenie DOM, jeśli pobieranie zostanie ukończone w czasie, gdy parser jest nadal w pracy.

Diagram skryptu blokowania parsera z atrybutem asynchronicznym

defer

Skrypty z atrybutem defer są wykonywane po zakończeniu analizy HTML, ale przed zdarzeniem DOMContentLoaded. defer gwarantuje, że skrypty będą wykonywane w kolejności, w jakiej występują w kodzie HTML, i nie zablokują parsera.

Schemat procesu parsera ze skryptem z atrybutem opóźnienia

  • Jeśli chcesz, aby skrypt został uruchomiony wcześniej w procesie wczytywania, użyj async.

  • Użyj defer w przypadku mniej ważnych zasobów. Na przykład odtwarzacz umieszczony w części strony widocznej po przewinięciu.

Użycie tych atrybutów może znacznie przyspieszyć wczytywanie strony. Na przykład w przypadku telegrafu opóźniono ostatnio realizowanie wszystkich swoich skryptów (w tym reklam i statystyk) oraz skróciło się czas wczytywania reklam średnio o 4 sekundy.

Nawiąż wczesne połączenia z wymaganymi punktami początkowymi

Możesz zaoszczędzić 100–500 ms, nawiązując wcześniejsze połączenia z ważnymi źródłami w innych usługach.

Oto 2 rodzaje <link>:

  • preconnect

  • dns-prefetch

preconnect

<link rel="preconnect"> informuje przeglądarkę, że strona zamierza nawiązać połączenie z innym źródłem i że chcesz rozpocząć ten proces tak szybko, jak to możliwe. Po wysłaniu żądania zasobu z wcześniej połączonego źródła pobieranie rozpocznie się natychmiast.

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

dns-prefetch

Funkcja <link rel="dns-prefetch> obsługuje niewielki podzbiór elementów obsługiwanych przez <link rel="preconnect">. Nawiązanie połączenia obejmuje wyszukiwanie DNS i uzgadnianie połączenia TCP, a w przypadku bezpiecznych źródeł – negocjacje TLS. dns-prefetch instruuje przeglądarkę, aby rozpoznawała DNS tylko w określonej domenie, zanim zostanie jawnie wywołana.

Wskazówka preconnect sprawdza się najlepiej tylko w przypadku najbardziej krytycznych połączeń. W przypadku mniej krytycznych domen zewnętrznych używaj pola <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

Obsługa przeglądarki dns-prefetch różni się od obsługi preconnect, dlatego dns-prefetch może służyć jako kreacja zastępcza w przeglądarkach, które nie obsługują preconnect. Aby bezpiecznie wdrożyć tę funkcję, użyj osobnych tagów „link”:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Leniwe ładowanie zasobów zewnętrznych

Osadzone w witrynie zasoby innych firm mogą być w dużym stopniu odpowiedzialne za powolne działanie strony, jeśli są niewłaściwie skonstruowane. Jeśli nie są niezbędne lub znajdują się w części strony widocznej po przewinięciu (czyli gdy użytkownik musi przewinąć stronę, aby je zobaczyć), leniwe ładowanie to dobry sposób na zwiększenie szybkości działania strony i wyrenderowania zawartości. Dzięki temu użytkownicy szybciej trafią na stronę główną i będą mieli do nich większą wygodę.

Diagram strony internetowej wyświetlanej na urządzeniu mobilnym z przewijaną treścią wykraczającą poza ekran. Część strony widoczna po przewinięciu jest mało nasycona, ponieważ nie została jeszcze wczytana.

Skutecznym sposobem jest leniwe ładowanie treści pochodzących od innych podmiotów po wczytaniu zawartości strony głównej. Reklamy to dobry wybór w przypadku tego podejścia.

Reklamy są ważnym źródłem przychodów dla wielu witryn, ale użytkownicy szukają ich przede wszystkim w ich treściach. Leniwe ładowanie reklam i szybsze wyświetlanie głównej treści pozwala zwiększyć odsetek ogólnej widoczności reklamy. Na przykład firma MediaVine przeszła na reklamy z leniwym ładowaniem i odnotowała wzrost szybkości wczytywania strony o 200%. Wskazówki DoubleClick na temat leniwego ładowania reklam znajdują się w oficjalnej dokumentacji.

Możesz też wczytywać treści należące do innych firm tylko wtedy, gdy użytkownicy przewiną w dół do tej sekcji strony.

Intersection Observer to interfejs API przeglądarki, który efektywnie wykrywa, kiedy element pojawia się w widocznym obszarze przeglądarki, lub gdy z niego wychodzi. Można go wykorzystać do implementacji tej techniki. lenisizes to popularna biblioteka JavaScript do leniwego ładowania obrazów i iframes. Obsługuje on umieszczanie filmów YouTube i widżety. Udostępnia też opcjonalną obsługę obiektu IntersectionObserver.

Używanie atrybutu loading do leniwego ładowania obrazów i elementów iframe jest świetną alternatywą dla technik JavaScript, a od niedawna jest on dostępny w Chrome 76.

Optymalizowanie sposobu obsługi skryptów zewnętrznych

Hosting firmy zewnętrznej CDN

Dostawcy zewnętrzni często udostępniają adresy URL plików JavaScript, które hostują, zwykle w sieci dostarczania treści (CDN). Zaletą tego podejścia jest to, że możesz szybko rozpocząć pracę – wystarczy skopiować i wkleić adres URL – a utrzymanie obsługi nie wymaga żadnych opłat. Dostawca zewnętrzny zajmuje się konfiguracją serwera i aktualizacjami skryptów.

Ponieważ jednak nie znajdują się one w tym samym punkcie początkowym co reszta zasobów, wczytywanie plików z publicznej sieci CDN wiąże się z kosztami sieci. Przeglądarka musi przeprowadzić wyszukiwanie DNS, nawiązać nowe połączenie HTTP, a w bezpiecznych źródłach przeprowadzić uzgadnianie połączenia SSL z serwerem dostawcy.

W przypadku używania plików z serwerów innych firm rzadko masz kontrolę nad buforowaniem. Jeśli polega na innej strategii buforowania, skrypty mogą być niepotrzebnie pobierane z sieci zbyt często.

Własne skrypty innych firm

Hostowanie skryptów firm zewnętrznych to opcja, która daje większą kontrolę nad procesem wczytywania skryptu. Dzięki własnemu hostowi możesz:

Na przykład Casperowi udało się skrócić czas wczytywania o 1, 7 sekundy dzięki własnym hostowaniu skryptu testów A/B.

Korzystanie z własnego hostingu ma jednak jedną ogromną wadę: skrypty mogą być nieaktualne i nie będą otrzymywać automatycznych aktualizacji, gdy nastąpi zmiana interfejsu API lub poprawka zabezpieczeń.

Używaj mechanizmów Service Worker do buforowania skryptów z serwerów zewnętrznych

Alternatywą dla samodzielnego hostowania, które daje większą kontrolę nad buforowaniem przy jednoczesnym czerpaniu korzyści płynących z zewnętrznych sieci CDN, jest używanie mechanizmów Service Worker do buforowania skryptów z serwerów zewnętrznych. Dzięki temu masz kontrolę nad tym, jak często skrypty są ponownie pobierane z sieci i możesz utworzyć strategię wczytywania, która ogranicza liczbę żądań dotyczących mniej ważnych zasobów zewnętrznych, dopóki strona nie osiągnie kluczowego momentu. W tym przypadku użycie protokołu preconnect do nawiązania wczesnego połączenia może również w pewnym stopniu zmniejszyć koszty sieci.