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ę za pomocą narzędzi do testowania szybkości, takich jak Google PageSpeed ​​Insight lub Web.dev, jednym z ostrzeżeń, jakie możesz zobaczyć, będzie „opóźnienie wyświetlania 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.

Warto jednak wiedzieć, że ponieważ odsuwanie obrazów poza ekranem może zwiększyć szybkość działania urządzenia mobilnego, najważniejszymi czynnikami wpływającymi na szybkość są hosting i motyw. W BloggingTools korzystamy z Cloudways , ponieważ jest to najszybszy hosting WordPress. Jeśli nie stać Cię na Cloudways, dobrym wyborem będą Bluehost lub Hostinger. Jeśli chodzi o motywy, 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 WordPressa, 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 do optymalizacji wydajności. Jeśli korzystasz z Autoptimize, nie musisz instalować wtyczki z funkcją lazy loading, ponieważ Autoptimize oferuje 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 WordPressa. Jeśli korzystasz z WP Rocket, nie potrzebujesz żadnej innej wtyczki, ponieważ ma ona włączoną funkcję leniwego ładowania.

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 korzystasz z wtyczki LiteSpeed ​​Cache , posiada ona funkcję leniwego ładowania. Aby ją aktywować, przejdź do sekcji multimediów, gdzie możesz włączyć leniwe ładowanie.

5. a3 Leniwe obciążenie

Jeśli potrzebujesz wtyczki tylko do Lazy Load, a3 Lazy Load będzie dobrym rozwiązaniem. Wystarczy przejść do wtyczki > Dodaj nową. Wyszukaj a3 Lazy Load. Zainstaluj i aktywuj. Następnie przejdź do ustawień wtyczki i aktywuj Lazy Load.

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)