Jak opóźnić ładowanie skryptu w WordPressie

Szukasz sposobu na opóźnienie ładowania skryptu w WordPressie?

Użytkownicy WordPressa zawsze szukają najnowocześniejszych technik poprawiających czas ładowania swojej witryny. Szybkość jest niezwykle ważna dla wielu czynników, które tworzą udaną obecność w Internecie. Dwoma głównymi elementami, jeśli chodzi o szybkość WordPressa, są wrażenia odwiedzających i rankingi w wyszukiwarkach.

Istnieje wiele narzędzi innych firm, które poprawiają funkcjonalność lub widoczność witryny WordPress. Te narzędzia innych firm wykorzystują JavaScript, aby dodać swoją funkcjonalność do witryny WordPress.

Wadą tego dodanego kodu JavaScript innej firmy jest to, że w większości przypadków wydłuży on czas ładowania strony każdego adresu URL, na którym istnieje skrypt.

Oznacza to, że wszędzie tam, gdzie masz skrypt na swojej stronie, a odwiedzający próbuje uzyskać dostęp do tej strony, czas potrzebny do pełnego załadowania strony zostanie zwiększony z powodu skryptu.

Być może nie jesteś nawet pewien, czy Twoja witryna jest szybsza czy wolna. Spójrz na poniższy link, aby uzyskać informacje na temat niektórych bezpłatnych narzędzi do testowania szybkości witryny, których możesz użyć do określenia szybkości witryny.
https://www.wpfixit.com/free-website-speed-testing-tools/

To niesprawiedliwe, że musisz zamienić funkcjonalność na szybkość, prawda?

Skrypty zewnętrzne są kosztowne na Twojej stronie Ładowanie strony

Skrypty stron trzecich są wszędzie. Według raportu State of JavaScript opracowanego przez HTTP Archive, mediana liczby zewnętrznych skryptów żądanych przez strony internetowe wynosi 20 , a ich łączny rozmiar to około 449 KB .

Aż 93,59% stron internetowych zawiera co najmniej jeden zasób strony trzeciej. Zagłębienie się w te same dane pokazuje, że 76% witryn śledzi użytkowników za pomocą skryptów analitycznych.

Najgorszy wpływ skryptów innych firm to opóźnienie krytycznej ścieżki renderowania oraz wpływ na wyniki Core Web Vitals, zaczynając od oceny FID.

Krytyczna ścieżka renderowania to zestaw czynności wykonywanych przez przeglądarkę w celu złożenia kodu HTML, CSS i JavaScript w żywą, użyteczną witrynę internetową.

Oczywiście dużą rolę odgrywa tutaj rozmiar ładunku skryptów stron trzecich, ale należy wziąć pod uwagę jeszcze jeden ważny czynnik.

JavaScript zajmuje dużo zasobów procesora do wykonania. Nawet jeśli zoptymalizujesz skrypty innych firm w celu zmniejszenia wpływu na czas renderowania, mogą one nadal wpływać na pomiar czasu do interakcji. Mierzy, jak szybko użytkownicy mogą wchodzić w interakcję ze stroną internetową.

Im wolniej, tym bardziej sfrustrowani będą Twoi użytkownicy i tym większe prawdopodobieństwo, że opuszczą Twoją witrynę.

Najczęściej używane skrypty zewnętrzne na WordPress

Poniżej znajduje się lista niektórych z najczęściej używanych skryptów zewnętrznych w witrynie WordPress. Wiele z nich rozpoznasz, ponieważ prawdopodobnie używasz ich w swojej witrynie.

1. Google Analytics
2. Kod piksela Facebooka
3. Widżety czatu na żywo
4. Osadzenia wideo
5. Formularze osadzone
6. Widżety mediów społecznościowych
7. Formularze osadzone

Osiągnij wielkość, opóźniając wczytywanie skryptów w WordPressie

Nie ma powodu, dla którego powinieneś poświęcać szybkość na rzecz funkcjonalności.

Co jeśli powiemy ci, że możesz mieć oba?

Popraw funkcjonalność i widoczność swojej witryny WordPress za pomocą skryptów stron trzecich, a także upewnij się, że każda strona w Twojej witrynie ładuje się tak szybko, jak to możliwe dla odwiedzających.

Jest to możliwe i odbywa się to poprzez proces, w którym opóźniasz ładowanie skryptu w WordPressie.

W normalnych okolicznościach, gdy używasz wewnętrznego skryptu w swojej witrynie, zostanie on załadowany wraz ze stroną, gdy użytkownik uzyska dostęp do jednego z adresów URL witryny.

Gdy opóźnisz ładowanie skryptu w WordPress, skrypt zewnętrzny nie rozpocznie się, dopóki nie upłynie ustawiony czas opóźnienia.

Na przykład, jeśli ustawisz czas opóźnienia na 4 sekundy, oznacza to, że skrypt wykona się dopiero po 4 sekundach od pełnego załadowania strony.

Jest to niezwykle wydajne, ponieważ oznacza, że ​​ładowanie strony nie czeka na zakończenie skryptu. Twoje wrażenia z odwiedzin poprawią się, ponieważ strony ładują się szybciej, a każde narzędzie do testowania prędkości, którego używasz do testowania jednego z adresów URL w Twojej witrynie, przyniesie lepsze wyniki.

Przyjrzyjmy się poniżej różnicy między zwykłym ładowaniem skryptu zewnętrznego a ładowaniem skryptu opóźniającego.

Regularne ładowanie skryptów zewnętrznych

Poniższy obrazek przedstawia ładowanie kaskadowe adresu URL z osadzonym widżetem referencji TrustPilot.

Jak widać na obrazku, z tą stroną ładowanych jest 5 żądań zewnętrznych. Te żądania pochodzą z osadzonego skryptu zewnętrznego.

Opóźnij ładowanie skryptu zewnętrznego

Przyjrzyjmy się teraz tej samej stronie załadowanej z opóźnieniem ładowania skryptu w WordPressie.

Ten widżet z referencjami TrustPilot jest nadal osadzony na stronie, ale ustawiliśmy opóźnienie jego załadowania 2,5 sekundy po załadowaniu strony.

Nie tylko zmniejszyła się ilość żądań, ale także spójrz na czas pełnego załadowania i czas ładowania, który również się skrócił.

To tak, jakby skryptu nie było nawet na stronie w czasie ładowania.

Oryginalne ładowanie skryptu ładowania w WordPress

Poniższy kod jest domyślnym skryptem do osadzenia dla tego widżetu TrustPilot, którego użyliśmy w powyższych testach prędkości.

 <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->

Opóźnij ładowanie skryptu w WordPress

Poniższy kod to opóźniony skrypt do osadzenia dla tego widżetu TrustPilot, którego użyliśmy w powyższych testach prędkości.

 <!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
    head_ID.appendChild(element_skryptu);
}, 2500 ); // OPÓŹNIENIE, KTÓRE MOŻESZ REGULOWAĆ
</script>
<!-- Zakończ skrypt TrustBox -->

<!-- Widżet TrustBox - Karuzela -->
<div class="trustpilot-widget" data-locale="en-US" data-template-data-businessunit-data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="pl">
</div>
<!-- Zakończ widżet TrustBox -->

Dowolne użycie opóźnienia ładowania skryptów w WordPress

Poniższy kod jest domyślnym szablonem, którego możesz użyć do opóźnienia ładowania skryptu w WordPressie.

W tym szablonie są tylko dwa elementy, które wymagają zmiany.

1. Adres URL zewnętrznego skryptu, którego chcesz użyć
2. Opóźnienie czasowe, w którym chcesz uruchomić skrypt

 <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
    head_ID.appendChild(element_skryptu);
}, 2500 ); // OPÓŹNIENIE, KTÓRE MOŻESZ REGULOWAĆ
</script>

Na zakończenie

Mamy nadzieję, że ten post był pomocny i zrozumiał, jak opóźnić ładowanie skryptu w WordPressie.

Naprawdę powinieneś używać tego w przypadku zewnętrznych zewnętrznych skryptów, których używasz w swojej witrynie WordPress, a zobaczysz natychmiastowe skrócenie czasu ładowania strony, co korzystnie wpłynie na twoje rankingi w wyszukiwarkach i ogólne wrażenia odwiedzających.

Jeśli masz jakiekolwiek problemy z implementacją czegokolwiek, o czym przeczytałeś w tym poście, skomentuj poniżej, a my zobaczymy, gdzie utknąłeś.