Test wtyczki Autoptimize – czy warto używać?

Web Design Blog

Kategoria:
Web

Data publikacji:
6 stycznia 2020

Autor:
Paweł Mansfeld

Test wtyczki Autoptimize – czy warto używać?

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: styczeń 2020

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 posiada także dodatkową funkcjonalność zapewniającą działanie prostego mechanizmu lazy-load. Autoptimize nie zmienia niczego w WordPressie a dokonuje manipulacji w aktualnie używanych szablonach.

Wtyczka ta co prawda realizuje także inne działania optymalizacyjne (takie jak CDN dla zdjęć) ale są one dostępne w płatnej subskrypcji o zbyt wygórowanej cenie dlatego pominę tę funkcjonalność. CDN możemy zapewnić wykorzystując inne zarówno bardziej rozbudowane jak i całkowicie darmowe wtyczki.

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ń.

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,
  • odłożeniu ładowania CSS i zdefiniowania tzw. krytycznego CSS potrzebnego do renderowania górnej części 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.

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.

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.

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 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 jedne 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

Alterntywy 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.

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).

Źródła

https://pl.wordpress.org/plugins/autoptimize/
Oceń artykuł na temat: Test wtyczki Autoptimize – czy warto używać?
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 3