Wydajność i szybkość sieci: najlepsze techniki
Opublikowany: 2021-08-30Szybkość ładowania i wydajność sieci są na ustach wszystkich w społeczności SEO i webperf, a szerzej w e-marketingu i e-commerce.
Jak przypomina nam Andy Davies, konsultant i referencja w dziedzinie wydajności sieci:
„Kontekst wpływa na doświadczenie,
doświadczenie wpływa na zachowanie,
zachowanie wpływa na przychody firmy.”
Więc niezależnie od tego, czy próbujesz zwiększyć swoje przychody, SEO, czy jedno i drugie, na pewno wiesz, że szybkie strony są niezbędne dla jakości Twojego doświadczenia użytkownika. Szybkość pomaga również wysyłać właściwe sygnały do Google, co uwzględnia szybkość od czasu aktualizacji funkcji Page Experience.
Jak wiadomo, witryna musi spełniać oczekiwania użytkowników, zanim spełni oczekiwania wyszukiwarek. Dlatego szybkość wyświetlania i interaktywność są częścią warunków wstępnych wysokiej jakości obsługi, przede wszystkim w celu promowania zaangażowania i konwersji! Zauważ na przykład, że według badania Google 77% internautów jest bardziej skłonnych do składania zamówień w witrynie lub aplikacji, która pozwala im szybko sfinalizować zakup.
Ale które techniki mają najbardziej widoczny wpływ na odwiedzających, aby zapewnić im płynne przeglądanie i rzeczywiste poczucie szybkości?
Oto lista kontrolna zorganizowana według dźwigni optymalizacji, zapewniająca lepszą szybkość wyświetlania i interaktywność.
Zoptymalizuj szybkość wyświetlania witryny
Im jaśniejsza strona, tym mniej czasu potrzebuje na wyświetlenie.
Oprócz optymalizacji zasobów możesz ustawić częstotliwość wyświetlania i wymiary różnych elementów składających się na stronę, aby zwiększyć poczucie szybkości i użyteczności. Oto kilka podstawowych technik:
- Kompresowanie obrazów do najbardziej wydajnych formatów
Nowa generacja formatów WebP (rekomendowany przez Google) i AVIF (oferujący jeszcze lepsze wyniki) pozwala zmniejszyć wagę zdjęć nawet o 50% w porównaniu do JPEG, przy zachowaniu optymalnej jakości wizualnej. Wiedząc, że waga obrazów stanowi około 50% wagi stron, jest to niezbędna dźwignia, aby Twoje strony były szybkie. - Dostosuj wyświetlanie multimediów i obrazów do różnych ekranów
Zmień rozmiar i zdefiniuj rozmiar multimediów i obrazów w zależności od tego, czy użytkownik odwiedza Twoją witrynę z telefonu komórkowego, czy z komputera. - Zmniejsz wagę zasobów strony
Zoptymalizuj swój kod: minifikacja (usunięcie zbędnych znaków) plików HTML, JS i CSS oraz kompresja zasobów (formaty Gzip i Brotli), a w niektórych przypadkach konkatenacja, to dobre praktyki mające na celu zmniejszenie wagi stron, a tym samym przyspieszenie wyświetlanie w przeglądarce. - Powolne ładowanie
Technika ta polega na wczytywaniu tylko tego, co jest widoczne na ekranie, zamiast wczytywania całej strony. Innymi słowy, przeglądarka zapewnia jedynie wysiłek ściśle niezbędny w odniesieniu do tego, co odwiedzający musi zobaczyć na swoim ekranie. - Optymalizuj czcionki
Możesz zoptymalizować format swoich czcionek (np. WOFF2, który pozwala zaoszczędzić od 30 do 50% rozmiaru pliku), a także wybrać wyświetlanie tekstu, nawet jeśli czcionka nie jest jeszcze załadowana przez przeglądarkę, aby przyspieszyć renderowanie. - Wyeliminuj blokujące zasoby i ładuj je asynchronicznie
Unikaj blokowania renderowania stron: preferuj ładowanie zasobów asynchronicznie, zwłaszcza w przypadku CSS (krytyczny CSS), JS (async i odroczenie) oraz czcionek (display:swap).
Oczywiście, jeśli nie masz wyboru, ponieważ niektóre zasoby są niezbędne na początku ładowania strony, te zasoby muszą być jak najlżejsze. - Przyjmij odpowiednią strategię buforowania
Aby strony wyświetlały się tak szybko, jak to możliwe dla Twoich użytkowników, przechowuj w pamięci podręcznej elementy statyczne.
Aby to zrobić, musisz wcześniej zidentyfikować zawartość dynamiczną i statyczną oraz zdefiniować zasady buforowania zawartości statycznej: na jak długo i na której pamięci podręcznej (przeglądarka, źródło lub CDN).
[Studium przypadku] Zarządzanie indeksowaniem botów Google
Przeczytaj studium przypadkuPopraw interaktywność: błyskawicznie responsywne strony
Oprócz szybkości, z jaką elementy są wyświetlane w przeglądarce, możliwość interakcji jest niezbędna, aby zapewnić użytkownikom całkowitą satysfakcję.
W przeciwnym razie narażasz ich na frustrację, która przekłada się na zachowania, takie jak wściekłe kliknięcia, gorączkowe poruszanie się myszą po stronie lub losowe przewijanie w celu sprawdzenia, czy strona działa.
W najgorszym przypadku użytkownicy wracają na poprzednią stronę lub opuszczają witrynę na dobre, aby przeprowadzić nowe wyszukiwanie w Google lub przejść do konkurencji.
Pamiętaj, że w przypadku negatywnego doświadczenia 43% internautów przejdzie na stronę konkurencji po kolejny zakup. Musisz zatem zapewnić sobie środki, aby przyciągnąć, ale także zatrzymać odwiedzających.
Najczęściej to skrypty firm trzecich i Javascript mogą być odpowiedzialne za złą interaktywność. Rzeczywiście, dopóki przeglądarka jest zajęta pobieraniem, analizowaniem i wykonywaniem kodu JavaScript, nie może reagować na interakcje użytkownika.
Tutaj znowu istnieją techniki optymalizacji kodu i stron trzecich, a także pozwalają odwiedzającym cieszyć się optymalnymi wrażeniami:
- Zmniejsz wpływ Osób Trzecich, opóźniając ich załadunek
Możesz rozpocząć ładowanie i wykonywanie skryptów po wyświetleniu na stronie priorytetowych elementów treści. Ale uwaga: pamiętaj, że odroczenie ładowania JavaScriptu nie czyni go wolnym pod względem wydajności!
Może to być kwestia przesunięcia w czasie ładowania niektórych funkcjonalności (czatu, widżetów, śledzenia…) po wyświetleniu głównych elementów, aby uspokoić użytkownika, ale nie anuluje to czasu potrzebnego przeglądarce na przetworzenie kodu, tylko tylko przesuwa go w czasie. - Skróć czas wykonywania JavaScript
Podziel zadania, które zabierają Twojej przeglądarce czas (długie zadania), a także upewnij się, że preferujesz krótkie przetwarzanie w odpowiedzi na interakcje użytkownika (na przykład unikaj aktywnego nasłuchiwania pewnych zdarzeń, takich jak przewijanie; i korzystaj z sytuacji, gdy przeglądarka czas wolny na uruchomienie określonego przetwarzania JavaScript). - Ogranicz pracę głównego wątku
Przeglądarka będzie mogła szybciej reagować na interakcje, zmniejszając liczbę żądań i rozmiar wymian.
Oszczędź też czas: zautomatyzuj techniki optymalizacji swojej witryny
Właśnie omówiliśmy dwa bardzo ważne aspekty doświadczenia użytkownika: szybkość wyświetlania i interaktywność. Dobrą wiadomością jest to, że wszystkie optymalizacje, które właśnie wymieniliśmy na tej liście kontrolnej, można zautomatyzować!
Możliwe też, że połączyłeś się z dwoma podstawowymi wskaźnikami internetowymi Google, które umożliwiają ocenę tych aspektów, odpowiednio: największej zawartości treści i opóźnienia pierwszego wejścia.
Oczywiście powinieneś również pomyśleć o poprawie stabilności wizualnej swoich stron, aby uzyskać optymalne wrażenia użytkownika, pracując nad swoim wynikiem skumulowanego przesunięcia układu.
Powinieneś wiedzieć, że te 3 wskaźniki (LCP, CLS i całkowity czas blokowania lub TBT, odpowiednik FID) odpowiadają za 70% wyniku przyznanego przez PageSpeed Insights.
Logicznie rzecz biorąc, wszystko, co robisz, aby przyspieszyć działanie stron i zoptymalizować te dane, będzie miało pozytywny wpływ na użytkowników, a także na wyniki.
Krótko mówiąc, możesz zastosować takie samo podejście do swojego UX, jak w przypadku SEO: wysokiej jakości treści i doświadczenie gwarantują satysfakcję użytkowników i przyczyniają się do lepszego indeksowania przez Google.
Podobnie jak w przypadku SEO, optymalizacje webperf muszą być utrzymywane przez dłuższy czas.
Wymaga to czasu i wiedzy, ponieważ techniki i metryki szybko ewoluują. Co więcej, nawet w dużych zespołach, zasoby techniczne nie zawsze mają czas lub wiedzę, aby skutecznie utrzymywać szybkość witryny; a rozmieszczenie zasobów i energii na operację komandosów, która upada jak suflet, jest bardzo frustrujące, a nawet zniechęcające.
Dlatego zamiast tracić czas na konserwację, obawiać się skutków ubocznych przy każdej ewolucji witryny i mnożyć wtyczki z ryzykiem przeciążenia, lepiej zautomatyzować stosowanie wszystkich technik optymalizacji frontendu za pomocą jednego narzędzia!
Powinieneś wiedzieć, że w większości przypadków, w przypadku witryn e-commerce o dużym natężeniu ruchu, ROI z rozwiązania do optymalizacji webperf jest łatwy do zmierzenia.
Rzeczywiście, Google oszacował, że -0,1 sekundy czasu ładowania może prowadzić do +8% konwersji, co rozwiązanie do optymalizacji frontendu może osiągnąć bardzo łatwo.
W Fasterize stwierdziliśmy, że często nawet wzrost współczynników konwersji o mniej niż 1 punkt wystarcza, aby zapewnić ROI naszego rozwiązania SaaS; nie wspominając o czasie zaoszczędzonym przez ekipy techniczne.
Biznes to ścięgno wojny, możesz sam wykonać obliczenia i jest to łatwe! Pozwala zrozumieć zainteresowanie automatyzacją optymalizacji wydajności oraz przekonać i zaangażować zespoły wewnętrzne.
Oszczędzaj czas na wszystkich frontach!