Optymalizacja strony

Kolejny wpis, który przeleżał wiele czasu jako szkic. Nie znalazłem na niego czasu, a teraz sprawdziłem i dobrze się zestarzał, więc opublikuję to, co mam, choć nie pociągnąłem do końca tematu, którym jest optymalizacja stron WWW, tym razem bardziej od strony serwera, niż WordPressa, o którym wtedy napisałem.

Na początek polecam wpis Yzoji o optymalizacji bloga. I komentarze do niego. Tak, wpis jest sprzed trzech lat. Tak, jest aktualny, a wszystko co tu znajdziesz powstało właśnie wtedy. Raczej postaram się napisać uzupełnienie, niż powtarzać rady z tamtego wpisu.

Efekty

Nie mam niestety porównania sprzed wprowadzania zmian, ale żeby było wiadomo o czym rozmawiamy. Efekty optymalizacji strony bloga, wg PageSpeed Insights, przedstawiają się następująco:

Wynik optymalizacji strony wg PageSpeed dla desktop - performance 100%
Wynik dla desktop
Wynik optymalizacji strony wg PageSpeed wynik dla mobile - performance 9%
Wynik dla mobile

Kompresja

Na przyspieszenie działania bloga pomogło zmniejszenie poziomu kompresji w nginx. Tak, dobrze czytacie, zmniejszenie, nie zwiększenie. Dlaczego? Otóż tekst kompresuje się dobrze tak czy inaczej. A różnice w szybkości działania kompresji gzip są znaczne. Czyli mamy mininalnie większą ilość przesyłanych danych, ale odpowiedź jest wysyłana znacznie szybciej! Być może to kwestia relatywnie słabego VPSa, ale skoro nie widać różnicy, po co przepłacać? W każdym razie w konfiguracji nginx mam:

gzip_comp_level 1;

Lazy loading

Kolejną rzeczą, która przyspieszyła działanie tego bloga było wyłączenie lazy loading. Było o tym u Yzoji, ale warto powtórzyć, bo znowu, jest to nieintuicyjne. W dodatku wszyscy mantrują, że włączenie lazy loadingu jest dobre dla szybkości ładowania. No i teoretycznie mają rację. Ale nie jest to prawdą na stronach, gdzie ilość załączanych grafik jest niewielka. Więc jak mam jedną czy w porywach dwie skromne grafiki na wpis, to lazy loading tylko spowolni ładowanie. Gdyby grafik było więcej lub były większe – pewnie włączenie lazy loadingu mógłoby pomagać.

Google

Wyłączenie zabawek Google. Firma ta prezentuje pewną dwumyślność. Z jednej strony chce, by strona działała szybko. Z drugiej strony, sama dostarcza rozwiązania, które fatalnie wpływają na wydajność strony i stwarzają problemy w ich własnym scoringu! Google Analytics – wydajnościowe zło. Fonty Google – kolejne wydajnościowe zło. Google AdSense też drastycznie pogorszy szybkość działania strony.

Rozwiązanie, jeśli nie chcemy całkiem pozbywać się Google? W przypadku AdSense można zrezygnować z wyświetlania reklam wszędzie i ograniczyć ich obecność do wpisów, na których jest największy ruch. Taki kompromis – strony z reklamami będą ładować się dłużej, ale większość stron będzie działać szybko. Oczywiście wiąże się to z rezygnacją z reklam na głównej. Nieco upierdliwe, bo oznacza to ręczne zarządzanie kodem JS odpowiedzialnym za wyświetlanie reklam na poziomie konkretnych wpisów, ale dla mnie OK. Zamiast Google Analytics polecam Matomo. Z fontów Google zrezygnowałem, zamiast tego pewnie można serwować je lokalnie.

Klucz RSA

Kolejna nieoczywista sprawa – rozmiar klucza wykorzystywanego przy SSL/TLS. Miałem podejście security is our priority i klucz RSA o długości 4096 bitów. Tyle tylko, że póki co 2048 bity są także uznawane za bezpieczne. No i na tym blogu nie ma nic wrażliwego. Najbardziej wrażliwe jest hasło, które przesyłam przy logowaniu, więc zmniejszyłem rozmiar klucza i… Pomogło to skrócić czas nawiązywania połączenia z serwerem. Znowu, może kwestia stosunkowo słabego VPSa. Przy tej okazji polecę jeszcze wpis o tym jak zrobić sobie certyfikat SSL/TLS z oceną A+ na nginx.

Jak widać, optymalizacja stron WWW nie jest oczywista i warto do tematu podejść kompleksowo.

Halucynacje Antispam Bee

Uważni czytelnicy mogą pamiętać, że na blogu stosuję kilka metod zwalczania spamu w komentarzach. W kolejności od najbardziej ręcznych do najbardziej automatycznych będą to: ręczna moderacja, wtyczka Antispam Bee, hCaptcha oraz wycinanie IP znanych z nadużyć na poziomie iptables. Dziś będzie o wtyczce.

Wtyczka Antispam Bee radziła sobie nieźle. Wśród sporej ilości opcji, dotyczących tego jak rozpoznawać spam i co z nim dalej robić, posiada ona też możliwość generowania statystyk blokad spamu widocznych w dashboardzie WordPressa. Oczywiście korzystam, bo dzięki temu czytelnemu zestawieniu widzę, co w spamie piszczy bez konieczności wchodzenia w komentarze.

Do tej pory wyglądało to tak, że zerkałem na statystyki na wykresie, jeśli pojawiał się wzrost, to wchodziłem w komentarze i patrzyłem na IP z którego przyszedł spam i ogólnie zastanawiałem się, czy może trzeba coś ulepszyć. Oczywiście jeśli miałem wenę, bo blokady przez iptables, captchę czy wtyczkę Antispam Bee są totalnie bezobsługowe. Znaczy normalnie nie muszę w ogóle dotykać spamu, jedyne co robię, to zatwierdzam prawdziwe komentarze[1]. No i było tak, że jak wtyczka zgłosiła 2 zablokowane, to te 2 były w spamie w komentarzach. W każdym razie tak mi się wydawało – nie zauważyłem rozbieżności.

Problem

Po niedawnych zmianach w blokadach IP na poziomie iptables, ilość blokowanych spamów była stabilna i rekordowo niska – 1-2 próby dziennie. Jednak w pewnym momencie zobaczyłem coś takiego:

Statysytki Antispam Bee 22.03 – 06.05

Wzrost zaczął się 22 kwietnia i jest całkiem spory. Największa ilość widoczna na wykresie to 15 spamów. Postanowiłem poszukać, cóż to za IP i… spotkała mnie niespodzianka. Ostatni spam widoczny w komentarzach jest właśnie z 22 kwietnia. Po tej dacie nie mam żadnego komentarza uznanego za spam w bazie. A wtyczka Antispam Bee radośnie zgłasza.

Szukałem bezpośrednio w bazie, ale nie udało mi się znaleźć ani komentarzy uznanych za spam, ani miejsca przechowywania statystyk. Ostatecznie w ramach testu wyłączyłem wtyczkę na kilka dni i… przyszedł jeden spam do ręcznej moderacji. Przez kilka dni.

Rozwiązanie

Zastanawiałem się, co tu się stało i… chyba znalazłem rozwiązanie. Wszystko wskazuje na to, że wtyczka Antispam Bee jednak nie pozazdrościła AI i nie halucynuje. Ani nie próbuje pokazać, jaka jest przydatna uciekając się do przedstawiania fałszywych wartości. Chodzi o kolejność działania blokad. Antispam Bee działa przed czy też obok hCaptcha. Komenatrz, aby trafił do bazy WordPressa, musi mieć poprawnie rozwiązaną captchę. Jej brak nie przeszkadza jednak Antispam Bee w rozpoznaniu spamu i uwzględnieniu go w statystykach. Czyli ten wzrost to faktycznie próby wysyłki spamu z IP, które nie są na listach, ale nieudolne, nie uwzględniające tego, że na blogu jest captcha.

Wygląda, że trzeba się będzie przeprosić z wierszem poleceń przy wyszukiwaniu IP do blokowania, przynajmniej chwilowo. Stosowne polecenie:

egrep "POST.*wp-comments-post.php" access.log | grep " 400 " | awk '{print $1}' | sort | uniq -c | sort -n

Wtyczkę Antispam Bee polecam nadal. Jeśli ktoś jest ciekaw, czemu nie korzystam z Akismet, to odpowiedź znajdzie w tym wpisie.

[1] Tak się teraz zastanawiam, że działa to tak dobrze, że w zasadzie mógłbym wyłączyć moderację w ogóle. Z drugiej strony już przywykłem, a komentarzy nie ma zbyt wiele, więc żaden problem.

WordPress i kłopoty z cache – rozwiązanie

Od pewnego czasu na blogu występuje problem. Objawia się on tym, że niektóre wpisy nie wyświetlają się w całości, są jakby obcięte. Zauważyłem to parę dni temu, ale wtedy uznałem za jednorazowy wybryk i machnąłem ręką. Po części zwaliłem sprawę na cache, bo jego wyczyszczenie pomogło. Po głowie jako przyczyna chodziło mi też coś w stylu DDoS, który po publikacji artykułu na blogu uprawiają serwery Mastodon. I zupełnie nie miałem czasu na analizę.

Jednak dotarły do mnie sygnały (dzięki!) o tym, że sprawa się powtarza, postanowiłem przyjrzeć się bliżej. Dziś wszedłem z telefonu na ten sam wpis i… problem wystąpił ponownie. Z racji pory dnia ruch powinien być niewielki, więc warunki do diagnostyki powinny sprzyjać.

Trzy słowa o setupie

Blog jest dumnie wspierany przez WordPress, wykorzystywany jest nginx oraz php-fpm 8.2. Do tego dość intensywnie korzystam z wtyczek do WordPress. W szczególności do różnych optymalizacji i cache, co raczej nie ułatwi diagnostyki. Dużo elementów ruchomych, ingerencja w treść serwowanej występuje w wielu miejscach.

Wspomniałem o pluginie do cache jako jednym z podejrzanych. Konfiguracja Cache Enabler wygląda następująco:

Konfiguracja Cache Enabler
Screenshot konfiguracii Cache Enabler

Objawy i logi

Obcięty wpis wygląda tak:

Ucięty wpis na blogu
Screenshot uciętego wpisu

Cache był wygenerowany o 07:48 i pokrywa się to z czasem wejścia z telefonu widocznym w access.log.

drwxr-xr-x 2 www-data www-data 4096 Sep 24 07:48 pentagram-cerberus-p6361-rzut-okiem-na-bezpieczenstwo

W logu php-fpm nic specjalnego. Chwilę wcześniej widać raczej nie mogące mieć wpływu

[24-Sep-2023 07:44:23] WARNING: [pool www] seems busy (you may need to increase pm.start_servers, or pm.min/max_spare_servers), spawning 8 children, there are 1 idle, and 10 total children
[24-Sep-2023 07:44:27] WARNING: [pool www] child 20688 exited on signal 9 (SIGKILL) after 33847.200506 seconds from start
[24-Sep-2023 07:44:27] NOTICE: [pool www] child 25769 started

Diagnostyka

Problem występował na różnych przeglądarkach, także w trybie prywatnym. Zarówno na desktopie, jak i mobile. Sprawdzenie wersji zapisanej w cache pokazało, że jest ona błędna. Dobry znak, bo raczej można wykluczyć wpływ JSów. Były one podejrzane, bo wprawne oko dostrzeże, że polecenie curl przechodzi w pewnym momencie w kod źródłowy strony związany ze skryptem od statystyk Matomo.

Udało mi się ustalić, że wyczyszczenie cache pomaga, ale… tylko na pierwsze wyświetlenie. Kolejne wyświetlenia są już błędne. Sam problem występował niezależnie od obsługi JS. Czy to Firefox, czy links2, czy lynx – pierwsze wyświetlenie było poprawne, kolejne błędne.

Na pierwszy ogień poszły więc ustawienia wtyczki robiącej cache. W Minify HTML in cached pages including inline CSS and JavaScript wyłączyłem miniaturyzację CSS i JS. Nie pomogło.

Natomiast zupełne wyłączenie tej opcji jak najbardziej pomogło. Winnym okazała się zatem jedna z opcji wtyczki Cache Enabler w wersji 1.8.13. Takie tam ryzyka optymalizacji. Zgłosiłem problem na GitHub i zobaczymy co będzie dalej.

Rzuciłem jeszcze okiem na przyczynę. Prawdopodobnie chodzi o niepoprawne, zachłanne parsowanie komentarzy. Obcięcie następuje po pierwszym znaku *.
Gecko/20100101 Firefox/60.0' -H $'Accept: */*' -H $'Accept-Language: en-US,en;q=0.5'
natomiast linia bezpośrednio przed tym, co się zaczyna pojawiać, wygląda tak:
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */