Optymalizacja bloga na WordPressie

Optymalizacja bloga postawionego na WordPressie, to nie do końca temat, o którym powinienem tutaj pisać. Z drugiej strony dostaję czasami różne pytania dotyczące blogowania. A ponieważ jestem świeżo po solidnej optymalizacji bloga, to postanowiłem napisać ten poradnik. Po pierwsze muszę się jednak wytłumaczyć, co rozumiem przez pojęcie „optymalizacja”. Proces ten przede wszystkim podzieliłbym na dwie części: optymalizacja witryny pod względem szybkości oraz ze względu na SEO. Te dwie części są zresztą ze sobą dość mocno połączone. Z jednej strony Google bierze pod uwagę szybkość strony i ma to wpływ na wyniki w wyszukiwarce. Z drugiej strony, szybkość witryny jest kluczowa dla użytkownika. Jeśli blog wczytuje się wolno, to po prostu wiele osób szybko zamknie zakładkę i zacznie szukać informacji gdzie indziej.

Niestety optymalizacja bloga może okazać się procesem niezwykle pracochłonnym. Zwłaszcza jeżeli wcześniej zupełnie lekceważyło się tę problematykę. Mi udało się przez kilka tygodni zmniejszyć czas wczytywania tego bloga o połowę ale kosztowało mnie to dziesiątki godzin pracy.

Optymalizację zacząłem w marcu, skutek wszystkich działań (na które poświęciłem dziesiątki godzin), to spadek czasu wczytywania bloga mniej więcej o połowę (z 12,33s do 6,51s).

Optymalizacja bloga pod względem prędkości

Zanim zaczniemy coś robić, potrzebujemy kilka narzędzi do monitorowania prędkości witryny. Pierwszym i podstawowym jest Google Pagespeed Insights. Dwa inne, z których warto korzystać to Pingdom Website Speed Test oraz GT Metrix. Mówiąc bardzo ogólnie: wszelkie działania optymalizacyjne będą się sprowadzać do polepszenia wyników, które podają te narzędzia. W pierwszej kolejności powinniśmy się zająć przede wszystkim stroną główną. Zresztą dość męczące byłoby skanowanie tymi urządzeniami każdej podstrony. Aczkolwiek w przypadku Google Pagespeed Insights istnieje pewien trick, który pozwala przeskanować każdą podstronę. Mam na myśli zastosowanie wtyczki Google Pagespeed Insights for WordPress.

Wtyczka Google Pagespeed Insights for WordPress pozwala przeskanować wszystkie podstrony

Co prawda samo zainstalowanie tej wtyczki nie pozwala jeszcze przeskanować całej witryny, bo trzeba jeszcze skonfigurować API Google. Nie ma jednak powodów do obaw – na stronie wtyczki jest pełna instrukcja jak to zrobić. Później trzeba się uzbroić w cierpliwość, ponieważ skanowanie całej witryny zajmuje zazwyczaj trochę czasu.

Innymi słowy, polecam zacząć optymalizację bloga od zainstalowania i skonfigurowania wtyczki. Po przeskanowaniu wszystkich podstron najlepiej zapisać średni wynik Pagespeed. Dzięki temu będzie można sprawdzić później (robiąc kolejny skan) jak nasze działania wpłynęły na szybkość witryny. Poza tym po przeskanowaniu całej witryny wyniki będą widoczne z zakładce „wpisy” w panelu WordPressa. Oczywiście będzie można wtedy uporządkować wpisy w zależności od wyniku. Innymi słowy łatwo dowiemy się, które wpisy wypadają najgorzej z punktu widzenia Pagespeed. Je potraktujemy priorytetowo w procesie optymalizacji.

Optymalizacja obrazów na WordPressie

Zazwyczaj nieskompresowane i nieprzeskalowane obrazy mają największy wpływ na to, że strona pod WordPressem działa wolno. Pierwszy protip jest następujący: o ile to możliwe korzystaj z plików *.jpg (a nie np. *.png). Ja długo popełniałem ten błąd i stosowałem wszędzie pliki *.png (masę czasu zajęło mi poprawianie tego i jeszcze w 100% nie skończyłem). Jednak samo zapisanie pliku w formacie *.jpg to nie wszystko – nawet jeśli korzystacie z Photoshopa i dacie „zapisz dla witryny internetowej”, to tak naprawdę grafika nie zostanie w pełni zoptymalizowana.

Istnieje dość sporo wtyczek pod WordPressa, które służą do kompresji grafiki. Ja korzystam z TinyPNG. Nie dajcie się zwieść nazwie, to narzędzie służy również do kompresji plików *.jpg. Po zainstalowaniu wtyczki (dostępnej na stronie TinyPNG) będziecie mogli zoptymalizować wszystkie stare grafiki z poziomu Biblioteki Medioów w panelu WordPressa. Niestety jest tu pewien darmowy limit – 500 grafik miesięcznie. Z drugiej strony nowe grafiki można optymalizować bezpośrednio na stronie TinyPNG. Będzie to wymagało dodatkowej pracy przy każdym tekście ale gra jest warta świeczki. W przypadku TinyPNG warto jednak zrobić jeszcze jedną uwagę. Nie jest to narzędzie doskonałe i może się zdarzyć (chociaż bardzo rzadko), że kompresja spowoduje widoczne zepsucie jakości zdjęcia. Wtedy można rozważyć użycie Smush it! (daje o wiele gorsze wyniki w zmniejszaniu wielkości pliku ale raczej nie psuje jakości). Można oczywiście używać tych narzędzi naprzemiennie.

Drugą istotną sprawą w przypadku grafik jest wrzucanie ich w odpowiedniej rozdzielczości. Tzn. jeśli np. szerokość waszego bloga to jakieś 1045 pikseli, to nie ma sensu wrzucać grafik o szerokości przekraczającej tę liczbę. Żeby dokładnie sprawdzić jaka jest wyświetlana rozdzielczość pliku na stronie wystarczy (np. w Chrome) kliknąć prawym przyciskiem myszy na grafikę i dać „zbadaj element”. Po najechaniu na fragment kodu odpowiedzialny za grafikę pojawi się nad nią informacja o tym jaki jest rzeczywista wyświetlana rozdzielczość. Jeśli przez długi czas robiłeś to źle, to proces naprawczy może zająć masę czasu.

Proces tych poprawek można posunąć o wiele dalej. Przykładowo jeśli grafiki wpisów pojawiają się w archiwach itp. to zazwyczaj są jeszcze innej rzeczywistej rozdzielczości. Wtedy warto ładować w tym miejscu pliki o innej rozdzielczości. To jednak wymaga albo podstawowej znajomości PHP albo zwrócenia się do programisty.

Zresztą jeżeli traktujemy blog jako swego rodzaju inwestycję, to i tak w pewnym momencie warto dać kilka rzeczy do zrobienia profesjonalistom. Sam, po części w moich działaniach z optymalizacją bloga, zwróciłem się osób, które znają się na tym lepiej i rzecz jasna robią to za pieniądze (to ich praca). To jest wydatek, który w pewnym momencie prowadzenia bloga, może po prostu okazać się konieczny. W każdym razie polecam chłopaków z WP Served, gdybyście kiedykolwiek potrzebowali bardziej zaawansowanej pomocy technicznej przy WordPressie.

Kompresja HTML i CSS

„Skompresuj HTML” – to jedna z bardzo często pojawiających się uwag w trakcie robienia skanu przez Google Pagespeed Insights. Ten problem akurat można łatwo rozwiązać korzystając z wtyczki WP-HTML-Compression. Na WordPress.org jest dość słabo oceniana i dawno nieaktualizowana, natomiast u mnie działa bez zarzutów.

Warto również pomyśleć o skompresowaniu plików *.css. Bez problemu można znaleźć narzędzia do tego służące. Przy czym proces ten powinien wyglądać tak: macie swój główny plik styli, zapiszcie go gdzieś sobie (przed kompresją). Potem po dokonaniu kompresji podmieniacie zawartość pliku na tę skompresowaną (kopię zachowujecie w standardowej postaci). Później jeśli chcecie edytować plik *.css, to najlepiej robić to w tej nieskompresowanej kopii. Później kompresujecie ją i podmieniacie plik *.css na serwerze.

Przenieś javascript do stopki

To standardowa rada, którą można łatwo wprowadzić w życie. Zwłaszcza jeśli macie różne javascripty odpowiedzialne za serwisy społecznościowe. Ja np. w ogóle nie wczytuję tych skryptów na stronie głównej bloga (ponieważ tam nie mam żadnych przycisków „lubię to” czy też „+”). Tak samo skrypt Google Analytics najlepiej wkleić ręcznie do stopki (niż w przeznaczonym do tego polu w szablonie). Przy czym przez „dodanie do stopki” możecie rozmieć dodanie widgetu tekstowego z kodem.

Usuń niepotrzebne pluginy

To jest coś, co wielu osobom przychodzi z dość dużym trudem. Ja korzystam obecnie jedynie z 13 wtyczek. Zrezygnowałem nawet z Jetpacka. Im więcej macie wtyczek tym witryna będzie ładować się wolniej. Poza tym wielokrotnie jest tak, że zamiast używać wtyczki wystarczy kilka linijek kodu w PHP i po sprawie.

Więcej informacji

Temat ten można ciągnąć w nieskończoność. Powyżej podałem najbardziej elementarne informacje dotyczące optymalizowania witryny pod WordPressem. Nie wszystkie też (mimo wszystko nadawały się dla niezaawansowanych użytkowników).

Przy okazji, jeśli żadne fragmenty tego tekstu nie są dla was „czarną magią”, to polecam również skorzystanie z Team Teehouse. To serwis z masą różnych kursów dla twórców internetowych. Jest tam również dość krótki kurs dotyczący optymalizacji witryny internetowej. Jest to płatny serwis, natomiast możecie skorzystać 14 dniowego triala i w tym czasie przejdziecie na spokojnie kurs optymalizacji.

Optymalizacja bloga pod względem SEO

To jest temat rzeka. Wiele (z technicznego punktu widzenia) można nauczyć się korzystając z wtyczki Yoast SEO for WordPress. Odsyłam także do tekstu mojego znajomego na ten temat.

Od siebie chciałem też polecić korzystanie z narzędzia takiego jak Positionly. Dzięki niemu możecie śledzić swoje pozycje w wynikach wyszukiwania w Google na dane frazy. W ten sposób też można w miarę łatwo śledzić jakie rezultaty przynoszą nasze działania mające na celu polepszenie SEO bloga pod daną frazę kluczową. Z Positionly można również śledzić konkurencyjne strony.

Positionly – narzędzie do śledzenia wyników w Google

Najprostszym sposób wykorzystywania Positionly w pracy jest następujący. Wybieracie sobie niedużą liczbę słów (lub fraz) kluczowych, na których wam zależy. Robicie przez pewien czas wszystko, żeby pojawiać się w Google wyżej na te frazy. Jeśli to się w końcu uda, to możecie wykasować te frazy i zabrać się za następne. Takie podejście napędza też proces twórczy, bo kiedy wybierzecie sobie słowa kluczowe, przez które chcecie być wyszukiwani, to automatycznie zaczniecie myśleć o tym na jaki temat pisać teksty.

Powodzenia, Tomek. :)

Najpierw wiedza, potem rzeźba

Kompleksowy przewodnik po diecie i treningu dla osób początkujących i średnio zaawansowanych.

Ponad 10000 sprzedanych egzemplarzy!

Ponad 260 stron konkretów. Minimum teorii i maksimum informacji praktycznych. Do e-booka dołączone są również arkusze kalkulacyjne, które wyręczą Cię w koniecznych obliczeniach.

ZAMÓW E-BOOKA

---

O AUTORZE Cześć, nazywam się Tomasz Saweczko (aka Łysy), z wykształcenia jestem matematykiem (co nie przeszkodziło mi w napisaniu książki). Nie jestem ani pakerem, nie chodzę do kosmetyczki co drugi dzień, ani nie traktuję ulicy jak wybiegu. Zaś męskie dbanie o siebie, to dla mnie coś więcej niż tylko wygląd... Czytaj więcej!