Obrazy, PHP i inne sposoby na zwiększenie szybkości

Moduł 6: Szybkość · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili zastosować pozostałe, największe sposoby na zwiększenie szybkości i zmierzyć ich efekt.

Kluczowe pojęcia: optymalizacja obrazów, WebP i AVIF, lazy loading, obraz LCP, fetchpriority, wersja PHP, porządkowanie bazy danych (wersje, transients, autoload), WP-Cron, prawdziwy cron, DISABLE_WP_CRON, zewnętrzne czcionki, Heartbeat

Proszę działać we właściwej kolejności

Po wdrożeniu cache strony (lekcja 6.2) to właśnie te działania przynoszą największe korzyści, w przybliżeniu w kolejności od najmniejszego do największego nakładu pracy w stosunku do efektu:

1. uporządkowane obrazy;
2. aktualna wersja PHP;
3. mniej zewnętrznych elementów i ciężkich wtyczek;
4. uporządkowana baza danych;
5. zaplanowane zadania na prawdziwym cronie.

Proszę mierzyć przed i po każdym kroku (lekcja 6.1), inaczej nie będą Państwo wiedzieć, co pomogło. I proszę robić jedną rzecz na raz.

Obrazy: największa korzyść w przeglądarce

Na większości stron obrazy stanowią największą część tego, co pobiera odwiedzający. To, czego nauczyli się Państwo w lekcji 4.4, teraz się opłaca:

• Właściwy rozmiar: proszę nie przesyłać obrazów większych niż to konieczne i pozwolić WordPressowi udostępniać mniejsze rozmiary za pomocą atrybutu srcset.
• Kompresja i format: WebP jest zwykle znacznie mniejszy niż JPEG przy tej samej jakości; AVIF często jeszcze mniejszy. Wtyczka może konwertować istniejące obrazy i przekazywać mniejszą wersję przeglądarkom, które ją obsługują. Proszę sprawdzić, czy konwersja odbywa się na Państwa serwerze, czy w zewnętrznej usłudze.
• Lazy loading, ale nie dla wszystkiego. WordPress automatycznie nadaje obrazom atrybut loading="lazy", z wyjątkiem pierwszego dużego obrazu na górze strony. Ten obraz jest często elementem LCP (lekcja 6.1): największym fragmentem treści, który odwiedzający widzi jako pierwszy. Jeśli zostanie wczytany leniwie (lazy), przeglądarka właśnie z tym zwleka i wartość LCP się pogarsza. Dlatego WordPress często nadaje kandydatowi na LCP atrybut fetchpriority="high", aby przeglądarka pobrała go jako pierwszy.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Warsztat z rowerami w rzędzie">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Zespół przed sklepem">

Pułapka: niektóre motywy, kreatory stron i wtyczki optymalizacyjne stosują lazy loading także do pierwszego obrazu albo wczytują duży obraz jako tło przez CSS (który zostaje wykryty później). W PageSpeed Insights, w sekcji dotyczącej LCP, widać, który element nim jest i czy jest wczytywany leniwie.

PHP: darmowa szybkość

Każda nowa główna wersja PHP jest szybsza od poprzedniej, a strony WordPress korzystają z tego od razu, bez konieczności zmieniania czegokolwiek na stronie. Ponadto stare wersje przestają otrzymywać aktualizacje bezpieczeństwa (lekcja 8.4). Jeśli zmieniają Państwo wersję, proszę sprawdzić, czy wtyczki i motyw obsługują nową wersję, i najlepiej zrobić to najpierw w środowisku testowym (staging).

W ustawieniach PHP warto też zwrócić uwagę na:

• OPcache: u większości hostingodawców jest domyślnie włączony. Skutek: zmieniony plik PHP może chwilę poczekać, zanim PHP zacznie używać nowej wersji.
• memory_limit: zbyt niska wartość powoduje błędy przy ciężkich stronach; bardzo wysoka nie przyspiesza strony.

Zewnętrzne elementy i ciężkie wtyczki

Każdy element pochodzący od innej strony to dodatkowe połączenie i dodatkowy czas oczekiwania: czcionki z zewnętrznej usługi, osadzone wideo, widget czatu, kody pomiarowe, przyciski mediów społecznościowych, mapa. Pytania, które warto sobie zadać dla każdego elementu:

• Czy jest potrzebny? Wideo, które prawie nikt nie odtwarza, może być zastąpione obrazem z odnośnikiem.
• Czy może działać lokalnie? Czcionki zazwyczaj można umieścić na własnym serwerze (za pomocą wtyczki lub przez plik theme.json w przypadku motywu blokowego). To oszczędza jedno połączenie i jest lepsze dla prywatności (lekcja 9.3).
• Czy może wczytać się później? Widget czatu lub wideo może wczytywać się dopiero po kliknięciu.

W przypadku wtyczek pomaga pomiar za pomocą X-Ray (przy hostingu z CloudLinux) lub wtyczki takiej jak Query Monitor (włączanej tymczasowo, widocznej tylko dla administratorów). Pokazują one, która wtyczka generuje najwięcej zapytań do bazy danych lub zużywa najwięcej czasu.

Porządkowanie bazy danych

Baza danych rośnie o rzeczy, których Państwo nie widzą:

• Wersje (lekcja 4.1): każda zapisana wersja każdej strony. Proszę ograniczyć ich liczbę za pomocą WP_POST_REVISIONS i usunąć stare.
• Komentarze spamowe i z kosza, oraz wpisy w koszu.
• Transients: tymczasowe dane wtyczek w tabeli wp_options, które czasem nie są usuwane.
• Autoload: opcje w wp_options z włączonym autoload są wczytywane przy każdym żądaniu naraz. Wtyczki, które zostały usunięte dawno temu, czasem pozostawiają po sobie duże ilości danych. Stan witryny (lekcja 5.4) ostrzega, gdy dane autoload są bardzo duże.
• Tabele dzienników wtyczek (statystyki, dzienniki bezpieczeństwa, dzienniki e-maili), które nigdy nie są czyszczone.

Porządkowanie można przeprowadzić za pomocą wtyczki porządkującej, za pomocą WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force) lub za pomocą funkcji optymalizacji tabel w phpMyAdmin. Zawsze najpierw proszę wykonać kopię zapasową. Proszę nie usuwać niczego, czego Państwo nie rozpoznają.

Zaplanowane zadania: WP-Cron

WordPress ma zadania, które muszą wykonywać się o określonej porze: publikacja zaplanowanego wpisu, sprawdzanie aktualizacji, działanie wtyczki do kopii zapasowych. Nazywa się to WP-Cron. Domyślnie WP-Cron nie działa według zegara, lecz przy odwiedzinach: przy każdym żądaniu strony WordPress sprawdza, czy jakieś zadanie czeka na wykonanie. Dwie wady:

• Przy małej liczbie odwiedzających zadania wykonują się zbyt późno (zaplanowany wpis pojawia się dopiero przy pierwszych odwiedzinach po zaplanowanym czasie).
• Przy dużej liczbie odwiedzających sprawdzanie odbywa się bardzo często, a ciężkie zadanie może akurat spowolnić stronę dla danego odwiedzającego.

Lepiej: wyłączyć WP-Cron przy odwiedzinach i pozwolić, by uruchamiało go prawdziwe zadanie cron serwera co pięć lub dziesięć minut. W pliku wp-config.php (powyżej „to wszystko, zaprzestań edycji”):

define( 'DISABLE_WP_CRON', true );

A w ekranie cron panelu hostingowego proszę dodać zadanie, co 10 minut:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Ścieżka do PHP i do strony różni się w zależności od hostingodawcy; proszę sprawdzić w instrukcji swojego panelu. Można też użyć WP-CLI: wp cron event run --due-now. Proszę następnie sprawdzić w Stanie witryny, czy żadne zaplanowane zadania nie są opóźnione.

Heartbeat i panel administracyjny

Kokpit WordPressa, dopóki jest otwarty, co 15 do 60 sekund komunikuje się z serwerem (Heartbeat): w celu automatycznego zapisywania, informowania, że ktoś inny edytuje ten sam wpis, oraz powiadomień. Jeśli trzymają Państwo dziesięć kart z panelem otwartych przez cały dzień, to tysiące żądań. Proszę zamykać karty, których Państwo nie używają. Niektóre wtyczki cache mogą spowalniać Heartbeat; całkowite wyłączenie nie jest konieczne i psuje automatyczne zapisywanie.

Podsumowanie

• Po cache strony: obrazy, wersja PHP, zewnętrzne elementy i wtyczki, baza danych, cron. Proszę mierzyć przed i po, krok po kroku.
• Lazy loading dla wszystkiego oprócz dużego obrazu na górze strony; ten powinien raczej otrzymać fetchpriority="high".
• Nowsza wersja PHP to darmowa szybkość, pod warunkiem że wtyczki ją obsługują.
• Proszę usunąć wersje, transients, spam i duże dane autoload, zawsze z kopią zapasową.
• Proszę przełączyć WP-Cron na prawdziwe zadanie cron za pomocą DISABLE_WP_CRON i zadania w panelu.

Quiz

Zadanie

Zadanie A6.3: Lazy loading i formaty na Państwa stronie głównej. Proszę wpisać adres swojej strony. Program odczyta stronę główną i sprawdzi obrazy: czy pierwszy duży obraz nie ma atrybutu loading="lazy" (i najlepiej ma fetchpriority="high"), czy obrazy niżej mają lazy loading, oraz jaka część obrazów jest w formacie WebP lub AVIF?

Zadanie D6.3: Przed i po. Proszę zmierzyć stronę swojej witryny trzykrotnie w PageSpeed Insights (wersja mobilna) i zapisać środkową wartość LCP, INP (lub wartość laboratoryjną Total Blocking Time, jeśli brak danych terenowych), CLS oraz TTFB z zadania A6.1. Następnie proszę wprowadzić jedno z usprawnień opisanych w tej lekcji (obrazy, wersja PHP, usunięcie zewnętrznego elementu, porządkowanie bazy danych lub prawdziwy cron). Proszę zmierzyć ponownie trzykrotnie i zapisać nowe wartości. Proszę opisać, co zostało zrobione i czy różnica jest większa niż zwykłe wahania między pomiarami.

Dalsza lektura

Te artykuły opisują kroki w panelach WebOké; w innych panelach działają one w podobny sposób.

• Instrukcja DirectAdmin 14.1: Wybór wersji PHP (Select PHP version)
• Instrukcja DirectAdmin 12.7: Baza danych: sprawdzanie, naprawa i optymalizacja
• Instrukcja DirectAdmin 15.1: Zadania Cron: automatyczne uruchamianie zadań
• Utworzenie zadania cron (oraz co zrobić, jeśli nie działa)
• Instrukcja DirectAdmin 17.4: X-Ray: wykrywanie wolno działających stron
• Łączenie WP-Cron z systemowym cronem (developer.wordpress.org, w języku angielskim): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading i LCP (web.dev, w języku angielskim): https://web.dev/articles/lcp-lazy-loading