Optymalizacja WordPressa. Twoja Strona Może Ładować Się w 0,5s.

Optymalizacja WordPressa to popularny temat. W sieci znajdziesz dziesiątki, jeśli nie setki artykułów o przyspieszaniu stron www. Jeden Problem. Strony, które o tym piszą zazwyczaj nie ładują się zbyt szybko.

Ups.

To mniej więcej tak jak dostawać porady o odchudzaniu od kogoś z nadwaga. Bądź wykłady o koszykówce od karła. Można, ale po co. (p.s. nie mam nic do karłów – #goTyrion).

Dzisiaj pokażę ci jak możesz przyśpieszyć swoją stronę. Efekty mojej optymalizacji szybkości znajdziesz poniżej.

Oczywiście są lepsze i gorsze wyniki, ale ogólnie wyniki są bardziej niż zadowalające. Około 500ms (pół sekundy), by załadować stronę, tzn. szybciej niż 98% stron w internecie.

Podzielę się z tobą moimi wnioskami i obserwacjami. Dzisiaj dowiesz się między innymi:

  • 4 podstawowe rzeczy, które musisz ogarnąć przed optymalizacją szybkości
  • 3 urządzenia, które pomogą ci w optymalizacji strony wordpress
  • Zobaczysz jak analizuję kilka stron oraz proponuję optymalizację.

Zanim zacznę. Mała dygresja. Będę szczery — jedyna rzecz na której powinienem się skupiać to pisanie tekstów.  A nie zabawa w optymizację strony, która ma niewielu odwiedzających. No ale cóż.

YOLO

yolo cat fail jumping

Bardzo chciałbym podzielić się z tobą co zrobiłem krok po kroku. Niestety. Byłem w transie. Amoku. Nie pomyślałem nawet żeby zrobić jednego screenshot’a. Dlatego będę opisywał proces optymizacji wordpressa z pamięci. Nie martw się! Pod koniec przeanalizuje kilka stron oraz dam rekomendacje. Tak abyś mógł zobaczyć proces na żywo.

Najważniejszy w Optymizacji Strony Jest Serwer

A przynajmniej baaardzo ważny. Najważniejsze jest aby znaleźć takiego dostawcę, którego serwery zapewnią nam niski czas odpowiedzi. Tzn. będą szybkie. Z dobrym sprzętem i przepustowością łącza.

Nie znam się aż tak na szczegółach technicznych. Ale znam się wystarczająco żeby wybrać serwer.

Jak można to sprawdzić? Ja sprawdzam odpowiedź serwera przy użyciu narzędzia: https://tools.pingdom.com/ . Tak przy okazji narzędzia tego będziemy używali także w dalszej części. Więc możesz sobie śmiało dodać do ulubionych.

Obsługa jest dosyć banalna:

Warto jest wykonać taki test od 2 do 3 razy aby wyniki były uśrednione. Oraz abyśmy mieli pewność, że serwowana jest zcache’owana wersja strony. (trochę więcej o tym później)

W każdym razie, załóżmy, że rozważasz użycie jednej z 3 firm hostingowych.

  1. kylos.pl
  2. zenbox.pl
  3. nazwa.pl

Każdą z nich wklepujesz do urządzenia pingdom. A następnie sprawdzasz następujące rzeczy:

Powinieneś zerknąć na to jak szybko ładuje się strona [1]. Oraz jaki jest jej rozmiar [3]. Numer [2] to ciekawostka ;).

Następnie przewin w dół i wybierz jeden dowolnie wybrany plik CSS / JS który jest wczytywany z domeny głównej. Najedź kursorem na pasek i sprawdź czas oczekiwania.

Im ten czas niższy tym lepiej.

Gdy porównasz wszystkie 3 firmy wybierzesz najszybszą. Bądź taką, która jest wystarczająco szybka oraz odpowiednio tania.

Osobiście nie wybrałem żadnej. A w zasadzie wybrałem serwer VPS w webh.pl. Najtańszy o najlepszych parametrach. Ale UWAGA: musisz być dosyć technicznie sprawny aby zdecydować się na ten ruch. Szczerze odradzam początkującym. Nie warto.

Ok. Teraz już wiesz jak wybrać przyzwoity hosting. 

Na chwilę obecną nie polecę ci żadnego  hostingu. Nie chcę ci dać ryby – wole podarować ci wędkę.

Zainstaluj Lazy Load – optymizacja ładowania zdjęć

Nim zaczniesz cokolwiek robić upewnij się, że masz zainstalowaną wtyczkę lazy load. Wtyczka ta optymizuje ładowanie zdjęć i obrazków na twojej stronie.

Dosłownie lazy load –> leniwe ładowanie. Tzn. obrazki które są poza ekranem nie zostaną wczytane dopóki odwiedzający nie przewinie na nie ekranu. Ogranicza to zużycie zasobów serwera i przyśpiesza ładowanie strony.

Uwierz mi – chcesz tą wtyczkę.

Lecimy dalej…

W3 Total Cache – WordPress na Sterydach

Co to Jest Cahce?
Wordpress to system dynamiczny. Tzn. treści zmieniają się tutaj dosyć szybko. Za każdym razem aby wyświetlić twoja stronę w przeglądarce WordPress musi połączyć się z serwerem, zrobić zapytana do bazy danych, wykonać wiele czynności.

Ale przecież twoja strona nie jest aż tak dynamiczna. Nawet przy 5 wpisach dziennie nie zmienia się tak często.

Tutaj własnie pojawia się cache. Jest to statyczna (nie dynamiczna) wersja twojej strony, zapisana na serwerze. Dzięki temu możesz pomijać niektóre odpytywania do serwera i znacznie przyspieszyć ładowanie strony.

W3 Total Cache, to plugin, który rozwiąże problem cache na twoim WordPressie. Plugin ten jest dosyć zaawansowany. Ilość dostępnych opcji potrafi przytłoczyć.

Nie lękaj się.

Sam korzystam jedynie z podstawowych funkcjonalności.

Konfiguracja w3 Total Cache

Przede wszystkim wejdź w „general settings”

Następnie zaznacz następujące checkboxy:

Page Cache – Włączone

Miny – Wyłączone

Database Cache – Włączone

Object Cache – Włączone

Browse Cache – Włączone

CDN – jeśli masz CDN to tak, jeśli nie to nie

Pozostałe niech zostaną wyłączone, bądź bez zmian.

Kilka słów o minify. Jest to bardzo przydatna funkcja, która zmniejsza rozmiar plików HTML, CSS, JS. Może ona również połączyć je w jeden plik i wiele innych ciekawych opcji.

Jest jeden problem. Nie udało mi się skonfigurować tej opcji tak aby wszystko działało. W większości przypadków moja strona się rozjeżdża. W innych przypadkach – ładuje się wiele wolniej. Wciąż eksperymentuje, jak znajdę odpowiednie rozwiązanie – dam Ci znać. Póki co u mnie opcja ta jest wyłączona.

Kilka slow o szablonie strony wordpress

Oczywiście, rodzaj twojego szablonu ma również duży wpływ na ładowanie się strony. Najlepiej jest używać stron prostych, ładnych i szybkich.

Powiem szczerze, że nie mam z tym większego problemu. Ponieważ korzystam z szablonów od mythemeshop. A te cechują się dobrą szybkością i są doskonale zoptymalizowane.

Ciężko jest tutaj polecić coś szczególnego. Jeśli twój szablon będzie wolny to prędzej czy później się o tym przekonasz.

Masz Solidne Fundamenty – Teraz Zajmiemy Się Szybkością Twojego WordPressa

Jak dotąd omówiliśmy absolutne minimum. Nawet jeśli masz już te 3 rzeczy

  • przyzwoity serwer
  • lazy load
  • w3 total cache
    • Opcjonalnie CDN
  • ok szablon

Nie oznacza to wcale, że twoja strona będzie ładowała się szybko. W wielu wypadkach różnica będzie dosyć mała.

Dlatego żeby wiedzieć jak zoptymalizować wordpressa musisz wiedzieć co najbardziej spowalniają twoją stronę.

No właśnie wiesz co spowalnia twojego wordpressa?

Przede wszystkim są to najróżniejsze pluginy/wtyczki, szczególnie te które ładują dodatkowe pliki CSS bądź skrypty JS.

Obrazki – jak już wspomniałem nadmierna ilość obrazków potrafi mieć tragiczny wpływ na szybkość ładowania strony.

Linkowanie do plików zewnętrznych (z innych domen). Gdy linkujesz do wielu plików z nie swojego serwera to przeglądarka musi nawiązać nowe połączenie, co zabiera sporo czasu. Gdy zewnętrzny serwer nie jest zoptymalizowany – to dodatkowo spowalnia to wczytywanie twojej strony.

Na czym polega optymalizacja szybkości strony wordpress

W skrócie polega to na szukaniu wąskiego gardła i eliminowaniu go. To znaczy – szukamy mało wydajnych elementów na naszej stronie, a następnie próbujemy je ulepszyć bądź wyeliminować.

Proces ten powtarzamy aż do momentu gdy nasza strona lata szybciutko jak jaskółka.

Oczywiście, brzmi to prosto i wygląda pięknie. Niekiedy niestety nie jest to takie proste. A rzeczy mogą się szybo okazać dosyć mocno skomplikowane.

Pracę mogą ułatwić ci najróżniejsze narzędzia. Omówię te z których ja korzystam.

Optymalizacja WordPressa – Przydatne Narzędzia

Najczęściej używanym przeze mnie narzędziem jest Pingdom. Jest to narzędzie ułatwiające badanie prędkości ładowania strony.

Gdy korzystasz z Pingdom – upewnij się, że wybierasz lokalizację najbliższą twojemu serwerowi.  W tym wypadki będzie to Sztokholm.

Sam rezultat, który otrzymasz wygląda mniej więcej tak:

Tzn, pingdom bada szybkość ładowania twojej strony, pokazując ci jaki wpływ na szybkość ma każdy element twojej strony. Dzięki temu możesz znaleźć najwolniej ładujące się elementy i coś z tym zrobić.

Narzędzie to pokazuje także kilka innych, zbiorczych danych na temat szybkości, oraz proponuje najróżniejsze ulepszenia (gdzie to stosowne).

Wczytując się w dostępne informacje możesz łatwo zlokalizować potencjalne wąskie gardła i przyśpieszyć swoją stronę:

Omówię jeszcze jak wygląda żądanie pobrania pojedyńczego pliku. Możesz uzyskać tę informację najeżdżając kursorem myszy na wybrany wykres.

Widzisz tutaj następujące elementy:

  • DNS – to czas jaki spędzony jest na znalezieniu adresu IP który podłączony jest do twojej domeny
  • Connect – to czas jaki „przeglądarka” spędziła na nawiązaniu połączenia z serwerem
  • Wait – to czas oczekiwania na odpowiedź (zależy od wydajności twojego serwera, rodzaju treści jakie są przesyłane oraz odległości „przeglądarki” do serwera)
  • Receive  -to czas przesłania danych z powrotem do przeglądarki

Alternatywne narzędzia które dadzą nam podobne wyniki:

Dodam jeszcze jedno słowo o google speed isights. Otóż – sprawdzam wyniki tego testu ale im w 100% nie ufam. Zdarzyło się, że zastosowałem się do ich wskazówek i okazało się, że strona ładuje się sporo wolniej.

Niektóre z podpowiedzi są tam jak najbardziej na miejscu. Jednak do niektórych należy podejść z odrobiną rezerwy.

Ale jak już mówiłem – nie jestem ekspertem.

Wystarczy gadania. Weźmy się za przykłady.

Analiza Szybkości Strony http://jakoszczedzacpieniadze.pl/

Jeśli nie słyszałeś o Michale Szafrańskim i jego stronie http://jakoszczedzacpieniadze.pl/ to jest bardzo duża szansa, że przez ostatnie kilka lat żyłeś gdzieś pod kamieniem.

Ja dzisiaj chcę przyjrzeć się jak wygląda wydajność i szybkość jego strony.

Przyznam szczerze, że strona ładuje się bardzo szybko. 1.4MB poniżej sekundy.

Bardzo przyzwoita konfiguracja.

Problemy w Zakładce „Performance Isights”

Niemniej jednak, jest tutaj na pewno miejsce na polepszenie i poprawę.

Na obrazku powyżej widzisz zalecenie „Parallelize downloads across hostnames”. Pojawia się ono ponieważ wiele plików jest dostarczane do przeglądarki z jednej domeny. Każda przeglądarka (np. Firefox czy Chrome) ma określony limit jednoczesnych połączeń. Dlatego jeśli masz wiele elementów (plików, obrazków, skryptów) ładowanych z jednej domeny kolejka szybko się zapcha.

Rozwiązań jest kilka:

  • ograniczyć ilość plików ładowanych
  • Zainstalować Lazy Load (obrazki spoza widocznego ekranu będą ładować się później)
  • Zainstalować CDN z kilkoma sub-domenami

Ja polecałbym przede wszystkim skorzystać z Lazy Load oraz rozważyć CDN w przypadku strony Michała Sz.

Statystyki Ogólne

Idę dalej, szybkie spojrzenie na ogólne statystki zanim przyjrzymy się poszczególnym zasobom.

Jak widzisz wiele kilobajtów jest dostarczanych z domen powiązanych z plugin-em summome.

Jeśli nie słyszałeś summome to darmowy/płatny plugin, który pomaga właścicielom stron pozyskiwać e-maile swoich użytkowników. W skrócie możesz dzięki nim stworzyć najróżniejsze popupy i inne tego typu bajery.

Wygląda jednak na to, że plugin ten opóźnia nieco ładowanie się strony:

Bez tego wygląda, że strona wczytała by się w jakieś 0.6s. Oczywiście każdy z nas chce budować listę mailingową. Nie proponuję tutaj, żeby autor tego zaprzestał. Jednakże jednym z możliwych rozwiązań może być zastosowanie innego rozszerzenia do przechwytywania e-maili. Ja używam Layered Popups, wydaje mi się, że wtyczka ta nieco mniej obciąża moją stronę.

Obrazki – ładowanie odpowiedniego rozmiaru

Kolejny element, który rzuca się w oczy to obrazki. Michał mógłby zoptymalizować je nieco bardziej.  Mówię tutaj o wczytywaniu obrazków w ich wyświetlanym rozmiarze. Zobacz sam:

A obrazek, który jest wczytywany przez przeglądarkę ma wielkość 1050 x 500 (około). Oznacza to, że wczytywany jest 2 razy większy obrazek niż jest to potrzebne.

Stare Dobre Okienko FB – opóźnia twoją stronę

Na koniec dodam jeszcze jedną rzecz – jest to okienko facebook’a. Które umieszczone jest w sidebarze po prawej stronie:

Ma ono nie mały wpływ na szybkość ładowania się strony.

Wygląda to cool, jednakże można je zastąpić statycznym obrazkiem, lub przyciskiem odsyłającym do FB, który nie opóźniał by tak bardzo naszej strony.

To by było na tyle jeśli chodzi o stronę Jak oszczędzać pieniądze. Podsumowując:

  • strona wczytuje się bardzo szybko bez żadnych zmian
  • Dobrze by było zainstalować wtyczkę Lazy Load
  • Dobrze by było rozważyć zastosowanie CDN
  • Dobrze by było rozważyć zmianę SummoMe na coś innego
  • Rozważyć wyrzucenie okienka FB

Analiza Szybkości Ładowania Strony http://biznesoweinfo.pl/

Biznesowe info to blog z najróżniejszymi informacjami dla freelancerów oraz osób, które chciałyby prowadzić swój biznes w internecie. Zobaczmy zatem jak ładuje się nasza strona:

Jak widzisz strona jest dosyć ciężka. Przez to własnie dosyć wolno się ładuje. Czas ładowania waha się od 2-5 sekund.

Statystyki ogólne

Zobaczmy zatem jak wygląda obraz z lotu ptaka :). Które domeny i jakie zasoby wczytują się najdłużej:

Jak widzisz dzieje się tutaj troszkę. Przede wszystkim w oczy rzuca się fakt, że strona ma jakieś 2.2 MB obrazków. Sporo.

Dodatkowo wczytywana jest spora liczba czcionek (około 0.5mb) no i jeszcze inne bajery.

Przyjrzyjmy się temu bliżej.

Leverage Page Caching – wydłużyć okres cache dla niektórych elementów

Wygląda na to, że przede wszystkim Agnieszka z BiznesoweInfo powinna wydłużyć czas cache’owania dla niektórych elementów.

Aby rozwiązać ten problem w pliku .htaccess wystarczy umieścić następujące linijki:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Powinno wystarczyć.

Kontynuujemy..

Obrazki – Dużo Obrazków

Jak wspomniałem strona ładuje wiele obrazków. Nie będę oryginalny. Polecę to co zawsze – Plugin Lazy Load.

Tutaj bym zaczął i zobaczył czy będzie miał on widoczny wpływ na szybkość ładowania strony. Jeśli tak to dobrze.

Jeśli tak, ale wciąż jest ich dużo pomyślał bym jak można zastąpić obrazki czym innym tak aby przyśpieszyć ładowanie strony.

SumoMe – Kolejny Raz Spowalnia Ładowanie

Nie jest to jednak tak drastyczne spowolnienie jak w przypadku strony JakOszczędzaćPieniądze. Ale mino wszytko – wygląda, że plugin opóźnia ładowanie strony odrobinę. W tym wypadku jeśli nie znalazłbym innego paska udostępniania to prawdopodobnie zostawiłbym tą wtyczkę.

Kolejny element to widżet GetResponse

Następny element, który kosztuje cenny czas ładowania to formularz GetResponse – ten do przechwytywania e-maili użytkowników. Znajduje się on po prawej stronie w kolumnie.

O ten:

Jako, że cały ten element jest wczytywany ze strony GetResponse to powoduje on spore opóźnienia w ładowaniu strony.

Poniżej możemy zobaczyć wszystkie elementy, które ładują się razem z tym formularzem.

Rozwiązaniem może być zastosowanie kodu formularza z zainstalowanego przez nas skryptu. Trzeba tutaj przetestować kilka opcji.

Ja zacząłbym od Layered Popups. Plug-inie, który już wcześniej omawiałem. Myślę, że jego zastosowanie (z odpowiednią konfiguracją) powinno skrócić czas ładowania o połowę. Jednak trzeba tutaj poeksperymentować

Ładowane Czcionki

Wygląda na to, że ładowane jest sporo czcionek. Nie potrafię powiedzieć który plugin wykorzystuje tyle. Może być to również sprawka samego szablonu.

Niemniej jednak, po bliższym przyjrzeniu się widzę, że nie opóźniają one strony aż tak bardzo:

Dlatego, jeśli nie wiemy, co ładuje ich aż tyle. To można odpuścić i iść dalej.

Lecimy Dalej…

Widget Shoplo

Mówię o tej promocji książki po prawej stronie:

Będę szczery, obrazek jest dosyć duży (0.5mb) i wyświetlany jest skalowalny – to znaczy sam rozmiar oryginalnego może być mniejszy. Popracował bym także nad samym rozmiarem. Myślę że .JPG zajmowałby sporo mniej miejsca.

Samo wczytywanie nie zajmuje najwięcej czasu :).

Na koniec – Okienko Facebook’a

Jak zawsze. Okienko facebooka – jest jednym z elementów opóźniających ładowanie strony.

Sam nie wiem – każdy z osobna musi zadać sobie pytanie, czy nasze polubienia są efektem widżetu czy może czegoś innego.

W każdym bądź razie Okienko FB ma wpływ na nasze polubienia.

Ja rozwiązałem to tak, że na stronie głównej nie ma żadnych gadżetów zaś na stronach wpisów są różne przyciski udostępniania itp. I one w jakiś sposób opóźniają moją stronę.

Podsumowanie dla Biznesowe Info

Podsumowując – w kolejności od najważniejszych do najmniej istotnch:

  • Obrazki + Lazy Load – zainstalował bym WP Smush w celu optymizacji i kompresji obrazków. Oraz Lazy Load aby przyśpieszyć działanie strony. Myślę, że to da nam największe rezultaty
  • Obrazek z widżetu Shoplo – tutaj przede wszytkim zmieniłbym obrazek na JPG. Oraz zadbałbym, żeby rozmiar orginału był taki sam jak ten wyświetlany
  • Ładowanie formularza GetResponse – poeksperymentowałbym tutaj z innymi wtyczkami i pluginami
  • Facebook – wurzuciłbym ze strony głównej
  • Czcionki – gdy zostało by mi czasu – pomyślałbym nad tym co ładuje tyle czcionek

Na zakończenie

Jak widzisz optymalizacja WordPress’a to dosyć szeroki temat. Mamy tutaj do czynienia z nachodzącymi na siebie elementami.

Możemy badać serwer i czas jego odpowiedzi. Czy też możemy sprawdzać jakie elementy instalacji naszego WordPress’a opóźniają ładowanie strony.

Istnieje kilka wspólnych elementów które już na pewno udało ci się wychwycić. Są to

  • Obrazki – optymalizacja, kompresja i używanie plug-inu Lazy Load
  • Zasoby ładowane z innych serwerów – doskonały przykład to SumoMe
  • Używanie okienka Facebook

Mam nadzieję, że wpis ten zainteresował cię tematem. A może nawet skłonił do polepszenia prędkości twojej strony.

Jeśli masz jakieś pytania -daj znać w komentarzach.

W niedziele postaram się dać obiecaną analizę SEO stron z pożyczkami i lokatami. Miej oczy szeroko otwarte.

 

Hej! Zapisz się na mój newsletter
I razem ze mną odkrywaj sekrety zarabiania w internecie!
Zero Spamu. Nie wysylam spamu i nie udostepniam twojego adresu innym

8 komentarzy

  1. Grzegorz Deuter Sierpień 10, 2016
    • Michal Sierpień 13, 2016
    • Michal Sierpień 14, 2016
      • Grzegorz Deuter Sierpień 20, 2016
      • Grzegorz Deuter Sierpień 20, 2016
        • Michal Sierpień 20, 2016
  2. Hubert Oleszczuk Sierpień 10, 2016
    • Michal Sierpień 11, 2016