Optymalizacja WordPress – Kompletny Poradnik – Najlepsze sposoby na przyśpieszenie Twojej strony

WordPress to najpopularniejszy system CMS na rynku – bazuje na nim blisko 33% stron w internecie, wokół niego powstała różnorodna i bogata społeczność. Stworzono masę motywów i wtyczek, jest solidnie przygotowany pod SEO i daje ogromne możliwości tworzenia zaawansowanych witryn internetowych.

Bazując na danych z Builtwith na świecie jest aktualnie 24,808,989 stron internetowych korzystających z WordPress. Jak widać na poniższym wykresie tendencja jest wzrostowa.

Stąd pomysł na obszerniejszy artykuł dotyczący optymalizacji WordPress na którego zapoznanie się zapraszam 🙂

Myślę, że po oficjalnym stanowisku Google można stwierdzić z pewnością, że czas ładowania strony stał się jednym z czynników na które składa się finalna pozycja w wynikach organicznych:

People want to be able to find answers to their questions as fast as possible — studies show that people really care about the speed of a page. Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.

Czas ładowania strony stanowi o poziomie dostępności – zarówno dla botów indeksujących, jak i dla wszystkich użytkowników Internetu.

Każdy chciałby, by jego strona działała szybko. Długie ładowanie elementów nie przysparza popularności – odwiedzający bardzo cenią szybkość dostępu do pożądanych treści, która przekłada się na konwersję, czyli oczekiwane zachowanie użytkowników na stronie (np. przeczytanie artykułu, kupno produktu, zlecenie usługi). Dlatego tak ważna jest optymalizacja WordPress.

Zanim przejdę do szczegółów, jedna uwaga: nie każda strona postawiona na WordPress jest taka sama. Rozsądnie jest zrobić rozgranicznie na strony dynamiczne (np. Woocomerce, Easy Digital Downloads) i statyczne (np. Blogi czy Lokalny biznes).

Różnice jakie można wyróżnić:

Strony dynamiczne	Strony statyczne
zmiany są częste, np. ceny w woocomerce	dane nie zmieniają się często
nie do wszystsiego można użyc cache	zapytania moga odbywać się bez problemu bezpośrednio z cache
dodatkowe zapytania do bazy	mniej zapytań do bazy
więcej JS i CSS	Mniej JS i CSS
Więcej uzytkowników, krótsze sesje	Mniej użytkowników dłuższe sesje

Dlatego przedstawione sposoby na optymalizację, nie do każdego typu strony będą mogłby być wdrożone, a czesem nawet nie będzie takiej konieczności.

Nie oszczędzaj na hostingu

Podstawą sprawnie działającej witryny jest kupno dobrej platformy pod serwer. Wbrew pozorom to ani pojemność w postaci przestrzeni (której zdecydowana większość użytkowników nie jest w stanie zapełnić) ani olbrzymi transfer (który de facto jest często niemożliwy do wykorzystania) są najważniejsze i nie one powinny determinować wybór hostingu.

Warto zapoznać się z opiniami klientów, które łatwo znaleźć na forach tematycznych. Tam też można zapytać o sprawność wsparcia technicznego w sytuacjach kryzysowych. We własnym zakresie dobrze jest wykonać najprostszy test – sprawdzić, jak długo czeka się na odpowiedź na maila do pomocy technicznej.

Dobry dostawca zwykle udostępnia nieodpłatnie swoje usługi na krótki okres próbny. Jest to czas, w którym możemy przetestować konto. W Internecie można znaleźć opisane wyniki przeprowadzonych już testów, niemniej warto wykonać je samodzielnie dla konkretnej strony. Można to zrobić za pomocą łatwo dostępnych narzędzi takich jak:

Pingdom Speed Test – umożliwia sprawdzenie wydajności serwera i prędkość, z jaką ładują się elementy witryny,

GTX Metric – podobne narzędzie jak Pingdom, ale zdarza się, że pokazują różne dane,

PHP benchmark Script – sprawdzenie z jaką prędkością wykonywane są skrypty PHP. Paczke ze skryptem wrzuca się na serwer i uruchamia. Nastepnie mamy wynik szybkości wyliczeń matematycznych:

PHP/MySQL CPU performance statistics – jest to wtyczka dedykowana dla WordPressa, która sprawdza wydajność serwera w czynnościach na bazach danych PHP/MySQL.

Zmień wersję PHP

Wersja PHP, jaką mamy uruchomioną na serwerze ma duże znaczenie, jeśli chodzi o prędkość jego działania i stron na nim funkcjonujących. Im nowsza jest wersja używanego PHP tym prędkość wykonywania skryptów jest wyższa i wydajniejsza.

Istotną kwestią jest także bezpieczeństwo – wersje PHP poniżej 5.6 nie są już wspierane, co oznacza, że odkryta luka w zabezpieczeniach, która umożliwi włamanie na stronę nie zostanie w żaden sposób „załatana” – witryna pozostanie niezabezpieczona.

Powracając stricte do WordPressa, to ma on swoje wymagania instalacyjne, które stale rosną. O ile „czystego” WP nadal można uruchomić na PHP w wersji 5.2 o tyle użycie nowych reguł pisania kodu (wg wytycznych 5.6 lub 7.0) spowoduje wyświetlenie błędu krytycznego strony. Należy też liczyć się z tym, że nowsze szablony i wtyczki nie będą działać poprawnie. Aktualnie najnowszą używaną, stabilną wersją jest 7.3.2 i swoją prędkością przewyższa poprzednie nawet ponad dwukrotnie. Wielu dostawców umożliwia zmianę w panelu administracyjnym domyślnej (starszej) wersji PHP na najnowszą.

Świetnie badanie na ten temat porównania wersji PHP przeprowadziła Kinsta.
Jeśli masz ochotę bardziej wgryźć się w temat – polecam podlinkowany artykuł.

Z badania wyszło, że porównując PHP 7.3 do PHP 5.6 można wykonać trzy-krotnie więcej zapytań na sekundę. Średnio PHP 7.3 jest szybszy o 9% niż PHP 7.2

Używaj protokołu HTTP/2

To rewolucja w świecie technologii internetowych, mająca olbrzymi wpływ na szybkość ładowania witryn. Protokół HTTP/2 pozwala między innymi na scalenie wielu połączeń w jedno stałe, obsługujące kilka typów treści, czy kompresję nagłówków. Jest on obsługiwany przez wszystkie liczące się na rynku przeglądarki internetowe, ale tylko przez część usług hostingowych.

Przy wyborze dostawcy warto zwrócić uwagę, czy udostępniany przez niego hosting może obsługiwać HTTP/2. Jeśli nie, to można skorzystać z rozwiązań CloudFlare. Lepiej jednak zaaopatrzyć się w hosting który wspiera HTTP/2.

Istnieją narzędzia, które pomagają sprawdzić, czy nasz hosting obsługuje nowy protokół oraz jak jego wprowadzenie realnie wpływa na prędkość stron:

• akamai.com oraz httpvshttps.com – symulacje różnicy pomiędzy HTTP/2 i starszym protokołem

• tools.keycdn.com – sprawdzenie obsługi HTTP/2 przez nasz hosting. Wystarczy podać nazwę domeny.

Skorzystaj z lekkich motywów lub zamów dedykowany

Mówi się, że pierwsze wrażenie jest najważniejsze i robi się je tylko raz. Ta ocena budowana jest w pierwsze kilka sekund, więc nie ma nic wspólnego z treścią. Początkujące osoby potrafią jednak tak bardzo skupić się na wizualnym aspekcie, że pomijają inny, który w przypadku witryn także wpływa na to pierwsze wrażenie, a jest nim czas ładowania strony. Głównym winowają kiepskiej optymalizacji wordpress jest źle dobrany motyw.

Niektóre z nich są udostępniane bezpłatnie, za inne trzeba zapłacić. Wiele z nich jednak, chcąc zaspokoić oczekiwania użytkowników, posiada tak wiele różnych funkcji, że spowalnia to proces ładowania całej strony. Przy wyborze motywu poza kryterium gustu i estetyki warto się też zastanowić, czy na pewno skorzystamy ze wszystkich proponowanych przez niego funkcji.

Zazwyczaj można przetestować motywy (w wersjach demonstracyjnych) nim się je zakupi – można wtedy sprawdzić szybkość ich działania. Dobrze jest to zrobić na kilku różnych przeglądarkach i rozdzielczościach.

Warto zwrócić uwagę na Javascripts – ile ich jest i jak duże – i czy są ładowane paczki do funkcji, które nie są używane. Tak to zdarza się bardzo często. Dlaczego ładować skrypty i style dla formularza kontaktowego na stronie głównej, skoro go tam nie ma?

Przed wyborem motywu warto przeczytać komentarze użytkowników na jego temat, a także sam opis – zdarza się bowiem, że autor / dystrybutor informuje, że motyw został zoptymalizowany pod kątem prędkości działania. Inną opcją jest zlecenie stworzenia szablonu dedykowanego z zastrzeżeniem, że zależy nam na szybkości działania.

Generalnie w wyborze motywu warto kierować się zasadą:

1. Potrzebuje szybkiego motywu, który ma minimalną ilość funkcji, ale wystarczająco, żebym wykonał założenia projektu,
2. Szukam czegoś unikalnego, ale będę mógł WYŁĄCZYĆ funkcje których nie potrzebuje.

Szablony WordPressa zwykle posiadają możliwość znacznej konfiguracji i pozwalają użytkownikowi na wyłączenie niepotrzebnych elementów motywu.

Co mógłbyś wyłączyć? Jest tego sporo: Google Fonts, Font Awesome, slajdery, galerie masonry, video czy efekty parralax. Warto ograniczyć się do naprawdę niezbędnych elementów.

Czy mógłbym wskazać szablon warty uwagi? Tak. WP Astra. Tylko do pełnej możliwości jego wykorzystania konieczny jest kreator.

Nie używaj dużo wtyczek lub postaw na zaufane

WordPress ma nieprzebrany wybór dedykowanych mu wtyczek, dzięki którym można łatwiej administrować stroną, znacznie ją rozbudować i wyposażyć w wiele ciekawych i pożytecznych funkcji (może np. być sklepem internetowym, zaawansowanym strukturalnie portalem, bogatym w możliwości blogiem) przy stosunkowo niewielkim nakładzie pracy i czasu. Niemniej trzeba mieć na uwadże, że słabej jakości wtyczki będa obciążać proces ładowania się strony.

Większość z nich dodaje do kodu źródłowego naszego WordPressa swoje JS oraz arkusze stylów CSS i nierzadko robią to na całej stronie, a nie w konkretnym miejscu przeznaczenia.

Aby uniknąć spowalniania strony przez wtyczki przede wszystkim instalujmy wyłącznie te, które są nam niezbędne. Często niektóre wystarczy zastąpić krótkim kodem, który da pożądany efekt bez obciążania strony.

Istnieje – nomen omen – wtyczka UsageDD pozwalająca sprawdzić wpływ każdego zainstalowanego pluginu na funkcjonowanie całej witryny. Ją także warto wyłączyć i odinstalować, gdy spełni swoje zadanie.

Kontroluj swoje wtyczki

W WordPress optymalizacja strony to również monitorowanie i reagowanie na jego wyniki. On cały czas się rozwija. Powstają nowe wtyczki i zabezpieczenia, likwidowane są różnego rodzaju błędy w funkcjonowaniu tych już działających, w tym związane z bezpieczeństwem, jak również z szybkością działania.

Zdarza się, że tak prosty zabieg jak zaktualizowanie używanych na stronie wtyczek może bardzo znacząco wpłynąć na obniżenie czasu jej ładowania.
Narzędziem pomocnym w monitoringu wtyczek jest wspomniany wyżej UsageDD.

Warto tu jeszcze wspomnieć o Gravatarze. Choć nie jest on wtyczką lecz usługą, to efekt działania jest zbliżony – zintegrowany z WP, ma za zadanie wyświetlać miniatury zdjęć komentujących przy komentarzach. Usługa czerpie ze źródeł zewnętrznych, co odbija się na szybkości ładowania strony. Aby tego uniknąć trzeba Gravatara usunąć.

Jak samodzielnie zarządzać gdzie ładowane będą style CSS oraz skrypty pluginów?

Usuwamy style z Contact Form 7

Przedstawię swój sposób, który wykorzystuje do ładowania skryptów i styli CSS tam gdzie tego potrzebuje. Posłuże się przykładem z Contact Form 7.

Trzeba mieć na uwadzę, że każda wtyczka jest inna i poodejścia do jej optymalizację może być inne.

1. Musimy dodać dwie linijki do function.php które wyłączą ładowanie css i js:

   add_filter( 'wpcf7_load_js', '__return_false' ); // Wyłączenie CF7 JavaScript
   

   add_filter( 'wpcf7_load_css', '__return_false' ); // Wyłączenie CF7 CSS
   

2. Wskazujemy gdzie mają ładować się potrzebne paczki. Tutaj akurat wskazuję na podstronę “kontakt”:

   function load_wpcf7_scripts() {
   if ( is_page('kontakt') ) {
       if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
           wpcf7_enqueue_scripts();
       } 
       if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
           wpcf7_enqueue_styles();
       }
   }
   }
   

WP Asset Clenup

Można posiłkować się wtyczką, które nie będzie obciążać frontu, a dzięki niej manualnie będziemy w stanie wskazywać, gdzie ładować skrypty wtyczek.
Użycie WP Asset Clenup często bywa bardzo przydatne, szczególnie kiedy przyjmujemy projekt po kimś innym, który nie przykładał uwagi do optymalizacji i ciężko się połapać która wtyczka jaką funkcjonalność dostarcza 😉

Podsumowując, każda kolejna wtyczka to dodatkowy czas potrzebny na wyświetlenie całej strony na urządzeniu użytkownika, a to prowadzi do odwrotnego niż oczekiwany skutku, czyli zniechęcenia do jej przeglądania.

Ogranicz ich ilość do niezbędnego minimum, a zyskasz w oczach odwiedzających Twoją stronę. Czasem jednak nawet jedna może obniżyć szybkość działania Twojej strony, a 5 kolejnych będzie miało znikomy wpływ. Dzieje się tak chociażby z powodu kiepskiej jakości kodu lub linkowania do kolejnych paczek styli np. Bootstrap (200KB).

Rozmiar HTML, JS, CSS – minimalizacja skryptów

Na budowę naszego WordPressa składa się wiele skryptów JS, arkuszy stylów CSS oraz pliki własne motywów i wtyczek. Tworzy to mieszaninę nieuporządkowanych i niezoptymalizowanych plików, które przeglądarka użytkownika pobiera za każdym razem, gdy odwiedza witrynę po raz pierwszy.
Są od tego wyjątki (możesz do ładowania Jquery używać CDN), ale generalnie paczki ładowane z adresu Twojej domeny będą pobierane za każdy pierwszą sesją użytkownika (jak to zoptymalizować będzie mowa w następnym podpunkcie)

Aby tego uniknąć należy „posprzątać” w kodzie – zawiera on często komentarze, puste linie, których można się pozbyć. Drugą rzeczą jest scalenie kilku plików skryptów lub stylów w jeden, co redukuje liczbę odwołań.

Rozwiązaniem jest minimalizacja, czyli usunięcie tych dodatkowych znaków. Służą do tego specjalne narzędzia, jak np. Minifier lub funkcja Minify w W3 Total Cache. Po takim zabiegu przykładowo plik jquery-3.3.1.js zamiast 266 kB „waży” już tylko 85 kB. Różnica jest spora, prawda? A to jest tylko jeden plik. Minimalizacja to nie tylko szybsza praca strony, ale także mniejszy transfer, a czasami nawet wyższa pozycja w wyszukiwarce.

Ja przy pracy nad dedykowanymi motywami WordPress, używam GULP do minifikacji skryptów JS. Mam ustawione, automatyczne wykrywanie zmian i automatyczną minifikację. Tak samo z stylami CSS, które generuje z SASS, a następnie minifikuje.

Jquery ładowane z CDN zamiast Twojego serwera

WordPress jest tak skonstruowany, że Jquery i Jquery Migrate ma wbudowany domyślnie i jest ładowane z Twojego serwera. Jednak są to tak popularne skrypty, że prawdopodobieństwo, że użytkownik który wchodzi na Twoją stronę, ma już skrypt w cache jest bardzo duże.

Można to naprawić, w taki sposób, że zmienić ładowanie Jquery na CDN Google. Użyjemy rozwiązania jak poniżej, które najpierw wyłącza domyślne Jquery, a następnie dołącza to ładowane z CDN. Kolejne milisekundy do czasu ładowania!

//Making jQuery to load from Google Library
function replace_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'replace_jquery');

Wykorzystaj cache

Bazując na fakcie, że wszelkiego rodzaju grafik, szablonów, arkuszy stylów CSS, skryptów JS nie zmienia się co chwilę, można ustawić czas przetrzymywania tych plików przez przeglądarki na dość długi. Spowoduje to, że urządzenie osoby odwiedzającej witrynę ponownie załaduje ją znacznie szybciej wczytując rzeczone pliki z własnego dysku.

Aby ustalić czas przechowywania różnych typów plików należy zmodyfikować plik .htaccess. Co istotne – wartości podawane w nim oznaczane są sekundach.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch> 

Zastąpienie widgetów social mediów

Popularne dodatki social mediów (facebook, twitter, google+ itd.) w postaci przycisków, liczników i widgetów często mają ogromny udział w spowalnianiu ładowania strony. Dzieje się tak, ponieważ pobierają informacje ze źródeł zewnętrznych, z którymi się muszą połączyć, by zaktualizować dane o ilości reakcji.

Po raz kolejny kluczem do poprawienia prędkości jest analiza, które z dostępnych elementów są nam rzeczywiście niezbędne. Warto zostawić przyciski tylko tych social mediów, z których korzystają docelowi odbiorcy strony.

Podobnie jest z widgetami pozwalającymi na wyświetlenie zdjęć profilowych fanów strony, ostatnich komentarzy czy liczników – być może wystarczy, jeśli zastąpimy je linkiem do fanpage’a w danym medium.

Dobrym pomysłem jest zastosowanie tekstowych linków lub ikon z linkowaniem do odpowiedniego efektu (polub/udostępnij na …).

Kompresja danych „w locie”

Kompresja GZIP dotyczy głównie plików html, CSS i JS. Włączenie jej owocuje zmniejszeniem przez serwer strony jeszcze przed pobraniem danych przez odwiedzającego i dekompresją przez jego przeglądarkę, co zmniejsza liczbę przesyłanych danych nawet o 80 procent. Dla odwiedzającego stronę nie jest to uciążliwe, bo nie uczestniczy w procesie dekompresowania plików, a zyskuje on na tym, że strona pojawia się szybciej.

Niektórzy dostawcy na swoich kontach hostingowych mają automatycznie ciągle aktywną kompresję GZIP, inni pozwalają użytkownikowi zarządzać nią w panelu administratora, a jeszcze inni ignorują taką możliwość. Aby sprawdzić stan faktyczny naszego konta pod kątem kompresji GZIP warto odwiedzić np.
stronę Smallseotools.com

Kompresję GZIP można uruchomić dwojako. Pierwszą możliwością jest modyfikacja wspomnianego już pliku .htaccess znajdującego się w głównym katalogu strony.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  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
</IfModule>

Druga opcja to oczywiście dedykowana wtyczka Check and Enable GZIP compression, która odpowiednio zmodyfikuje rzeczony plik za nas. Ja rekomenduję opcję pierwszą.

Optymalizacja obrazków

Pliki zdjęć i obrazów są jednymi z największych używanych na stronach internetowych. Nie muszą one w ramach oszczędności na czasie ładowania strony stracić na jakości – ich rozmiar można zredukować bez widocznego uszczerbku. Obrazy można zmniejszyć przed przesłaniem ich na serwer za pomocą Affinity Photo, Adobe Photoshop lub innego edytora obrazów, albo użyć jednej z wielu dostępnych wtyczek. W przypadku dużych obrazów konieczna może być optymalizacja obrazków obiema metodami, aby zaoszczędzić przestrzeń dyskową i transfer danych.

Wśród polecanych wtyczek można wymienić:

1. WP Smush – jej bezpłatna wersja pozwala na jednorazową optymalizację do 50 obrazów. Wykorzystując opcję Smush images on upload spowodujemy, że każdy plik graficzny umieszczany na stronie w przyszłości trafi tam już w formie zoptymalizowanej przez WP Smush. Do zmniejszania plików wtyczka pobiera je na własny serwer.
2. EWWW Image Optimizer – zasada działania jest podobna do WP Smush, ale optymalizacja może odbywać się na serwerze własnym użytkownika (opcja istotna pod kątem ochrony danych). Niestety większość współdzielonych serwerów uniemożliwia poprawne działanie tej wtyczki. Wersja premium umożliwia kompresję plików PDF i miesięczne przechowywanie kopii zapasowych.
3. Imagify – umożliwia kompresję na trzech poziomach – normalny, agresywny i „ultra”. Posiada funkcję przywracania, co oznacza, że w przypadku niesatysfakcjonującego efektu można odzyskać obraz w wersji pierwotnej lub jednym kliknięciem przeprowadzić konwersję na innym poziomie. Wersja bezpłatna jest ograniczona do 25 MB. Obrazy są przetwarzane na własnym serwerze wtyczki.
4. ShortPixel – wtyczka bezpłatna do 100 plików miesięcznie bez ograniczenia wielkości, obsługuje formaty PNG, JPG, GIF, WebP i PDF. Pobiera miniatury i pliki graficzne i przetwarza w chmurze, poprzedzając konwersję utworzeniem kopii zapasowej.
5. Optimole – w pełni automatyczna wtyczka optymalizująca, wykorzystująca CDN i lazy load (o których więcej w dalszej części artykułu), co zdecydowanie przyspiesza ładowanie zdjęć i sprawia, że nie obciąża ono prędkości całej strony.
6. Optimus WP Image Optimizer – posiada ciekawą funkcję zbiorczej optymalizacji obrazów, wykorzystuje kompresję bezstratną zmniejszając wielkość plików graficznych bez ujmowania im jakości.
7. Tiny PNG – kompresja sięga 60% w przypadku obrazów JPG i 80% w przypadku PNG, optymalizuje automatycznie nowe obrazy i masowo może skompresować te już obecne na serwerze. Bezpłatne konto posiada ograniczenie do ok 100 plików miesięcznie
8. ImageRecycle – poza kompresją obrazu optymalizuje także pliki PDF. Posiada funkcję określenia minimalnego rozmiaru pliku, który ma podlegać kompresji (mniejsze niż wskazane nie zostaną poddane optymalizacji) i opcję przetwarzania zbiorczego. Usługa – z wyłączeniem 15-dniowej wersji próbnej – jest płatna (za pakiet, nie określony czas) a obrazy są kompresowane na serwerze wtyczki.

Garść dobrych praktyk, które pomogą zoptymalizować stronę zawierającą obrazy:

1. używaj wtyczek działających na serwerach własnych by odciążyć własną witrynę
2. korzystaj z CDN
3. usuwaj niepotrzebne pliki graficzne
4. używaj efektów CSS3
5. wstawiaj zdjęcia we właściwych wymiarach
6. nie nanoś tekstu na obraz – może stracić na czytelności po przeskalowaniu
7. zmniejszaj głębię kolorów do uboższej palety barw
8. korzystaj z lazy loadingu, by nie obciążać całej strony
9. dostosuj format pliku do potrzeb – GIF dla animacji, PNG dla obrazów o wysokiej jakości i rozdzielczości, JPG do pozostałych plików graficznych
10. zautomatyzuj proces kompresji na ile to jest możliwe
11. używaj formatu WebP
12. gdy jest to możliwe używaj obrazów wektorowych
13. usuwaj metadane z plików obrazów

Optymalizacja bazy danych

Cały WordPress oparty jest o działanie baz danych – są one źródłem wszelkich danych, treści i ustawień istotnych dla prawidłowego funkcjonowania witryny. Należy więc je utrzymywać w porządku i co pewien czas usuwać dane niepotrzebne, by nie spowalniać ładowania strony. Można to robić rzecz jasna ręcznie, ale wygodniej jest użyć wtyczki. Jedną z polecanych wtyczek jest intuicyjna w obsłudze WP-Sweep, która przeczesuje naszą bazę danych i w kilku krokach pozwala usunąć to, co zbyteczne.

Bazę optymalizujemy, w zależności od wielkości strony i częstotliwości zmian w konfiguracji, co pewien czas. Im większą stronę prowadzimy tym powinniśmy robić to częściej – od raz w tygodniu po raz na kwartał czy rok. Warto sprawdzić, jak takie porządki wpływają na prędkość ładowania strony i tym kierować się przy ustalaniu terminarza. Optymalizację obowiązkowo należy poprzedzić wykonaniem kopii zapasowej bazy.

Porządkuj nieaktualne wersje wpisów

W trakcie tworzenia nowych wpisów WordPress dokonuje autozapisu, który ma chronić użytkownika przed utratą treści w przypadku nagłego wyłączenia strony z kokpitem. Dzięki temu w przytoczonej sytuacji będzie można wrócić do ostatnio zapisanej wersji naszego wpisu. Jednak te robocze zapisy znajdują się w bazie danych zawierającej wszystkie treści od początku założenia naszego WordPressa, co może spowalniać jego działanie.

Takie nieaktualne i zbyteczne wersje wpisów można usunąć. Świetnie tu odnajdzie się wspomniana już wtyczka WP-Sweep. Wystarczy wskazać do usunięcia „Auto drafts” oraz „Deleted posts”. Druga opcja jest być może nieco dziwna – usuwać usunięte wpisy? A jednak WordPress przechowuje także treści, które usunęliśmy sprzed oczu naszych odbiorców. Jeśli chcemy się ich pozbyć na dobre należy je wyrzucić z bazy. Oczywiście w tym przypadku także najpierw wykonujemy kopię zapasową bazy.

Dezaktywacja mechanizmów trackback i pingback

Można powiedzieć, że pingbacki i trackbacki to wbudowane w kod WordPressa mechanizmy archaiczne odpowiedzialne za powiadamianie między stronami o wzmiankach i wzajemnym podlinkowaniu. Pełni to podobną funkcję jak powiadomienie o komentarzu czy „polubieniu” w social mediach. Aktualnie z tych opcji korzysta niewielu uczciwych użytkowników, są one za to narzędziem w rękach spamerów generujących fikcyjne powiadomienia.

Pingbacki i trackbacki można wyłączyć.

Należy wejść w Ustawienia, na zakładkę Dyskusja i odhaczyć opcję „Zezwól innym blogom na powiadamianie o zamieszczeniu odnośnika (pingbacki i trackbacki)do nowo dodanych artykułów”.

DNS-prefetch dla elementów z zewnętrznych źródeł

Dodanie do kodu strony tagu dns-prefetch to zezwolenie przeglądarce na odpytywanie DNSów o IP źródeł zewnętrznych na etapie rozpoczynania wczytywania witryny. Przekłada się to na szybsze ich załadowanie.
Wśród najczęściej pobieranych elementów z zewnętrznych źródeł można wymienić skrypty z serwerów Google, skrypty reklam i statystyk, czcionki i pliki CDNów (serwerów przechowujących pliki do naszego WordPressa, pozwalające ładować go szybciej).

Narzędzie WebPageTest umożliwi sprawdzenie, z jakich zewnętrznych źródeł nasza strona pobiera informacje przez podanie adresów wszelkich domen, do których odwołania znajdują się w kodzie naszej strony. Aby dodać tag DNS-prefetch należy dla wszystkich źródeł zewnętrznych dodać “rel=“dns-prefetch”:

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

Używaj narzędzia CloudFlare

Jest to intuicyjne w obsłudze, darmowe narzędzie służące między innymi do optymalizacji witryny pod kątem prędkości działania. Służy do tego zakładka Speed i dwie zawarte na niej opcje, które można wykorzystywać jednocześnie.

• Rocket LoaderTM – przyspiesza wczytywanie stron z JavaScript – liczba zapytań zostaje zmniejszona, skrypty są załadowane asynchronicznie i umieszczone w cache.

• Auto Minify – usuwa zbyteczne fragmenty z kodu źródłowego (komentarze, niepotrzebne odstępy, etc.) zmniejszając tym samym rozmiar plików CSS, JS i HTML, przy czym możemy każdy typ plików „czyścić” osobno.

Do ładowania elementów o dużej wielkości użyj lazy load

Lazy loading to wprowadzenie do kodu źródłowego strony skryptu powodującego że duże pliki obrazów lub wideo są ładowane nie w chwili otwarcia strony, lecz wtedy, gdy odbiorca znajduje się dokładni w tej części witryny, w której dany obiekt się ładuje. Dzięki takiemu pobraniu danych “na żądanie” pozostała część strony nie jest obciążana i ładuje się znacznie szybciej. WordPress posiada także niekonfigurowalną wtyczkę Lazy Load, która upraszcza proces. Jak wdrożyć bez wtyczki opisałem w artykule dotyczącym optymalizacji obrazków

Usuń niedziałające linki

Nieaktywne linki to nie tylko niemiła niespodzianka dla użytkowników strony. Mają one także przełożenie na SEO WordPress. Mogą one wynikać z błędu 404 świadczącego o nieistniejącej stronie serwisu, błędnego wpisania adresu domeny lub braku możliwości otworzenia danego hiperłącza. Niedziałające linki obniżają wartość zarówno dla odbiorców jak i wyszukiwarek, dla których proprytetem jest dostępność i użyteczność.

Wśród wtyczek do WordPressa znajdują się także takie, które wyłapują trefne linki – np. Broken Link Checker. Można ją odpowiendio dostosować wskazując miejsce i częstotliwość sprawdzania, zaznaczając opcję powiadomienia mailowego o niedziałającym linku dla właściciela lub użytkownika, który link wprowadził, a także dodać tagi no-follow.

Z narzędzi SEO, warto zainteresować się Screaming Frog. Wersja darmowa pozwala na przeskanowanie do 500 adresów URL.

Wykorzystaj async i defer – asynchroniczne ładowanie skryptów

Domyślnym zachowaniem przeglądarek jest analiza i wykonanie skryptu natychmiast. Dodanie do skryptu atrybutu async powoduje asynchroniczne wykonanie skryptu czyli takie, które nie jest zależne od czasu załadowania całości kodu źródłowego strony. Oznacza to, że przeglądarka nie będzie czekała z wyświetleniem odbiorcy witryny do chwili załadowania skryptu.

Atrybut defer sprawia, że zewnętrzny skrypt wykonywany jest dopiero po całkowitym wczytaniu kodu strony do przeglądarki. Wykorzystanie tych dwóch atrybutów przyspieszy ładowanie całości witryny niezależnie od JavaScript, które normalnie spowolniłyby proces.

Ręcznie atrybuty możemy dodać w opisany poniżej sposób. Najpierw wskazujemy skrypty dla który chcemy dodać atrybut. Następnie możemy dodać wyjątki, gdzie atrybuty nie mają być dodawane.

function defer_scripts( $tag, $handle, $src ) {
	// The handles of the enqueued scripts we want to defer
	$defer_scripts = array( 
		'jquery',
		'jquery-migrate',
		 'cookie-consent'
	);
    if ( in_array( $handle, $defer_scripts ) && ! is_woocommerce() && ! is_cart() &&! is_page(335) && ! is_page(334)    ) {
         return '<script src="' . $src . '" defer type="text/javascript"></script>' . "\n";
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'defer_scripts', 10, 3 );

Skorzystaj z CDN

Jedną z metod zwiększania wydajności strony jest korzystanie z Content Delivery Network (sieć dostarczania treści). Każdy z węzłów CDN przechowuje takie elementy witryn jak obrazy, pliki stylów CSS czy skrypty JS czyli te, które nie są zmieniane w witrynach zbyt często. Odbiorca odwiedzając naszą stronę zgłasza się nie na serwer strony, a na położony najbliżej, który w sposób najszybszy umożliwi pobranie danych. Poza zwiększoną prędkością ładowania strony warto także wspomnieć, że CDN odciąża serwer witryny. A ponieważ szybkość, z jaką użytkownik może pobrać żądaną treść przekłada się na pozycjonowanie można liczyć na wyższe notowanie WordPress SEO.

Optymalizacja strony WordPress to proces złożony. Są źródła, które negują wpływ niektórych z wspomnianych wyżej aspektów na pozycję strony w wyszukiwarce i ogólny odbiór witryny przez użytkowników. Pewne działania optymalizacyjne mogą dawać skutki nieznaczne, niemniej na zasadzie “ziarnko do ziarnka”, przy zachowanej konsekwencji i dokładności sumaryczne efekty drobiazgowej optymalizacji WordPress SEO mogą być imponujące.

Zmniejsz ilość wyświetlanych komentarzy

Nie musisz ich kasować, to nawet jest źle postrzegane i zniechęca użytkowników do brania udziału w dyskusji i aktywności na Twojej stronie. Nie muszą jednak być wszystkie widoczne na jednej stronie. Po pierwsze niemające końca przewijanie jest męczące i uciążliwe, a po drugie wpływa na szybkość wyświetlania się witryny. Optymalizacja w tej kwestii polega na dzieleniu ich na kilka stron po przekroczeniu pewnej ilości.

W ustawieniach możemy określij na ile części chcemy podzielić sekcję z komentarzami.

Podziel swoje posty na strony

Sytuacja podobna do wcześniejszego punktu. Duża ilość treści związana z wyświetlaniem pełnej treści wszystkich opublikowanych postów sprawia, że przeglądanie strony jest niewygodne i męczące. Jeśli użytkownika interesuje temat F lub chce sprawdzić czy masz coś o tym i o tym to nie każ mu przewijać w nieskończoność, szczególnie jeśli Twoje wpisy są długie.

Lepszym rozwiązaniem jest podzielenie na strony. Edytując lub pisząc tekst możesz umieścić miejsce podziału za pomocą funkcji „wstaw Tag więcej”.

Następnie w ustawieniach, można ustawić, żeby użytkownik widział tylko kilka pierwsyzch zdań posta. W ten sposób odwiedzający Twoją stronę finalnie będą widzieć tylko tytuł i jedno lub kilka zdań wstępu (w zależności od Twoich ustawień) oraz link „czytaj więcej”, po kliknięciu w który będą mogli przeczytać pełną wersję tekstu, jeśli ich zainteresuje. Jak widzisz optymalizacja strony WordPress polega nie tylko na zwiększaniu prędkości jej działania, ale też na dbaniu o wygodę użytkownika.

Jeśli umieszczasz reklamy na swojej stronie to rób to mądrze

Trudno się dziwić temu, że chcesz zarabiać, tym bardziej, jeśli Twoja strona ma wielu odwiedzających. Przy odpowiedniej ich ilości reklamodawcy sami się zgłaszają, byś promował ich produkty lub usługi. Do wyświetlania reklam używane są często specjalne wtyczki, ale uważaj. Niektóre z nich mogą bardzo poważnie wpłynąć na szybkość działania Twojej strony. Najlepszym i najszybszym sposobem jest linkowanie za pomocą HTML (ewentualnie wykorzystując obrazek przedstawiający produkt lub animowany baner z linkowaniem HTML) bezpośrednio do produktu/usługi lub strony reklamodawcy.