Jak jeszcze bardziej przyspieszyć WordPress?

Obrazek dla Jak jeszcze bardziej przyspieszyć WordPress?

Chcesz aby Twój WordPress działał jeszcze szybciej?

Opisywaliśmy już sposób na przyspieszenie strony na WordPress w poradniku Przyspiesz swoją stronę na WordPress

Przyspieszenie strony na WordPress w tym wypadku polegało na optymalizacji zasobów naszej strony tj. skryptów JS i arkuszy styli CSS. Jest wiele wtyczek, umożliwiających przeprowadzenie takiej optymalizacji – my wybraliśmy najlżejszą i skuteczną w działaniu – niezawodną wtyczkę Fast Velocity Minify. Jeśli jeszcze nie wdrożyłeś podobnej optymalizacji WordPress – zachęcamy do przeczytania artykułu, który opisuje Jak przyspieszyć swoją stronę na WordPress. Dzięki temu działaniu uzyskamy wyraźnie lepszą ocenę naszej strony w Google Page Speed.

Zobacz artykuł

Tym razem jednak zajmiemy się optymalizacją zdjęć na naszym blogu na WordPress.

Lazyload zdjęć w WP

Jak pewnie zauważyliście, na niektórych stronach zdjęcia/obrazy pojawiają się dopiero podczas scrollowania w dół artykułów, postów na blogu. Nie jest potrzebne ładowanie wszystkich zdjęć na samym początku, istnieje uzasadnienie że nie są one na start potrzebne. Dzięki technice 'leniwego ładowania’, wczytujemy je z opóźnieniem, a co za tym idzie nasza strona na WordPress wczyta się odwiedzającemu szybciej. Ta technika nazywa się lazyload (pl. opóźnione ładowanie).

Obecne trendy dobrego web-designu oczekują iż każdy dev będzie wykorzystywał tą technikę, którą wykorzystuje nawet YouTube – pewnie wszyscy z Was kojarzą szare prostokąty zamiast zdjęć zaraz po wejściu na YT?  Tak, to właśnie wykorzystanie lazyload.

Jeśli chodzi o WordPress istnieje wiele wtyczek, które są dedykowane rozwiązaniu lazyload, np. Lazy Load – Optimize Images od WPRocket czy A3 LazyLoad , które oprócz opisywanej przez nas funkcjonalności posiadają też inne rozwiązania optymalizujące WordPress – tu decyzja należy do Was. Niemniej jednak na potrzeby tego artykułu użyjemy pierwotnej, prostej i efektywnej wtyczki LazySizes Patrick’a Sletvold’a bazującą na fenomenalnej wtyczce jQuery autorstwa aFarkas o tej samej nazwie.

Lazysizes

Wtyczkę pobieramy stąd: Pobierz

lub wyszukujemy frazę ’lazysizes’ w panelu wtyczek WordPress->Wtyczki->Dodaj nową

lazysizes wordpress obrazki

Instalujemy, i nie aktywujemy!

Jeszcze nie.
Najpierw chcemy dokonać pomiaru.

Sprawdzamy wtyczkę.

Zanim jednak aktywujemy wtyczkę, warto wykonać pomiar działania zanim zostanie aktywowana optymalizacja lazyload w WordPress.
W tym celu posłużymy się przeglądarką Chrome i jej Narzędziami dla Developerów (DevTools).

Uwaga: wtyczka lazysizes musi być wyłączona. Ponieważ wtyczka po aktywacji, z miejsca rozpoczyna swoje działanie.

Wchodzimy na naszego bloga lub stronę WordPress i przechodzimy do podstrony, która zawiera zdjęcia/obrazy załadowane poprzez Edytor WordPress.

obrazki wordpress lazyload

Następnie wciskamy klawisz F12.
Otworzą się narzędzia DevTools.

Przechodzimy do zakładki 'Network’ (Sieć).
Podświetlamy zakładkę Img (filtrujemy zdjęcia)
reload strony obrazki

Odświeżamy stronę naciskając klawisze Ctrl+R (lub F5)

lazysizes.js przyspiesz ładowanie obrazków

Jak widzimy zostały pobrane wszystkie zdjęcia znajdujące się na podstronie.

Niepotrzebnie przesłaliśmy użytkownikowi całe 1500kB danych.

Aktywacja wtyczki

W tym momencie przechodzimy do Wtyczek w panelu WordPress i aktywujemy wtyczkę lazysizes.

Powtarzamy test.
Wchodzimy na tę samą podstronę/wpis zawierającą zdjęcia i uruchamiamy DevTools. *możemy również nie zamykać okna DevTools z pierwszego testu – jednak musimy wtedy podstronę odświeżyć (Ctrl + R)
Wykonujemy te same kroki.

lazysizes.js przyspieszenie wordpress

Zaoszczędziliśmy 600kB!

Załadowały się pierwsze 3 zdjęcia.
Reszta czeka na interakcje użytkownika.

Skrolujmy stronę w dół i obserwujmy jak pozostałe zdjęcia umieszczone na podstronie zostają doładowywane.

Opcje wtyczki

Teraz możemy włączyć dodatkowe opcje wtyczki (screen poniżej).
Ustawienia->Lazysizes

Jak jeszcze bardziej przyspieszyć WordPress lazysizes

Load minimized versions of javascript and css files.
Załadowanie wtyczki w zoptyamlizowanych skryptach CSS/JS

Load scripts in the footer.
Załadowanie wtyczki w stopce.

Lazy load YouTube and Vimeo videos, iframes, audio, etc.
Lazysizes zostanie użyte również dla osadzonych filmów z YouTube, Vimeo, ramek czy audio.

Lazy load post thumbnails.
Lazysizes opóźni również ładowanie miniaturek postów.

Info: Wtyczkę możemy bezpiecznie deaktywować.

Życzymy wielu megabajtów oszczędzonych danych w WordPress!

Jak jeszcze przyspieszyć?

Przyspiesz swoje strony – zdobądź Certyfikat SSL i włącz HTTP/2!!
Czytaj więcej

Podoba Ci się? 3
Miniaturka Adam
Adam

Idealistyczny DevOps/Backend developer po służbie w formacji I-szej linii wsparcia, od 9 lat sercem związany z HitMe, przez którego teraz na blogu pojawia się tyle artykułów poświęconych platformie WordPress ;-).