Jeśli skrypt innej firmy spowalnia wczytywanie strony, możesz poprawić wydajność na 2 sposoby:
- Usuń go, jeśli nie wnosi wartości dodanej do Twojej witryny.
- Zoptymalizuj proces wczytywania.
Z tego artykułu dowiesz się, jak zoptymalizować proces wczytywania skryptów innych firm za pomocą tych technik:
- Używanie atrybutu
asynclubdeferw tagach<script> - Wczesna konfiguracja połączeń z wymaganymi źródłami
- Leniwe ładowanie
- Optymalizacja sposobu wyświetlania skryptów innych firm
Użyj właściwości async lub defer
Skrypty synchroniczne opóźniają tworzenie i renderowanie DOM, dlatego zawsze ładuj skrypty innych firm asynchronicznie, chyba że skrypt musi zostać uruchomiony przed renderowaniem strony.
Atrybuty async i defer informują przeglądarkę, że może ona przeanalizować kod HTML podczas wczytywania skryptu w tle, a potem go wykonać. Dzięki temu pobieranie skryptów nie blokuje tworzenia modelu DOM ani renderowania strony, co pozwala użytkownikowi zobaczyć stronę przed załadowaniem wszystkich skryptów.
<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ą wykonywane przy pierwszej okazji po zakończeniu pobierania i przed zdarzeniem load okna. Oznacza to, że asyncskrypty mogą (i najprawdopodobniej będą) uruchamiane w innej kolejności niż ta, w jakiej występują w kodzie HTML. Oznacza to też, że mogą przerwać tworzenie DOM, jeśli zakończą pobieranie, gdy parsowanie nadal trwa.
async mogą nadal blokować analizowanie kodu HTML.defer
Skrypty z atrybutem defer są wykonywane po zakończeniu analizowania kodu HTML, ale przed zdarzeniem DOMContentLoaded. defer zapewnia, że skrypty są wykonywane w kolejności, w jakiej występują w kodzie HTML, i nie blokują parsowania.
defer czekają na wykonanie, aż przeglądarka zakończy analizowanie kodu HTML.- Użyj
async, jeśli ważne jest, aby skrypt był wykonywany wcześniej w procesie wczytywania. - Użyj
deferw przypadku mniej istotnych zasobów, takich jak odtwarzacz wideo, który znajduje się poniżej pola.
Korzystanie z tych atrybutów może znacznie przyspieszyć wczytywanie strony. Na przykład Telegraph odłożył wszystkie skrypty, w tym reklamy i statystyki, i zwiększył czas wczytywania reklam o średnio 4 sekundy.
nawiązywanie wczesnych połączeń z wymaganymi źródłami;
Możesz zaoszczędzić 100–500 ms, wcześniej nawiązując połączenia z ważnymi źródłami w innych domenach.
W tym celu możesz użyć 2 typów <link>:
preconnect i dns-prefetch:
preconnect
<link rel="preconnect"> informuje przeglądarkę, że Twoja strona chce nawiązać połączenie z innym źródłem i że chcesz, aby proces rozpoczął się jak najszybciej. Gdy przeglądarka żąda zasobu z uprzednio połączonego źródła, pobieranie rozpoczyna się natychmiast.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> obsługuje niewielką część tego, co obsługuje <link rel="preconnect">. Nawiązywanie połączenia obejmuje wyszukiwanie DNS i uzgadnianie połączenia TCP, a w przypadku bezpiecznych źródeł negocjacje TLS.
dns-prefetch informuje przeglądarkę, aby rozwiązywała tylko DNS określonej domeny, zanim zostanie ona wywołana.
Wskazówka preconnect jest najbardziej przydatna w przypadku najważniejszych 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 dns-prefetch w przeglądarkach różni się od obsługi preconnect, więc dns-prefetch może służyć jako opcja zapasowa w przypadku przeglądarek, które nie obsługują preconnect. Aby bezpiecznie wdrożyć tę funkcję, użyj osobnych tagów linków:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
Leniwe ładowanie zasobów z innych witryn
Wstawione zasoby innych firm mogą znacznie spowolnić wczytywanie strony, jeśli są źle skonstruowane. Jeśli nie są one kluczowe lub znajdują się poniżej linii przewijania (czyli użytkownicy muszą przewinąć stronę, aby je zobaczyć), opóźnione wczytywanie jest dobrym sposobem na poprawę szybkości strony i wskaźników związanych z odświeżaniem. Dzięki temu użytkownicy szybciej uzyskują dostęp do treści na stronie głównej i mają lepsze wrażenia.
Jednym z skutecznych sposobów jest opóźnione wczytywanie treści zewnętrznych po załadowaniu treści głównej strony. Reklamy są dobrym kandydatem do tego podejścia.
Reklamy są ważnym źródłem przychodów dla wielu witryn, ale użytkownicy odwiedzają je ze względu na treści. Dzięki leniwemu ładowaniu reklam i szybszemu dostarczaniu głównych treści możesz zwiększyć ogólny odsetek widocznych wyświetleń reklamy. Na przykład firma MediaVine przeszła na reklamy z opóźnionym wczytywaniem i odnotowała 200% wzrost szybkości wczytywania stron. W usłudze Google Ad Manager znajdziesz dokumentację dotyczącą opóźnionego wczytywania reklam.
Możesz też ustawić, aby treści innych firm wczytywały się tylko wtedy, gdy użytkownicy po raz pierwszy przewiną do tej sekcji strony.
Intersection Observer to interfejs API przeglądarki, który skutecznie wykrywa, kiedy element wchodzi lub wychodzi z widocznego obszaru przeglądarki. Możesz go użyć do implementacji tej techniki. lazysizes to popularna biblioteka JavaScriptu do ładowania opóźnionego obrazów i iframes.
Obsługuje wstawianie filmów z YouTube i widżety.
Obsługuje też opcjonalnie interfejs Intersection Observer.
Używanie atrybutu loading do leniwego ładowania obrazów i elementów iframe to świetna alternatywa dla technik JavaScriptu. Funkcja ta jest dostępna od niedawna w Chrome 76.
Optymalizacja sposobu wyświetlania skryptów innych firm
Poniżej znajdziesz kilka zalecanych strategii optymalizacji korzystania ze skryptów innych firm.
Hosting CDN firmy zewnętrznej
Dostawcy zewnętrzni często podają 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ąć korzystanie z usługi – wystarczy skopiować i wkleić adres URL – a dodatkowo nie musisz zajmować się konserwacją. Dostawca zewnętrzny zajmuje się konfiguracją serwera i aktualizacjami skryptów.
Ponieważ jednak nie znajdują się one w tej samej domenie co pozostałe zasoby, wczytywanie plików z publicznego CDN wiąże się z kosztami sieciowymi. Przeglądarka musi przeprowadzić wyszukiwanie DNS, nawiązać nowe połączenie HTTP i w przypadku bezpiecznych źródeł wykonać szyfrowanie SSL z serwerem dostawcy.
Gdy korzystasz z plików na serwerach innych firm, rzadko masz kontrolę nad pamięcią podręczną. Używanie cudzych strategii dotyczących pamięci podręcznej może powodować, że skrypty są niepotrzebnie pobierane z sieci zbyt często.
Hostowanie skryptów innych firm
Skrypty innych firm hostowane samodzielnie to opcja, która daje Ci większą kontrolę nad procesem wczytywania skryptu. Dzięki samodzielnemu hostowaniu możesz:
- Skrócenie czasu wyszukiwania DNS i czasu podróży w obie strony.
- Ulepszaj nagłówki buforowania HTTP.
- Korzystaj z protokołu HTTP/2 lub nowszego HTTP/3.
Na przykład Casper udało się obniżyć czas wczytywania o 1,7 sekundy, hostując samodzielnie skrypt testowania A/B.
Samodzielne hostowanie ma jednak jedną poważną wadę: skrypty mogą się zdezaktualizować i nie będą automatycznie aktualizowane, gdy nastąpi zmiana interfejsu API lub poprawka bezpieczeństwa.
Korzystanie z usług działających w tle do przechowywania w pamięci podręcznej skryptów z serwerów zewnętrznych
Jako alternatywę dla hostowania własnego możesz użyć serwisów workerów do przechowywania w pamięci podręcznej skryptów z serwerów innych firm. Dzięki temu możesz mieć większą kontrolę nad buforowaniem, zachowując jednocześnie zalety zewnętrznych usług CDN.
Możesz kontrolować, jak często skrypty są ponownie pobierane z sieci, oraz tworzyć strategię wczytywania, która ogranicza żądania nieistotnych zasobów innych firm do momentu, gdy użytkownik dotrze do kluczowej interakcji na stronie.
Dzięki preconnect możesz nawiązywać wczesne połączenia i zmniejszać koszty sieci.