Jeśli skrypt zewnętrzny spowalnia wczytywanie strony, możesz poprawić jej działanie 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:
- Używanie atrybutu
asynclubdeferw tagach<script> - Nawiązywanie wczesnego połączenia z wymaganymi punktami początkowymi
- Leniwe ładowanie
- 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 rozpocząć analizę kodu HTML podczas wczytywania skryptu w tle, a potem wykonać skrypt po jego wczytaniu. Dzięki temu pobieranie skryptów nie blokuje konstrukcji DOM ani renderowania stron, umożliwiając użytkownikowi wyświetlenie strony, zanim wszystkie skrypty zostaną wczytane.
<script async src="script.js">
<script defer src="script.js">
Różnica między atrybutami async i defer polega na tym, kiedy przeglądarka wykonuje skrypty.
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ą działać w takiej kolejności, w jakiej występują w kodzie HTML. Oznacza to również, że mogą przerwać tworzenie DOM, jeśli zakończą pobieranie, gdy parser jest nadal w pracy.
async nadal mogą blokować analizę HTML.defer
Skrypty z atrybutem defer są wykonywane po całkowitym zakończeniu analizy HTML, ale przed zdarzeniem DOMContentLoaded. defer dba o to, aby skrypty były uruchamiane w takiej kolejności, w jakiej występują w kodzie HTML, i nie blokują parsera.
defer czekają na uruchomienie, aż przeglądarka zakończy analizę kodu HTML.- Użyj
async, jeśli ważne jest, aby skrypt został uruchomiony wcześniej w procesie wczytywania. - W przypadku mniej ważnych zasobów, na przykład odtwarzacza wideo w części strony widocznej po przewinięciu, używaj pola
defer.
Użycie tych atrybutów może znacznie przyspieszyć wczytywanie strony. Na przykład Telegraph odroczył wszystkie skrypty, w tym reklamy i statystyki, oraz skrócił 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 zewnętrznymi.
Mogą Ci w tym pomóc 2 typy <link>: preconnect i dns-prefetch:
preconnect
<link rel="preconnect"> informuje przeglądarkę, że strona chce nawiązać połączenie z innym źródłem
i że chcesz rozpocząć ten proces tak szybko, jak to możliwe. Gdy przeglądarka zażąda 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 działań, które obsługuje <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 informuje przeglądarkę, aby rozpoznawała DNS tylko w określonej domenie, zanim zostanie jawnie wywołana.
Wskazówka preconnect przydaje się tylko w przypadku najbardziej krytycznych połączeń. W przypadku mniej ważnych domen zewnętrznych użyj <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
Umieszczone zasoby innych firm mogą znacznie spowolnić wczytywanie strony, jeśli są słabo skonstruowane. Jeśli nie są niezbędne lub znajdują się w części strony widocznej po przewinięciu (czyli gdy użytkownik musi przewijać stronę, aby je zobaczyć), leniwe ładowanie to dobry sposób na zwiększenie szybkości działania strony i wyrenderowania danych. Dzięki temu użytkownicy szybciej zobaczą zawartość strony głównej i będą mieli większy komfort korzystania z niej.
Skutecznym sposobem jest leniwe ładowanie treści zewnętrznych 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 ich treść jest bardzo interesująca. 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%. W usłudze Google Ad Manager znajdziesz dokumentację na temat leniwego ładowania reklam.
Możesz też skonfigurować treści firm zewnętrznych tak, aby ładować się tylko wtedy, gdy użytkownik po raz pierwszy przewinie stronę do danej sekcji strony.
Intersection Observer to interfejs API przeglądarki, który efektywnie wykrywa, kiedy element pojawia się w widocznym obszarze przeglądarki, a kiedy z niego opuszcza. Możesz go wykorzystać do wdrożenia tej metody. lenisizes to popularna biblioteka JavaScriptu służąca do leniwego ładowania obrazów i iframes.
Obsługuje on umieszczanie filmów z YouTube i widżety.
Udostępnia też opcjonalną obsługę Intersection Observer.
Używanie atrybutu loading na potrzeby leniwego ładowania obrazów i elementów iframe to świetna alternatywa dla technik JavaScriptu, a od niedawna jest on dostępny w Chrome 76.
Optymalizowanie sposobu obsługi skryptów zewnętrznych
Poniżej znajdziesz kilka zalecanych strategii optymalizacji korzystania ze skryptów innych firm.
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 – i to bez opłat konserwacyjnych. 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 kosztem sieci. Przeglądarka musi przeprowadzić wyszukiwanie DNS, nawiązać nowe połączenie HTTP i w bezpiecznym źródle uzgadniać połączenie SSL z serwerem dostawcy.
Gdy używasz plików z serwerów innych firm, rzadko masz kontrolę nad zapisywaniem w pamięci podręcznej. Jeśli polega na innej strategii buforowania, skrypty mogą być niepotrzebnie pobierane ponownie z sieci.
Własne skrypty innych firm
Hostowanie skryptów firm zewnętrznych to opcja, która zapewnia większą kontrolę nad procesem wczytywania skryptu. Dzięki własnemu hostowi możesz:
- Skróć czas wyszukiwania DNS i skrócenie czasu przesyłania danych w obie strony.
- Ulepsz nagłówki buforowania pamięci podręcznej HTTP.
- Korzystaj z HTTP/2 lub nowszej wersji HTTP/3.
Na przykład Casper zdołał skrócić czas wczytywania o 1,7 sekundy, hostując własny skrypt 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 po zmianie interfejsu API lub poprawce zabezpieczeń.
Używaj mechanizmów Service Worker do buforowania skryptów z serwerów zewnętrznych
Zamiast hostować własne hosty możesz używać skryptów service worker do buforowania skryptów z serwerów firm zewnętrznych. Zapewnia to większą kontrolę nad zapisywaniem w pamięci podręcznej, a jednocześnie pozwala zachować zalety zewnętrznych sieci CDN.
Możesz kontrolować częstotliwość ponownego pobierania skryptów z sieci i utworzyć strategię wczytywania, która będzie ograniczać liczbę żądań dotyczących mniej ważnych zasobów innych firm, dopóki użytkownik nie dotrze do kluczowej interakcji na stronie.
Dzięki preconnect możesz nawiązywać wcześniejsze połączenia i ograniczać koszty sieciowe.