Szybkość strony przy ograniczonym budżecie: ekonomiczne sposoby na poprawę wydajności witryny

Szybkość strony przy ograniczonym budżecie

Jako konsultant Core Web Vitals otrzymuję wiele różnych zapytań dotyczących wsparcia w zakresie szybkości stron. I tak, czasami budżet nie jest duży. W takim przypadku muszę jeszcze efektywniej wykorzystywać swój czas i wykonywać jedynie optymalizacje o wysokim zysku i niskim nakładzie pracy. W tym artykule omówimy praktyczne, ekonomiczne strategie poprawy wydajności witryny i zapewnienia płynnego user experience.

Core Web Vitals TIP: Najbardziej przyjazna budżetowi usługa, którą oferuję, to 2-godzinne wsparcie Core Web Vitals! W 2 godziny pomogę opracować skuteczną strategię, która naprawi najpilniejsze problemy i da Ci największy zwrot z inwestycji!

Zarezerwuj teraz!

Najpierw zidentyfikuj problemy

Optymalizując wydajność strony przy ograniczonym budżecie, musimy mieć absolutną pewność, że optymalizujemy tak efektywnie, jak to możliwe. Oznacza to, że najpierw musimy wiedzieć, jaki jest rzeczywisty problem.

Możemy użyć doskonałego i darmowego PageSpeed Insights, aby sprawdzić dane CrUX. Dane CrUX to jedyne źródło danych, które się liczy, ponieważ to właśnie tego źródła danych używa Google.

Dane CrUX zaliczone!

Dane CrUX niezaliczone!

Poniżej wyniku CrUX zobaczysz audyt Lighthouse. 

Powiem jasno o audycie Lighthouse! W tym momencie nie interesuje nas Lighthouse. Dlaczego? Ponieważ nie mierzy Core Web Vitals. Jasne, Lighthouse to świetne narzędzie testowe i możesz swobodnie przeglądać wszystkie jego sugestie, ale ponieważ mamy ograniczony budżet, zależy nam na zaliczeniu Core Web Vitals. Nie interesuje nas teraz zaliczanie testów syntetycznych!

Wracając do danych CrUX. Oto kilka wskazówek, które warto stosować przy ograniczonym budżecie! Zacznij badać Core Web Vitals dokładnie w tej kolejności i najpierw skup się na tych problemach!

• Jeśli nie zaliczasz Time to First Byte, napraw to najpierw!
• Jeśli nie zaliczasz First Contentful Paint, napraw zasoby blokujące renderowanie (odrocz skrypty i zoptymalizuj style)
• Jeśli nie zaliczasz Largest Contentful Paint, nadaj priorytet zasobom potrzebnym do LCP (jak czcionki czy obrazy)
• Jeśli nie zaliczasz CLS, dodaj width i height do wszystkich obrazów, znajdź i usuń przejścia CSS oraz zarezerwuj miejsce dla elementów renderowanych z opóźnieniem (jak reklamy, filtry produktów itp.)
• Jeśli nie zaliczasz Interaction to Next Paint, najprawdopodobniej używasz zbyt dużo JavaScript w niewłaściwym momencie. Usuń niepotrzebne skrypty/wtyczki, użyj narzędzia RUM jak CoreDash, aby znaleźć najwolniejsze skrypty

Odpowiedzialna optymalizacja obrazów

Obrazy wpływają na Core Web Vitals na kilka różnych sposobów. Często są największym składnikiem rozmiaru strony. Wykorzystując efektywne techniki kompresji obrazów i stosując nowoczesne formaty obrazów jak WebP, właściciele stron mogą zachować jakość wizualną przy jednoczesnym znacznym skróceniu czasu ładowania. Wiele razy obrazy stają się elementem Largest Contentful Paint. Oznacza to, że musimy nadać priorytet tym ważnym obrazom LCP i obniżyć priorytet mniej ważnych obrazów znajdujących się poniżej widocznej części strony.

1. Konwertuj obrazy na WebP za darmo

Istnieje wiele darmowych narzędzi, rozwiązań i wtyczek, które pozwalają konwertować obrazy na nowsze, szybsze i bardziej nowoczesne formaty jak WebP. Na przykład dla WordPress polecam doskonały i darmowy WebP Express

2. Zaimplementuj lazy loading

Lazy loading sygnalizuje przeglądarce, że obraz nie powinien być ładowany, dopóki nie znajdzie się (prawie) w widocznym viewport (widocznej części strony). Jeśli masz 15 obrazów na stronie i tylko 3 są w widocznej części strony, możesz bezpiecznie dodać loading="lazy" do obrazów, które nie znajdują się w widocznym viewport. 

Są 2 sposoby rozwiązania tego problemu. Pierwszy to włączenie lazy loading w swoim CMS. Spowoduje to dodanie lazy loading do wszystkich obrazów. Następnie sprawdź dokumentację, aby dowiedzieć się, jak usunąć lazy loading dla obrazów widocznych i ważnych. Drugi sposób to ręczne dodanie loading="lazy" do obrazów poniżej widocznej części strony.

<img loading="lazy" src="image.jpg">

3. Skonfiguruj fetchpriority obrazów

Dodając fetchpriority = "high" do tagu obrazu, możemy zasygnalizować przeglądarce, że ten obraz jest ważniejszy niż inne i powinien być pobrany z wysokim fetchpriority. I chociaż wiem, że istnieją lepsze sposoby, które obejmują preloading obrazów i 103 early hints, ustawienie fetchpriority jest proste, szybkie i skuteczne! Proces jest prosty: zidentyfikuj najważniejszy obraz na swojej stronie, edytuj szablon strony i dodaj fetchpriority = "high" do obrazu. Będzie to wyglądać mniej więcej tak

<img fetchpriority="high" src="image.jpg">

2. Wykorzystanie pamięci podręcznej przeglądarki dla spójności

Jeśli korzystasz z taniego hostingu, istnieje duże prawdopodobieństwo, że serwer nie jest optymalnie skonfigurowany. Jednym z błędów, z którymi regularnie się spotykam, jest źle skonfigurowana pamięć podręczna przeglądarki.  Pamięć podręczna przeglądarki pozwala na lokalne przechowywanie często używanych zasobów, takich jak obrazy, skrypty i arkusze stylów, co skraca czas ładowania dla powracających użytkowników. Skonfiguruj nagłówki pamięci podręcznej, aby osiągnąć równowagę między optymalną wydajnością a zapewnieniem, że użytkownicy otrzymują najnowsze aktualizacje treści.

Jeśli używasz Apache jako serwera WWW, po prostu utwórz plik o nazwie .htaccess w katalogu głównym (bazowym) swojej witryny i dodaj te linie

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Jeśli używasz innego serwera, takiego jak NGINX, skontaktuj się ze swoim dostawcą hostingu i wskaż im ten artykuł!

3. Rozważ darmowy lub budżetowy CDN jak CloudFlare

Poznaj zalety Content Delivery Networks, które umożliwiają dystrybucję statycznych treści na serwerach na całym świecie. Chociaż premium CDN oferują zaawansowane funkcje, nawet darmowe lub budżetowe opcje mogą nadal zapewnić znaczący wzrost szybkości strony i niezawodności.

Na planie darmowym:

Na planie darmowym otrzymasz wiele „dobrych rzeczy”, takich jak 

1. Superszybki DNS. Serwery DNS CloudFlare są darmowe i prawdopodobnie przewyższą wydajnością serwery DNS Twojego budżetowego dostawcy hostingu. Już z tego powodu warto przejść na CloudFlare 
2. HTTP/3. CloudFlare używa najnowszych protokołów i najszybszych metod kompresji. Bez wchodzenia w szczegóły, zapewniam, że przyspieszy to Twoją sieć o co najmniej 10%.
3. Spójna pamięć podręczna przeglądarki. CloudFlare ma bardzo dobry wynik, jeśli chodzi o buforowanie zasobów statycznych. Konfiguracja domyślna jest prawdopodobnie lepsza niż ta, którą masz teraz!
4. Buforowanie brzegowe dla zasobów statycznych. CloudFlare będzie buforować wersje Twoich zasobów statycznych, takich jak obrazy, skrypty i pliki CSS, i będzie je serwować bezpośrednio użytkownikowi końcowemu ze swojej sieci brzegowej. Eliminuje to potrzebę podróży do serwera źródłowego.
5. Rocket loader. Rocket loader odroczy ładowanie skryptów i poradzi sobie ze wszystkimi komplikacjami, które z tego wynikają. Rocket loader to surowa metoda, ale jeśli nie jesteś w stanie ręcznie odroczyć skryptów, prawdopodobnie poprawi to metryki paint, takie jak Largest Contentful Paint.

Na planie Pro

Jedną z pierwszych rzeczy, które zawsze mówię, widząc darmowy plan CloudFlare, jest „przejdź na Pro!”. Jeśli 25$ to kwota, na którą możesz sobie pozwolić i chcesz wydać na szybszą stronę, powinieneś to rozważyć.

1. Wszystkie darmowe funkcje. Oczywiście plan Pro obejmuje wszystkie darmowe funkcje.
2. CloudFlare APO dla WordPress. APO dla WordPress to kompletne rozwiązanie, które buforuje Twoje strony w sieci brzegowej, jeśli użytkownicy nie są zalogowani. Może to ogromnie przyspieszyć Time to First Byte. 
3. Bezstratna i stratna optymalizacja obrazów. Jedną z głównych zalet korzystania z wersji Pro CloudFlare jest ich optymalizacja obrazów. CloudFlare konwertuje i buforuje obrazy w formacie WebP oraz serwuje je tylko tym użytkownikom, którzy akceptują te formaty.

4. Hostuj samodzielnie tyle, ile możesz!

Kolejną prostą i skuteczną optymalizacją jest samodzielne hostowanie „zasobów statycznych”. Na wielu stronach zasoby statyczne są hostowane na zewnętrznych CDN (nie myl tego z Twoim własnym CDN). Na przykład jQuery jest hostowane na  https://code.jquery.com/,  Bootstrap jest hostowane na https://cdn.jsdelivr.net, a Twoje czcionki są hostowane na https://fonts.googleapis.com. Rozumiem pokusę, te CDN prezentują się jako łatwe i szybkie, ale korzystanie z nich jest w rzeczywistości dość złym pomysłem i spowolni Twoją stronę!

Idea korzystania ze współdzielonego CDN dla tego typu plików była słuszna w czasach, gdy przeglądarki mogły jeszcze współdzielić te pliki między stronami. Te czasy minęły. Rezultat jest taki, że nowy użytkownik zawsze musi pobrać plik statyczny i potrzebuje nowego połączenia z nowym serwerem dla każdego pliku. A te nowe połączenia z nowymi serwerami mogą zająć dużo dodatkowego czasu.

Rozwiązaniem jest samodzielne hostowanie tych plików zewnętrznych. Jest to proste – wystarczy pobrać plik, umieścić go na swoim serwerze i zmienić odniesienie do tego pliku.

5. Asynchroniczne ładowanie skryptów

Ogromnym wąskim gardłem mogą być „blokujące skrypty” w nagłówku strony. Te skrypty mogą czasami opóźniać ładowanie strony nawet o 20 sekund! Odroczenie tych skryptów nie jest wcale trudne. Wystarczy dodać defer do tagu skryptu i gotowe. Jeśli możesz, zrób to! Edytuj szablon i zmień swój skrypt w ten sposób

<!-- stary blokujący tag skryptu -->
<script src="script.js"></script>

<!-- nowy odroczony tag skryptu -->
<script defer src="script.js"></script>

Ale są pułapki! Dodanie defer do tagów skryptów może powodować różnego rodzaju problemy i błędy zależności. A ponieważ masz ograniczony budżet, muszę założyć, że nie masz środków na zatrudnienie eksperta JavaScript, który naprawi wszystkie problemy, które mogą wystąpić. Więc spróbuj odroczyć swoje skrypty i sprawdź, czy nie ma błędów (naciśnij Ctrl-Shift-I w Chrome i sprawdź zakładkę konsoli). Jeśli po testach nie ma problemów... jesteś jednym ze szczęśliwców! Jeśli są problemy, powinieneś prawdopodobnie skorzystać z jednego z następujących rozwiązań:

Użyj Rocket loader 

Jak wspomniano, darmowa wersja CloudFlare daje dostęp do Rocket Loader. Odroczy to wszystkie skrypty na stronie. Nie jest to w żadnym wypadku idealne, ale w większości przypadków wykona całkiem dobrą robotę.

Użyj wtyczki

Większość stron opartych na CMS ma ogromne repozytorium wtyczek. Istnieje wiele wtyczek, które pozwalają odraczać JavaScript i radzić sobie ze wszystkimi komplikacjami, które mogą wynikać z odraczania skryptów.

6. Buforowanie, buforowanie, buforowanie!

Gdy masz ograniczony budżet i nie chcesz wydawać dużo na hosting, buforowanie jest jednym z najskuteczniejszych sposobów na przyspieszenie strony. Buforowanie jest szczególnie skuteczne w walce z wysokim Time to First Byte. Buforowanie może odbywać się na różnych poziomach. 

Pamięć podręczna po stronie klienta: Skonfiguruj serwer tak, aby instruował przeglądarkę do buforowania jak największej liczby zasobów statycznych. Zmniejszy to obciążenie serwera.

Object Cache:  Object Cache może służyć do przechowywania danych, których ponowne generowanie jest kosztowne obliczeniowo, takich jak wyniki złożonych zapytań do bazy danych. Poproś swojego dostawcę hostingu o zainstalowanie Redis lub Memcached.

Full Page Cache: Jeśli korzystasz z CMS, prawdopodobnie chcesz dodać pełną pamięć podręczną stron do swojej witryny. Dla WordPress dobrymi opcjami są WP Fastest Cache lub WP Core Web Vitals

7. Podejmuj strategiczne decyzje dotyczące hostingu

Jeśli chodzi o hosting, opłaca się rozejrzeć, a najdroższy hosting nie zawsze jest najszybszy. Generalnie szukasz planu hostingowego zoptymalizowanego pod Twój CMS, ponieważ majster od wszystkiego jest mistrzem od niczego!  Szukaj dostawców oferujących zoptymalizowane serwery. Strategiczny wybór hostingu może znacząco wpłynąć na szybkość witryny.

8. Ciągłe monitorowanie i analiza

Wdróż solidną strategię monitorowania za pomocą przystępnych cenowo narzędzi jak [url =https://coredash.app]CoreDash[/url]. Regularnie audytuj wydajność swojej witryny, aby identyfikować nowe możliwości optymalizacji i zapewnić stałą poprawę szybkości.