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.
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.
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
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