Być może Twoim pierwszym odruchem jest zainstalowanie wtyczki do cache’owania (np. WP Super Cache lub W3 Total Cache), bo słyszałaś, że taka wtyczka przyśpiesza stronę. Ja zalecam zainstalowanie jej na samym końcu, kiedy strona będzie uporządkowana i pozbawiona rzeczy, które są niepotrzebne i które spowalniają jej działanie.
Jeśli już używasz takiej wtyczki, wyłącz ją na czas porządkowania strony. Taka wtyczka zaciemnia obraz i utrudnia porządki. Włączysz ją z powrotem, gdy uwiniesz się ze sprzątaniem.
Jak mierzyć szybkość strony?
Najlepiej za pomocą Google PageSpeed Insights. To narzędzie wskaże Ci słabe strony Twojej strony i będziesz wiedziała, na czym się skupić.
Kopia zapasowa zrobiona? Wtyczka cache’ująca wyłączona? To zaczynamy!
1. Wyłącz i usuń niepotrzebne wtyczki.
Być może masz na stronie wtyczki, których nie używasz. Bo kiedyś testowałaś wtyczki do sliderów albo popupów, w końcu zdecydowałaś się na jedną, a te nieużywane zostały. Pierwszym krokiem do przyśpieszenia strony jest usunięcie wszystkich rzeczy, z których nie korzystasz. Jeśli nie jesteś do końca pewna, czy korzystasz z danej wtyczki, wyłącz ją na jakiś czas (daj sobie nawet 2 miesiące) i sprawdź, czy wszystko na stronie działa. Wyłącz, ale nie usuwaj – usunięcie wtyczki może usunąć wszystkie dane powiązane z nią. Przetestuj slidery, formularze kontaktowe, subskrypcję do newslettera, a jeśli masz sklep – przejdź całą procedurę zakupów. Jeśli wszystko jest w porządku (i na komputerze, i na telefonie), usuń wyłączoną wtyczkę.
2. Zaktualizuj oprogramowanie.
Zaktualizuj wszytkie wtyczki, motyw i samego WordPressa. Nie masz mieć żadnych czerwonych ostrzegawczych kółeczek w panelu administratora 🙂 Nowe wersje oprogramowania mogą zawierać poprawki podnoszące szybkość strony. Autorom wtyczek i motywów zależy, aby ludzie wybierali ich produkty, dlatego starają się je ulepszać i przyśpieszać.
3. Pomniejsz zdjęcia.
Jeśli obserwujesz u siebie na stronie powolne wczytywanie zdjęć – zdjęcie jest „drukowane” kawałek po kawałku – oznacza to, że jest za duże. Wgraj w to miejsce mniejsze zdjęcie. Szerokość ekranu laptopa to z reguły 1920px i takie zdjęcie wystarczy.
4. Włącz leniwe ładowanie obrazków.
Leniwe ładowanie (lazy loading) polega na tym, że obrazek jest pobierany przez przeglądarkę dopiero, gdy użytkownik przewinie do miejsca na ekranie, gdzie ten obrazek powinien być. Jest to świetne rozwiązanie, które znacząco zmniejsza rozmiar strony i przyśpiesza jej ładowanie.
Najnowszy WordPress włącza automatycznie leniwe ładowanie obrazków dla wszystkich zdjęć umieszczonych wewnątrz wpisów i stron. Obrazkiem wyróżniającym zarządza motyw i to on powinien zadbać o leniwe ładowanie.
WordPress nie byłby WordPressem, gdyby nie istniały wtyczki do wszystkiego. Są również wtyczki do leniwego ładowania. Wybierz jedną spośród tych i sprawdź, jak to wpłynie na prędkość Twojej strony.
5. Wyłącz niepotrzebne skrypty.
Każda wtyczka dokłada swoje trzy grosze do strony. Te trzy grosze to pliki CSS, które odpowiadają za wygląd, oraz pliki JavaScript (JS), które odpowiadają za funkcjonalność. Niestety niekiedy te pliki są jak kula u nogi dla strony i ciągną ją na dno. Nie musisz jednak całkowicie rezygnować z wtyczki – możesz ją wyłączyć dla niektórych stron.
Załóżmy, że korzystasz z wtyczki Contact Form 7 i z mechanizmu reCAPTCHA. Jednak tylko na podstronie „Kontakt”. Niestety wtyczka dołącza swoje pliki CSS i JS do każdej podstrony. Skrypt reCAPTCHA bardzo mocno opóźnia renderowanie strony, dlatego warto go wyłączyć dla stron innych niż „Kontakt”.
Aby to zrobić, musisz zmodyfikować plik functions.php w swoim motywie.
Aby móc bezpiecznie wprowadzać zmiany w motywie, powinnaś utworzyć motyw potomny swojego motywu. Procedurę tworzenia motywu potomnego opisałam we wpisie Jak prawidłowo modyfikować pliki motywu WordPressa. Gdy utworzysz motyw potomny i wgrasz go na serwer, ustaw go jako motyw główny w „Wygląd” → „Motywy”.
Zdaję sobie jednak sprawę, że może Cię zniechęcać ta procedura. Dlatego możesz spróbować zrobić zmiany bezpośrednio w plikach motywu podstawowego. Pamiętaj jednak, że wszystkie zmiany przepadną przy następnej aktualizacji motywu i będziesz musiała wnieść je na nowo.
Skopiuj plik wp-content/themes/<twój-motyw>/functions.php na swój komputer, zrób jego kopię i umieść ją w osobnym katalogu. Potem umieść na samym końcu pliku functions.php poniższy kod. 'kontakt’ to końcówka adresu w pasku przeglądarki. Jeśli Twoja strona z formularzem znajduje się pod adresem www.moja-strona.pl/skontaktuj-sie-ze-mna, to zamiast 'kontakt’ wpiszesz poniżej 'skontaktuj-sie-ze-mna’.
add_action( 'wp_enqueue_scripts', 'mytheme_remove_assets', 9999);
function mytheme_remove_assets() {
if (!is_page('kontakt')) {
wp_dequeue_script('contact-form-7');
wp_deregister_script('contact-form-7');
wp_dequeue_script('google-recaptcha');
wp_deregister_script('google-recaptcha');
wp_dequeue_script('wpcf7-recaptcha');
wp_deregister_script('wpcf7-recaptcha');
}
}
Ten kod wyłączy pliki wtyczki Contact Form 7 i reCAPTCHA dla stron innych niż 'kontakt’.
A może masz na stronie wtyczkę WooCommerce, ale nie korzystasz z niej na stronie głównej? Poniżej pokazuję, jak wyłączyć większość plików WooCommerce na stronie głównej:
add_action( 'wp_enqueue_scripts', 'mytheme_remove_assets_woo', 9999);
function mytheme_remove_assets_woo() {
if (is_front_page()) {
wp_dequeue_script('woocommerce');
wp_dequeue_style( 'wc-block-style' );
wp_deregister_style( 'wc-block-style' );
wp_dequeue_style( 'wc-block-vendors-style' );
wp_deregister_style( 'wc-block-vendors-style' );
wp_dequeue_style( 'woocommerce-layout' );
wp_deregister_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_deregister_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce-general' );
wp_deregister_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-inline' );
wp_deregister_style( 'woocommerce-inline' );
}
}
Gdy zmodyfikujesz odpowiednio plik functions.php, wgraj go na serwer do katalogu wp-content/themes/<twój-motyw> i sprawdź, czy strona działa. Jeśli coś się zepsuło, nie wpadaj w panikę! Po prostu usuń plik functions.php z serwera, a na jego miejsce wrzuć ten, który sobie skopiowałaś dla bezpieczeństwa. Potem upewnij się, czy wszystko przepisałaś poprawnie i spróbuj wrzucić plik na serwer jeszcze raz.
Ok, to były tylko przykłady. Czas przyjrzeć się stronie i sprawdzić, z jakich plików CSS i JS korzysta, i czy można je wyłączyć dla jakieś podstrony.
Zaczniemy od strony głównej. Wejdź na nią przez przeglądarkę, kliknij prawym klawiszem myszy i wybierz „Pokaż źródło strony”. Pojawi się plik tekstowy HTML, który jest Twoją stroną. To jest plik, który jest produkowany przez Twój serwer na podstawie motywu, wszystkich wtyczek i ich ustawień.
Wyszukaj (CTRL+F) wyrażenia „-css”. WordPress dokleja taki ciąg znaków do wszystkich plików CSS używanych przez stronę:
Może to być np. „wpdevelop-bts-css”. Aby odłączyć plik CSS, trzeba skorzystać z funkcji wp_dequeue_style( 'id-pliku' ), gdzie id-pliku to w tym przypadku „wpdevelop-bts” (bez „-css” na końcu!). Dla wzmocnienia efektu można skorzystać dodatkowo z funkcji wp_deregister_style( 'id-pliku' ).
Teraz znajdź pliki JS wykorzystywane przez stronę. W tym celu wyszukaj ciąg „-js”:
Będzie to na przykład „wpbc-global-vars-js”. Aby odłączyć ten plik, skorzystaj z funkcji wp_dequeue_script( 'id-pliku' ), gdzie id-pliku to w tym przypadku „wpbc-global-vars” (bez „-js” na końcu!).
Aby odłączyć wszystkie pliki CSS i JS danej wtyczki, wyszukaj „plugins/<nazwa-wtyczki>”, np. „plugins/booking”, skopiuj identyfikatory plików i odłącz je za pomocą wp_dequeue_style i wp_dequeue_script.
Oprócz is_front_page() i is_page() możesz skorzystać z innych funkcji lub ich kombinacji, np:
if ( is_single() ) {} // wszystkie strony wpisów
if ( is_single( 'przykladowy-wpis' ) ) {} // strona z wpisem o adresie 'przykladowy-wpis'
if ( is_product() ) {} // wszystkie strony produktów WooCommerce
if ( !is_product() ) {} // wszystkie strony za wyjątkiem stron produktów WooCommerce
if ( is_front_page() || is_page( 'kontakt') ) {} // strona główna lub strona o adresie 'kontakt'
if ( !is_front_page() && !is_page( 'kontakt' ) ) {} // wszystkie strony za wyjątkiem strony głównej i strony o adresie 'kontakt'
Akcję odłączania plików trzeba przeprowadzać ostrożnie. Łatwo jest coś spierniczyć i odłączyć za dużo, dlatego sprawdź, czy wszystko działa poprawnie – przejdź proces zakupów, zapisz się na próbę do newslettera, wyślij formularz kontaktowy.
6. Usuń niepotrzebne kody śledzące.
Chodzi np. o Pixel Facebooka, którego używałaś przy jakiejś kampanii, ale teraz nie jest potrzebny. Każdy kod śledzący ma wpływ na prędkość strony, dlatego nie zostawiaj na niej tych nieużywanych.
7. Wtyczka do cache’owania.
Na koniec zainstaluj wtyczkę do cache’owania. Wybierz którąś spośród tych. Wtyczka do cache’owania jest szczególnie przydatna wtedy, kiedy masz na stronie dużo wtyczek, page builder (Elementor, Divi) lub rozbudowany motyw z mnóstwem ustawień. Serwer spędza wtedy sporo czasu na generowaniu strony w formacie HTML, czyli formacie zrozumiałym dla przeglądarek. Wtyczka do cache’owania utworzy stronę w formacie HTML zawczasu, dzięki czemu serwer będzie w stanie szybko podesłać ją przeglądarce. Znacząco skraca to tzw. czas reakcji serwera. Pamiętaj jednak, żeby opróżnić pamięć cache po zrobieniu zmiany na stronie. Inaczej użytkownicy będą ciągle widzieli jej poprzednią wersję.
