Skorzystaj z nowoczesnych funkcji przeglądarki, takich jak wstępne ładowanie, wstępne pobieranie, wstępne łączenie, aby przyspieszyć działanie witryny WordPress.
Jako właściciel witryny, kto nie lubi robić wszystkiego, co możliwe, aby strona ładowała się szybciej?
Zapewnienie szybszego ładowania witryny na całym świecie jest wyzwaniem. Istnieje kilka rzeczy, które możesz zrobić, aby szybko załadować zasoby witryny, w tym włączenie następujących wskazówek przeglądarki. Są one również znane jako techniki przeglądania wstępnego.
Uwaga: techniki podpowiedzi przeglądarki nie pomagają zbytnio, gdy wchodzisz na stronę po raz pierwszy, ale kolejne żądania są szybsze.
Spis treści:
Wstępne ładowanie
Możesz użyć tagu wstępnego ładowania, aby poinformować przeglądarkę, aby wcześniej pobrała niektóre zasoby statyczne. Mogą to być obraz, czcionka, JavaScript, CSS, skrypty, wideo itp. Pomaga to ustalić priorytet ładowania zasobów; w związku z tym poprawia się wydajność.
Wstępne ładowanie byłoby dobrym pomysłem do wdrożenia, jeśli oczekujesz, że użytkownicy będą odwiedzać wiele stron później. Podobnie jak sklep eCommerce, w którym użytkownik odwiedza stronę produktu, a następnie sprawdza informacje, porównuje z innym produktem, dodaje do koszyka, płaci itp.
Aby skonfigurować funkcję wstępnego ładowania, możesz użyć następujących wtyczek.
Lepsze wskazówki dotyczące zasobów – darmowa wtyczka do konfiguracji plików CSS i JS.
WP Rocket – wtyczka premium, która zwiększa wydajność witryny za pomocą wielu podstawowych technik, w tym wstępnego ładowania pamięci podręcznej i mapy witryny.
Skąd wiesz, czy wstępne ładowanie jest włączone?
Najszybszym sposobem, aby się dowiedzieć, jest wyświetlenie źródła strony. Powinieneś zobaczyć coś takiego jak poniżej.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Nie wszystkie przeglądarki obsługują wstępne ładowanie podczas pisania. Więc sprawdź macierz zgodności przed wdrożeniem.
Wstępne połączenie
Czy ładujesz zasoby z innych domen? Może CDN?
Jeśli nie, a każdy zasób jest ładowany z Twojej pojedynczej domeny, może to nie być pomocne.
Wstępne łączenie podpowiada przeglądarce, aby nawiązała połączenie z innymi domenami w tle, aby zaoszczędzić czas na wyszukiwanie DNS, przekierowanie, uzgadnianie TCP, negocjowanie TLS itp. Chodzi o to, aby zmniejszyć opóźnienie, aby zapewnić szybkie ładowanie zasobów z innej domeny.
Ponownie, możesz użyć wyżej wymienionej lepszej wtyczki podpowiedzi do zasobów lub premium, takiej jak perfsprawy.
Po skonfigurowaniu wymaganych zasobów powinieneś je zobaczyć w źródle strony, jak poniżej.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Uwaga: jeśli ładujesz zasoby z domeny, która wymaga CORS, musisz określić, że jako crossorigin i dane wyjściowe powinny wyglądać.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect jest kompatybilny z najnowszą wersją Chrome, Edge, Firefox, Safari.
Wstępne pobieranie
Pozwól przeglądarce pobrać następną stronę, która Twoim zdaniem będzie potrzebna, gdy użytkownik nawiguje. Prefetch pobierze niezbędne zasoby i przechowa je w lokalnej pamięci podręcznej, aby w razie potrzeby szybko je obsłużyć. Istnieją dwa rodzaje pobierania z wyprzedzeniem.
Wstępne pobieranie DNS – wyjaśnione poniżej
Link prefetch – konfigurowany za pomocą . Służy do wstępnego pobierania zasobów HTML lub statycznych. Zasoby można pobierać z wyprzedzeniem, używając jako atrybutu.
jako atrybut obsługuje różne zasoby, takie jak audio, wideo, skrypt, ścieżka, styl, czcionka, obiekt, dokument itp. Wstępne pobieranie linków można skonfigurować za pomocą Wtyczka podpowiedzi dotyczące zasobów przed imprezą.
Wstępne pobieranie DNS
Wczytujesz zasoby z wielu domen i chcesz rozwiązać je w tle?
Ta szybka konfiguracja może pomóc we wcześniejszym rozwiązaniu wszystkich potencjalnych domen, więc gdy wymagane są zasoby, ładuje się szybciej. Pomaga to zmniejszyć ogólne opóźnienie.
Załóżmy, że ładujesz zasoby z 3 domen, a każda domena potrzebuje około 100 ms na wykonanie wyszukiwania DNS, dzięki czemu zaoszczędzisz 300 ms opóźnienia.
Czy to nie fajne?
Możesz zaimplementować za pomocą wtyczki perfmatters lub dodać następujące elementy w pliku functions.php swojego motywu, jeśli nie masz nic przeciwko edycji plików motywu.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
Możesz przeczytać więcej na Dokumentacja internetowa Mozilli.
Prerenderuj
Czy oczekujesz, że użytkownicy Twojej witryny będą poruszać się po potencjalnej stronie?
Prerender może pomóc w załadowaniu tych zasobów w tle, a gdy użytkownik je kliknie, otrzyma je bardzo szybko. Możesz to osiągnąć dzięki wtyczce Pre Party Resource Hints.
Wstępne renderowanie jest odpowiednie dla lekkich stron lub zasobów, ale należy zachować ostrożność w przypadku całej witryny lub dużych zasobów, ponieważ może to zwiększyć wykorzystanie procesora i przepustowość oraz spowolnić działanie witryny. Spróbuj więc z mniejszym zasobem i przetestuj go, aby upewnić się, że nie ma skutków ubocznych.
Jak widać, istnieją cztery główne wtyczki do implementacji podpowiedzi przeglądarki w WordPress. Wybierz ten, który Ci się podoba i spełnij wymagania.
Wtyczka podpowiedzi dotyczące zasobów przed imprezą – darmowa wtyczka oferująca pobieranie DNS, wstępne pobieranie linków, wstępne renderowanie, wstępne łączenie i wstępne ładowanie.
Lepsze wskazówki dotyczące zasobów – alternatywa dla powyższego.
Darmowa wtyczka jest dobra, o ile jest utrzymywana i obsługiwana. Niestety w przypadku wielu wtyczek tak się nie dzieje i dlatego czasami lepiej wybrać wersję płatną. Wtyczki w wersji komercyjnej są obsługiwane profesjonalnie i na bieżąco dzięki poprawkom standardu WordPress i poprawkom bezpieczeństwa. Jeśli chcesz wydać kilka dolarów na optymalizację wydajności witryny, możesz sprawdzić poniższe.
WP Rocket – cieszący się dobrą reputacją, zaufany przez ponad 800 000 witryn. Kosztował 49 USD za jedną stronę internetową.
Perfumy – lekki i łatwy do śledzenia koszt 24,95 USD za jedną witrynę. Jak piszę, oferuje następujące funkcje.
To dużo optymalizacji.
Wniosek
Rdzeń WordPressa jest lekki, ale staje się nieporęczny, w zależności od używanego motywu i wtyczek. I konieczne jest zoptymalizowanie wydajności witryny, aby uzyskać lepszy ranking wyszukiwania i konwersję. Powyższe techniki są łatwe do naśladowania, ale nie powinieneś na tym poprzestać.
Należy również rozważyć użycie sieci CDN do buforowania i szybszego dostarczania zawartości użytkownikom na całym świecie. Jest ich wiele, ale polecam wypróbowanie SUCURI, który oferuje zarówno CDN, jak i bezpieczeństwo.