Optymalizacja WordPress czyli wszelkie wtyczki to zło! Czyli zrób to sam

WordPress to ukochana platforma wszystkich, którzy pragną dzielić się słowem poprzez globalną wioskę. Mnogość pluginów, ogromna społeczność to jego główne zalety. Czy wszyscy jednak mają podobne zdanie do blogerów? Z pewnością nie. Tutaj na przeciw z pewnością wyjdą administratorzy i przedstawią także mnogość argumentów, pewnie wprost proporcjonalną do ilości wtyczek do tej popularnej platformy blogowej. Niestety, nieumiejętnie przygotowany WordPress może być utrapieniem dla serwera.

Na podstawie własnych doświadczeń, zaprezentuje Wam miejsca gdzie można zaoszczędzić serwera i wskaże jak beznadziejnie potrafią być zaprojektowane wtyczki, na podstawie własnego doświadczenia. Udało mi się na optymalizacji:

– Skrócić czas ładowania witryny z ponad 7 sekund do nieco ponad 3 sekund

– Zmniejszyć wielkość strony głównej z 859kB do 377kB

– Ograniczyć ilość zapytań do zewnętrznych serwerów z prawie 150 do 68.

Zacznijmy pod początku…

Zainteresowałem się sprawą po tym, kiedy zostałem poproszony o optymalizację WordPress ze względu na to, że ruch, który wygenerowali użytkownicy Wykopu mocno obciążył całą maszynę. Pierwsze czemu się przyjrzałem to przede wszystkim pluginy od portali społecznościowych, następnie w kolejności był analiza działania pluginów i wycięcie niepotrzebnych. Skończyłem na optymalizacji kodu.

Na początek sprawdźmy jak wygląda prędkość ładowania witryny. Akurat posłużę się zrzutami z narzędzia o nazwie Pingdom (równolegle korzystałem z Yslow i samego Firebug’a).

1. Wtyczki portali społecznościowych

Każdy rozsądny Webdeveloper zdaje sobie sprawę z tego jaką potęga są Social Media. W sposób bardzo łatwy można wygenerować na stronie dodatkowy ruch właśnie za ich pomocą, umieszczając na stronie wszelkie pluginy. Problem jednak polega na tym, że portali społecznościowych, godnych uwagi jest kilka i każdy posiada osobny plugin, który komunikuje się z zewnętrznym serwerem a to mocno wpływa na wydajność działania strony. Na blogu widniały pod każdym nagłówkiem przyciski od Google+ i Facebooka, więc dla każdego z 15 niusów było wykonywane połączenie – pomnożone przez 2 czyli już jest 30 zapytań dodatkowych. Oczywiście plugin G+ może ładować się asynchronicznie (czyli nie razem z ładowanie strony) lecz nie zmienia to postaci rzeczy, że coś na stronie cały czas się wczytuje. Istnym koszmarem był plugin od FB, potrafił się bardzo długo ładować – opóźniając prędkość ładowania witryny. Usunąłem je. 

Oczywiście pozbycie się ich było by strzałem w kolano. Postanowiłem jednak pozostawić je na podstronie pod wpisem.

Ilość zapytań spadła prawie o połowę. Zresztą wierniejsi czytelnicy z pewnością czytali wpis: Jak widgety od portali społecznościowych wpływają na prędkość ładowania witryny.

2. Wtyczki WordPress – wyeliminować niepotrzebne, pozostałe zoptymalizować

To główny winowajca, który wpływa na prędkość działania serwisu. Niestety większość pluginów do WordPressa w życiu nie poznała optymalizacji. Chcecie przykład? Po prawej stronie znajdują się Ostatnie wpisy, do dzisiaj działały jako wtyczka ale postanowiłem je przebudować na własną rękę a plugin usunąć. Dlaczego?

Poprzednia wtyczka nosiła nazwę Special Recent Posts i była jednym wielkim nieporozumieniem. Otóż, parsowała ona treść wpisu w poszukiwaniu obrazka – po czym po jego znalezieniu – pomniejszała go i umieszczała jako miniaturkę. Oparta była ona o bibliotekę TimThumb, przez którą na blogu miałem swego czasu włamanie. Poza tym wpływała ona znacznie na prędkość ładowania strony, dlatego że ostatnich niusów jest 15, więc do każdego musiała wykonać powyższą operację. Napisałem to co widzicie po prawej stronie na własny, prostszy sposób. Po co mam parsować całą treść, skoro wystarczy, że wyciągnę ikonę wpisu jednym zapytaniem? Ileż to pracy dla procesora mniej :-)

Uwaga! Uważajcie na wszelkiej maści wtyczki, które generują miniaturki przy użyciu biblioteki TimThumb, bo jeśli nie są one aktualne to włam macie pewny.

Oczywiście zdaję sobie sprawę, że nie każdy włada na tyle umiejętnościami z zakresu PHP by mógł sam edytować kod, poproście jednak zaprzyjaźnionego programistę ;-)

Większość wtyczek wykonuje operacji aż nadto co jest potrzebne. Przykład? Wtyczka Shortcodes, do umieszczania stylizowanych tabelek, przycisków itp. umieszcza kod JS w nagłówku do wszystkich 50 elementów, pomimo że używam tylko 2 komponentów.

3. Disqus czy inne zewnętrzne systemy komentarzy

Wbudowane komentarz w system WordPress to chyba najlepsze rozwiązanie. W przypadku zewnętrznych systemów komentarzy takich jak Disqus, Livefyre czy IntenseDebate odnotujecie ogromny wpływ ładowania strony, na której są one zamieszczone. Oczywiście także wczytują się one asynchronicznie, ale np. na moim blogu –  póki nie wczyta się Disqus, slajder z powiązanymi artykułami nie zadziała poprawnie. Tutaj niewiele da się zrobić, ale korzystamy z nich albo nie :-)

4. Zewnętrzne reklamy

Korzystam z AdServer marki OpenX. Niestety wywołanie bannerów zajmuje trochę czas i o dziwo potrafi się pięknie zamulić. Niestety prócz rezygnacji z tego narzędzia (które nie wchodzi w gre) nic innego nie przychodzi mi do głowy. Zauważyłem także pewną ciekawostkę przez Firebug, widget Adtaily wywołuje adres tradedoubler.com a także adres z domeną gazeta.pl. O ile ten drugi przechodzi bez problemów to ten pierwszy potrafi konkretnie wpłynąć na ładowanie strony. Niestety AdTaily zapytane o to, nie udzieliło żadnej odpowiedzi.

5. Optymalizacja plików CSS i JS 

Jakież było moje zdziwienie, kiedy okazało się że każdy plugin, korzystający np. z jQuery ładował tą samą bibliotekę za każdym razem. Efekt był taki, że kiedy mieliście 10 dodatków korzystających z niej to możecie mieć pewność, że 10 tych samych bibliotek jQuery było ładowanych w nagłówku. Po jaką cholerę? Bardzo podobnie sprawa się miała z CSS. O ile tutaj można było to wyjaśnić racjonalnie to i tak lepiej przenieść wszystkie style do jednej lokalizacji. Powywalałem niepotrzebne, zdublowane biblioteki.

6. Cache

To rozwiązanie to świetny pomysł. Przynajmniej nie zarżniemy bazy danych w przypadku kiedy będzie duży ruch. Niestety Super Cache, który u mnie funkcjonuje włączam tylko w wypadku wzmożonego ruchu, kiedy np. społeczność wykopu nawiedzi lub użytkownicy portalu Facebook zaczną klikać w jakiś zbłąkany link z bloga. Dlaczego? Niestety nie mam jeszcze pomysłu jak ograniczyć cache do wybranych elementów stron. Wtyczka z której korzystam chyba nie umożliwia takich cudów. Po co mi to? Bez tego niestety wszelkie  statystyki reklam wyświetlanych AdServerem zliczane są w sposób nieprawidłowy. Jeśli nie macie zewnętrznych narzędzi, które Cache mogło by zakłócić to nawet nie zwlekajcie z instalacją.

Efekt?

To co udało się osiągnąć zaskoczyło mnie niesamowicie :-) Oczywiście o ile odczujecie drobne przyspieszenie działania bloga to ja osobiście jeszcze z uporem maniaka będę starał się zbić tą wartość ;-)

Efekt z pewnością wart zachodu, hostingodawca się ucieszy ;-) a ja tym samym zabieram się za optymalizację podstron. Koniecznie przyjrzyjcie się waszym WordPressom bo z pewnością mogą one działać jeszcze lepiej niż dotychczas. W razie problemów, służę pomocą.