Wciśnij enter, aby wyszukać, lub esc, aby zakończyć.

Przyspieszanie WordPressa
Mateusz Mazurek w Narzędzia

Poradnik: 18 sposobów na przyspieszenie WordPressa (i nie tylko!)

Bardzo lubię WordPressa. Nie tylko dlatego, że jest wygodny w użytkowaniu, ale też ma duże możliwości, jeśli chodzi o tworzenie bardziej zaawansowanych stron internetowych. No i jest w wielu aspektach dobrze przygotowany pod kątem optymalizacji dla wyszukiwarek. Bogata społeczność, ogromna ilość darmowych i płatnych wtyczek i motywów, oraz fakt, że z tego systemu CMS korzysta już co czwarta strona w internecie, tylko potwierdza to, że jeśli jeszcze jakimś cudem nie było Ci dane korzystać w WordPressa – musisz to zmienić :-). Dziś przygotowałem 18 prostych i sprawdzonych sposobów na przyspieszenie działania strony opartej na WordPress. Zapraszam!

Dlaczego warto dbać o szybkość ładowania się strony?

Szybkie wczytywanie strony internetowej ma nie tylko wpływ na SEO i odczucia użytkowników o czym pisałem we wpisie Krótki czas ładowania strony = wyższa pozycja w Google oraz w artykule o CloudFlare. Szybka strona internetowa to też większe zainteresowanie stroną i wzrost konwersji nawet o 7%! Taki wynik osiągnął Amazon (jeśli chodzi o sprzedaż), czy Firefox (jeśli chodzi o liczbę pobrań).

I niezależnie, czy Twoją konwersją będzie sprzedaż, zapisanie się na newsletter, czy spędzenie 2 minut na czytaniu wpisu na Twoim blogu. Konwersję zawsze możesz poprawić dzięki stronie, która będzie działała jeszcze szybciej niż dotychczas. Moim zdaniem szybko wczytująca się strona to obecnie podstawa przy jakiejkolwiek działalności internetowej. Czas się więc zabrać za przyspieszenie strony na WordPressie!

Jak przyspieszyć WordPressa? Spis treści.

Przygotowałem 18 porad z linkami do narzędzi i wtyczek, które pomogą przyspieszyć działanie WordPressa. Znaczną część porad można wykorzystać przy przyspieszaniu strony opartej o inny CSS czy zbudowanej po prostu w HTMLu. Enjoy!

Spis treści:

Wybierz dobry i szybki hosting

Szybko działający hosting to podstawa każdej strony (nie tylko tej opartej na WordPressie). Na hostingu nie ma co oszczędzać, ale warto sprawdzać za co się płaci. Puste gigabajty przestrzeni dyskowej, czy ogromny transfer, którego i tak nie wykorzystamy nie są najważniejszymi parametrami, na które powinniśmy zwracać uwagę.

Większość hostingów współdzielonych oferuje kilkunastodniowy okres testowy, podczas którego, bezpłatnie możemy korzystać z konta i testować je do woli. Pod kątem szybkości, dobrymi narzędziami do testów mogą okazać się:

Takie testy dla kilku wybranych usługodawców przeprowadził kilka miesięcy temu Sprawny Marketing, ale ja niezależnie od tego polecam zawsze własne testy. Warto wybierając odpowiedni hosting uwzględnić także opinie klientów i pomoc techniczną danego hostingu. To jak szybko odpowiada dział techniczny na maile i to, czy jest w stanie pomóc w kryzysowych sytuacjach, może mieć kluczowe znaczenie przy dalszym użytkowaniu konta hostingowego.

Zmień wersję PHP na najnowszą

Nie mniej ważne od samego usługodawcy hostingowego jest to, jaką wersję PHP mamy uruchomioną na serwerze. Wiem, wiem… pewnie niewiele osób interesuje się takimi szczegółami, ale wersja PHP ma ogromne znaczenie na dla szybkiego działania serwera i stron na nim uruchomionych.
Zasada wydaje się prosta: Im wyższa (nowsza) wersja PHP, tym szybciej!

Obecnie najnowszą wersją jest PHP 7, która to wersja potrafi być prawie dwukrotnie szybsza od swoich poprzedników (PHP 5.5 i PHP 5.6)!

Wersja PHP 7 - WordPress
© Zend.com

Mimo, że wiele firm hostingowych ustawia starszą wersję PHP jako domyślną, to często istnieje możliwość zmiany w panelu wersji PHP używanej na naszym koncie na nowszą. O ile z niektórymi skryptami i CMSami może być problem, to WordPress wspiera najnowszą wersję PHP 7, więc warto ją ustawić, aby odczuć skok w szybkości działania strony.

Przerzuć się na HTTP/2

Największa zmiana w internecie od 16 lat i wielkie zwiększenie prędkości wczytywania stron. W porównaniu ze swoim poprzednikiem z numerkiem 1.1 każda strona (każdy serwer) używająca tego nowego protokołu może ładować się szybciej poprzez m.in. poprzez kompresję nagłówków, czy zmianę wielu połączeń na jedno stałe połączenie, dzięki któremu pobierane jest kilka rodzajów treści. Dobrze i szczegółowo o samym protokole HTTP/2 i zmianach, które idą wraz z nim napisano na onsearch.
Protokół obsługują już wszystkie najważniejsze przeglądarki internetowe i część usług hostingowych.

Różnica jest widoczna dla każdego:
Szybkość HTTP/2

Tym lub tym narzędziem możesz sprawdzić na własnej skórze jak HTTP/2 wpływa na szybkość ładowania strony, a za pomocą tego narzędzia możesz sprawdzić, czy Twoja strona obsługuje już protokół HTTP/2.

Warto zwrócić uwagę na obsługę HTTP/2 przez nasz hosting lub skorzystać z CloudFlare, które implementuje HTTP 2.0, niezależnie od tego, czy nasz hosting obsługuje już ten protokół.

Używaj prostych i szybkich szablonów

Szablony / motywy WordPress – są ich niezliczone ilości! Zarówno tych bezpłatnych, jak i kosztujących parę dolarów. Wybierając szablon strony www, zazwyczaj kierujemy się głównie kwestiami estetycznymi. Warto jednak wybierając szablon bloga zwrócić też uwagę na to, jak wygląda kwestia szybkości jego działania. Prawda jest taka, że obecne szablony często przeładowane są różnymi funkcjami, z których wykorzystujemy tylko niewielką ich część.

Większość szablonów można przetestować w formie demo, przed zakupem czy instalacją. Warto sprawdzić jak działa szablon w naszej przeglądarce, czy np. w przeglądarce na słabszym komputerze. Oprócz tego sprawdźmy demo szablonu narzędziami diagnostycznymi takimi jak GTmetrix, zwracając szczególną uwagę na liczbę i wielkość skryptów JS, które zazwyczaj są największym spowalniaczem strony.

Sam zazwyczaj kupuję szablony WordPress na Themeforest i oprócz podstawowych testów na wersji demo, czytam zawsze także komentarze innych kupujących i ich uwagi do szablonu. Często także w opisie danego szablonu, autorzy chwalą się, jeśli jest on specjalnie zoptymalizowany pod kątem szybkości.

Usuń zbędne elementy strony

To działanie trochę łączy się z poprzednim, czyli wyborem odpowiedniego szablonu. Po wybraniu szablonu zastanówmy się które z jego opcji są nam niezbędne. I czy na pewno potrzebujemy zaawansowanych animacji, pływających widgetów czy zapierających dech w piersiach sliderów.

Wiele motywów WordPress posiada rozbudowane opcje konfiguracji, które pozwalają włączać/wyłączać poszczególne elementy strony – warto więc kierować się w tym wypadku zasadą, że jeśli coś nie jest konieczne, znaczy, że jest zbędne.

Unikaj niepotrzebnych wtyczek

Ogromny wybór wtyczek, czyli wielka zaleta WordPressa, dzięki której możemy z tego CMSa zbudować rozbudowany portal, sklep internetowy czy cokolwiek innego. Wtyczki bez wątpienia są bardzo pomocne, ale trzeba używać ich z głową i nie instalować wszystkiego co popadnie. Kiedyś miałem okazję sprawdzać dla jednego z klientów „dlaczego strona działa wolno” i to, co zobaczyłem po zalogowaniu się do panelu WP to 43 włączone, aktywne działające wtyczki!

Za pomocą wtyczki (a jakże!) do WordPressa o nawie P3 (Plugin Performance Profiler) możemy sprawdzić, w jakim stopniu każda z zainstalowanych wtyczek spowalnia działanie naszej strony www.

P3 Plugin Profiler

Większość wtyczek dołącza do kodu strony swoje skrypty JS i arkusze stylów CSS. Często też te pliki JS/CSS dołączane są na całej stronie, a nie tylko w miejscu gdzie powinny być użyte (np. w formularzu kontaktowym, bo do tego służy wtyczka).

Aby rozwiązać problem, przede wszystkim sprawdźmy zastanówmy się co każdy z włączonych pluginów robi, za co odpowiada i czy jest nam w 100% niezbędny. Do wielu zadań nie jest potrzebna osobna wtyczka i wystarczy kilka linijek kodu w szablonie strony, które będą działały tak samo jak wtyczka.

PS. Oczywiście po sprawdzeniu i pozbyciu się zbędnych wtyczek z naszej strony, możemy śmiało wyłączyć i usunąć wtyczkę P3 (Plugin Performance Profiler) – nie będzie nam już ona potrzebna.

Złączenie i zmniejszenie skryptów JavaScript i arkuszy CSS

Strony oparte o WordPress zbudowane obecnie są tak, że składają się z wielu skryptów JavaScript i arkuszy stylów CSS. Szablon posiada kilka swoich plików, wtyczki „dorzucają” swoje pliki i finalnie mamy wiele niezoptymalizowanych plików do pobrania przy każdym odwiedzaniu strony.

Dobrą praktyką jest zmniejszanie („minification”) tych plików poprzez usunięcie zbędnych elementów (jak np. zbędne puste linie, komentarze itd.). Pliki staja się wtedy mniej czytelne, ale dzięki temu strona działa szybciej. Dodatkowo kilka plików ze stylami czy skryptami, można połączyć w jeden plik, dzięki temu mamy mniej odwołań.

Dobrą wtyczką do WordPressa, która wyręczy nas z łączeniu plików CSS/JS i dodatkowo w zmniejszaniu wagi tych plików jest Better WordPress Minify. Wtyczka w kilku prostych krokach po uruchomieniu zajmie się za nas całą „brudną robotą” i finalnie na blogu będziemy mieli tylko dwa takie pliki: jeden plik ze stylami i jeden plik z JavaScriptem. Waga całości zostanie znacznie zredukowana. Polecam!

Ustaw cache dla przeglądarki

Ustawienie czasu, przez jaki przeglądarka odwiedzającego naszą stronę powinna trzymać zapisane pliki w pamięci podręcznej, pozwoli na szybsze wczytanie strony internautom, którzy odwiedzają stronę ponownie. Pliki strony, które nie zmieniają się zbyt często przechowywane są wtedy na dysku odwiedzającego stronę. A powracający, zamiast za każdym razem pobierać je ponownie, może je wczytać ze swojego dysku.

Plików graficznych, stylów CSS, skryptów JavaScript czy innych elementów nie zmieniamy raczej zbyt często, dlatego też można dla nich śmiało ustawić długi czas trzymania w cache.

Aby uruchomić cache w przeglądarce, musimy w pliku .htaccess ustalić czas, w jakim mają być przechowywane poszczególne typy plików.

Gotowy kod do wklejenia w pliku .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/plain A3600
ExpiresByType image/gif A31536000
ExpiresByType image/ico A31536000
ExpiresByType image/jpg A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
</IfModule>

Czas przetrzymywania plików w cache opisany jest w sekundach, więc 31536000 oznacza rok, a 3600 oznacza jedną godzinę.

Pozbądź się Gravatara (albo go zoptymalizuj)

Gravatar to usługa zintegrowana z WordPressem, której zadaniem jest wyświetlanie avatarów zdjęć osób przy każdym komentarzu pod wpisami na WordPressie. Jest to usługa zewnętrzna, więc avatary naszych komentatorów pobierane są z zewnętrznego serwera, co oczywiście wpływa negatywnie na szybkość wczytywania się strony.

Najlepszym rozwiązaniem byłoby pozbycie się Gravatara i niewyświetlanie zdjęć/grafik każdego z komentujących. Jeśli jednak nie chcesz się pozbywać tej ciekawej opcji, a chcesz przyspieszyć stronę – jest na to sposób! :-)

Optymalizacje przeprowadzamy w 2 krokach:

  1. W panelu WordPressa wchodzimy w Ustawienia -> Dyskusja i w sekcji „Domyślny obrazek profilowy” ustawiamy „Brak”. Spowoduje to, że przy komentarzach osób, które nie mają ustawionego avatara nie będzie wyświetlała się standardowa grafika, która każdorazowo jest generowana i osobno pobierana z serwera gravatar.com.
    Gravatar
  2. Instalujemy i uruchamiamy wtyczkę FV Gravatar Cache. Ma ona za zadanie zapisywać lokalnie (na naszym serwerze) avatary naszych czytelników, przez co ładowane one są z tego samego miejsca co strona – co pozytywnie wpływa na czas jej ładowania. Oczywiście wtyczka raz na jakiś czas sprawdza, czy nikt nie zaktualizował sobie zdjęcia i jeśli tak to je podmienia :-)
    FV Gravatar Cache

Usunięcie lub zminimalizowanie odwołań do Gravatara, podczas ładowania się strony nie wpłynie może w znaczący sposób na jej szybkość, ale ziarnko do ziarnka… Szczególnie polecane na blogach, które mają wiele komentarzy pod każdym wpisem.

Usuń widgety social media

Widgety/przyciski/liczniki social media są w wielu przypadkach jednym z największych „spowalniaczy” działania stron internetowych. Każdy licznik czy widget musi pobrać informacje o aktualnej ilości „lajków” czy innych gwiazdek z zewnętrznego źródła, przez co przy większej ilości takich widgetów strona zaczyna działać bardzo wolno. No, ale jest na to sposób.

Social Media

  1. Używaj tylko niezbędnych widgetów/przycisków
    Serio. Jeśli nie jesteś blogerką modową lub nie wrzucasz na stronę pięknych aranżacji wnętrz, czy apetycznych potraw to raczej jest nikła szansa, że przycisk Pinteresta na Twojej stronie będzie klikany. A jeśli już masz piękne, inspirujące zdjęcia na swoim WordPressowym blogu to pewnie nie będą one często udostępniane przez LinkedIn. Używaj tylko tych social mediów, z których korzystają Twoi odbiorcy. Ogranicz się do niezbędnego minimum.
  2. Zamień widgety w linki
    Zastanów się, czy musisz pobierać widgety pokazujące liczbę fanów, ich avatary, ostatnie posty czy inne informacje. W wielu przypadkach na stronie wystarczy prosty element graficzny, czy napis z linkiem „Znajdziesz nas na Facebooku”. To samo dotyczy przycisków w stylu „Share” – taki przycisk wcale nie musi mieć licznika (szczególnie, jeśli liczby udostępnień nie są imponujące). W większości przypadków wystarczy zwykły prosty link w stylu <a href="...">...</a>, który dodatkowo można ostylować, jak w przypadku mojego bloga. I często nie trzeba do tego żadnych zewnętrznych wtyczek, bo albo taka funkcja jest już w szablonie strony, albo możemy stronić to samodzielnie za pomocą linku linijek kodu.

Włącz kompresję GZIP

Kompresja GZIP to metoda kompresji danych „w locie”. Najczęściej są to pliki HTML, CSS i JavaScript, które „zmniejszane” są po stronie serwera, przed wysłaniem do użytkownika, a następnie dekompresowane przez przeglądarkę użytkownika strony. Kompresja gzip pozwala zmniejszyć ilość wysyłanych danych między serwerem a odwiedzającym naszą stronę o 80% i tym samym przyspieszyć wczytywanie się strony.

Z gzip jest różnie – część kont hostingowych ma domyślnie zawsze włączoną obsługę gzip, część z firm daje możliwość włączenia takiej kompresji w panelu zarządzania serwerem. A w innych przypadkach musimy sobie radzić sami :-)

To, czy Twoja strona używa kompresji GZIP możesz sprawdzić za pomocą tego narzędzia. Przykładowo dla onet.pl wygląda to tak:
gzip

Jak włączyć kompresję gzip?

  • Za pomocą pliku .htaccess
    W głównym folderze naszej strony na serwerze, odnajdujemy plik o nazwie .htaccess i na początku tego pliku dodajemy poniższy kod:

    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    </IfModule>

    Powyższy fragment kodu uruchamia kompresję gzip dla plików tekstowych, HTML, CCC, JavaScript

  • Za pomocą wtyczki Check and Enable GZIP compression
    Wtyczka robi właściwie dokładnie to samo co w powyższym punkcie, czyli dodaje do pliku .htaccess zapisy o tym, co ma być kompresowane poprzez gzip. Taka wersja dla leniwych :-)

Użyj dobrej wtyczki do cache

Absolutną koniecznością przy przyspieszaniu bloga jest używanie dobrej i sprawdzonej wtyczki do zapisywania w cache całej strony opartej na WordPressie.

Wtyczka W3 Total Cache ma naprawdę ogrom funkcji konfiguracyjnych, ale działa naprawdę w prosty sposób – po prostu instalujesz wtyczkę i włączasz elementy strony, które powinny być zapisywane w cache.

W3 Total Cache świetnie i sprawnie działa i przy okazji może wykonywać kilka optymalizacji opisanych już w tym poradniku (cache w przeglądarce, zmniejszanie plików HTML/CSS/JS). Przy okazji świetnie współpracuje z CloudFlare.

Polecam używanie wtyczki i pobawienie się jej konfiguracją, choć w wielu przypadkach domyślne ustawienia będą wystarczające.

Kompresuj i optymalizuj obrazki i zdjęcia

Jeśli na własnym serwerze nie trzymamy plików wideo, to najprawdopodobniej największymi plikami do pobrania będą obrazki i zdjęcia. Czasem na stronie mamy ich mniej, ale zawsze warto pomyśleć o ich kompresji. I to nie mam to na myśli kompresji, która w widoczny sposób wpłynie na jakość zdjęć i z bloga fotograficznego zrobi wielką pikselozę. Rozmiar zdjęć i obrazków możemy śmiało zmniejszyć, bez widocznego wpływu na ich jakość! I to automatycznie.

Z pomocą przyjdzie nam tu wtyczka, którą używam od lat o nazwie WP Smush. Zadaniem wtyczki jest zmniejszenie wagi wszystkich plików graficznych w naszym WordPressie, bez widocznej utraty jakości.

Na sam początek musimy zoptymalizować całą bibliotekę mediów, którą mamy już na blogu – w darmowej wersji możemy jednorazowo optymalizować po 50 plików graficznych w jednym zapytaniu. Przy stronach z większą ilością zdjęć będzie trzeba na pewno trochę poczekać na optymalizację, ale efekt będzie odczuwalny.
Dodatkowo zaznaczając opcję „Smush images on upload” każde kolejne zdjęcie wgrywane do WordPressa w przyszłości, będzie już automatycznie optymalizowane przez wtyczkę.

Tak to wyglądało na jednej z moich stron www po optymalizacji:
WP-Smush

WP Smush wysyła pliki do optymalizacji na swój serwer i zwraca nam już zoptymalizowane pliki. Jeśli z jakiegoś powodu chcemy optymalizować całość lokalnie to możemy skorzystać z wtyczki EWWW Image Optimizer, która działa na podobnej zasadzie, ale to nasz serwer zajmuje się optymalizacją. Minus jest taki, że ta wtyczka może nie działać poprawnie na większości serwerów współdzielonych.

Optymalizuj bazę danych

Baza danych jest podstawą każdego serwisu opartego o WordPress. To własne tam trzymane są wszystkie dane, ustawienia, treści i informacje niezbędne do prawidłowego działania naszego serwisu.
Warto więc raz na jakiś czas usunąć zbędne i nadmiarowe dane z bazy. Tym bardziej że w niektórych przypadkach potrafi wpłynąć to korzystnie na szybkość ładowania się strony.

Polecaną przeze mnie wtyczką do WordPress w tym zakresie jest WP-Sweep, który sprawdza całą bazę danych WordPressa i pozwala jednym kliknięciem usunąć nadmiary danych zgromadzonych w bazie.

Po zainstalowaniu wystarczy znaleźć ją w menu Narzędzia -> Sweep i kliknąć przycisk Sweep przy danych, które chcemy usunąć z bazy.

sweep

Jak często optymalizować bazę danych? To zależy od tego, jak duża jest nasza strona i jak często mieniamy coś w konfiguracjach – ja zazwyczaj staram się robić to raz na kwartał, ale równie dobrze bazę możemy optymalizować raz na miesiąc czy raz w tygodniu przy dużych serwisach.

Oczywiście, pamiętajmy o wykonaniu kopii bazy danych, zanim damy działać tej wtyczce.

Usuń zbędne wersje wpisów i usunięte wpisy

WordPress podczas tworzenia każdego nowego wpisu, zapisuje sobie co pewien czas aktualną jego wersję. Dzięki temu, gdy przypadkowo zamkniemy przeglądarkę, czy z innego powodu przerwiemy nieoczekiwanie jego tworzenie, możemy w każdej chwili powrócić do ostatnio zapisanej wersji.
Te wersje wpisu trzymane są w bazie danych dla wszystkich treści tworzonych w WordPressie od początku istnienia bloga. Tym sposobem np. dziś mogę wrócić do kilkunastu zapisanych wersji, które są przy pierwszym wpisie na moim blogu.

Nie zawsze wersje wpisów (szczególnie tych starszych) są nam potrzebne, w związku z tym możemy je w większości przypadków usunąć z bazy danych.

Tu z pomocą przychodzi wtyczka WP-Sweep, opisana przy okazji czyszczenia bazy danych, która pozwala na usunięcie automatycznie zapisywanych wersji wpisów, jak i usuniętych wpisów, które cały czas są w naszej bazie danych.
Wystarczy po instalacji wtyczki kliknąć przycisk Sweep przy polach Auto drafts i Deleted posts. I już WordPress lżejszy :-)

sweep

Trzeba pamiętać, aby przed jakimikolwiek zmianami w bazie danych wykonać kopię całej bazy danych.

Wyłącz pingbacki i trackbacki

Pingbacki i trackbacki to mechanizm wbudowany w WordPressa, który odpowiada za powiadamianie blogów między sobą o tym, że w opublikowanym wpisie jest link do danego bloga. Założenie było takie, że jeśli np. ja pisząc ten wpis, podlinkuję w nim artykuł z innego bloga, który korzysta z tego mechanizmu, to podlinkowany bloger otrzyma o tym powiadomienie (podobne do nowego komentarza na blogu) i będzie mógł po zatwierdzeniu pod komentarzami tego wpisu umieścić informację, że wspomniałem o nim na swoim blogu.

Mechanizm jest obecnie na wymarciu i w 99% wykorzystywany jest przez spamerów, którzy używają pingbacków i trackbacków to generowania fałszywych powiadomień, licząc na to, że pojawi się ono jako link pod wpisem na blogu.

Zastanów się więc czy korzystasz z tego mechanizmu, czy jest on Ci potrzebny i kiedy ostatnio dostałeś takie powiadomienie. Jeśli nie wiesz nawet co to jest, to możesz śmiało je wyłączyć w panelu zarządzania WordPressem wchodząc w Ustawienia -> Dyskusja i odznaczając opcję „Zezwól innym blogom na powiadamianie o zamieszczeniu odnośnika (pingbacki i trackbacki) do nowo dodanych artykułów„.

pingbacki i trackbacki

Ustaw DNS-prefetch dla zewnętrznych źródeł

Jeśli nasza strona pobiera jakieś elementy z zewnętrznych źródeł warto dodać na początku kodu strony tag dns-prefetch. Pozwoli to przeglądarce już podczas rozpoczęcia wczytywania strony na odpytanie DNSów o adresy IP zewnętrznych źródeł, z których pobierane będą treści, więc w konsekwencji – szybsze ich wczytanie na późniejszym etapie ładowania strony.

Najczęstszymi zewnętrznymi źródłami są:

  • czcionki i skrypty z serwerów Google
  • skrypty statystyk i reklam
  • pliki z CDNów

Aby zrobić to u siebie, najpierw sprawdźmy z jakich zewnętrznych źródeł strona pobiera dane – możemy to zrobić za pomocą narzędzia WebPageTest, po sprawdzeniu strony wchodząc w zakładkę „Domains”. Znajdziemy tam listę wszystkich domen, do których odwołuje się przeglądarka wczytując naszą stronę.

Następnie na początku tagu <head> na naszej stronie dodajemy wpisy dla każdego zewnętrznego źródła wyglądające tak:

<link rel="dns-prefetch" href="//fonts.googleapis.com"/>

Na moim blogu całość w kodzie prezentuje się w ten sposób:
dns-prefeth

Używaj CloudFlare

O CloudFlare pisałem już na blogu to proste i dla większości zastosowań darmowe narzędzie, którego jednym z zadań jest optymalizacja strony pod kątem szybkości.

Po podpięciu domeny pod tę usługę powinniśmy zainteresować się zakładką „Speed” w której mamy dwa, całkiem ciekawe i skuteczne sposoby przyspieszenia strony:

  • Auto Minify
    Jest o opcja zmniejszenia rozmiaru plików HTML, CSS i JavaScript w kodzie źródłowym naszej strony, poprzez usuniecie wszelkich zbędnych elementów z kodu.
  • Rocket Loader™
    Autorska usługa CloudFlare, która skupia się na szybkim ładowaniu stron zawierających skrypty JavaScript. Zmniejsza ilość zapytań, ładuje skrypty asynchronicznie i umieszcza je w cache.

CloudFlare Speed

Dobrym pomysłem jest włączenie obu z nich, co dodatkowo pozwoli na przyspieszenie ładowania się naszej strony.

Słowo na koniec

I to już koniec poradnika. Mam nadzieję, że okaże on się od przydatny dla Ciebie i pomoże Ci przyspieszyć Twoją stronę czy blog oparty na WordPressie. W przyszłości postaram się rozbudowywać ten wpis o nowe rozwiązania i pomysły, więc śmiało możesz wracać do wpisu za każdym razem, gdy pracujesz nad szybkością ładowania się strony.

Na koniec chciałbym poprosić Cię o podzielenie się tym wpisem na Facebooku, czy w innych social mediach – odwdzięczysz się w ten sposób za pracę, którą włożyłem w jego przygotowanie, oraz sprawisz, że Internet stanie się szybszy :-)

Fot. © MM

Podobał Ci się ten artykuł?

Jeśli tak, to zapisz się poniżej na bezpłatny newsletter i otrzymuj ode mnie powiadomienia o nowych wpisach poświęconych marketingowi internetowemu, e-commerce i SEO/SEM.

ZERO spamu. Nikomu nie udostępnię Twojego maila.

Komentarze

36 komentarzy

Piotrek

A dlaczego nie olać WP? :) Problem z głowy.
A tak na serio, to w większości przypadków problemem są właśnie nieoptymalne/dziurawe wtyczki do WP.
DNS prefetch nie wpływa na szybkość. Testowałem to.

Łukasz

Hej, fajny poradnik :) zastanawiam się nad czy jest sens używać CloudFlare gdy serwis jest kierowany tylko do polskich użytkowników? Dokładnie chodzi o sklep internetowy postawiony na WooCommerce.

Mateusz Mazurek

Łukasz, ja używam na polskich stronach na których 99% użytkowników jest z polski. Po pierwsze odciążam serwer (CloudFlare robi dodatkowy cache i wycina ruch niepotrzebnych robotów) a po drugie przyspieszam działanie strony (zmniejszenie plików CSS/HTML/JS).

pablo

Odchudzanie Bazy Danych na pewno wpłynie na mniejsze obciążenie hostingu, ale czy ma jakikolwiek wpływ na szybkość ładowania strony?

Mateusz Mazurek

Pośrednio tak. W końcu mniejsze obciążenie hostingu to mniej zasobów przy każdym zapytaniu i szybsze wykonywanie zapytań do bazy. Choć w większości przypadków zmiana będzie praktycznie niezauważalna (no chyba, że baza danych jest naprawdę zapchana).

Paweł N

Naprawdę solidnie przygotowany artykuł, który w jednym miejscu zbiera najważniejsze aspekty, które wpływają na szybkość działania instalacji WordPressa oraz na zmniejszenie zasobożerności na pamięć i CPU serwera.
Dodałbym jeszcze, że szybsze wczytywanie strony poza wspomnianą, wyższą konwersją to również lepsze pozycjonowanie danej strony – nikt przecież nie lubi wolno wczytującej się strony to dlaczego umieszczać ją wysoko na liście wyników wyszukiwania?

Marek

Łukaszu Cloudflare ma CDNy w Warszawie z bezpośrednim wpięciem do wielu operatorów. Przyśpieszenie ładowania zasobów może być zauważalne.

Janek

Mam problem z optymalizacją obrazów, używam Smush it’a, ale po sprawdzeniu w Google Speed Insights nawet po optymalizacji wywala mi to samo,

Mateusz Mazurek

Janek, ja nigdy nie miałem takiego problemu. Po optymalizacji obrazków zawsze Google Speed Insights pokazuje, że z obrazkami jest już wszystko ok.

Forum wordpressa - wordpress.org.pl

Jeden z bardziej kompleksowych wpisów na ten temat w pl blogosferze :)
przy okazji można rozwinąć poniższy pkt
„Szablon posiada kilka swoich plików, wtyczki „dorzucają” swoje pliki i finalnie mamy wiele
niezoptymalizowanych plików do pobrania przy każdym odwiedzaniu strony.”
dla np. pluginu contact-form-7 który używasz można dodać poniższy kod w pliku motywu functions.php gdzie pliki js i css zostaną dołączone tylko do strony ‚kontakt’
[code]add_action( ‚wp_print_scripts’, ‚cf7_js’, 100 );

function cf7_js() {
if ( !is_page(‚kontakt’) ) {
wp_deregister_script( ‚contact-form-7’ );
}
}

add_action( ‚wp_print_styles’, ‚cf7_css’, 100 );

function cf7_css() {
if ( !is_page(‚kontakt’) ) {
wp_deregister_style( ‚contact-form-7’ );
wp_deregister_style( ‚style’ );
}
}
[/code]

Mateusz Mazurek

@Forum wordpressa – wielkie dzięki za uzupełnienie i miłe słowa!

Andy

Solidnie przygotowany materiał – dobrze pokazuje co jest ważne w przypadku konstruowania serwisu internetowego. Materiał godny polecenia dla tych którzy skupiają się głównie na grafice czyli warstwie prezentacji i zapominają o reszcie.

Używam od pewnego czasu CF, daje satysfakcjonujące rezultaty. Jednocześnie dla porównania, z własnego doświadczenia – podobne efekty optymalizacyjne (np. w gtmetrix czy pingdom) można osiągnąć bez chmury.

Bez wątpienia jednak warto korzystac z chmury, zwłaszcza CloudFlare, która zapewnia większy poziom ochrony. Warto dodać, że CloudFlare korzysta z protokołu SPDY i od kilku miesięcy z http/2 który powoli ma zastępować SPDY. To dopiero będzie rewolucja w prędkości serwisów internetowych!

Kolejna kwestia dla której warto używać chmury – duża grupa użytkowników dba o prywatność i korzysta z serwerów proxy za granicą skąd wychodzi do Internetu. Dla nich użycie CDNma znaczenie. Podobnie wygląda sytuacja z użytkownikami korporacyjnymi którzy do Internetu często wychodzą na świat oprzez swój serwer w centrali firmy.

Co do wtyczek pomocnych w cache’owaniu jak W3T – to warto pamiętać, żeby wyłączyć w niej opcję minify przed podłączeniem do CloudFlare który sam zapewnia tę funkcjonalność. Użycie minify w W3TC i jednocześnie w CF powoduje różne problemy.

Kolejna kwestia – po zmianie rzeczywistego hostingu na inny w trakcie gdy był podięty CF – należy zmienić adresy IP w CloudFlare na adresy IP od nowego dostawcy hostingu.
Wskazówki jak podłączyć wp do CF: https://support.cloudflare.com/hc/en-us/articles/201717894-Using-CloudFlare-and-WordPress-Five-Easy-First-Steps
Dzięki za artykuł :-)

Mateusz Mazurek

@Andy – Twój komentarz jest dobrym uzupełnieniem poradnika :-)

Janunsz Kamiński

Bardzo dobry artykuł! Zapisuję sobie do ulubionych :)

Seo-Faq

Hej, ja na swojej stronie używam zen cache. Co do samego artykułu świetny na pewno wypróbuje niektóre z sposobów zaproponowanych przez Ciebie.

Marcin Tarski

Mimo, że długo siedzę na WP to faktycznie jest tu kilka przydatnych wskazówek. Dzięki!

fd

czy ja wiem, czy solidnie przygotowany?
Weźmy Cloudflare
żeby zaczęło działać nie wystarczy utworzenie konta i spięcie go z wp przez wtyczkę w3.
Trzeba jeszcze zmienic dns w panelu administracyjnym usługodawcy hostingu i wtedy zaczynają się jaja (np w przypadku home.pl).

Mateusz Mazurek

Fd, dzięki za opinię. Oczywiście to ogólny przegląd wszystkich metod, wraz z linkami do źródeł. O każdym z 18 sposobów można by napisać osobny artykuł z instrukcją krok po kroku (np. jak zmienić DNSy na CF, jak ustawić konkretną wtyczkę). Cieszę się jednak, że artykuł przydał się Tobie i Cię zainspirował.

To ja

też pojawia się pytanie o zasadność stosowania cloudflare jeżeli większość ruchu pochodzi z polski…
W ich przypadku przejście na cloudflare będzie raczej spowalniało stronę.

Mateusz Mazurek

To ja – w żadnym wypadku. Cloudflare ma także serwery w Europie, w tym w Polsce, więc wdrożenie raczej przyspieszy stronę.

moneygrabbing

Co do Cloudflare parę razy słyszałem, że jak ktoś nie ma międzynarodowej strony to instalacja jest zbędna. Al e jeszcze nie testowałem i będę musiał wypróbować i sam się przekonać.
Na pewno warto zajrzeć na te stronki i zrobić sobie testy:
https://gtmetrix.com/
http://tools.pingdom.com/fpt/
http://webspeed.intensys.pl/
https://developers.google.com/speed/pagespeed/insights/

kinga

fajnie zrobione, mam tylko pytanie czy instalacja tych wszystkich wtyczek nie dociąży w jakiś sposób znowu wp ?
i pytanie drugie :
jak to w końcu jest do czego ten wordpress się nadaje czy stronę typu smashingmagazine na niej spokojnie można stworzyć (ta chyba jest na wp) czy to już za dużo informacji jak na wp ?

Lokalna

Wyjątkowo rzetelny artykuł i dobrze, sprawnie i czytelnie prowadzona narracja.
Szczególnie dziękuję za informacje dotyczącą linków z social media – od dzisiaj ograniczam się do niezbędnego minimum.

Informatyk Warszawa

Bardzo dokładny i fajny artykuł. Miło się czyta :)

LTB SEO

Mateusz – super artykuł. Kluczowa jest optymalizacja obrazków – może poprawić szybkość ładowania witryny o kilkadziesiąt procent.

Ania

Bardzo dziękuję za naprawdę przydatny artykuł. Jestem totalnym laikiem w temacie tworzenia stron www, hostingu i serwerów, ale udało mi się stworzyć stronę, która do pewnego momentu działała bardzo sprawnie – ale właśnie, tylko do jakiegoś czasu! Próbowałam wielu rzeczy, nowych wtyczek, które dodatkowo zaśmiecały skrypt, różnych „innych” porad, które kończyły się reinstalacją elementów strony… Aż dotarłam tutaj, zastosowałam się do większości wskazówek i strona ładuje się znacznie szybciej, a przy tym nie wyrządziłam żadnych szkód. Dziękuję bardzo za wsparcie ;)

Przemek z Seostacja.pl

Trafiliśmy na blog po linkach „konkurencji”, ale widzimy, że warto tutaj zostać na dłużej. Świetny artykuł i bardzo wyczerpujący – można powiedzieć, że to rzadkość dzisiaj. Na pewno będziemy zaglądać regularnie i bacznie obserwować nowości. Pozdrawiamy :)

Stanisław

Panie Mateuszu a czy zainstalowanie wtyczki jetpack pack może poprawić szybkość strony? Co Pan sądzi o tej wtyczce?

Mateusz Mazurek

Stanisławie, ta wtyczka nie ma za zadanie poprawienia szybkości strony i tego nie robi.

gielo

Takich kilka uwag. HTTP2 wymaga szyfrowanego połączenia, może nie tyle samo http2 ale przeglądarki internetowe to wymuszają. Warto się tu więc zainteresować darmowym Let’s encrypt. Kilka hostingów w Polsce już obsługuje te certyfikaty, w najlepszej pozycji jesteśmy jednak gdy mamy serwer VPS lub dedykowany :)

Innym sposobem na przyspieszenie stron (tu niestety wchodzi w grę tylko dedyk i VPS) i to nie tylko na WP jest PageSpeed i jego porządna konfiguracja według FAQ Google. Pozwala nam on między innymi na takie rzeczy jak kompresję html, JS, CSS i wiele więcej, juz na poziomie serwera www.

Na koniec polecam także wtyczkę wp security & firewall, która może i sama nie przyspieszy nam wp, ale może pomóc odciążając nasz serwis poprze blokowanie spamerów i zbędne boty.

Dominika

Bardzo pomocny wpis :) Skorzystałam z kilku porad i strona ładuje się bez zarzutu. Dziękuję :)

HOLIGO

Super artykuł kilka przydatnych informacji, na pewno skorzystam.

Michał Doberman

z wszystkiego skorzystałem co napisałeś niemal ‚krok po kroku’, odpuściłem sobie cloudflare a wtyczkę wp-cache uruchomiłem tylko na ustawieniach domyślnych. Mam lepszą ocenę na google speed insights jednak czy to normalne, że dalej mam ponad 4mb danych podczas ładowania strony?

Pecetowicz

Wspomniałeś o wszystkim :) Szczególnie polecam zmienić wersję PHP na 7… daje mega efekty, WP chodzi 2 nawet 3 razy szybciej.

@Michał Doberman masz na stronie być może za dużo obrazków lub plików JS.

Szymon - copywriterexpert

Dziękuję pięknie, wskazówki te wykorzystuję każdego dnia, a kilka z nich testuje aktualnie :)

Wojtek

Wow.. Jestem pod wrażeniem zawartości tego wpisu. Kawał dobrej roboty. Wszystko w jednym miejscu. Na pewno przyda się nie jednemu amatorowi jak i profesjonaliście.

Tego szukałem :)


Skomentuj

Mateusz Mazurek

Pasjonat internetu zajmujący się pozycjonowaniem od 2004 roku, a od 2006 świadczący usługi SEO dla klientów. Żywo zainteresowany tematyką IT, biznes, e-commerce, usability, analityką internetową i pokrewnymi.