Wielokrotnie wspominałem o tym, że szybkość ładowania strony działającej nie tylko na WordPressie ma istotne znaczenie. Google, Bing i inne wyszukiwarki uwielbiają, kiedy Twoja strona szybko się wczytuje. Oczywiście, najważniejsza jest treść na stronie ale szybkość, z jaką pojawi się ona przed oczami czytelnika ma duży wpływ na pozycję strony w wynikach wyszukiwania. Kolejną kwestią jest wpływ na wizerunek. Pomyśl o szybkości strony jako części Twojej marki. Zakładając stronę firmową czy prywatnego bloga skupiamy się często wyłącznie na wyglądzie, zupełnie ignorując szybkość wczytywania, a jest to bardzo istotne z punktu widzenia User Experience. Czy chcesz być kojarzony z wiecznie ładującą się stroną firmową? Z pewnością nie, dlatego dzisiaj skupimy się na tym jak przyspieszyć swoją stronę.
Użytkownik podejmuje decyzję o pozostaniu na stronie w zaledwie kilka sekund. Te sekundy decydują o tym, czy kupi Twoje produkty, albo przeczyta artykuł.
Czy wiesz, że 40% osób opuszcza stronę, która ładuje się powyżej 3 sekund?
W internecie nikt nie lubi czekać i każda sekunda opóźnienia powoduje, że współczynnik konwersji spada o 7%. Jeśli szybkość działania strony przekłada się na ilość klientów, czytelników, czy osób zapisanych do newslettera, to zawsze warto próbować ją przyspieszyć.
Zanim przejdziesz do poradnika, sugeruję, żebyś sprawdził szybkość wczytywania własnej strony. Możesz to zrobić na przykład używając narzędzia Pingdom. Prawie połowa użytkowników Twojej strony oczekuje, że zostanie ona wczytana poniżej 2 sekund.
Jeśli uzyskałeś mniejszy wynik, to gratuluję, ale zobacz poniżej, co jeszcze możesz poprawić.
Wyszło więcej? Ten poradnik jest dla Ciebie.
Jak w prosty sposób przyspieszyć stronę?
Jest kilka rzeczy, które możesz zrobić, żeby uzyskać większą prędkość ładowania strony. Na początku skupimy się na prostych czynnościach, które nie wymagają zaawansowanej wiedzy.
Zacznij od sprawdzenia ilości zainstalowanych wtyczek. Ich duża ilość powoduje, że czas wczytywania rośnie. Celowo nie podam, ile to „dużo wtyczek”, bo liczę na Twój rozsądek. Jeśli jakaś wtyczka jest niezbędna do funkcjonowania Twojej strony, to lepiej, żebyś ją zostawił. Usuń wszystkie te, których nie używasz, albo które nie wnoszą nic do strony. Raczej nie potrzebujesz na stronie licznika odwiedzin, albo animacji spadającego śniegu. Niekiedy różne wtyczki dublują się w działaniu, więc sprawdź, czy nie jest tak u Ciebie. Pamiętaj też, że lepiej usunąć wtyczkę całkowicie, niż tylko ją wyłączyć. Poza prędkością, ma to wpływ na bezpieczeństwo strony. To samo, co z wtyczkami, powinieneś zrobić z motywami. Te, które nie są używane po prostu usuń. Jeśli korzystasz z komercyjnego motywu, sprawdź, czy jest dla niego dostępna aktualizacja.
Skoro jesteśmy przy aktualizacji, to sprawdź, czy nie jest dostępne nowsze wydanie Wordpressa. Poza nowymi funkcjami i łataniem dziur, programiści tworzący WordPress zawsze pracują nad ulepszeniem szybkości jego działania. Dlatego jeśli nie ma przeciwwskazań, powinieneś korzystać z najnowszego wydania WP. Dostępność aktualizacji sprawdzisz w zakładce Aktualizacje swojego Kokpitu.
Istotny wpływ na szybkość wczytywania strony ma lekki motyw. Instalacja prostego, dobrze napisanego motywu może znacząco przyspieszyć Twoją stronę. Zwróć uwagę, czy motyw nie zawiera zbyt dużej ilości obrazów. Większość efektów wizualnych takich jak animowane menu, czy przewijane zdjęcia, będzie spowalniać Twoją stronę, więc sugeruję pomijanie motywów przeładowanych efektami. Oczywiście minimalizm nie musi ci odpowiadać. Możesz przy wyborze kierować się wyglądem, ale przed ostatecznym wyborem motywu warto przetestować kilka z nich na działającej stronie i wybrać najszybszy.
Jeśli masz dużo obrazów na swojej stronie, dobrze żebyś zadbał o odpowiednią kompresję. Możesz to zrobić sam i przed załadowaniem zdjęć na stronę zapisać je w programie graficznym (Gimp, Photoshop) z możliwie wysoką kompresją. Oczywiście rób to z umiarem zwracając uwagę na jakość swoich zdjęć. Nie chcesz, żeby raziły w oczy pikselami. Dla tych, którzy nie lubią wszystkiego robić ręcznie mam dwa inne rozwiązania. Możesz zaufać WordPressowi, bo od wydania 4.5 oferuje on dość dobrą optymalizację obrazów. Według twórców zdjęcia wczytują się w nim nawet o 50% szybciej. Druga opcja to instalacja odpowiedniej wtyczki. Ja używam do tego WP Smush. Wtyczka nie tylko odpowiednio skompresuje wgrywane do biblioteki obrazów zdjęcia, ale także zajmie się tymi, które wgrałeś na stronę wcześniej. Z poziomu Kokpitu otrzymasz statystyki zaoszczędzonego na serwerze miejsca.
Kolejną rzeczą, o której warto pomyśleć jest Photon – narządzie, które zajmie się dostarczaniem obrazów wyświetlanych na stronie z pomocą CDN. CDN, czyli Content Delivery Network to system, który kopiuje dane z Twojego serwera (w tym przypadku zdjęcia) do rozproszonych na całym świecie punktów wymiany danych. Kiedy czytelnik wchodzi na Twoją stronę, obrazy zamiast z Twojego serwera są ładowane z najbliższego punktu CDN. Photon jest częścią wtyczki Jetpack i z jej poziomu włączysz turbo doładowanie swoich zdjęć. Dzięki temu dodatkowi obrazy będą wczytywać się o wiele szybciej, a jednocześnie spadnie obciążenie Twojego serwera. Jeśli masz dużo zdjęć na swojej stronie, to aktywacja Photona spowoduje zauważalny wzrost szybkości ładowania strony.
Skoro jesteśmy przy zdjęciach, to warto wspomnieć o wtyczkach typu lazy load. Przykładem może tu być Image Lazy Load. Tego typu rozwiązanie sprawdzi się na stronach, gdzie ilość zdjęć jest na tyle duża, że większość z nich znajduje się poza ekranem i aby je zobaczyć, należy przewinąć stronę w dół. Wtyczka działa w ten sposób, że wstrzymuje ładowanie niewidocznych zdjęć do czasu, aż będą one potrzebne. Obrazy pojawią się dopiero wtedy, kiedy przewiniesz ekran, a do tego czasu zamiast nich na stronie zostanie wyświetlona pusta ramka.
Strony WordPress są generowane dynamicznie. To oznacza, że za każdym razem, kiedy użytkownik odwiedza Twoją witrynę, serwer musi się „zastanowić” co ma pokazać w przeglądarce. Im więcej rzeczy zlecisz mu do generowania, tym wolniej strona będzie ładować się czytelnikowi. Zwróć uwagę na takie szczegóły, jak liczba postów wyświetlanych na stronie głównej, ilość miniatur, czy ilość widgetów. Zasada jest prosta – im więcej na stronie, tym wolniejsze wczytywanie. Zastanów się więc, czy nie ograniczyć liczby postów na stronie głównej, albo nie wyrzucić zbędnych widgetów. Możesz to zrobić w prosty sposób z poziomu Kokpitu.
Niewiele stron obecnie nie korzysta z przycisków Like Facebooka. Opcja udostępniania, czy tweet bezpośrednio na stronie to duże udogodnienie, które ułatwia Twojej treści rozprzestrzenianie się w social mediach. Niestety, tego typu usługi potrafią spowolnić ładowanie witryny, zwłaszcza, jeśli skrypt jest ładowany z zewnętrznych serwerów. Pomyśl o wyrzuceniu, lub ograniczeniu ilości takich przycisków. Zamiast pod każdym postem na stronie głównej, umieść je tylko na stronach pojedynczego postu. To samo dotyczy zewnętrznych usług typu Youtube, czy Disqus. Ładowanie systemu komentarzy Disqusa może znacznie spowolnić Twoją stronę, tak samo, jak osadzony odtwarzacz Youtube. Osobiście sam korzystam z obu tych usług i w moim przypadku ich zalety wzięły górę nad czasem ładowania, ale jeśli ty chcesz zawalczyć o każdy ułamek sekundy, to polecam ci ich wyłączenie.
Jeśli Twoja strona korzysta z zewnętrznych skryptów, albo fontów, na przykład z Google Fonts i uważasz, że możesz się bez nich obejść, to o tym pomyśl. Warto też zastanowić się, czy nie usunąć ze strony JavaScriptu, ale w przypadku niektórych stron może to się okazać niemożliwe. W prosty sposób możesz wyłączyć także pingbacki i trackbacki na stronie. Zrobisz to odznaczając odpowiednie pole w menu Ustawienia->Dyskusje, ale tutaj wzrost wydajności nie będzie aż tak zauważalny.
Jeszcze jedną rzeczą, którą możesz zrobić w prosty sposób jest włączenie kompresji gzip na stronie z pomocą odpowiedniej wtyczki. W tym celu możesz użyć na przykład tej wtyczki. Jak to działa? Twoja strona na serwerze zostanie spakowana przed wysłaniem jej do przeglądarki czytelnika. W ten sposób możliwe jest zmniejszenie jej nawet do 70%. Ilość danych potrzebnych do wyświetlenia witryny drastycznie się zmniejszy. Aktywacja kompresji gzip powoduje także zmniejszenie obciążenia łącza serwera (ale kosztem mocy procesora). Bardziej zaawansowani użytkownicy mogą zrobić to bez użycia wtyczki, edytując plik .htaccess, lub plik index.php na serwerze. Poniżej znajdziesz kod aktywujący kompresję dla .htaccess.
<IfModule mod_deflate.c> # Insert filters 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 AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE image/svg+xml # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule>
Zaawansowane przyspieszenie strony.
Jeśli poważnie myślisz o swojej stronie, albo ruch na niej jest już na tyle duży, że współdzielony hosting przestaje być wystarczający, to czas pomyśleć o własnym serwerze. Na początek może być to VPS, czyli serwer wirtualny wydzielony w ramach jednej fizycznej maszyny. Zaletą VPSów jest stosunkowo prosta obsługa i odporność na błędy administratora. W ostatnim czasie ich oferta jest dość szeroka i większość dużych firm hostingowych (na przykład OVH, Aruba, DigitalOcean, Mintshost) oferuje także wybór VPS. Zaletą własnego serwera w porównaniu do współdzielonego hostingu jest możliwość wyboru oprogramowania, systemu operacyjnego, czy możliwość konfiguracji z myślą o konkretnym zastosowaniu, w naszym przypadku o stronie na WordPressie. Przy zakupie możesz wybrać parametry serwera, najczęściej ilość rdzeni procesora, powierzchnię dysku i ilość pamięci RAM. Ceny oscylują w okolicy 10 zł miesięcznie za najprostszą konfigurację, więc są konkurencyjne w stosunku do hostingu współdzielonego. Przy poprawnej konfiguracji powinieneś uzyskać dużo szybciej działającą stronę, więc warto przemyśleć przesiadkę na VPS. Dla zaawansowanych i dysponujących grubszym portfelem pozostaje serwer dedykowany.
Jeśli Twoja strona już znajduje się na własnym serwerze, pamiętaj, żeby zawsze pilnować aktualizacji i używać zalecanej wersji PHP i MySQL. Programiści WordPress zawsze podają rekomendowaną wersję. W tej chwili są to:
- PHP w wersji 5.6 lub wyższej
- MySQL w wersji 5.6, lub MariaDB w wersji 10.0, lub wyższej
W niektórych firmach hostingowych istnieje możliwość ustawienia preferowanej wersji PHP z poziomu panelu zarządzania usługodawcy. Jeśli nie masz takiej możliwości, poproś administratora, żeby zrobił to w Twoim imieniu.
W sytuacji, gdy sam administrujesz serwerem możesz użyć Apache lub Nginx. Ze względu na szybkość, odporność na duże obciążenia i skalowalność, polecam instalację tego drugiego. Nginx został stworzony po to, żeby „udźwignąć” ruch na naprawdę dużych witrynach i jego udział w rynku z roku na rok rośnie. Sama instalacja nie zajmuje dużo czasu w porównaniu z Apache, a w sieci są dostępne skrypty instalacyjne, które zrobią większość pracy za Ciebie.
Zanim przejdziesz do tak drastycznych sposobów na przyspieszenie strony, możesz zrobić jeszcze kilka rzeczy. Wcześniej wspomniałem już, że strony w WordPressie są generowane dynamicznie. Warto więc przejrzeć pliki motywu i wszędzie gdzie się da, zastąpić PHP zapisem w HTML. Możesz to zrobić zastępując niektóre tagi szablonowe wartościami wpisanymi na sztywno. Poniżej kilka przykładów.
"Nazwa bloga" zamiast bloginfo('name');
"Tytuł" zamiast wp_title();
"Opis" zamiast bloginfo('description');
"Charset" zamiast bloginfo('charset');
Motyw bez edycji nie będzie mógł być używany na innych stronach, ale dzięki wpisaniu tych wartości na sztywno, serwer nie będzie musiał pobierać ich z bazy danych, co może wpłynąć pozytywnie na wydajność witryny.
Postaraj się, żeby kod Twojego motywu zajmował jak najmniej miejsca. Usuń zbędne komentarze i niepotrzebne linijki kodu. Minifikuj pliki JavaScript, usuń białe znaki, skróć nazwy zmiennych. Sprawdź, czy wszystkie funkcje motywu są ci potrzebne i wyrzuć linijki odpowiadające za ich aktywację. Jeżeli jest to możliwe, lepiej zastąpić kilka plików CSS jednym. Wszędzie tam, gdzie się da, użyj CSS zamiast obrazków.
Kolejnym krokiem niech będzie optymalizacja bazy danych. Możesz zrobić to ręcznie, ale na szczęście WordPress pozwala na instalację wtyczki, która znacznie to ułatwi. Za każdym razem, kiedy pisząc post zapisujesz go jako szkic, w bazie danych zostaje kolejna kopia, która po opublikowaniu raczej ci się nie przyda. Jeśli zapiszesz szkic w ten sposób 5 razy, to 4 kopie wpisu będą zajmować miejsce w bazie danych. Wp-optimize zrobi z tym porządek, wyczyści kosz, usunie zbędne szkice postów i uporządkuje ich tabele. Wszystko praktycznie za jednym kliknięciem.
Nie ma szybkiej strony bez cache.
Aktywacja cache na stronie znacząco odciąża serwer i przyspiesza czas ładowania strony. W tym przypadku również posłużymy się odpowiednią wtyczką. Polecam użyć w tym celu W3 Total Cache, która jest najpopularniejszym rozwiązaniem tego typu na WordPressie.
W pełni skonfigurowana wtyczka W3TC potrafi przyspieszyć stronę nawet 10 razy!
Jak działa mechanizm cache na serwerze? Kiedy użytkownik chce wyświetlić stronę, WordPress pobiera odpowiednie wartości z bazy danych, przetwarza je na język HTML zrozumiały dla przeglądarki i wysyła tak przygotowane pliki do użytkownika. Aktywacja cache powoduje, że ten proces zostaje skrócony. Raz wygenerowany plik zostaje zapisany na dysku, lub w pamięci serwera i kiedy jest potrzebny, jest serwowany użytkownikowi.
W3TC ma też kilka innych przydatnych funkcji. Potrafi dokonać minifikacji kodu CSS i JavaScriptu i go skompresować. Oferuje także możliwość konfiguracji CDN (Content Delivery Network) z pełną obsługą najpopularniejszych dostawców takich jak MaxCDN, Akamai, czy Amazon CloudFront. Amazon oferuje darmowy okres próbny, więc polecam przetestowanie działania CDN w Twojej witrynie. Pisałem wyżej o podobnym działaniu Photona, ale „poważny” CDN nie ogranicza się do zdjęć. CDN skonfigurowany w opcjach W3 Total Cache będzie dostarczał dla Twojej strony wszystkie załączniki, pliki motywu i wszystkie inne pliki, jakie sobie zażyczysz.
Poniżej rekomendowane podstawowe ustawienia W3 Total Cache:
- Page Cache włączone, Disk Enhanced
- Database Cache włączone, Memcached
- Object Cache włączone, Memcached
- Browser Cache wyłączone
Narzędzia do testowania szybkości stron internetowych.
Żadne prace nad przyspieszeniem witryny nie będą mieć sensu, jeśli nie przetestujesz zastosowanych rozwiązań. Poniżej znajdziesz kilka najważniejszych narzędzi do sprawdzania błędów i szybkości ładowania strony.
- Google PageSpeed Insights
- Mozilla Firefox z dodatkami Firebug i Hammerhead
- Yahoo! YSlow – dodatek do przeglądarek, ocena szybkości strony i statystyki cache
- Pingdom – test szybkości stron
- WebPagetest – jak wyżej
- Site24x7
- Narzędzie do testowania kompresji gzip
- Web Page Analyzer
Polecam szczególnie narzędzia Pingdom i Pagespeed Insights od Google. Przetestuj tam swoją stronę i zwróć uwagę na błędy i sugestie odnośnie optymalizacji witryny w wersji dla komputerów i urządzeń przenośnych. Kiedy zastosujesz się do podpowiedzi Google, z pewnością odczujesz przyspieszenie witryny.
Mam nadzieję, że czynności opisane w tym poradniku znacząco wpłyną na szybkość ładowania się Twojej strony. W komentarzach pochwal się swoim wynikiem z Pingdom przed i po wprowadzeniu poprawek.
