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.

Ahrefs.com – porządki na blogu

Jakiś czas temu założyłem konto w serwisie ahrefs.com. Jest to porządnie wyglądający serwis służący SEO. Zależało mi na site audit, w szczególności na sprawdzeniu błędów linkowania. Mogłem co prawda użyć narzędzia w stylu linkchecker, ale jakoś i więcej opcji, i prostsze w użyciu. Poza tym, ahrefs.com daje narzędzia do śledzenia słów kluczowych, popularności stron itp. Stwierdziłem, że popatrzę, choć jest tego za dużo jak na moje potrzeby. Nawet w wersji darmowej.

Cieszę się, że to zrobiłem. Okazało się, że niewielka część tytułów wpisów została źle zaimportowana podczas migracji z Blox. Czyli linki w treści były po staremu, ale tytuły zostały zmienione. Chyba Blox był bardziej liberalny jeśli chodzi o znaki w tytule. A może to po prostu problem z kodowaniem pl-znaków? W każdym razie musiałem zmienić linkowanie w kilkunastu wpisach, łącznie duże kilkadziesiąt miejsc. Czasem przy okazji robiłem i inne porządki. Zdarzają się bowiem pewne zaszłości, które może niekoniecznie łatwo zauważyć, ale nie są już potrzebne. Czyli bez sensu zużywają zasoby.

Gdyby ktoś zdecydował się pójść w moje ślady, polecam wykluczyć ze skanowania strony tagów, kategorii itp. Niczego nie wnoszą, bo jedynie powielają treść z wpisów, a one służą jedynie za agregaty wpisów. Za to brak ich wykluczenia powoduje błyskawiczne zużywanie quoty. Na szczęście ahrefs.com pozwala na wykluczenie URLi ze skanowania przy pomocy wyrażenia regularnego (czyt.: regexp).

Przyznaję, że nieco się rozochociłem, więc zamierzam sprawdzić także linki wychodzące do stron zewnętrznych. A może i stary blog się załapie na porządki? Oczywiście nic nagle, raczej zabawa do kawy raz w tygodniu. Przy czym tam to już raczej w grę wchodzi zabawa z użyciem sed.

Kluby

Zainspirowany aktywnościami na czytanych blogach, zapisałem się ostatnio do klubów. Kluby są dwa: 512 KB oraz 250 KB. Pierwszy dotyczy rozmiaru strony nieskompresowanej, drugi – moim zdaniem istotniejszy – skompresowanej. Znaczy wykonana została optymalizacja WordPress.

Niby nic nowego, bo o optymalizacji strony i poprawnym działaniu na urządzeniach moblilnych pisałem już dawno. Jednak z WordPressa o rozmiarze nieskompresowanym mniejszym niż 512 KB jestem zadowolony. Tym bardziej, że chodzi o wersję z dodatkowymi statystykami Matomo. Okazuje się, że nie potrzeba żadnej magii, by osiągnąć taki wynik. Nawet motyw jest jeden z domyślnych.

Tak, to tylko główna. Poszczególne wpisy są nieco większe. Tak, nie mam obrazków we wpisach. Z obrazkami na głównej byłoby więcej. Z drugiej strony mógłbym zmniejszyć liczbę wpisów. Ale nie o to chodzi, przynajmniej mi. Nie musi być jak najmniej, ważne, by zwrócić uwagę na rozmiar przy zachowaniu wyglądu i funkcjonalności. Czyli żeby nie było bloatu.

Jeśli komuś naprawdę zależy na minimalizacji, to jedynym sensownym kierunkiem wydaje mi się strona statyczna. Statycznych generatorów stron/blogów jest wiele. Podzielone językami i licencjami, czyli dla każdego coś miłego. Do tego lekki motyw i wyniki są nieporównywalnie lepsze. Co można zobaczyć na przykładzie Wattmeter (geneza). Niestety, funkcjonalność jakby nie ta. Przede wszystkim brakuje sensownej możliwości spięcia komentarzy.

Swoją drogą fajnie widać, jak na przestrzeni lat zmieniają się narzędzia do badania optymalizacji strony. Kiedyś korzystałem z surowo wyglądającego webpagetest.org, teraz rządzi znacznie ładniejszy GTmetrix.

Puchną także same strony. Strona główna starego bloga (Jogger.pl) to 27 requestów, 227 KB skompresowane, 674 KB nieskompresowane. Jednak od obu tych wartości należałoby odjąć odpowiednio 152 KB oraz 461 KB związane z reklamami i widgetem wyszukiwarki Google. Czyli zostałoby 75 KB oraz 213 KB, przed jakąkolwiek optymalizacją. Ten blog ma 11 requestów i odpowiednio 102 KB i 334 KB, ale już po optymalizacji. Czyli jakąś połowę więcej.

Optymalizacja WordPress

Do odchudzania strony głównej, czyli optymalizacji WordPressa korzystałem z wtyczki Asset CleanUp. Więcej o polecanych/używanych wtyczkach WordPress pisałem pisałem tu, więc aktualizuję.

Gdyby ktoś chciał powalczyć samodzielnie to poniżej instrukcja, albo raczej krótkie wskazówki na temat tego, co ustawiłem w tej wtyczce. Nie jest to komplet zmian optymalizacyjnych, część rzeczy mogę robić w innych wtyczkach lub samym serwerze WWW. Czyli klasyczne YMMV, a każda zmiana wymaga testów.

  • Optimize CSS – wszystkie opcje włączone. Defer, minimize, cache.
  • Optimize JavaScript – nie dotykany.
  • HTML Source CleanUp – usunięte kilka tagów. Nie podaję które, bo mocno zależy od konfiguracji.
  • Google Fonts – włączone Remove Google Fonts. Widać różnicę w wyglądzie, ale na testach wyszło mi, że jest tylko odrobinę gorzej. Różnica w rozmiarze – znaczna.
  • CSS & JS Manager – ze strony głównej (i tylko z niej!) usunąłem ładowanie plugina Subscribe to Comments Reloaded. Jest potrzebny tylko na stronach wpisów. Podobny los spotkał tam jquery-core oraz jquery-migrate.