Masz stronę na bazie CMS WordPress? Oto lista podstawowych działań, które należy podjąć, aby zoptymalizować szybkość jej działania. Warto poświęcić parę chwil na przyspieszenie wordpressa, gdyż szybkość strony wpływa na zachowanie wyszukiwarek i użytkowników, a więc ma wpływ na współczynnik odrzuceń, konwersje oraz samo pozycjonowanie. Jeśli szukasz odpowiedzi, jak zoptymalizować bloga, aby szybciej się ładował, znajdziesz poniżej kilka praktycznych wskazówek.
Spis treści
1. Pozbądź się zbędnych, ciężkich wtyczek
Platforma WordPress jest bardzo popularnym rozwiązaniem przy tworzeniu stron małych firm (a nieraz także tych nieco większych). Ma sporo zalet, lecz strony oparte o ten system często są przeładowane wtyczkami, czyli dodatkowymi fragmentami kodu instalowanymi w celu dodania określonych funkcji. Mogą to być wtyczki ułatwiające dodanie mapy Google, ikon społecznościowych, widgetu subskrypcji lub formularzy.
Popularność WordPressa sprawia, że developerzy na całym świecie tworzą darmowe rozwiązania na tę platformę. Z jednej strony to plus, ponieważ użytkownik bez specjalnej wiedzy informatycznej jest w stanie rozbudować swoją witrynę o wiele atrakcyjnych funkcjonalności. Z drugiej strony trzeba pamiętać, że każde „pójście na łatwiznę” wiąże się z określonymi zagrożeniami. Wtyczka wtyczce nierówna i nie można powiedzieć, że wtyczki są one złym rozwiązaniem. Nie można też udawać, że duża ich ilość nie ma wpływu na stronę. Czasem nawet jeden plugin może stanowić problem.
Trzeba pamiętać, że każda wtyczka to dodatkowe linijki kodu, które przeglądarka musi przeczytać ładując stronę. W efekcie witryna, na której zainstalowano ich zbyt wiele będzie ładowała się wolniej niż „czysta” strona. Dlatego też warto zastanowić się, czy wszystkie dodatkowe funkcje są niezbędne. Decydując o ewentualnym usunięciu lub zostawieniu poszczególnych wtyczek warto zbadać, w jakim stopniu wpływają one na szybkość strony. Można to sprawdzić za pomocą innej wtyczki – P3 (Plugin Performance Profiler). Wtyczkę można wyłączyć i uruchamiać ją jedynie w momencie, gdy przeprowadzany jest test.
Witryna wtyczki P3: wordpress.org/plugins/p3-profiler
Uwaga! Zrób test szybkości strony i zapisz jego wyniki. Następnie przeprowadź optymalizację i wykonaj test ponownie, aby zobaczyć różnicę.
2. Uważaj na wtyczki z niezaufanych źródeł
CMS ma z jednej strony umożliwiać każdemu użytkownikowi zarządzanie treściami i rozbudowę strony, lecz odradzałbym laikowi samodzielne instalowanie i konfigurowanie dowolnych wtyczek bez żadnej weryfikacji. W sieci istnieje mnóstwo pluginów (podobnie zresztą jak gotowych, darmowych szablonów stron), które posiadają ukryty kod i pozwalają zewnętrznym podmiotom wyciągać w sposób niezauważony istotne dane.
Ponadto witryna z taką wtyczką może być wykorzystywana bez wiedzy właściciela do spamerskich praktyk pozycjonowania (ukryte linki, cloaking). W efekcie strona może przyciągnąć uwagę Google, w złym tego sformułowania znaczeniu. Decydując się na określone rozwiązanie warto poszukać informacji o jego autorze, poczytać recenzje, poszukać informacji w zaufanych źródłach jak polskie forum WordPress (pl.forums.wordpress.org) lub blogi wpninja.pl czy też wpzen.pl. Przecież nie chcesz, aby na Twojej stronie działały procesy, o których nie wiesz, a które mogą ją spowalniać i szkodzić jej na inne sposoby.
3. Nie korzystaj ze zbyt ciężkich szablonów
Sam szablon może stanowić problemem. Korzystanie z gotowych, uniwersalnych motywów ma spore zalety. Można je modyfikować i dostosowywać do swoich potrzeb, tak że ostatecznie powstaje całkiem oryginalna, unikalna strona za nieduże pieniądze. Gotowe szablony mają jednak tę wadę, że posiadają często bardzo wiele funkcji – w końcu muszą być elastyczne i spełniać oczekiwania bardzo wielu klientów. Dodatkowe funkcje, to dodatkowe linijki kodu wczytywane przez przeglądarkę użytkownika odwiedzającego stronę. W efekcie może nastąpić sytuacja, że szablon sam w sobie jest bardzo ciężki, a wykorzystujemy zaledwie 10% możliwości. Warto zatem już na etapie wyboru szablonu zadecydować w jakim stopniu odpowiada uprzednio zdefiniowanym potrzebom.
4. Skompresuj grafiki
Grafiki mają dużo większy rozmiar od treści tekstowych. Jeśli na stronie pojawia się wiele plików graficznych (np. w galerii zdjęć, sliderze lub jako ikony wpisów), to ich łączny rozmiar może znacząco ograniczać wydajność witryny. Dlatego też warto się zastanowić, czy potrzebna duża ilość wielkich zdjęć, czy przypadkiem równie funkcjonalne nie byłyby miniatury, które powiększałyby się po kliknięciu.
Nawet jeśli pliki wydają się stosunkowo nieduże, to zazwyczaj można je zmniejszyć (nie chodzi o samą wielkość obrazu, a o rozmiar plików graficznych w kB) bez strat w wyglądzie i jakości. Kompresja nawet na poziomie 15% w przypadku strony z wieloma zdjęciami może stanowić znaczącą różnicę. Do kompresji plików graficznych można użyć wtyczki smush.it. Wtyczka ta wysyła całą bibliotekę mediów graficznych na zewnętrzny serwer, kompresuje je i zastępuje oryginały mniejszymi wersjami. Po zakończonej operacji można ją wyłączyć. Niemniej zostawienie jej włączonej sprawi, że każdy dodawany później obraz będzie automatycznie kompresowany
Witryna wtyczki smush.it: wordpress.org/plugins/wp-smushit
5. Zewnętrzne skrypty przenieś do stopki
Przy autoryzacji pewnych usług i weryfikacji strony w rozmaitych serwisach często konieczne jest dodanie do strony zewnętrznego skryptu. Najprostszy przykład to Google Analytics. Zalecane jest umieszczenie kodu w nagłówku, czyli sekcji <head> strony. W praktyce jednak chodzi zazwyczaj o to, aby kod znalazł się w elemencie, który jest wywoływany na każdej podstronie. Oprócz nagłówka jest to stopka (w edytorze wyglądu zazwycaj footer.php). Strona wczytywana jest z góry na dół, więc umieszczenie skryptu w stopce sprawi, że najważniejsze dla użytkownika treści zostaną załadowane szybciej, a spowolnione zostanie jedynie ładowanie stopki.
6. Włącz kompresję gzip
Kompresja gzip służy zmniejszeniu ilości informacji, które są przesyłane do serwera, co również przyspiesza działanie strony. Kompresji należy dokonać za pomocą modyfikacji pliku .htaccess.
7. Pozbądź się bałaganu z nagłówka
Szerze mówiąc nie wiem z czego to wynika, ale w nagłówku WP domyślnie znajdują się zbędne funkcje. Można się ich pozbyć za pomocą wtyczki, lecz można to też zrobić ręcznie. W edycji funkcji (wygląd -> edytor -> functions.php) należy dodać następujące linijki kodu:
remove_action( 'wp_head’, 'rsd_link’ );
remove_action( 'wp_head’, 'wlwmanifest_link’ );
remove_action( 'wp_head’, 'wp_generator’ );
remove_action( 'wp_head’, 'start_post_rel_link’ );
remove_action( 'wp_head’, 'index_rel_link’ );
remove_action( 'wp_head’, 'adjacent_posts_rel_link’ );
remove_action( 'wp_head’, 'wp_shortlink_wp_head’ );
8. Wykorzystaj cache
Cache’owanie to po prostu zapisywanie określonych danych w pamięci przeglądarki. Dzięki temu procesowi nie jest konieczne każdorazowe wysyłanie żądania do serwera, aby je pobrać. W efekcie skraca się czas, jaki jest potrzebny przeglądarce na pełne załadowanie witryny. Cache’owane mogą być między innymi elementy xhtml czy też obrazy.
Korzystając jednak z cache’owania warto mieć na uwadze, jakie elementy przeznaczymy do zapamiętania na dysku użytkownika. W momencie, gdy często aktualizujemy pewne dane, to lepiej, aby były każdorazowo pobierane z serwera, gdyż istnieje ryzyko, że użytkownikowi pojawią się nieaktualne informacje. Do zarządzania cache’owaniem można wykorzystać np. wtyczki W3 Total Cache lub WP Super Cache.
Zobacz też:
I co? Jak poszedł test z wtyczką P3? Udało się zoptymalizować bloga i przyspieszyć swojego wordpressa? Podziel się obserwacjami w komentarzu. Wyżej wymienione porady to oczywiście nie wszystko, co można zrobić, aby przyspieszyć działanie WordPress. Doświadczeni webmasterzy pewnie znają więcej trików, które pozwolą zoptymalizować witrynę. Jeśli posiadasz wiedzę na ten temat, również zapraszam do podzielenia się nią w komentarzu poniżej. Dzięki w imieniu swoim i czytelników.
źródło ikony wpisu: freeimages.com/photo/1397111
Ja polecam jeszcze wtyczkę „WP-HTML-Compression” kompresuje ona kod wysyłany do przeglądarki (usuwa spacje i komentarze) efekt (kod html) można podejrzeć na moim blogu 🙂
O, sprytne. Czy w edytorze w WP html kod jest normalnie widoczny ze spacjami i tylko na etapie wysyłania kodu do przeglądarki użytkownika zostaje skompresowany do takiej formy? Czy może permanentnie ulega zmianie?
Dokładnie tak, w edytorze jest normalnie 🙂
Piotrze, czy ta kompresja kodu dała u Ciebie jakiś znaczący efekt przyśpieszenia działania – test?
Bardziej chodzi o to aby kod ga zdążył się wczytać zanim user zamknie zakładkę bo to nie to czego szukał albo strona się „przywiesiła”.
Jeżeli o szybkość to warto jeszcze dodać darmowy cdn jetpacka czy lazy wideo lub widgety – tutaj inne przydatne wtyczki – http://matiweb.com/wordpress/wtyczki-do-optymalizacji-ladowania-strony-ktore-wart-znac/
No to teraz czeka mnie kilka wieczorów spędzonych nad optymalizacją moich stron na WordPressie. Szczególnie to ważne, ponieważ 15% ruchu to urządzenia mobilne, które powinny szybko ładować strony i oszczędzać transfer.
Powiem szczerze, że właśnie Jetpacka się pozbyłem, bo strasznie obciążał stronę.
No właśnie już któryś raz ostatnio spotykam się z opinią, że jetpack ssie zasoby za bardzo. Może to kwestia aktywnych niektórych modułów? Ja korzystam tylko z kilku, raz musiałem na chwilę JP wyłączyć i szczerze nie odczułem jakiegoś większego kopa w działaniu.
Ciężko zauważyć przyspieszenie o pół sekundy gołym okiem. Niemniej jak badałem to P3, to różnica była spora (względnie, w ujęciu procentowtym, nominalnie to rzeczywiście setne sekundy).
dobre porady, dzięki
Witam.
Mam pytanie, gdzie należy wstawić kod w pliku function.php?
jak na razie udało mi się poprawić stronę na komórki o 9 oczek na komputery o 12 oczek ale walczę dalej 🙂
Np. na początku pliku (po „
Właśnie tak uczyniłem ale chciałem się upewnić.
Jak na razie mam +15 oczek na mobile i +19 na stacjonarki
No to się cieszę, że mój tekst okazał się pomocny 🙂 widać było z czego poprawiać.
Stosuje P3 i wywalilam dzieki niemu pare wtyczek. Staram sie przewymiarowac zdjecia przed wrzuceniem na bloga. Do tego mozna je lekko odchudzic dzieki aplikacji RIOT. No i lubie WP Optimize robi porzadki za mnie na blogu. Pozdrawiam serdecznie BEata
Mam pytanie odnośnie wtyczki smush.it. Kusi, żeby przerzucić całą bibliotekę, ale trochę mi się nie podoba jej opcja „stripping meta data from JPEGs”. Dobrze myślę, że przez znikną wszystkie opisy, więc zdjęcia nie będą widoczne w Google w wyszukiwaniu ilustracji?
Ja po prostu korzystam z opcji bulk smush, a po wykonanej operacji wyłączam wtyczkę. Zawartość wszystkich atrybutów alt, które przy dodawaniu grafik uzupełniam ręcznie, pozostaje zachowana. Brak atrybutów alt nie sprawia, że grafiki przestają być widoczne w wyszukiwarce grafiki (Google może spojrzeć jeszcze na nazwę pliku, img title, otoczenie tekstowe lub title strony etc.), niemniej odpowiednie wypełnienie tego elementu z pewnością pozytywnie wpływa na ekspozycję pliku dla powiązanych zapytań.
Boję się tylko, że te wszystkie programy optymalizujące same zaczną obciążać CV…
A ja, jakich triki powinienem zastosować by wygenerować większy ruch na swoim blogu? Oto mój blog : http://zyciewkrate.pl/
Napisałem Ci maila 🙂
Szybkość strony w dobie nowych aktualizacji algorytmów Google zyskuje jeszcze bardziej na znaczeniu. Z wtyczek w WordPressie ciężko zrezygnować – to m.in. dziki nim zawdzięcza popularność ale wśród nich jest jedna, którą warto mieć – WP Asset Manager.
Przykładowo dla strony z formularzem kontaktu nie ma potrzeby ładowanie x wtyczek zwykle stosowanych na innych podstronach, bo na tej akurat podstronie ich działanie jest zbędne. Dodajmy do tego, że niektóre wtyczki ładują nawet kilkanaście plików css/js
A jak nazywa się ta wtyczka co po lewej wyswietal 117 shares itp?
To akurat jest Monarch (wtyczka od Elegant Themes). Wcześniej używałem także podobnej Shareaholic.
Witam. Po dodaniu kodu w functions.php WordPress przestał mi zapisywać zmiany. Musiałem wszystko dokładnie wyczyścić. Nie polecam
@Mario popraw apostrofy, na stronie również można podać prawidłowe 😉
Bardzo dobry wpis :-). Doceniam bardzo osoby z pasją i dzieleniem się nią. Pozdrawiam :=)
do optymalizacji zdjęć jest jest jeszcze Jetpack / Photon, rzadko kto o tym pamięta