Kiedy szukasz informacji jak przyspieszyć WordPressa pod wynik PageSpeed Insights, na wielu blogach można natknąć się na poradę wykorzystania wtyczki Autoptimize, która poprawi go o kilka punktów w teście PSI. Czy Autoptimize jest właściwym narzędziem do przyspieszania stron internetowych WordPress? Jeżeli tak, to jak ją skonfigurować? Jeżeli nie, to co jest z tą wtyczką nie tak? Jakie błędy najczęściej popełniają użytkownicy tej wtyczki? Odpowiedzi na te pytania znajdziesz w tym artykule.
Szczegóły wtyczki Autoptimize
Autor: Frank Goossens (futtta)
Oceny: bardzo dobre (powyżej 4,5 gwiazdek)
Ilość instalacji: 1 000 000 +
Ostatnia aktualizacja: kilka dni temu
Opis wtyczki Autoptimize
Wtyczka Autoptimize specjalizuje się w szeroko-pojętej optymalizacji kodu CSS i JS dodanego do strony WordPress. Dzięki opcjom konfiguracyjnym, działanie wtyczki można dostosować do konkretnej witryny a także zróżnicować ją w zależności od stanu zalogowania. Autoptimize może wprowadzić szereg udoskonaleń do aktualnie wykorzystywanego motywu. Autoptimize posiada także dodatkową funkcjonalność związaną ze zdjęciami, mianowicie, może zapewnić działanie prostego i skutecznego mechanizmu lazy-load. Nie jest ta funkcjonalność obecnie potrzebna, ponieważ przeglądarki natywnie wspierają tag loading i WordPress zapewnia z pudełka przyjazne dla SEO opóźnione ładowanie obrazków.
Autoptimize nie zmienia niczego w WordPressie a dokonuje manipulacji w generowanym dynamicznie kodzie HTML. Oznacza to, że samo włączenie wtyczki i korzystanie z podstawowej konfiguracji czy wyłączenie jej po jakimś czasie nie zaburzy innych funkcjonalności.
Autoptimize jest często wykorzystywany do „odhaczenia” punktu: Wyeliminuj zasoby blokujące renderowanie. Niestety, najczęściej polega to na dodaniu wszelkich stylów CSS do ciała strony. Nie było by w tym nic złego gdyby nie fakt, że możemy tak zrobić w bardzo specyficznym przypadku po wykonaniu innych – bardziej istotnych działań. Dodatkowo, ładowanie wszystkich stylów metodą inline wymieniłem w artykule o najgorszych pomysłach na przyspieszenie stron. Możesz w nim przeczytać, więcej o tym dlaczego jest to tak szkodliwe.
Optymalizacja zasobów strony WordPress za pomocą Autoptimize
Optymalizacja kodu CSS i JS za pomocą Autoptimize może polegać na:
- połączeniu plików CSS – wszystkich (lub wybranych) instrukcji CSS znajdujących się w różnych plikach w jeden plik (tzw. konkatencja CSS).
- minifikacji czyli usunięciu nadmiarowych znaków w kodzie CSS i JS
- minifikacji kodu HTML
- przeniesieniu kodu CSS i/lub JS do nagłówka lub stopki,
- wklejeniu skryptów bezpośrednio do kodu HTML,
- obsłużeniu plików załadowanych do własnego CDN,
- odłożeniu ładowania CSS i ręcznego zdefiniowania tzw. krytycznego CSS potrzebnego do renderowania górnej części strony,
Dodatkowe opcje wprowadzone w najnowszych aktualizacjach umożliwiają także na szybkie i łatwe:
- usunięcie ciągów zapytań (query string) w odnośnikach do zasobów co wspomaga działanie pamięci podręcznej serwera i usprawnia działanie CDN (szerszy opis tej techniki jest w podlinkowanym na początku artykule),
- optymalizacji czcionek internetowych za pomocą dodania instrukcji font-display do deklaracji font-face (radzi sobie także z Google Fonts),
- usunięcie emoji i innych nieistotnych stylów dodawanych do WordPressa.
Po doinstalowaniu wtyczki Autoptimize CriticalCSS.com Power-Up – wymagającej do działania płatnej subskrypcji Autoptimize jest wstanie:
- Wygenerować krytyczny kod CSS do każdej strony, co powinno pomóc w przypadku kiedy jedynym problemem jest nadmiarowy kod CSS blokujący renderowanie strony.
Co więcej, Autoptimize radzi sobie zarówno w sytuacji gdzie zasoby są dodawane za pomocą zgodnej z dokumentacją metody enqueue_scripts jak i takich, które są dodawane na sztywno do szablonu.
Zalety Autoptimize
Zalety Autoptimize to przede wszystkim możliwość zautomatyzowania prac, które w pewnych szczególnych okolicznościach należy wykonać w ramach prac optymalizacyjnych. Autoptimize pozwala ponadto wyłączyć własną funkcjonalność na stronach sklepu (koszyk, składanie zamówienia) oraz w przypadku kiedy korzystamy ze strony jako użytkownik zalogowany.
Autoptimize jest stosunkowo lekką wtyczką i w większości przypadków nie powinna znacznie opóźniać działania ani samej witryny ani panelu administracyjnego WordPressa.
Rozwiązuje wiele różnych problemów za pomocą prostego i czytelnego interfejsu. Dodanie instrukcji font-display do deklarowanych fontów czy edycja odnośników do Google Fonts jest zadaniem, z którym poradzi sobie większość deweloperów. Autoptimize wykonuje te poprawki automatycznie z czego mogą skorzystać osoby mniej techniczne.
To samo tyczy się mechanizmu lazy-load, nie dość, że działa w oparciu o Intersection Observer to jeszcze pojawianiu się zdjęć towarzyszy lekka animacja „fadeIn”. Lazy load ma specjalne pola wykluczeń gdzie możemy podać adresu URL lub klasy zdjęć, których ładowanie nie ma być odkładane (np. logo). Autoptimize dostarcza prostych i kompletnych rozwiązań.
Autoptimize działa jako wtyczka, dlatego wykonane modyfikacje nie znikną po aktualizacji czy zmianie motywu. Jest to też ułatwienie dla osób nietechnicznych. To samo tyczy się usuwania parametrów var w odnośnikach do zasobów CSS i JS.
Wady Autoptimize
Wadą Autoptimize jest to, że wszelkie te działania są wykonywane w locie. O ile optymalizacja kodu CSS i JS może mieć sens o tyle Autoptimize w pewnych przypadkach może to robić pewnym kosztem – dodatkowym opóźnieniem TTFB, które jest nieporównywalnie bardziej istotne niż scalanie lub minifikacja plików z dodatkowymi skryptami. Opóźnienie to trzeba będzie zniwelować dodatkową wtyczką np. WP-Super Cache
Z racji dość prostej funkcjonalności, Autoptimize agreguje napotkane skrypty „bezmyślnie” w jeden plik co może spowodować nieprawidłowe funkcjonowanie niektórych z nich. Dlaczego tak się dzieje? W większości przypadków jest to wina zależności pomiędzy plikami i tego, że kolejność instrukcji – zarówno w kodzie CSS jak i JS ma znaczenie dla ich interpretacji.
To samo tyczy się przenoszenia CSS i JS do stopki, to prawie nigdy nie ma prawa działać na standardowej stronie stworzonej za pomocą gotowego szablonu. Kod, który tak miałby funkcjonować trzeba pisać z myślą o takim jego dołączeniu.
Choć Autoptimize służy do optymalizowania kodu CSS i JS nie potrafi zrobić najważniejszego – usunąć nadmiarowych instrukcji CSS. To właśnie ta operacja właściwie eliminuje zasoby blokujące renderowanie i dopiero po jej wykonaniu można użyć dodatkowych opcji w Autoptimize. Żeby była jasność, to nie jest wada samego Autoptimize, bo nie ma możliwości aby jakieś narzędzie kiedykolwiek robiło to automatycznie i całkowicie bezbłędnie.
Uniwersalna konfiguracja Autoptimize
Chcąc wykorzystać dobrodziejstwa Autoptimize bez uszczerbku na funkcjonalności naszej strony, możemy włączyć funkcje odpowiedzialne za minifikację skryptów JS i minifkację HTML.
Można spróbować dokonać agregacji wszystkich plików CSS – w 95% przypadków nie powinno spowodować to błędów w interpretacji.
Optymalizacja fontów, czy usunięcie „śmieci” z adresów URL plików CSS i JS nie wymaga od nas większego wysiłku:
Zaawansowana konfiguracja Autoptimize
W przypadku kiedy chcemy zmaksymalizować osiągnięty wynik optymalizacji, można użyć do tego celu agregacji plików JS. Jeżeli punkt ten powoduje wyświetlanie się błędów w konsoli JavaScript lub uniemożliwia funkcjonowanie jakieś wtyczki – należy zaznaczyć opcję: „Niech Autoptimize przechwyci kod JavaScript z ciała HTML…”. Alternatywnym rozwiązaniem może być dodawanie skryptów JS do nagłówka ale nie ma to zazwyczaj najmniejszego sensu.
Jeżeli strona generuje przy każdym odświeżeniu unikalny kod skryptów, Autoptimize będzie zapełniał pamięć podręczną swoimi tymczasowymi plikami. Niestety, choć wtyczka ta potrafi wykryć, że pamięć jest zapełniana z powodu jej funkcjonowania i ostrzega nas o tym nawet e-mailowo, Autoptimize nie ma własnego mechanizmu na czyszczenie plików, dlatego musimy to robić ręcznie lub zautomatyzować czyszczenie za pomocą CRONa lub skryptu.
Jednym rozwiązaniem jest dodanie takiego kodu do pliku functions PHP:
if (class_exists('autoptimizeCache')) {
$max = 196000;
$stats=autoptimizeCache::stats();
$cache=round($stats[1]/1024);
if ($cache>$max){
autoptimizeCache::clearall();
header("Refresh:0");
}
}
Kiedy cache osiągnie wielkość ok. 196MB, Autoptimize wyczyści cache przy następnej wizycie na stronie i odświeży ją by ponownie wygenerować tymczasowe pliki.
⚡CriticalCSS
Kiedy zdecydujemy się na wykorzystywanie płatnej funkcjonalności Autoptimize, wtyczka ta jest w stanie automatycznie wygenerować zbiór najważniejszych deklaracji CSS i odłożyć w czasie pobieranie właściwego pliku ze stylami.
Aby to było możliwe, zewnętrzny serwis odwiedza naszą witrynę i skanuje strona po stronie kod HTML i CSS. Wygenerowane pliki są dołączane do szablonów za pomocą natywnych wyrażeń: is_front_page(), is_single(), is_archive() itd…
Po przeskanowaniu naszej strony można ten kod edytować w przypadku gdyby pewne istotne instrukcje zostały pominięte. Można też zapisać wygenerowany kod i przykładowo po rezygnacji z subskrypcji dodać go do poszczególnych partii motywu za pomocą wspomnianych warunków is_single(), is_product()
W praktyce, Autoptimize dodawał do kodu HTML style CSS o dużo mniejszej objętości niż oryginalny kod ze stylami. Akurat w moim przypadku nie poprawił już i tak niemal idealnego wyniku w PageSpeed Insights ale w przypadku strony klienta, pomarańczowy wynik mobilny został poprawiony o 7 punktów a zielony Desktop o 2. Korzyść była związana ze skróceniem czasu FCP (ang. First Contentul Paint).
Jeżeli chcesz wiedzieć więcej co to jest krytyczny CSS i dlaczego jego wydzielenie jest istotne zapraszam do artykułu: co to jest ścieżka krytyczna i jak wyeliminować zasoby blokujące renderowanie.
Optymalizacja stron Single-Page, Single Page App i AMP za pomocą Autoptimize
Jeżeli mamy stronę, która prezentuje się na jednej podstronie czyli strona One-Page, statystyki wskazują na wysoki współczynnik odrzuceń lub jest to SPA – Single Page Application, możemy bez wykorzystywania funkcji CriticalCSS włączyć opcję, która dodaje cały kod CSS do ciała HTML. Pamiętajmy że przed tą operacją trzeba usunąć nadmiarowy kod CSS, bo w przeciwnym wypadku rozmiar kodu HTML może być nieoptymalny co utrudnia indeksację strony i może pogorszyć pozycje wszystkich podstron w całej witrynie.
Czy warto stosowac Autoptimize na serwerze HTTP/2?
Tak, z tym że należy wyłączyć agregację plików w jeden plik. W przypadku niestandardowych przypadków użycia najlepiej jest przetestować działanie konfiguracji w różnych wariantach i przetestować wydajność w praktyce. Czytaj więcej o protokole HTTP/2
Alternatywy dla wtyczki Autoptimize
Alternatywą może być użycie modułu PageSpeed, które dokonuje bardzo podobnej optymalizacji, jednak całość wykonuje się na serwerze z pominięciem logiki WordPress.
Nic nie stoi na przeszkodzie aby działania, które wykonuje Autoptimize wykonać ręcznie lub za pomocą własnych skryptów. Będziemy mieli przez to większą kontrolę nad każdą linijką w kodzie CSS i JS.
Test wtyczki Autoptimize
Czy Autoptimize na pewno działa? Już po samym jej opisie możemy przypuszczać, że tak. Sprawdźmy jak wyglądają w praktyce wyniki w słynnym teście PageSpeed Insights. Testowany motyw to Twenty-Twenty z wtyczką WooCommerce:
Po włączeniu optymalizacji CSS, JS, odłożeniu wczytywania fontów, usunięciu emoji i query-stringów otrzymano następujący wynik:
Jak widać, nowa wersja Autoptimize jest w stanie realnie przyspieszyć działanie strony i znacznie podnieść wynik w PageSpeed Insights. Taką różnicę da się już odczuć przy normalnym korzystaniu z witryny.
Podsumowanie
Autoptimize (jak każde inne narzędzie automatyzujące optymalizację) może służyć do poprawy wydajności ale nieuważne korzystanie z niego może doprowadzić do jej pogorszenia i spowolnienia działania całego serwisu. Autoptimize to przydatna wtyczka, która może pomóc w automatyzacji prac związanych z optymalizacją kodu odpowiedzialnego za front-end w przypadku małych i średnich stron WWW. Należy jej używać na samym końcu (po usunięciu nadmiarowego kodu).
Odpowiedz lub skomentuj