Optymalizacja WordPress, czyli jak przyspieszyć stronę?

Optymalizacja strony internetowej opartej na WordPressie to proces, którego nie zastąpi żadna wtyczka
Optymalizacja strony internetowej opartej na WordPressie to proces, którego nie zastąpi żadna wtyczka

Spis treści

Optymalizacja strony to nic trudnego, Internet to kopalnia wiedzy, można znaleźć w nim dosłownie wszystko. Również wiele artykułów dotyczących optymalizacji WordPressa. Jednak większość z nich nie spełnia nawet podstawowych założeń optymalizacji. Sam niespełna dwa lata temu napisałem wpis jak zoptymalizować stronę i z perspektywy czasu mogę powiedzieć, że jest to dobry poradnik, ale uważam również, że nie do końca wyczerpujący omawiany temat. Z tego powodu postanowiłem napisać kontynuację, bardziej rozwijając temat optymalizacji witryny opartej na WordPressie. W tym poradniku poznasz szczegółowe techniki i udoskonalone rozwiązania, dla bardziej zaawansowanych użytkowników WordPressa.

Wybierz dobry hosting

Nadal niezmiennie podstawą do rozwinięcia pełnych możliwości WordPressa jest dobry hosting. Wielokrotnie spotykam się opiniami, że czas wczytywania strony zależy od łącza, jakim dysponuję użytkownik. Otóż nic bardziej mylnego. Ponieważ średnia prędkość Internetu w Polsce w czerwcu 2020 wynosiła około 25 Mb/s dla mobilnego i około 72 Mb/s dla stacjonarnego. Przy takich prędkościach wczytanie strony ważącej ponad 5 MB nie stanowi żadnego problemu. W tym przypadku największym opóźnieniem jest moc obliczeniowa serwera rozdzielona często na kilkaset stron. Z tego powodu czas odpowiedzi serwera odgrywa tutaj kluczową rolę w szybkości działania witryny.

Warto wybrać taki hosting, który wspiera WordPressa i został pod niego zoptymalizowany. Ciekawym rozwiązania może okazać się hosting w chmurze zapewniający ogromną moc wielu maszyn. Dzięki takim rozwiązaniom Twoja strona może działać znacznie szybciej. Jednak to rozwiązanie jest również obarczone pewnymi ograniczeniami. Z racji tego, że jest to nowość, ceny mogą być kuszące tylko na początku, przy odnowieniu niestety już o kilkaset procent większe.

Unikaj instalowania wielu wtyczek

WordPress to nie tylko wtyczki! Owszem jest to bardzo wygodne rozwiązanie, jednak instalacja dużej liczby pluginów znacząco spowolni Twoją witrynę. Dlatego zawsze używaj bardzo minimalnej listy wtyczek, aby już na tym etapie optymalizować swoją stronę. Każda wtyczka dodaję jakiś kod, mnie lub bardziej potrzebny. Duża ilość kodu wpływa na moc obliczeniową serwera, ma to szczególną wagę przy hostingach współdzielonych. Im więcej wtyczek = kodu, tym więcej pracy dla serwera, który zaczyna spowalniać i coraz dłużej renderować Twoją stronę.

Dobrym sposobem na odciążenie strony i dodawanie odpowiednich funkcjonalności modyfikacja kodu i dodanie wybranych integracji do pliku functions.php. Nie ma potrzeby używania wtyczek do każdej funkcji, której potrzebujesz w swojej witrynie. Oczywiście, od tej reguły są wyjątki. Jeśli integracja przerasta Twój budżet lub możliwości czasowe, lepiej jest użyć wtyczki. Jednak zawsze warto zwracać na to szczególną uwagę, ponieważ wtyczki rozrastają się w zastraszającym tempie.

Piksel Facebooka, czy kod śledzenia Google Analytics wcale nie musisz dodać wtyczką. Możesz to zrobić dodając krótki fragment kodu w sekcji head bezpośrednio na swojej stronie. Najlepiej zrobić to przez Google Tag Manager, gdzie po zaimplementowaniu GTM’a otrzymujemy pełną możliwość dodawania różnych kodów do naszej witryny w jednym miejscu.

Optymalizacja WordPressa bez wtyczek?

Pierwszym krokiem do optymalizacji WordPressa jest niezainstalowanie wtyczki albo co gorsze kilku wtyczek do optymalizacji. Wtyczki optymalizacyjne, tak zwane kombajny zawsze powodują chaos i bałagan, co w rezultacie utrudnia przeprowadzenie poprawnej optymalizacji witryny. Najlepszym dowodem na niską skuteczność automatycznych rozwiązań jest faktyczny czas wczytywania witryny. Taki czas możesz zmierzyć na tej stronie i sprawdzić jak zachowuje się Twoja witryna, kiedy odwiedza ją użytkownik.

Przed instalacją wtyczki sprawdź czas wczytywania witryny, następnie zmierz czas po zainstalowaniu i skonfigurowaniu wtyczki. Zobaczysz, że pewne parametry zareagują pozytywnie, a pewne wręcz odwrotnie. Jeśli dobrze przejrzysz wyniki, zobaczysz również że wtyczka zamaskowała tylko problem!

Od czego zacząć optymalizację?

Optymalizację możemy rozpocząć od zdefiniowania na stałe adresu URL witryny. Pozowali to uniknąć niepotrzebnych zapytań do bazy danych związanych z adresem strony. Dodaj poniższy kod w wp-config.php na samym początku – Plik znajduje się w katalogu głównym instalacji WordPressa.

define('WP_HOME', 'https://www.adrestwojejstrony.pl');   //dodaj adres URL swojej witryny
define('WP_SITEURL', 'https://www.adrestwojejstrony.pl');

Następnie dodaj poniższy kod, który określa ile wersji postów ma być zachowana w bazie. Domyślnie ustawiłem na 2, jednak możesz wpisać tutaj dowolną liczbę, np 5. Pozwoli to zachować porządek z wersjami wpisów i niegromadzenie zbędnych danych w bazie. Ten kod również dodaj do pliku wp-config.php na samym początku.

define( 'WP_POST_REVISIONS', 2 );  //określ, ile wersji postów ma być zachowanych. Stare wersje są automatycznie usuwane

Optymalizacja WordPressa

Zanim zaczniemy właściwą optymalizację, polecam Ci dołączenie nowego pliku do struktury functions.php, na którym będziemy pracować. W ten sposób łatwiej będzie Ci znaleźć to czego szukasz i modyfikować. Dodatkowy plik łatwo dołączysz poprzez dodanie na samym końcu pliku functions.php krótkiego fragmentu kodu.

$templatedir = get_template_directory();
require $templatedir . '/optymalizacja/opcje.php';

Teraz utwórz folder w obrębie swojego motywu o nazwie „optymalizacja” i umieść w nim plik opcje.php – ten plik będziemy odpowiedzialny za modyfikacje i dodatkowe opcje, które zostaną automatycznie dołączone do Twojego pliku functions.php.

Plik opcje.php powinien zaczynać się w następujący sposób:

<?php
/**
 * Optimize, definitions and includes.
 *
 * @package     Functions
 * @since       1.0
 * @author      matthew
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

Usuń niepotrzebne rzeczy z nagłówka

Domyślnie WordPress dodaję wersję plików (?ver=1.12.5), gdy zawiera niektóre pliki JavaScript, na przykład jQuery. Z punktu widzenia wydajności zaleca się usunięcie takich wersji. Możesz to zrobić, dodając następujący kod do pliku naszego pliku opcje.php.

// Usuń wersję skryptów
function _remove_script_version( $src ){
    $parts = explode( '?ver', $src );
    return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Domyślnie WordPress dodaje kilka tagów do twojego html i w większości przypadków są one zbędne, szczególnie emoji. Najlepiej usunąć wszystko, czego nie potrzebujesz.

// Usuń funkcje
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10);
remove_action('wp_head', 'parent_post_rel_link', 10);
remove_action('wp_head', 'adjacent_posts_rel_link', 10);
// --------------------------------------------
// Usuń Emoji
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
// --------------------------------------------

Wyrejestruj Heartbeat

Od wersji WordPressa 5.0 została wprowadzona usługa pomiaru stanu witryny, tak zwany „Heartbeat”. Interfejs API Heartbeat wysyła ciągły impuls do wykonywania okresowych zadań. Pomaga to przeglądarce komunikować się z serwerem za pomocą połączeń Ajax, zapewniając informacje w czasie rzeczywistym na pulpicie nawigacyjnym WordPress. Problem polega na tym, że interfejs API wysyła ciągłe żądania ajax do serwera hostującego, co powoduje wysokie zużycie procesora. Spokojnie możemy ograniczyć tę usługę, pozwalając jej działać tylko podczas tworzenia lub edycji postu, zachowując funkcję np. automatycznego zapisywania. Możesz to zrobić, dodając następujący kod do pliku naszego pliku opcje.php.

// Wyłącz pomiar stanu witryny
add_action( 'init', 'my_deregister_heartbeat', 1 );
function my_deregister_heartbeat() {
    global $pagenow;

    if ( 'post.php' != $pagenow && 'post-new.php' != $pagenow )
        wp_deregister_script('heartbeat');
}
// --------------------------------------------

Załaduj pliki JavaScript w stopce

Bardzo powszechną praktyką w celu uniknięcia blokowania renderowania strony i optymalizacji witryny jest umieszczenie w stopce wszystkich plików JavaScript. Domyślnie WordPress ładuje wszystkie pliki JS w kodzie na dole strony, aby tego uniknąć, możemy dodać następujący kod w naszym pliku opcje.php.

// Przenieś JS do stopki
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
// --------------------------------------------

// Utworzenie funkcji rejestrującej pliki js potrzebne dla Twojego motywu
if (!is_admin()){
    add_action("wp_enqueue_scripts", "my_scripts", 999);
}

function my_scripts(){
    //load the js files like so:
    wp_enqueue_script('TweenMax', $template_url . '/js/TweenMax.min.js',array( 'jquery' ), null, true);
}
// --------------------------------------------

Ładowanie plików JavaScript asynchronicznie

Nawet jeśli skrypty są ładowane w stopce witryny, musisz ustawić je asynchronicznie.

JavaScript jest uważany za „zasób blokujący ładowanie”. Oznacza to, że analizowanie samego dokumentu HTML jest blokowane przez JavaScript. Gdy podczas wczytywania strony parser osiągnie znacznik „script”, przestaje go pobierać i uruchamiać. Rozwiązaniem tego jest użycie DEFER lub ASYNC dla plików JavaScript. Technika ASYNC nie może zagwarantować kolejności wykonywania plików JavaScript. Z drugiej strony, DEFER pobierze pliki asynchronicznie, ale będą one działać w kolejności, w jakiej są ładowane – jak określono w kodzie.

Dlatego, aby uniknąć blokowania zasobów podczas ładowania witryny, dodaj w swoim pliku opcje.php następujący kod:

// Załaduj JS asynchronicznie
if (!is_admin()){
	function add_defer_attribute($tag, $handle) {
		return str_replace(' src', ' defer src', $tag);	
	}
	add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
}
// --------------------------------------------

Ogranicz użycie fontów na stronie

Często motywy ładują wiele krojów pisma równocześnie, dlatego warto przejrzeć pliki motywu i ograniczyć fonty tylko do tych, które faktycznie używamy. Inaczej mówiąc, czcionki internetowe to pliki, które są pobierane z różnych źródeł podczas ładowania strony, a następnie renderowany jest tekst. Tak więc posiadanie wielu czcionek z automatu oznacza wolniejszą witrynę.

Dodawaj tylko zoptymalizowane zdjęcia

Odpowiednia optymalizacja zdjęć może znacząco przyspieszyć wczytywanie strony, ponieważ to właśnie obrazki stanowią lwią część transferu potrzebnego do wyrenederowania witryny. Tutaj zwróć szczególną uwagę na rozdzielczość zdjęć. Jeśli Twój motyw wyświetla zdjęcia o maksymalnej rozdzielczości 1000px, to nie ma najmniejszego sensu, abyś przesyłał większe. Ważna jest również ich kompresja. Na moim blogu wszystkie zdjęcia są w formacie WebP, pozwala to zaoszczędzić średnio 75% transferu w stosunku do standardowego PNG. W tym wpisie dowiesz się jak dodać pliki WebP do WordPressa.

Wykorzystaj moc pliku .htaccess

Istnieje kilka sposobów, które możesz wprowadzić za pomocą .htaccess, a znacznie wpłyną na optymalizację witryny. Możesz włączyć GZip, możesz buforować CSS, JavaScript i obrazy w przeglądarce użytkownika i wiele więcej. W tym wpisie dowiesz się jak zoptymalizować stronę za pomocą .htaccess. Optymalizacja pliku .htaccess to również niezwykle ważny proces i warto go przeprowadzić. Dodając kilka reguł, możesz załadować część plików do pamięci przeglądarki użytkownika, dzięki czemu przy ponownym załadowaniu strony część zasobów zostanie pobrana z pamięci podręcznej przeglądarki, co znacznie przyspieszy ładowanie całej witryny.

Podsumowanie

Optymalizacja strony opartej na WordPressie to proces, którego nie zastąpi żadna wtyczka. Wtyczki, niestety tylko maskują problem, przy okazji dodając kolejny kod, który w konsekwencji spowalnia witrynę. Dlatego warto poświęcić odrobinę czasu i przejść proces optymalizacji ręcznie, pozwoli to zachować pełne możliwości przy zachowaniu najwyższych standardów.

Oczywiście na opisanych powyżej regułach optymalizacja nie dobiega końca, każda witryna jest inna i wymaga innego podejścia, innych metod. Jednak mimo to starałem się opisać jak najdokładniej uniwersalne zasady, które będą działały w każdej witrynie.

Oceń tekst!
Średnia: 5 / 5 (3 głosów)

Dołącz do dyskusji

Obserwuj
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments
0
Dołącz do dyskusji!x
()
x

Ciasteczka

Używamy ciasteczek, aby zapewnić jak najlepsze wrażenia użytkowania naszej strony. Chcesz dowiedzieć się więcej?