Proponowana aktualizacja WordPressa 5.9 może automatycznie poprawić wyniki serwisów z nawet największą zawartością treści – wskaźniki mogą polepszyć się nawet o 33%.
WordPress opublikował nowy artykuł w swojej sekcji dla programistów, proponując udoskonalenie domyślnego leniwego ładowania (lazy loading) pod wersją systemu do zarządzania treścią CMS – WordPress 5.9. Testy wykazały, że proponowana zmiana poprawiła wskaźniki wydajności Core Web Vitals o średnio 7%, osiągając maksymalną poprawę aż do 33%. W propozycji zaznaczono, że kontrola drobnoziarnistego atrybutu leniwego ładowania należy do twórców motywów.
Okazało się, że dopracowanie sposobu, w jaki leniwe wczytywanie jest dodawane domyślnie, powoduje znaczną poprawę wskaźnika Core Web Vitals o nazwie Largest Contentful Paint (LCP).
W taki sposób propozycja opisuje ulepszenie: Zamiast leniwego ładowania wszystkich obrazów i ramek lokalnych iframe domyślnie, pierwszy obraz treści (również biorąc pod uwagę wyróżnione obrazy) lub treści w iframe’ach nie powinny być ładowane z opóźnieniem (leniwie). Jest to lepsze ustawienie domyślne niż to, którego używa obecna implementacja – nowa propozycja średnio i na dużą skalę spowoduje lepszą wydajność LCP w samym systemie, przy jednoczesnym utrzymaniu niezbędnej przepustowości na niskim poziomie.
Lazy loading to sposób na przyspieszenie postrzeganego pobierania strony poprzez opóźnienie pobierania elementów strony internetowej, takich jak obrazy i ramki iframe, które nie są potrzebne na samym początku załadowania strony internetowej.
Lazy loading
Lazy loading (leniwe ładowanie) to sposób na przyspieszenie postrzeganego pobierania strony poprzez opóźnienie pobierania elementów strony internetowej, takich jak obrazy i ramki iframe, które nie są potrzebne na samym początku załadowania strony internetowej.
Korzystając z leniwego ładowania, elementy takie jak obrazy, które nie są widoczne na ekranie przeglądarki odwiedzającego witrynę, mogą zostać opóźnione za pomocą atrybutu HTML zwanego atrybutem ładowania. Obraz jest elementem HTML strony internetowej, a atrybut HTML to kod, który modyfikuje element HTML, taki jak obraz. Atrybut ładowania modyfikuje obraz, w tym przypadku informując przeglądarkę, aby opóźniła jego pobranie. Dzięki temu przeglądarka pobiera najpierw ważniejsze elementy strony, które są natychmiast widoczne dla odwiedzającego witrynę – strona jest załadowana znacznie szybciej dla odwiedzających witrynę.
Largest Contentful Paint
Largest Contentful Paint (LCP) to wskaźnik, który mierzy czas potrzebny do wyświetlenia użytkownikowi największej treści na ekranie, kompletnej i gotowej do interakcji. Google definiuje, że ten wskaźnik uwzględnia tylko treść w części strony widocznej na ekranie, czyli wszystko, co pojawia się bez przewijania strony/ekranu.
Largest Contentful Paint (LCP) to wskaźnik, który mierzy czas potrzebny do wyświetlenia użytkownikowi największej treści na ekranie, kompletnej i gotowej do interakcji. Google definiuje, że ten wskaźnik uwzględnia tylko treść w części strony widocznej na ekranie, czyli wszystko, co pojawia się bez przewijania strony/ekranu.
Obraz jest zwykle kodowany w HTML w ten sposób:
<img src="example.jpg" alt="example text">
Dodanie lazy loading to prosta sprawa dodania atrybutu HTML lazy load:
<img src="example.jpg" alt="example text" loading="lazy">Jak WordPress 5.9 może ulepszyć największą zawartość treści?
Deweloper, który opublikował propozycję ulepszenia LCP, zauważył, że od wersji WordPress 5.5 główny kod domyślnie dodawał atrybut leniwego ładowania do wszystkich obrazów i ramek iframe na stronie. Ale to nie jest idealne rozwiązanie, ponieważ obrazy u góry strony, takie jak logo i wyróżnione obrazki, muszą zostać natychmiast pobrane, aby strona internetowa stała się użyteczna.
WordPress zaimplementował w ten sposób lazy loading, ponieważ nie miał możliwości dokładnego wykluczenia najważniejszych obrazów z atrybutu lazy loading. Powodem tego jest to, że wszystkie motywy są kodowane w różny sposób i tego rodzaju szczegółowe wykluczanie jest najlepiej wykonywane przez twórców motywów.
Chociaż obecna implementacja domyślnego leniwego ładowania w WordPressie nie była idealna, dodanie nowego sposobu leniwego ładowania jest wyraźną poprawą w stosunku do nie dodawania atrybutu ładowania w ogóle.
To, co zostało zaproponowane, stanowi wyraźną poprawę, jak pokazują wyniki testów wymienione poniżej.
Jak WordPress poprawi LCP?
Zespół programistów WordPressa proponuje wykluczenie dodawania atrybutu leniwego ładowania do pierwszego obrazu lub ramki iframe w kodzie. Programiści przetestowali tę metodę na 50 najpopularniejszych motywach WordPressa i odkryli, że dodanie jej do pierwszego elementu obrazu lub elementu iframe zapewniło średnią poprawę wyniku LCP Core Web Vitals średnio o 7%.
Następnie przetestowano, jak poprawiło się LCP, wykluczając leniwe ładowanie do dwóch elementów. Wzrost wydajności spadł średnio o 2%, co jasno pokazuje, że wykluczenie leniwego ładowania z więcej niż jednego elementu nie poprawiło ani trochę LCP.
Oto niektóre z ustaleń:
- Pominięcie pierwszego obrazu treści z leniwego ładowania spowodowało poprawę mediany LCP o 7% (1877 ms w porównaniu z 2020 ms przy obecnym zachowaniu) i wzrost mediany bajtów obrazu o 0% (368 KB w porównaniu do 369 KB przy obecnym zachowaniu .
Wniosek ➔ Pominięcie pierwszego obrazu z leniwego ładowania treści wyraźnie skutkuje poprawą wskaźnika LCP bez zauważalnej straty na pobieranych bajtach obrazu. - Pominięcie pierwszych dwóch obrazów treści z leniwego ładowania spowodowało poprawę mediany LCP o 5% (1927 ms w porównaniu z 2020 ms przy obecnym zachowaniu rdzenia) i wzrost mediany bajtów obrazu o 2% (378 KB w porównaniu do 369 KB przy obecnym zachowaniu).
Wniosek ➔ Pominięcie pierwszych dwóch obrazów treści daje gorsze wyniki dla obu metryk niż pominięcie tylko pierwszego, tzn. dla pierwszego obrazu treści lepiej jest pominąć leniwe ładowanie, a zatem nie ma dobrych wskaźników w przypadku dodatkowych testów z większą liczbą obrazów, aby leniwe ładowanie było potrzebne.
Nowe wyniki testu leniwego ładowania w WordPressie:
- 5% motywów w grupie testowej uzyskało gorsze wyniki LCP – od 10% do nawet 21% gorsze.
- 42% motywów poprawiło wyniki LCP z 10% do nawet 33%.
- Testy wykazały, że korzyści były lepsze w przypadku większości testowanych motywów.
Zgodnie z propozycją WordPressa: Podczas gdy mediana poprawy LCP we wszystkich motywach wynosi tylko 7%, w przypadku znacznej liczby motywów istnieją większe godne uwagi korzyści, podczas gdy znaczące straty są minimalne.
Testowanie leniwego ładowania za pomocą wtyczki
Specjalista ds. WordPress Core stworzył poprawkę w formie proponowanej wtyczki, prawdopodobnie do celów debugowania, i opublikował ją w serwisie GitHub.
Nie jest to oficjalna wersja wtyczki WordPressa, więc nie zaleca się spieszyć i jej zainstalować. Oficjalne wydania wtyczek są publikowane w repozytorium wtyczek WordPressa i tylko wtedy warto je instalować
Kiedy pojawi się bardziej wyrafinowane leniwe ładowanie?
Harmonogram dla ulepszonego leniwego ładowania jest obecnie ustawiona dla wersji systemu WordPress 5.9, który ma zostać wydany w grudniu 2021 roku. A już na wtorek 20 lipca 2021 roku zaplanowane jest wydanie publicznej wersji WordPress 5.8.
Propozycja ulepszonej funkcji lazy loading jest obecnie przedmiotem dyskusji i jak dotąd spotkała się z pozytywną reakcją w komentarzach. Tak więc, o ile nie pojawi się jakiś nieprzewidziany problem, jest bardzo możliwe, że jeszcze w tym roku w witrynach WordPressa pojawią się ulepszone wyniki LCP.
Więcej przeczytasz na oficjalnej stronie WordPressa na Githubie w zadaniu dotyczącym udoskonalenia lazy loading.
źródło: WordPress | GitHub | Search Engine Journal
Od 2005 roku zajmuję się komunikacją internetową i e-marketingiem, jestem pasjonatem urządzeń mobilnych oraz nowych technologii – i nie waham się ich używać.