BlogStrony WWWZaawansowana optymalizacja strony WordPress. Jak przyspieszyć stronę?

Zaawansowana optymalizacja strony WordPress. Jak przyspieszyć stronę?

Optymalizacja strony WordPress. Jak przyspieszyć stronę?

Dobry hosting dla strony WordPress

Nadal niezmiennie podstawą do rozwinięcia pełnych możliwości strony WordPress jest dobry hosting. Wielokrotnie można spotkać opinie, że czas wczytywania strony zależy od łącza, jakim dysponuję użytkownik. Niestety jest to w pełni błędne przekonanie, które możemy dość łatwo udowodnić. Średnia prędkość Internetu w Polsce w czerwcu 2020 r. wynosiła około 25 Mb/s dla mobilnego i około 72 Mb/s dla Internetu stacjonarnego. Przy takich prędkościach wczytanie strony ważącej ponad 5 MB nie powinno stanowić żadnego wyzwania. Dlatego w tym przypadku największym opóźnieniem jest moc obliczeniowa serwera rozdzielona często na kilkaset stron. Czas odpowiedzi serwera odgrywa tutaj kluczową rolę w szybkości działania witryny i wyświetlenia jej użytkownikowi.

Warto wybrać taki hosting, który wspiera CMS WordPress i został pod niego dobrze zoptymalizowany. Ciekawym rozwiązania może okazać się hosting w chmurze zapewniający ogromną moc wielu maszyn. Dzięki takim rozwiązaniom strona internetowa może działać znacznie szybciej.

Wtyczki i rozszerzenia WordPress

WordPress to nie tylko wtyczki! Owszem są one bardzo wygodnym rozwiązaniem, jednak instalacja dużej liczby dodatków znacząco spowolni całą witrynę. Tym samym negatywnie wpływając na ogólną wydajność. Dlatego zawsze należy używać bardzo minimalnej listy wtyczek, aby już na tym etapie optymalizować stronę www. Każda zainstalowana wtyczka dodaję kod, mniej 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ć witrynę.

Dobrym sposobem na odciążenie strony i dodawanie nowych funkcjonalności jest modyfikacja kodu i dodanie wybranych integracji do pliku functions.php. Jeśli nie mamy potrzeby używania wtyczek do każdej funkcji, której potrzebujemy w witrynie możemy skorzystać z takiej opcji. Wówczas warto zwrócić się do odpowiedniego specjalisty lub agencji, która doda odpowiednie integracje. Oczywiście, od tej reguły są wyjątki. Jeśli integracja przerasta 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ę często w niekontrolowanym tempie.

Piksel Facebooka, czy kod śledzenia Google Analytics wcale nie muszą być dodane za pomocą wtyczki. Możemy to zrobić dodając krótki fragment kodu w sekcji head bezpośrednio w kodzie strony. A najlepiej poprosić o pomoc programistę, który doda Google Tag Manager, gdzie po zaimplementowaniu GTM’a otrzymujemy pełną możliwość dodawania różnych kodów do witryny w jednym miejscu.

Optymalizacja strony WordPress bez wtyczek

Przed instalacją wtyczki warto sprawdzić czas wczytywania witryny, następnie zmierzyć czas po zainstalowaniu i skonfigurowaniu wtyczki. Pewne parametry zareagują pozytywnie, a pewne wręcz odwrotnie. Jeśli dobrze przejrzymy wyniki, zobaczymy również że wtyczka tylko zamaskowała problem.

Optymalizacja strony WordPress — od czego zacząć?

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. Poniższy kod należy dodać w wp-config.php na samym początku — Plik znajduje się w głównym katalogu instalacji WordPress.

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

Następnie możemy dodać poniższy kod, który określa ile wersji postów ma być zachowana w bazie danych. Domyślnie możemy ustawić ilość wersji na 2 lub 3. Warto tę liczbę dostosować indywidualnie do własnych potrzeb. Pozwoli to zachować porządek z wersjami wpisów i ograniczyć gromadzenie zbędnych zapisów w bazie danych. Ten kod również należy dodać do pliku wp-config.php na samym początku, zaraz po zdefiniowaniu adresu swojej witryny.

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

Zaawansowana optymalizacja strony WordPress

Zanim przejdziemy do właściwej optymalizacji, takiej którą da się zmierzyć i widać efekty warto dołączyć nowy pliku do struktury functions.php, na którym będziemy pracować i dodawać nowy kod. W ten sposób łatwiej będzie zachować porządek, znaleźć to czego potrzebujemy i modyfikować według potrzeb. Dodatkowy plik możemy dołączyć poprzez dodanie na samym końcu pliku functions.php krótkiego fragmentu kodu.

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

Tworzymy folder w obrębie motywu WordPress o nazwie „optymalizacja” i umieszczamy w nim plik opcje.php — ten plik będziemy odpowiedzialny za modyfikacje i dodatkowe funkcje, które zostaną automatycznie dołączone do pliku functions.php, tym samym wywołane przy wczytywaniu strony. Dobrą praktyką, którą można zastosować przy dołączeniu nowego pliku jest utworzenie folderu mu-plugins i umieszczenie w nim pliku opcje.php. Wówczas w takim przypadku nie mamy potrzeby zmiany pliku functions.php, co przy częstych aktualizacjach motywu może się bardzo przydać.

Sam 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

Niepotrzebne rzeczy w nagłówku strony

Domyślnie podczas ładowania zasobów JS i CSS WordPress dodaję wersję plików np. ?ver=1.12.5 lub ?ver=2.25.5 itp. Nie jest to jakieś strasznie duże obciążenie, ale jest generowane dynamicznie podczas ładowania strony. Z punktu widzenia wydajności zaleca się usunięcie takich wersji dla lepszej optymalizacji. Możemy to zrobić, dodając następujący kod do 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 );

Również domyślnie WordPress dodaje kilka tagów do nagłówka i struktury HTML. W większości przypadków są one całkowicie zbędne, dlatego najlepiej jest je wyrejestrować jako całość lub pojedynczo wybrane funkcje.

// 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' );
// --------------------------------------------

Optymalizacja strony i wyrejestrowanie Heartbeat

Wersja WordPress 5.0 została wyposażona w usługę 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. W przypadku optymalizacji stron WordPress problem polega na tym, że interfejs API wysyła nieustannie żądania ajax do serwera hostującego. Co z kolei powoduje wysokie zużycie jego zasobów. Spokojnie taką usługę, jaką jest pomiar stanu witryny możemy ograniczyć, pozwalając jej działać tylko podczas tworzenia lub edycji postu, zachowując funkcję np. automatycznego zapisywania. Możemy to zrobić dodając następujący kod do 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łączenie plików JavaScript w stopce strony

Bardzo powszechną praktyką w celu uniknięcia blokowania renderowania strony www i jej optymalizacji jest umieszczenie w stopce wszystkich plików JavaScript z wyłączeniem jQuery. Domyślnie WordPress ładuje wszystkie pliki JS w kodzie na górze strony, aby tego uniknąć, możemy dodać następujący kod w 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(){
    // Załaduj pliki js w ten sposób:
    wp_enqueue_script('TweenMax', $template_url . '/js/TweenMax.min.js',array( 'jquery' ), null, true);
}
// --------------------------------------------

Ładowanie plików JS asynchronicznie

Nawet jeśli skrypty są ładowane w stopce witryny, musimy 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, należy dodać w 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);
}
// --------------------------------------------

Optymalizacja używanych fontów na stronie WordPress

Budując stronę na WordPress i wykorzystując jego wszechstronność oraz nieograniczone możliwości rozbudowy możemy wpaść w pułapkę optymalizacji. Większości dostępnych motywów i pluginów domyślnie ładuję wiele krojów fontów równocześnie, co fatalnie wpływa na optymalizację całej witryny. Warto więc przejrzeć pliki motywu czy opcje ustawień i ograniczyć fonty tylko do tych, których 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 są renderowane jako tekst, który widzimy na ekranie monitora. Posiadanie wielu czcionek oznacza znacznie wolniejszą witrynę. Z tego powodu należy je ograniczyć tylko do tych faktycznie używanych.

Drugą kwestią jest jeszcze miejsce położenia czcionek. Fonty ładowane chociażby z Google Fonts będą znacznie dłużej się wczytywały niż fonty „zaszyte” w motyw na serwerze. Dlatego warto również zadbać i o tą kwestię i stosować kroje pisma, które ładowane są z plików motywu.

Optymalizacja zdjęć przesyłanych do biblioteki

Odpowiednia optymalizacja zdjęć może znacząco przyspieszyć wczytywanie strony, ponieważ to właśnie obrazki stanowią lwią część transferu potrzebnego do wyrenederowania witryny. Jest to trochę złudzenie powolnego działania strony, ponieważ grafiki nie wpływają bezpośrednio na pracę serwerów, tylko właśnie na ilość potrzebnego transferu do wczytania zawartości. Stąd ich odpowiednia optymalizacja jest wręcz niezbędna, a dodatkowo bardzo łatwa do przeprowadzenia.

Tutaj również warto zwrócić szczególną uwagę na rozdzielczość zdjęć. Jeśli motyw wyświetla obrazki o maksymalnej rozdzielczości 1000px, to nie ma najmniejszego sensu, przysłać większe zdjęcia. Ważna jest również ich kompresja. W tym celu warto wykorzystać format WebP, który jest wspierany przez WordPress i pozwala zaoszczędzić nawet 75% transferu w stosunku do standardowego PNG. Co szczególnie odczują użytkownicy korzystający z urządzeń mobilnych.

Optymalizacja pliku .htaccess

Istnieje kilka sposobów, które możemy wprowadzić za pomocą .htaccess, a znacznie wpłyną na ogólną wydajność witryny. Pierwszym z nich jest włącznie kompresji GZip oraz buforowanie CSS, JavaScript i obrazów w przeglądarce użytkownika. Optymalizacja pliku .htaccess to niezwykle ważny proces i warto go przeprowadzić. Jednak z uwagi na zróżnicowanie środowiska i obszerność tematu to optymalizacja htaccess jest materiałem na osobny artykuł. Nie mniej jednak dodając kilka reguł, dzięki htaccess możemy załadować część plików do pamięci przeglądarki użytkownika. Przez to przy ponownym załadowaniu strony część zasobów zostanie pobrana właśnie z pamięci podręcznej , co znacznie przyspieszy ładowanie całej witryny.

Aby włączyć kompresję GZip należy dodać następujący kod na końcu pliku .htaccess:

# BEGIN GZIP COMPRESSION
<IfModulemod_gzip.c>
mod_gzip_onYes
mod_gzip_dechunkYes
mod_gzip_item_includefile.(html?|txt|css|js|php|pl)$
mod_gzip_item_includehandler^cgi-script$
mod_gzip_item_includemime^text/.*
mod_gzip_item_includemime^application/x-javascript.*
mod_gzip_item_excludemime^image/.*
mod_gzip_item_excluderspheader^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

W przypadku serwera opartego o strukturę Nginx kod będzie wyglądał nieco inaczej:

gzipon;
gzip_comp_level2;
gzip_http_version1.0;
gzip_proxied any;
gzip_min_length1100;
gzip_buffers168k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable"MSIE [1-6].(?!.*SV1)";
gzip_varyon;

Podsumowanie

Optymalizacja strony opartej na CMS WordPress to proces, którego nie zastąpi żadna wtyczka. Wtyczki, najczęściej tylko maskują problem, przy okazji dodając kolejny kod, który w konsekwencji spowalnia witrynę. Warto poświęcić trochę czasu i przejść proces optymalizacji ręcznie. Pozwoli to zachować pełne możliwości strony przy zachowaniu najwyższych standardów bezpieczeństwa i optymalizacji.

Oczywiście na opisanych regułach optymalizacja strony nie dobiega końca, każda witryna jest inna i wymaga innego podejścia, innych metod. Jednak mimo to opisane reguły optymalizacji stron są na tyle uniwersalne, że będą działały w większości witryn zbudowanych na CMS WordPress.

Potrzebujesz strony lub pozycjonowania?

Oceń ten wpis!
Średnia: 4.9 / 5 (9 głosów)
Obserwuj
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments
0
Co sądzisz na ten temat? Napisz komentarz!x

Używamy plików cookie. Przeczytaj politykę prywatności, jeśli chcesz dowiedzieć się więcej.