Przyspiesz WordPress dzięki funkcji Lazy Loading dla obrazów i filmów (bez potrzeby instalowania wtyczki)
Funkcja leniwego ładowania to jeden z najprostszych i najskuteczniejszych sposobów na przyspieszenie ładowania witryny WordPress, zwłaszcza na urządzeniach mobilnych. Aby ją wdrożyć, nie potrzebujesz nawet wtyczki. W tym przewodniku pokażemy Ci, jak ręcznie włączyć natywne, leniwe ładowanie obrazów i filmów, korzystając z czystego, lekkiego kodu.
Czym jest Lazy Loading?
Lazy loading to technika wydajnościowa, w której zasoby multimedialne, takie jak obrazy i filmy, są ładowane tylko wtedy, gdy mają wejść do obszaru widoku użytkownika (tj. stać się widoczne na ekranie). Zmniejsza to liczbę żądań HTTP przy początkowym ładowaniu strony, dzięki czemu witryna jest szybsza i lżejsza.
Dlaczego Lazy Loading jest krytyczny dla wydajności WordPressa
- Zmniejsza początkową wagę strony: Strony ładują się szybciej, ponieważ na początku wymagane jest użycie mniejszej ilości zasobów.
- Oszczędza przepustowość: Niewidoczne media nie są pobierane, chyba że są potrzebne.
- Poprawia podstawowe wskaźniki internetowe: Leniwe ładowanie poprawia parametry, takie jak Largest Contentful Paint (LCP).
- Lepsze SEO i doświadczenie użytkownika: Prędkość jest czynnikiem rankingowym. Szybsza strona utrzymuje zaangażowanie użytkowników.
Jak wdrożyć natywne ładowanie leniwe dla obrazów
Od wersji WordPress 5.5 natywne ładowanie leniwe jest automatycznie dodawane do tagów obrazów za pomocą loading="lazy" atrybut. Możesz upewnić się, że działa to prawidłowo przy minimalnych dostosowaniach:
<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">Najlepsza praktyka: Zawsze określaj width I height aby uniknąć przesunięć układu (co jest ważne dla wyniku CLS).
Jak wymusić leniwe ładowanie dla wszystkich obrazów (opcjonalnie)
Jeśli niektóre motywy lub wtyczki pomijają dodawanie loading="lazy", możesz to wymusić za pomocą prostego fragmentu kodu JavaScript:
<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>Dodaj ten skrypt do stopki lub użyj motywu potomnego, aby go poprawnie uwzględnić.
Leniwe ładowanie filmów bez wtyczek
Filmy są ciężkie. Osadzone z YouTube lub Vimeo ładują wiele zewnętrznych skryptów. Aby załadować je leniwie bez wtyczek, zamień iframe na klikalny podgląd obrazu i załaduj wideo dopiero po interakcji.
Przykład: Lazy Load YouTube Video
<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>Zastępować VIDEO_ID z rzeczywistym identyfikatorem filmu YouTube.
Pomocny styl (opcjonalnie)
Dodaj trochę podstawowego CSS, aby wyglądało ładnie:
.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }Dlaczego nie użyć wtyczki?
Wtyczki są wygodne, ale często zawierają dodatkowe skrypty, style lub rozdęcie. Ręczne leniwe ładowanie daje:
- Większa kontrola nad tym, co jest ładowane
- Brak wpływu na wydajność funkcji innych firm
- Czystszy wynik przedniego końca
Kiedy warto rozważyć wtyczkę
Jeśli prowadzisz dużą witrynę internetową, na której często przesyłasz materiały multimedialne lub zatrudniasz osoby nieznające się na kodowaniu, rozważ zastosowanie tych zoptymalizowanych wtyczek z funkcją leniwego ładowania:
- Pamięć podręczna LiteSpeed (jeśli twój serwer to obsługuje)
- Latająca prasa
- Perfmatters mają znaczenie (premia)
Należy jednak pamiętać, że nawet korzystając z tych wtyczek, konieczne jest sprawdzenie faktycznego zachowania leniwego ładowania w DevTools.
Ostatnie wskazówki
- Użyj narzędzi programistycznych przeglądarki, aby sprawdzić, czy
loading="lazy"jest stosowany - Przetestuj swoją witrynę za pomocą Wgląd w PageSpeed firmy Google
- Śledź ulepszenia LCP po włączeniu leniwego ładowania
Potrzebujesz fachowej pomocy w zwiększeniu szybkości działania WordPressa bez stosowania rozdętych wtyczek? Wypróbuj bezpłatny audyt ręczny na SpeedWP Pro — optymalizujemy od podstaw.
