Jak odłożyć obrazy poza ekranem w WordPress

Wszyscy wiemy, że szybkość jest bardzo ważna dla SEO i konwersji. Szybka strona internetowa może pomóc jej uzyskać wyższą pozycję w Google. I może również uszczęśliwić Twoich czytelników. Kto nie lubi szybkiej strony internetowej?

Jednak próba optymalizacji witryny pod kątem szybkości może być czasochłonna ze względu na dużą liczbę rzeczy do zrobienia. Zwykle od czasu do czasu próbuję przetestować moją witrynę i upewnić się, że nie działa ona źle. Nigdy nie wiesz, co nowego tam nowego. W świecie SEO sytuacja zmienia się bardzo często.

Jeśli sprawdziłeś swoją witrynę przez narzędzia do testowania prędkości jak Google PageSpeed ​​Insight lub Web.dev, jednym z ostrzeżeń, jakie możesz otrzymać, jest „odkładanie obrazów poza ekranem”.

W tym artykule wyjaśnię, co to oznacza, powiem, jak rozwiązać ten problem i polecę wtyczki, których możesz użyć, aby rozwiązać ten problem.

Powinieneś jednak wiedzieć, że dlaczego odkładanie obrazów poza ekranem może zwiększyć prędkość Twojego urządzenia mobilnego, najważniejszymi czynnikami wpływającymi na Twoją prędkość są hosting i motyw. Tutaj w BloggingTools używamy Cloudways ponieważ jest to najszybszy hosting WordPress. Jeśli nie stać Cię na Cloudways, to Bluehost lub Hostinger są dobrymi opcjami. W przypadku motywu używamy najszybszego motywu WordPress znanego jako GeneratePress.

Co oznacza odroczenie obrazów poza ekranem?

Odroczenie obrazów poza ekranem oznacza opóźnienie ładowania obrazów, które nie są jeszcze widoczne dla użytkownika. Dzięki temu przeglądarka skupi się na ładowaniu tylko tego, co jest konieczne, co ostatecznie przyspieszy działanie witryny.

Jeśli masz dużo obrazów w swoich postach lub na stronie głównej, gdy użytkownik odwiedza Twoją witrynę, przeglądarka natychmiast zaczyna wszystko ładować. Jeśli obrazów jest wiele, wyświetlenie strony użytkownikowi może zająć dużo czasu.

Ale jeśli odłożysz obrazy poza ekranem, obrazy zostaną załadowane tylko wtedy, gdy użytkownik przewinie do nich.

Pamiętaj, że nie tylko obrazy możesz odłożyć, ale większość zasobów Twojej witryny również może zostać odroczona do czasu, aż będą potrzebne.

Jak odłożyć obrazy poza ekranem w WordPress

Możesz odłożyć obrazy poza ekranem, opóźniając ładowanie obrazów. Leniwe ładowanie sprawi, że obrazy będą ładowane tylko wtedy, gdy będą potrzebne. To z kolei sprawi, że strona będzie szybsza.

Gdy będziesz już w stanie leniwie ładować obrazy i inne zasoby, które uniemożliwiają szybkie ładowanie strony. Opcja „odłóż obrazy poza ekranem” z Google PageSpeed ​​Insight i innych narzędzi testowych zniknie.

Wykonaj następujące kroki, aby odłożyć obrazy poza ekranem w WordPress:

1. Zainstaluj wtyczkę Lazy loading

Istnieje wiele wtyczek z leniwym ładowaniem, które są dostępne bezpłatnie w katalogu wtyczek WordPress. Możesz przejść do wtyczki, dodać nową, a następnie wpisać leniwe ładowanie. Zainstaluj każdego, kto ma dobre recenzje.

Ale nie musisz instalować żadnej wtyczki, jeśli masz już wtyczki obsługujące leniwe ładowanie. Większość wtyczek buforujących ma leniwe ładowanie. Sprawdź wtyczkę buforującą pod kątem opcji leniwego ładowania. Wtyczki do optymalizacji obrazu mają przeważnie opcję leniwego ładowania.

Również jeśli używasz Jetpack i automatycznej optymalizacji, mają one leniwe opcje ładowania.

2. Aktywuj opcje leniwego ładowania

Po zainstalowaniu wtyczki pamiętaj o włączeniu opcji leniwego ładowania. Jeśli masz wtyczkę pamięci podręcznej z funkcją leniwego ładowania, upewnij się, że aktywowałeś tę opcję.

3. Wyczyść pamięć podręczną.

Po włączeniu leniwego ładowania wyczyść pamięć podręczną i to wszystko!

Możesz ponownie przetestować swoją witrynę, ostrzeżenie powinno zniknąć!

Odłóż obrazy poza ekranem Wtyczka WordPress

Wtyczki opóźniania wyświetlania obrazów są takie same, jak wtyczki z leniwym ładowaniem. Oto niektóre poniżej:

1. Jetpack

Jetpack to jedna z najpopularniejszych wtyczek WordPress z ponad 5 milionami aktywnych instalacji. Jeśli masz już zainstalowany Jetpack, nie musisz instalować dodatkowej wtyczki do leniwego ładowania.

Po prostu aktywuj leniwe ładowanie w Jetpack. Aby aktywować, przejdź do ustawień Jetpack, a następnie w zakładce Wydajność przewiń w dół i włącz leniwe ładowanie.

2. Autooptymalizacja

Autoptimize to bardzo popularna wtyczka zwiększająca wydajność. Jeśli używasz Autoptimize, nie ma potrzeby instalowania wtyczki z opóźnionym ładowaniem, ponieważ Autoptimize ma tę samą funkcję.

Przejdź do ustawień Autoptimize, następnie kliknij zakładkę obrazów i włącz Lazy loading.

3. WP Rocket

WP Rocket to najpopularniejsza wtyczka premium do buforowania WordPress. Jeśli używasz WP Rocket, nie potrzebujesz żadnej innej wtyczki, mają one włączone leniwe ładowanie.

Przejdź do ustawień WP Rocket, a następnie kliknij multimedia, stamtąd możesz włączyć leniwe ładowanie.

4. Pamięć podręczna LiteSpeed

Jeśli używasz Wtyczka pamięci podręcznej LiteSpeed, Posiada funkcję opóźnionego ładowania. Aby aktywować, po prostu przejdź do sekcji multimediów i tam możesz włączyć leniwe ładowanie.

5. a3 Leniwe obciążenie

Jeśli potrzebujesz tylko wtyczki do samego ładowania Lazy a3 Lazy Load to dobra wtyczka do tego. Po prostu przejdź do wtyczki > dodaj nowy. Wyszukaj leniwy ładunek a3. Zainstaluj i aktywuj. Następnie przejdź do ustawień wtyczki i aktywuj leniwe ładowanie.

Ogólnie rzecz biorąc, niektóre motywy, niektóre wtyczki pamięci podręcznej i niektóre wtyczki do optymalizacji obrazu mają funkcję leniwego ładowania.

Najczęściej zadawane pytania (FAQ)