Jak jeszcze bardziej przyspieszyć WordPress?

Poprawa szybkości wczytywania strony Wordpress za pomocą wtyczki Lazysizes


img

Dowiesz się: Jak poprawić wynik Google Page Speed dla swojej strony WWW opartej na Wordpress dzięki zastosowaniu techniki lazyload dla zdjęć.

Dla systemu operacyjnego: Każdy

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.

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

1296 wyświetleń

Podziel się lub polub!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

5 + seven =



Zapraszamy do HitMe.pl


Twój obecny hosting Cię męczy i ...

…i nie masz czasu na ciągłe zmiany i szukanie nowych opcji? Wybierz naszą ofertę – znajdziesz u nas pakiet idealnie dopasowany do Twoich potrzeb, a jeśli go nie ma – chętnie przygotujemy indywidualne rozwiązanie, a wszystko to w sposób, który nie obciąży Cię finansowo.