Szybkość działania serwisu to jeden z najważniejszych czynników kształtujących tzw. doświadczenie użytkownika (ang. user experience). W Autentice na bieżąco śledzimy trendy i wytyczne Google z myślą o naszych klientach. No i cóż… grzechem było nie skorzystać na własnym podwórku. Dlatego niedawno znaleźliśmy czas, by zoptymalizować również witryny autentika.pl.
To nie tak, że szewc bez butów chodzi. Pod względem wydajności nasza strona była całkiem niezła. Ale jeśli coś może być jeszcze lepsze, dlaczego by nad tym nie popracować? Szczególnie gdy w stawce znajdują się: wyższe wyniki SEO, większa konwersja, poprawa UX czy niższy współczynnik odrzuceń.
W przypadku autentika.pl musieliśmy się zmierzyć z trzema, a właściwie czterema wyzwaniami.
Pierwszym z nich był zbyt długi TTFB, czyli czas reakcji serwera. Wynosił on ok. 150-200 ms. Drugim priorytetem było wyeliminowanie kodu JavaScript i CSS, który blokował renderowanie. Kolejna sprawa to duża ilość danych przy pobieraniu strony HTTP/1.1. No i na koniec – sam WordPress.
Aby uporać się z tymi problemami, wdrożyliśmy najlepsze praktyki web performance, a wśród nich m.in.:
- Refaktoring frontu z użyciem frameworka Vue – mówiąc po ludzku, przepisaliśmy cały frontend serwisu, zostawiając w niezmienionej formie warstwę wizualną.
- Ładowanie z użyciem HTTP/2 Push – więcej na ten temat przeczytacie w artykule Grzegorza: HTML Preload i HTTP/2 Push w praktyce
- Zoptymalizowane, progresywne obrazy – teraz obrazki wczytują się szybciej i nie przeszkadzają w poruszaniu się po stronie.
- Brak blokującego rendering JavaScript i CSS – ogólnie rzecz ujmując, posprzątaliśmy kod, dzięki czemu zyskaliśmy na wydajności i szybkości działania strony.
- Mocna optymalizacja ładowania fontów – to nadaje się na osobny artykuł, ale najważniejsze, że nowe metody znacząco przyspieszają działanie serwisu!
Jakie wyniki udało nam się osiągnąć? Najważniejsze z nich to: ultraszybkie ładowanie, minimalne oczekiwanie na treść po przeładowaniu, zgodność ze standardem PWA, TTFB ok. 30-60 ms. No i frontend niezależny od backendu – jako wisienka na torcie.
A to wszystko po to, aby dzisiaj nasi użytkownicy mogli się cieszyć naprawdę dobrym, średnim czasem wczytywania strony. Zresztą, sprawdźcie sami 🙂