Jak turbo-doładować swojego WordPressa?

Ostatnimi dniami sporo działo się na moich stronach. Po pierwsze Projekt Buffalo odrobinę marudził i w ubiegły weekend dostałem e-mail od administracji, że obciążenie na serwerze jest dosyć spore a sama strona została w efekcie wyłączona. W skrócie – lekka tragedia.

Jak widzicie przyczyną problemu był jeden z zainstalowanych przeze mnie skryptów, który dosyć ładnie się zapętlał i w efekcie powodował obciążenie serwera, które w dalszym rezultacie powodowało do wykorzystania wszystkich zasobów i ostateczne wyłączenie strony przez administratora. Kolejnym problemem było niepoprawne wywołanie zadania CRON dla kolejnego ze skryptów. Do samych adminów nie mam żalu – robili, co do nich należy, ale tej pamiętnej niedzieli liczba odwiedzin na stronie wyniosła jedynie 30 – myślę, że o jakieś 150 mniej porównując do innych dni. Nie ciekawe nie sądzisz?

Przyśpieszyć bloga – lekcja pierwsza.

Wydaje mi się, że skrypt, który powodował całe to zamieszanie był Better WP Seciurity. Skrypt ten ma za zadanie zwiększać bezpieczeństwo wordpressów, dzięki niemu możesz zmienić login administratora, edytować przedrostek bazy danych, usunąć informację o wersji WP ze znaczników META i jeszcze wiele innych przydatnych rzeczy. Jedną z nich jest opcja logowania zmian w plikach na instalacji WP. Jak się okazało proces mega zasobo-żerny. Dodatkowo, w między czasie wyszło uaktualnienie samego silnika WP, to spowodowało, że każdy najmniejszy pliczek na moim serwerze został zmieniony, a samo logowanie zmian dosłownie położyło stronę.

Poniżej widać jak wyglądało to z poziomu serwera, przedstawiam wykres dostępny z menu Resource Usage Overwiev – widoczny skok w wykorzystaniu zasobów oraz liczbie napotkanych błędów.

obciazenie serwera

Obciążenie Serwera

Inne skrypty, które mogą znacznie spowalniać działanie Twoich stron to wszelkiego rodzaju statystyki odwiedzin w szczególności, gdy twoje strony mają już odrobinę odwiedzających, miej to na uwadze, gdy będziesz instalował kolejny tego typu skrypt. Jeśli znasz inne skrypty pochłaniające zasoby serwera daj mi znać.

Optymizacja obrazków –Smush.It

Kolejnym bardzo istotnym zadaniem w celu przyśpieszenia strony jest optymalizacja obrazków, a dokładniej kompresja zbyt dużych obrazów w celu przyśpieszenia czasu ładowania się strony. Ma to dodatkowo kolejny pozytyw – ilość pobieranych przez użytkowników danych zmniejszy się, zmniejszając tym samym Twoje limity danych na serwerze. W celu masowej kompresji obrazków na mojej stronie użyłem Smush.IT. Program jest banalny w działaniu, wystarczy w panelu administratora wejść w zakładkę mediów i wybrać opcję Bulk Smush.It. Skrypt automatycznie przeleci przez wszystkie twoje obrazki i skompresuje je odpowiednio (nie tracąc przy tym, na jakości). Niektóre z obrazków mogą zostać zmniejszone nawet o 15%!

Smush.It

Smush.It

 

Zbadaj swoją stronę w Google Speed Insights.

Kolejną rzeczą, za którą się zabrałem było zbadanie działania swojej strony w urządzeniu Google Speed Insights. Jest to naprawdę bardzo przydatne narzędzie, które pomoże ci zlokalizować problematyczne zagadnienia negatywnie wpływające na prędkość twojej strony internetowej. Tutaj tylko napomknę, że google w swoich algorytmach kładzie coraz większy nacisk na User Experience (UX), czyli doświadczenia użytkownika z samej interakcji ze stroną internetową. Mówimy tutaj właśnie o szybkości ładowania, rozmieszczeniu i widoczności poszczególnych elementów i temu podobnych.

Po wejściu na stronę Google Speed Insights, należy wpisać adres badanej przez nas strony i poczekać, aż skrypty google przeanalizują nasz serwis. Początkowo, po przemieleniu mojej strony otrzymałem 60 punktów na 100 dla komputerów stacjonarnych oraz jakieś 50 dla komórek. No i muszę szczerze przyznać, że tak było na komórkach moja strona ładowała się okrutnie wolno. No ale do rzeczy, jeśli chodzi o same komentarze google to po krótce opiszę te najbardziej istotne oraz te najprostsze do wdrożenia.

Minify JavaScript, Minify CSS, Minify HTML

Tutaj chodzi o zmniejszenie plików HTML, JS, CSS poprzez usunięcie zbędnych spacji, pustych linii czy tabulatorów. Niektóre pliki mogą być pomniejszone nawet o 30%. Cały trik polega na tym, że spacja (pomimo, że nie widoczna) w języku komputerowym jest reprezentowana przez odpowiednią ilość bajtów (w zależności od kodowania), dlatego też nadmierna ilość spacji czy nowych linii może niepotrzebnie zwiększyć objętość plików.

Optimize images

O tym wspomniałem podczas opisywania Smush.It. Najzwyczajniej w świecie zainstaluj ten dodatek i ciesz się szybszym przeglądaniem J.

Enable compression

Włączenie kompresowania plików oznacza to, że każdy plik, który będzie wysłany do przeglądarki użytkownika zostanie uprzednio spakowany. W znacznym stopniu pozwala to przyśpieszyć działanie i szybkość pobierania stron przez odbiorów końcowych. Teraz nie będę opisywał detali, jak to działa, gdyż sam się na tym nie znam, ale podam ci gotowe rozwiązanie, które pomogło mi włączyć kompresję plików.

  1. Po pierwsze wejdź na swój serwer FTP (ja korzystam z FileZilla)
  2. Następnie wejdź do katalogu głównego z twoją stroną www.
  3. Odnajdź plik .htaccess i go otwórz od edycji
  4. W samym pliku umieść poniższy kod:

    # Kompresuje text, HTML, JavaScript, CSS, and XML
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    # Usówa błedy przeglądarek:
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent

Komenda ta będzie działała z pewnością na serwerach działających na apache. Jeśli twój serwer działa pod innym oprogramowaniem, poszukaj w Internecie innego sposobu (kompresja za pomocą gzip)

Leverage browser caching

W tej opcji chodzi o wykorzystanie cache przeglądarki podczas przeglądania naszych stron. Najwięcej benefitów uzyskamy, gdy użytkownik odwiedza nasze strony więcej niż raz. Gdyż niektóre statyczne elementy takie jak obrazki, pliki CSS itp. Będą zachowane w pamięci przeglądarki. Jednak w przypadki stron z wieloma obrazkami i wieloma stronami uzyskamy częściowe zalety – gdyż część nagłówków oraz małych plików JS, CSS, XML itp. Będzie już w pamięci przeglądarki po przejściu ze strony głównej na podstrony serwisu. Aby uaktywnić tę opcje należy w pliku .htaccess umieścić kod:

##cache
Header unset Pragma
FileETag None
Header unset ETag
<FilesMatch „\.(ico|jpg|jpeg|png|gif|js|css|swf|pdf|flv|mp3)$”>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault „access plus 14 days”
Header set Cache-Control „public”
</IfModule>

</FilesMatch>
<FilesMatch „\.(html|htm|xml|txt|xsl)$”>
Header set Cache-Control „max-age=7200, must-revalidate”
</FilesMatch>

Kod powyżej informuje przeglądarkę, że dla plików graficznych, MP3, CSS, PDF powinna przechowywać lokalną kopię na dysku przez 14 dni. Natomiast dla plików tekstowych i HTML przez 7200 sekund (2h).

Eliminate external render-blocking Javascript and CSS in above-the-fold content

Opcja ta polega na wyeliminowaniu pobierania i przetwarzania skryptów JS oraz plików CSS na samym początku ładowania strony. Jest kilka sposobów na osiągnięcie celu, jednak będąc szczerym nie zastosowałem żadnego z nich – zbyt wiele zachodu, w nieokreślonej przyszłości postaram się zbadać dostępne opcje w tym temacie, jednak z tego, co widzę jest to ogrom pracy.

Ostateczne przyśpieszenie strony – jak mi poszło.

Zatem podsumowując, poszło mi nie najgorzej – udało mi się podnieść wynik w GSI do ponad 90/100 dla komputerów stacjonarnych – bez żadnego krytycznego problemu. Oraz na 80/100 dla urządzeń mobilnych – z jednym krytycznym problemem (Eliminate external render-blocking Javascript and CSS in above-the-fold content). Całkiem nieźle. Dodatkowo strona wczytuje się wiele szybciej jest bardzo duża wizualna poprawa. Poza samym wynikiem w google widzę sporą poprawę dla samych wyników zużycia pasma.

Jak widzisz od chwili zastosowania ulepszeń liczba pobieranych dziennie danych znacząco spadła. Z około 152MB przy 157 wizytach do 85MB przy 172 wizytach, jednym słowem zużywam 2 razy mniej pasma przy zbliżonej liczbie wizyt. Mam nadzieję, że google doceni takie wspaniałe usprawnienie UX.

Na zakończenie napiszę jeszcze o wtyczce, która teoretycznie robi to wszystko za Ciebie, a mianowicie W3-Total-Cache. Naturalnie była to pierwsza rzecz, jaką zainstalowałem, jednak muszę być tutaj szczery strasznie mi się nie spodobała. Działa ona bardzo mocno poza moim wzrokiem, zmienia niektóre pliki i wykonuje różne inne operacje. Na sam koniec gdy już ją skonfigurowałem, okazało się że połowa styli CSS nie działa i kilka skryptów JS, dlatego jeśli chcesz to możesz ją wypróbować, ale ja zalecałbym Ci manualne zmiany, które opisałem powyżej.

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

9 komentarzy

  1. Wild Dog Sierpień 10, 2013
    • Michal Sierpień 11, 2013
  2. Wild Dog Sierpień 11, 2013
  3. Wild Dog Sierpień 11, 2013
  4. Wild Dog Sierpień 11, 2013
    • Michal Sierpień 11, 2013
  5. Wild Dog Sierpień 11, 2013
  6. Zarabianie przez studenta Sierpień 15, 2013