Efektywne wczytywanie kodu JavaScript innej firmy

Milica Mihajlija

Jeśli skrypt innej firmy spowalnia Twoją podczas wczytywania strony możesz zwiększyć wydajność na dwa sposoby:

• Usuń je, jeśli nie wnosi on wyraźnej wartości dla Twojej witryny.
• Zoptymalizuj proces wczytywania.

Z tego posta dowiesz się, jak zoptymalizować proces wczytywania skryptów zewnętrznych. za pomocą poniższych metod:

• Używanie atrybutu async lub defer w tagach <script>
• Nawiązuję wczesne połączenia z wymaganymi źródłami
• Leniwe ładowanie
• Optymalizacja sposobu obsługi skryptów innych firm

Użyj formy płatności async lub defer

Ponieważ skrypty synchroniczne opóźniają DOM. podczas tworzenia i renderowania, należy zawsze ładować skrypty innych firm asynchronicznie, chyba że skrypt musi zostać uruchomiony przed wyrenderowaniem strony.

Atrybuty async i defer informują przeglądarkę, że może przejść do analizy kodu HTML podczas wczytywania skryptu w tle, a następnie wykonać go po załadowaniu. Dzięki temu pobrane skrypty nie blokują konstrukcji DOM ani strony. renderowanie, dzięki czemu użytkownik zobaczy stronę, zanim wszystkie skrypty zostaną ukończone wczytuję.

<script async src="script.js">

<script defer src="script.js">

Różnica między atrybutami async i defer polega na tym, że przeglądarka uruchamia skrypty.

async

Skrypty z atrybutem async są wykonywane przy pierwszej możliwości po dokończ pobieranie i przed wyświetleniem okna load. Oznacza to, że możliwe, że skrypty async nie będą uruchamiane w kolejności, w której pojawia się w kodzie HTML. Oznacza to również, że mogą przerywać tworzenie DOM, jeśli dokończ pobieranie, gdy parser nadal działa.

defer

Skrypty z atrybutem defer są wykonywane po zakończeniu analizy HTML ale przed zakończeniem DOMContentLoaded. . defer zapewnia uruchamianie skryptów w kolejności, w jakiej występują w kodzie HTML nie blokuj parsera.

• Wybierz async, jeśli chcesz, aby skrypt był uruchamiany na wcześniejszym etapie wczytywania proces tworzenia konta.
• Użyj zasady defer w przypadku mniej ważnych zasobów, takich jak poniższy odtwarzacz Część strony widoczna na ekranie.

Użycie tych atrybutów może znacznie przyspieszyć wczytywanie strony. Przykład: Telegraph odroczył wszystkie skrypty, obejmujący reklamy i analitykę, oraz skrócił czas wczytywania reklam o średnio 4 sekundy.

Nawiązuj wczesne połączenia z wymaganymi źródłami

Jeśli chcesz zaoszczędzić 100–500 ms, nawiązywanie wczesnych kontaktów ważnych źródeł zewnętrznych.

2 typy <link>, preconnect i dns-prefetch mogą pomóc w tych kwestiach:

preconnect

<link rel="preconnect"> informuje przeglądarkę, że strona chce utworzyć połączenie z innym punktem początkowym i chcesz, aby ten proces jak najszybciej się rozpoczął jak to tylko możliwe. Gdy przeglądarka wysyła żądanie zasobu z wcześniej połączonego punktu początkowego, pobieranie rozpocznie się natychmiast.

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

dns-prefetch

<link rel="dns-prefetch> obsługuje niewielki podzbiór danych, <link rel="preconnect"> nicka. Nawiązanie połączenia wymaga użycia systemu DNS wyszukiwanie i uzgadnianie połączenia TCP, a w przypadku bezpiecznych źródeł – negocjacje TLS. dns-prefetch informuje przeglądarkę, że ma wyszukiwać DNS tylko dla konkretnej domeny, zanim zostanie jawnie wywołana.

Wskazówka preconnect działa najlepiej tylko w przypadku najważniejszych połączeń. Dla: mniej ważne domeny zewnętrzne, użyj <link rel=dns-prefetch>.

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

Obsługa przeglądarek w dns-prefetch różni się nieco od pomocy preconnect, więc dns-prefetch może służyć jako element zastępczy w przeglądarkach, które nie obsługują preconnect. Aby to bezpiecznie wdrożyć, użyj osobnych tagów linku:

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

Leniwe ładowanie zasobów innych firm

Umieszczone zasoby innych firm mogą znacznie spowolnić wczytywanie strony, jeśli są kiepsko skonstruowane. Jeśli nie są kluczowe lub znajdują się w części strony widocznej po przewinięciu (czyli jeśli użytkownik musi je przewinąć), leniwe ładowanie poprawić szybkość działania strony i wskaźniki renderowania. Dzięki temu użytkownicy widzą zawartość strony głównej szybsze działanie i łatwiejszy kontakt z urządzeniami.

Jedną ze skutecznych metod jest leniwe ładowanie treści osób trzecich po stronie głównej gdy załaduje się zawartość. Takie podejście najlepiej sprawdza się w reklamach.

Reklamy są ważnym źródłem przychodu dla wielu witryn, ale użytkownicy szukają ich treści. Dzięki leniwemu ładowaniu reklam i szybszemu wyświetlaniu głównej treści możesz: zwiększają ogólny procent widoczności reklamy. Na przykład MediaVine włączyli reklamy leniwe ładowanie. i odnotowała 200% poprawę szybkości wczytywania stron. Google Ad Manager ma dokumentację o leniwym ładowaniu reklam.

Możesz też skonfigurować treści należące do innych firm tak, aby ładowały się tylko wtedy, gdy użytkownik przewinie stronę do w tej sekcji strony.

Obserwator skrzyżowań to interfejs API przeglądarki, który efektywnie wykrywa, kiedy element otwiera się lub opuszcza w obszarze roboczym przeglądarki i możesz użyć go do wdrożenia tej metody. lazysizes to popularna biblioteka JavaScriptu do leniwego ładowania obrazów i iframes. Obsługuje ona umieszczanie filmów YouTube widżety. Jest też opcjonalna. Intersection Observer.

Używanie atrybutu loading do leniwego ładowania obrazów i elementów iframe to doskonała alternatywa dla języka JavaScript. Ostatnio stała się dostępna w Chrome 76.

Optymalizacja sposobu obsługi skryptów zewnętrznych

Oto kilka zalecanych strategii optymalizacji wykorzystania z skryptów innych firm.

Hosting CDN firmy zewnętrznej

Często dostawcy zewnętrzni podają adresy URL plików JavaScript, które zwykle w sieci dystrybucji treści (CDN). Zaletą tego rozwiązania jest szybkie rozpoczęcie pracy – skopiować i wkleić adres URL bez konieczności wykonywania dodatkowych czynności związanych z konserwacją, dostawca zewnętrzny zajmuje się aktualizacjami konfiguracji serwera i skryptów.

Ponieważ jednak nie są one z tego samego źródła co reszta zasobów, wczytywanie plików z publicznej sieci CDN wiąże się z kosztami sieciowymi. Przeglądarka musi: przeprowadzić wyszukiwanie DNS, nawiązać nowe połączenie HTTP, a w przypadku bezpiecznych źródeł nawiązać połączenie SSL z serwerem dostawcy.

Gdy korzystasz z plików z serwerów innych firm, rzadko masz kontrolę nad tym, buforowanie. Korzystanie ze strategii buforowania innej osoby może spowodować, że skrypty zbyt często są pobierane z sieci zbyt często.

Samodzielne hostowanie skryptów innych firm

Samohostujące skrypty innych firm to opcja, która daje Ci większą kontrolę nad podczas ładowania skryptu. Dzięki hostingowi we własnym zakresie możesz:

• Skrócenie czasu wyszukiwania DNS i przesyłania danych w obie strony.
• Popraw nagłówki buforowania HTTP.
• Używaj protokołu HTTP/2 lub nowszego protokołu HTTP/3.

Na przykład Casperowi udało się otrzymać 1, 7 sekundy. aby skrócić czas wczytywania, samodzielnie hostujący skrypt testów A/B.

Samohosting ma jednak jedną dużą wadę: skrypty mogą być nieaktualne i w przypadku zmiany interfejsu API lub poprawki zabezpieczeń nie będą otrzymywać automatycznych aktualizacji.

Używanie mechanizmów Service Worker do buforowania skryptów z serwerów innych firm

możesz używać skryptów service worker do buforowania skryptów z serwerów innych firm. jako alternatywy dla autohostingu. Daje to większą kontrolę nad buforowaniem, przy zachowaniu zalet zewnętrznych sieci CDN.

Możesz kontrolować częstotliwość ponownego pobierania skryptów z sieci oraz stworzyć strategię wczytywania, która ograniczy żądania mniej ważnych, zasobów firm zewnętrznych, dopóki użytkownik nie dojdzie do kluczowej interakcji na stronie. preconnect umożliwia nawiązanie wczesnych kontaktów i pomaganie i zmniejszyć koszty związane z siecią.