Monitorowanie wydajności i kondycji witryny: wskazówki i najlepsze praktyki

Konfiguracja i prowadzenie strony internetowej lub projektu e-commerce to świetna sprawa – jednak Twoja praca jest daleka od ukończenia po uruchomieniu witryny.

Bez odpowiedniego monitorowania kondycji i wydajności Twoja witryna poniesie konsekwencje – które mogą być znacznie większe niż zwykłe wolne ładowanie.

Zwróćmy uwagę na hipotetyczny, idealny scenariusz, w którym wszystkie strony internetowe na świecie działają tak, jak powinny. Czy wiesz, że oprócz wzrostu satysfakcji użytkowników, przyczynimy się również do lepszego środowiska?

Słabo działające strony internetowe nie tylko wpływają na każdego, kto je tworzy lub używa, ale także pozostawiają większy ślad węglowy.

Według internetowego kalkulatora emisji dwutlenku węgla strony internetowe mają ślad węglowy, a przeciętna strona internetowa emituje 0,5 grama dwutlenku węgla na wyświetlenie. To tylko mediana.

Patrząc na średnią, która uwzględnia również witryny o wysokim poziomie zanieczyszczeń, liczba ta wzrasta do 0,9 grama.

Oprócz problemów na skalę globalną, niezdrowa, niewłaściwie działająca witryna będzie kosztować czas, pieniądze i przychody. Kondycja witryny jest podobna do naszej: łatwo ją zaniedbać i trudno ją poprawić.

Musisz znać główne składniki, które składają się na kondycję witryny, aby przeprowadzić odpowiednie praktyki monitorowania, które pomogą skrócić czas przetwarzania.

Wraz z pojawieniem się szybkich i łatwych kreatorów stron internetowych, tworzenie stron internetowych stało się dostępne dla każdego. Wszystko, co musisz zrobić, to zarejestrować się, wybrać domenę, wybrać szablon i voila! Masz stronę internetową w kilka sekund.

Jednak wielu właścicieli witryn odrzuca fakt, że tworzenie witryn to dopiero pierwszy krok. Istotne jest również odpowiednie utrzymanie wydajności i monitorowanie kondycji.

W tej notatce spójrzmy na kilka podstawowych wskaźników kondycji i wydajności witryny: czym one są, jak je monitorować i jak wprowadzać ulepszenia.

Aspekty do monitorowania pod kątem wysokiego wskaźnika kondycji witryny

Podstawowe wskaźniki internetowe

Zdjęcie od autora, październik 2022

Statystyki Google PageSpeed

Pierwszymi wskaźnikami, które należy wziąć pod uwagę podczas przeprowadzania testów wydajności, są kluczowe wskaźniki internetowe. Te wskaźniki wydajności pokazują szybkość, stabilność i responsywność, pomagając zrozumieć jakość doświadczenia użytkownika witryny.

Kilka narzędzi śledzi Twoje kluczowe wskaźniki internetowe, ale wielu właścicieli witryn skłania się ku prostemu narzędziu: Google PageSpeed ​​Insights.

Po wprowadzeniu adresu URL do narzędzia zostanie wyświetlony raport pokazujący, czy zdałeś test Core Web Vitals i wszelkie inne aspekty, na które musisz mieć oko. Oto trzy kluczowe wskaźniki, które zobaczysz:

Największa zawartość farby (LCP)

Celuj w wynik 2,5 sekundy lub mniej .

Jeśli Twój wynik przekracza 2,5 sekundy, może to oznaczać, że: Twój serwer ma opóźnienia, czas ładowania zasobów nie jest odpowiedni, masz dużą liczbę blokujących renderowanie kodu JavaScript i CSS lub renderowanie po stronie klienta jest wolne.

Opóźnienie pierwszego wejścia (FID)

Celuj w wynik 100 milisekund lub mniej .

Jeśli Twój wynik przekroczy ten czas, może być konieczne zmniejszenie wpływu kodu stron trzecich, skrócenie czasu wykonywania JavaScriptu, zminimalizowanie pracy głównego wątku, utrzymanie małych rozmiarów transferów i małej liczby żądań.

Zbiorcza zmiana układu (CLS)

Staraj się uzyskać wynik 0,1 lub mniej .

Jeśli Twój wynik przekroczy ten wynik, możesz uniknąć losowych zmian układu, umieszczając atrybuty rozmiaru w treści wizualnej i wideo (lub zarezerwować miejsce za pomocą pól współczynnika proporcji CSS). Unikaj nakładania się treści i bądź ostrożny podczas animowania przejść.

Blokowanie szybkości strony

Kilka czynników może wpływać na szybkość ładowania witryny. Jeśli jednak masz ograniczony czas i chcesz najpierw skupić się na głównych winowajcach, zwróć szczególną uwagę na następujące czynniki:

• Nieużywany kod JavaScript i CSS.
• Renderuj blokujący kod JavaScript i CSS.
• Zunifikowany kod JavaScript i CSS.
• Duże rozmiary plików graficznych (więcej na ten temat poniżej).
• Za dużo łańcuchów przekierowań.

Aby poprawić ładowanie plików JavaScript i CSS, rozważ ich wstępne załadowanie.

Inną opcją byłoby włączenie wczesnych podpowiedzi, które informują przeglądarkę w odpowiedzi serwera HTTP, które zasoby powinna rozpocząć pobieranie, wykorzystując „czas namysłu serwera”, przyspieszając w ten sposób ładowanie strony.

Aby przetestować swoją witrynę:

1. Przejdź do https://pagespeed.web.dev/
2. Wpisz adres URL strony, którą chcesz zeskanować.

Polecam najpierw wybrać swoją stronę główną.

Innym przydatnym narzędziem jest WebPageTest.org, które pokazuje również podstawowe wskaźniki internetowe i inne wskaźniki, które mogą pomóc znacznie poprawić wydajność i stan witryny. Poza tym to nic nie kosztuje!

Po prostu wklej adres URL strony w polu wyszukiwania wyświetlanym na stronie, a przeprowadzi pełny test z domyślnej lokalizacji.

Możesz także zarejestrować się jako użytkownik i wybrać z listy lokalizacji, aby przetestować swoją witrynę z różnych krajów, urządzeń i przeglądarek.

WebPageTest pokaże Ci dokładnie, gdzie Twoja witryna jest pod względem wydajności i co może ją spowolnić, dzięki podsumowaniu wydajności składającemu się z czterech kluczowych sekcji: Możliwości i eksperymenty, Obserwowane metryki, Pomiary rzeczywistych użytkowników i Poszczególne uruchomienia.

Zdjęcie od autora, październik 2022

W UCRAFT używamy kombinacji narzędzi, takich jak PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest i kilku innych, aby uzyskać jasne zrozumienie tego, nad czym musimy pracować, jeśli chodzi o wydajność naszej witryny – zwłaszcza, że ​​branża SaaS jest już bardzo konkurencyjny.

Elementy wystroju

Zrzut ekranu od autora, październik 2022

Kiedy myślimy o wydajności witryny i monitorowaniu stanu, zwykle pozostawiamy to zespołowi technicznemu, aby się tym zajął.

Ale co, jeśli powiem Ci, jak projektujesz swoją witrynę, a wybrane przez Ciebie elementy mogą poprawić lub zepsuć Twoją wydajność?

Zgadza się – nadszedł czas, aby zaangażować zespół projektowy.

Optymalizacja obrazu

Obrazy są świetne, ale mogą spowolnić działanie Twojej witryny, jeśli nie mają odpowiedniego rozmiaru. Pamiętaj, aby zmienić rozmiar obrazów i unikać przesyłania gigantycznych plików, gdy nie będą one wyświetlane w całości.

Podobnie kompresuj obrazy i wypróbuj różne typy plików, takie jak WebP, JPEG 2000 i JPEG XR, zamiast wybierać cięższe pliki JPEG lub PNG.

Rozważ zaimplementowanie natywnego opóźnionego ładowania, aby upewnić się, że obrazy są ładowane, gdy użytkownik je ogląda, zamiast wczytywać je wszystkie naraz.

Prawie wszystkie przeglądarki, w tym Chrome, Safari i Firefox, obsługują atrybut load=”lazy” na <img> lub <iframe>, który nakazuje przeglądarce ładowanie ich, gdy użytkownik przewinie się bliżej nich.

Upewnij się, że nie ładujesz leniwie obrazów w części strony widocznej na ekranie, ponieważ obniży to wynik LCP Twojej strony, a Google zaleca używanie atrybutu fetchpriority=”high” na obrazach w części strony widocznej na ekranie, aby poprawić LCP.

Jeśli używasz tego atrybutu, nie musisz wstępnie ładować obrazów. Powinieneś wstępnie wczytać lub ustawić atrybut „fetchpriority” dla obrazów w części strony widocznej na ekranie.

Skorzystaj również z responsywności atrybutu „srcset”, aby załadować obrazy o odpowiednich rozmiarach w oparciu o rozmiar ekranu i uniknąć ładowania zbyt dużych obrazów na małych ekranach. Pomoże to znacznie poprawić wynik LCP.

Czcionki

Ekstrawaganckie czcionki niestandardowe są często trudne do odczytania dla użytkowników bez wizji 20/20, ale mogą również znacznie spowolnić witrynę.

Przełącz czcionki hostowane zewnętrznie na bardziej bezpieczne czcionki internetowe i wypróbuj czcionki Google – o ile są hostowane za pośrednictwem sieci CDN Google.

Ponadto rozważ włączenie czcionek zmiennych do ogólnej estetyki witryny, ponieważ ta specyfikacja czcionki może znacznie zmniejszyć rozmiary plików czcionek.

Pamiętaj, aby wstępnie załadować czcionki.

Animacje/dodatkowe funkcje

To oczywiste: nie przesadzaj z animacjami, filmami, efektami specjalnymi, suwakami lub innymi fantazyjnymi elementami.

Fajnie jest umieszczać tu i ówdzie kilka elementów interaktywnych, ale nasycanie witryny zbyt wieloma ruchomymi „rzeczami” może być frustrujące zarówno dla użytkowników, jak i serwerów.

Nie używaj animacji nieskomponowanych, ponieważ powodują one ponowne malowanie strony, co zwiększa pracę nad głównym wątkiem – a strona internetowa może wydawać się niestabilna wizualnie podczas ładowania.

Rozwiązanie PWA do optymalizacji urządzeń mobilnych

Dlaczego by nie przejść całej trasy przyjaznej dla urządzeń mobilnych i zmienić swoją witrynę mobilną w progresywną aplikację internetową (PWA)?

Ponieważ aplikacje PWA są zbudowane z użyciem pracowników usług, ładują one zawartość z pamięci podręcznej szybciej. Nie tylko to, ale PWA przypominają natywne aplikacje mobilne, co jest świetne pod względem wydajności i UX.

Dodatkowe wskaźniki wydajności technicznej

Czas pracy

Uptime pokazuje, jak dobrze działa Twoja witryna.

Jeśli Twoja witryna często ulega awarii lub jest niedostępna, zaszkodzi to Twojemu doświadczeniu użytkownika, rankingom Google, a tym samym Twojemu przychodowi.

Jeśli to możliwe, postaraj się mieć 99,999% dostępności i przetestuj swoją witrynę z różnych lokalizacji.

Narzędzia do monitorowania czasu pracy:

• StatusCake.
• Pingdom.
• Lepszy czas pracy.
• UptimeRobot.

Wydajność bazy danych

Jeśli sprawdziłeś podstawy, a Twoja witryna nadal wolno reaguje, może to być spowodowane niską wydajnością bazy danych.

Możesz to sprawdzić, monitorując czas odpowiedzi na swoje zapytania i wskazując zapytania bazy danych, które zajmują najwięcej czasu.

Gdy to zrobisz, rozpocznij optymalizację! Możesz użyć narzędzi takich jak Blackfire.io, które pomogą Ci łatwo zidentyfikować wąskie gardła i znaleźć rozwiązania oparte na dokładnych danych.

Sprzęt serwera WWW

Twoja witryna może się opóźniać, jeśli miejsce na dysku jest wypełnione plikami dziennika, obrazami, filmami i wpisami do bazy danych. Pamiętaj, aby regularnie monitorować obciążenie jednostki centralnej (CPU), zwłaszcza po zaimplementowaniu aktualizacji lub zmian w projekcie.

Narzędzia takie jak New Relic mogą pomóc ulepszyć cały stos dzięki wydajnemu monitorowaniu i debugowaniu.

Widoczność wyszukiwania

Wiele z omówionych powyżej wskaźników ma już znaczący wpływ na widoczność wyszukiwania.

Więc kiedy uruchamiasz strony swojej witryny przez Google PageSpeed ​​Insights i je optymalizujesz, robisz również ważne rzeczy dla swojego SEO.

Możesz także wybrać narzędzia do indeksowania witryn, takie jak Semrush lub Sitechecker.pro, Screaming Frog, DeepCrawl lub dowolne inne narzędzie, które najlepiej odpowiada Twoim potrzebom.

Roboty indeksujące witryny pomagają znaleźć wszelkiego rodzaju problemy, takie jak:

• Zepsute połączenia.
• Zepsute obrazy.
• Monitoruj kluczowe wskaźniki sieciowe.
• Łańcuchy przekierowań.
• Błędy w uporządkowanych danych.
• Nieindeksowane strony.
• Brakujące nagłówki i opisy meta.
• Zawartość mieszana.

Upewnij się, że wszystko jest gotowe, jeśli chodzi o następujące punkty:

• Mapa witryny XML – upewnij się, że mapa witryny jest poprawnie sformatowana i sprawdź, czy konieczne jest wprowadzenie jakichkolwiek aktualizacji i ponowne przesłanie mapy witryny za pomocą Google Search Console.
• Robots.txt — upewnij się, że korzystasz z pliku robots.txt dla swoich stron internetowych (HTML, PDF lub innych formatów innych niż media, które mogą odczytywać wyszukiwarki), aby lepiej zarządzać ruchem indeksowania, zwłaszcza jeśli podejrzewasz, że Twój serwer może być przeciążony żądania od robota Google.

Bezpieczeństwo i buforowanie stron internetowych

Zdobądź swój certyfikat SSL!

Zdrowa strona internetowa to bezpieczna strona internetowa.

Nawet jeśli Twoja witryna ładuje się w idealnym czasie i uzyskuje wynik 100/100, nie ma możliwości, aby użytkownicy (lub wyszukiwarki) zaufali Twojej witrynie, jeśli nie zaczyna się ona od https://.

Certyfikat SSL to zasadniczo kod na serwerze, który tworzy szyfrowane połączenie, gwarantujące bezpieczeństwo danych użytkownika.

Uzyskanie certyfikatu SSL nie jest szczególnie trudnym procesem, ale przy ręcznym może trwać długo.

Jeśli jednak korzystasz z usług dostawcy o ugruntowanej pozycji, takiego jak BlueHost, najczęściej Twój dostawca będzie mógł wydać bezpłatny SSL dla Twojej domeny.

Rozważ użycie CDN

Sieci dostarczania treści (CDN) to rozproszone serwery współpracujące ze sobą w celu dostarczania szybkich treści internetowych.

Innymi słowy, CDN to narzędzie, które przyspiesza działanie Twojej witryny internetowej, przechowując jej zawartość na serwerach blisko użytkowników, niezależnie od lokalizacji geograficznej. Nazywa się to również buforowaniem.

Jeśli jesteś obecny na całym świecie, CDN jest koniecznością! Zwiększy to szybkość ładowania strony, zmniejszy koszty przepustowości, rozłoży ruch (zmniejszając ryzyko awarii witryny) i zwiększy bezpieczeństwo dzięki funkcjom takim jak łagodzenie ataków DDoS.

Najlepsi gracze w branży to Cloudflare, Amazon Cloudfront i Google Cloud CDN. Istnieje jednak wiele innych opcji, więc przeprowadź badania i wybierz najlepszą sieć CDN dla swojej witryny i wymagań biznesowych.

Skonfiguruj zaporę sieciową aplikacji internetowej

Zapora aplikacji sieci Web (WAF) chroni aplikacje sieci Web, odfiltrowując podejrzany ruch HTTP. Ma na celu zapobieganie atakom aplikacji, takich jak:

• Fałszerstwo między witrynami.
• Cross-site-scripting (XSS).
• Włączenie pliku.
• Wstrzyknięcie SQL.

Poniżej znajduje się lista najpopularniejszych i najbardziej zaufanych zapór sieciowych aplikacji internetowych:

• Cloudflare WAF.
• Zapora sieciowa GoDaddy.
• Microsoft Azure.

Lub jeśli korzystasz z WordPressa, możesz rozważyć zainstalowanie wtyczek, takich jak:

• SłowoPłot.
• Sucuri.
• Kompleksowe zabezpieczenia (AIOS).

Werdykt

To okład! Jak widać, wydajność i stan witryny zależą od różnych aspektów.

Jeśli Twoja witryna jest opóźniona, pierwszym logicznym krokiem jest sprawdzenie podstawowych wskaźników internetowych i zobaczenie, co możesz poprawić. Możesz także przyjrzeć się innym wskaźnikom technicznym i poprawić je.

SEO ma również kluczowe znaczenie dla kondycji Twojej witryny, więc sprawdź widoczność wyszukiwania, linki i potencjalne blokery ładowania, aby zobaczyć, co możesz poprawić.

Nie zapomnij też o certyfikacie SSL i buforowaniu.

Projekt Twojej witryny może również wpłynąć na szybkość ładowania i wydajność, zwłaszcza jeśli Ty lub Twoi projektanci lubicie używać ciężkich elementów projektu.

Pamiętaj, aby zoptymalizować obrazy, unikać ciężkich czcionek i używać animacji z umiarem.

Więcej zasobów:

• Jak korzystać z raportu Chrome UX, aby poprawić wydajność witryny?
• 6 wskazówek dotyczących zwiększania wydajności sieci reklamowej Google
• Zaawansowane techniczne SEO: kompletny przewodnik

Polecany obraz: JulsIst/Shutterstock