Jak jeszcze bardziej przyspieszyć WordPress?

Czas czytania

5 min.

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ą

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.

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

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

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

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.