Jak przyspieszyć swoją stronę internetową?

Powolne strony frustrują konsumentów. Frustracja kosztuje.

Aby zachwycić konsumentów, pokonać konkurentów i zadowolić Google, Twoja witryna będzie musiała załadować się w niecałą sekundę. I musisz ten wynik osiągnąć szybko, bo konkurencja nie śpi i już optymalizuje swoje strony

Niemożliwe? Optymalizacja wydajności stron internetowych to proces posiadający naukowe podstawy, a my wiemy jak to robić.

Użytkownicy oczekują szybkości – szybka strona internetowa, szybka aplikacja, szybki dostęp do informacji. Związek między wydajnością sieci a zachowaniem użytkowników jest poparty wieloma badaniami.

• Badania przeprowadzone przez Google wykazały, że opóźnienia przekraczające 3 sekundy mogą prowadzić do ponad 50% rezygnacji.
• W 2014 r. Badanie wykazało, że 47% osób oczekuje, że witryna załaduje się w mniej niż 2 sekundy.
• Radware odkrył, że 20% użytkowników rezygnuje z koszyka, jeśli proces transakcji jest zbyt powolny.

Czas to pieniądz, a każda milisekunda może kosztować użytkowników lub konwersje. Ludzie są niecierpliwi, a opóźnienia zmniejszają prawdopodobieństwo, że wydadzą na stronie swoje pieniądze, skorzystają z usługi a co najważniejsze, wrócą po więcej.

Wspomniane statystyki pochodzą już z 2014 roku. Mniej więcej w tym czasie okazało się, że szybkość witryny jest sporym problemem i bynajmniej przez ostatnie lata użytkownicy internetu nie stali się bardziej cierpliwi. Wprost przeciwnie.

Biorąc pod uwagę, że rynek wie o tych statystykach od 5 lat strony powinny się ładować w czasie poniżej sekundy. Prawda? Nic bardziej mylnego. Załadowanie większości stron internetowych według badania przeprowadzonego w Google PageSpeed For Mobile pokazuje, że przy technologii 3G większość stron na świecie nadal ładuje się w czasie powyżej 8 sekund.

Szybkość witryny a ranking Google

Internet zmienia się pod dyktando przeglądarki Google. Jeśli strony nie są dostosowane do jej oczekiwań i zaleceń ich właściciele mają problem. Na początku 2018 r. Google ogłosił, jak ważna jest szybkość i że oficjalnie będzie to czynnik rankingowy dla wyszukiwań mobilnych.

Co radzi Google?

„Zachęcamy programistów do szerokiego zastanowienia się, w jaki sposób wydajność wpływa na wrażenia użytkownika na jego stronie i do rozważenia różnych parametrów użytkownika”.

To, co Google zasadniczo mówi oznacza, że prędkość witryny stanowi podstawę „doświadczenia użytkownika”.

Podczas przeglądania internetu, szybkość załadowania strony lub dodania produktu do koszyka na zakupy, jest ogromnym elementem całego UX.

Dla Google szybkość = wydajność. A ponieważ witryny stają się szybsze, te które nie przyspieszą, będą się wydawać jeszcze wolniejsze

Oczekiwania konsumentów rosną, a dostęp do szybkich stron konkurencji będzie sprawiał, że szybkość dla konsumenta stanie się podstawowym oczekiwaniem, którego nie ominiemy.

Co musimy zrobić?

Podejście do optymalizacji prędkości

Sekret poprawy prędkości nie polega na wdrożeniu wielkiego projektu programistycznego.

Skuteczna poprawa prędkości to wdrożenie tysiąca drobnych poprawek i dbanie o stronę każdego dnia. Codziennie. Każdy kilobit urwany z rozmiaru plików to mikrosekundy zbliżające Cię do sukcesu.

W sercu optymalizacji prędkości należy zrozumieć dwie podstawowe prawdy:

• Nie ma czegoś takiego jak prędkość .
• Jedyne, co się liczy, to wrażanie prędkości.

Nie ma takiej rzeczy jak szybkość

Kiedy zaczniesz zagłębiać się w temat odkryjesz, że podstawowym problemem jest odpowiedź na pytanie: „Jak mierzysz prędkość ?”

Jak mierzalnie określić szybkości witryny?

Prawdopodobnie możesz zacząć od powiedzenia „Czas w którym strona kończy ładowanie”.

Ale co to znaczy?

Co zrobić, jeśli serwer szybko zareaguje, ale wyświetlenie zawartości zajmie całe wieki?

Co jeśli strona ma komponenty, które ładują się tylko podczas interakcji lub przewijają? Czy są „skończone”?

Potrzebujemy lepszych definicji, aby zrozumieć, jak dobrze sobie radzimy.

Większość wskaźników z narzędzi do sprawdzania i optymalizacji prędkości ma wady i ma na celu zapewnienie fałszywego poczucia komfortu.

Do niedawna narzędzie Google PageSpeed ​​Insights było równie nonsensowne. Wynik w rzeczywistości nie mierzył prędkości, a wykresy były złe, ponieważ mierzenie względem wolnych konkurentów sprawia, że ​​popadasz w samozadowolenie

Kiedy Google zaktualizowało narzędzie, dodało metrykę Pierwszej zawartości, która:

„… Zgłasza czas, kiedy przeglądarka po raz pierwszy wyrenderowała dowolny tekst, obraz (w tym obrazy tła), nie-białe płótno lub SVG. Obejmuje to tekst z oczekującymi stronami internetowymi. Po raz pierwszy użytkownicy mogą zacząć korzystać z zawartości strony. ”

Innymi słowy, jak szybko możemy pokazać coś interesującego? 

Ile milisekund upływa do momentu, w którym zobaczymy element z którym możemy wejść w interakcję, coś więcej ponad pustą białą stronę z ikoną ładowania?

Jak możemy szybko przekonać odbiorcę, że coś się dzieje na stronie? Dla wielu osób wystarczającym elementem będzie załadowanie się logo i głównego menu strony. Elementów, które pozwalają im na interakcje w oczekiwaniu na właściwy content.

Jeśli możesz zoptymalizować swoją witrynę w taki sposób, aby załadować ważne bity najpierw z minimalnym opóźnieniem (a następnie martwić się o załadowanie wszystkich innych rzeczy później), wtedy jesteś o krok bliżej do sukcesu. Takie pozorne oszukiwanie odbiorcy poprzez selektywną prezentację danych na stronie powoduje u niego mniejszą frustrację niż kręcący się loader.

Loadery są efektowne, ale powodują fałszywe wrażenie powolności strony, a co za tym idzie należy się ich wystrzegać.

Optymalizacja pod kątem pierwszej zawartości sprawi, że Twoja strona będzie sprawiać wrażenie szybszej. Twoje wyniki w narzędziach takich jak GTMetrix mogą nie zmienić się drastycznie, ale celem nie jest optymalizacja wyników,

Jedyna rzecz, która ma znaczenie, to postrzeganie prędkości. Subiektywne odczucie Twojego odbiorcy.

Z dokumentacji Google wiemy tyle.

Obciążenie nie jest pojedynczym momentem w czasie – jest to doświadczenie, którego żadna metryka nie może w pełni uchwycić. W trakcie ładowania występuje wiele momentów, które mogą mieć wpływ na to, czy użytkownik postrzega go jako „szybki” czy „wolny”.

Niezależnie jednak od tego, jaka jest Twoja strona internetowa, w jakim sektorze się znajdujesz lub jak działa, istnieje jeden złoty moment, który możesz zmierzyć. Jest to czas do osiągnięcia interaktywności.

Jak szybko możemy sprawić, że poczujemy się gotowi ?

Istotne jest zrozumienie tutaj, że jest mało prawdopodobne, że Google mierzy konkretną szybkość strony. Bardziej interesuje ich postrzeganie prędkości. Jeśli stworzysz błyskawicznie działającą stronę internetową, która powoli się ładuje, straciłeś dużo czasu i pieniędzy.

Nacisk należy położyć na dwa aspekty:

• Jak szybko coś się wyświetli?
• Jak sprawić, byśmy czuli się gotowi do interakcji?

Wyzwanie polega na tym, że postrzegana prędkość jest trudna do oszacowania. Ale dobrą wiadomością jest to, że optymalizacja wydajności jest teraz nauką. Istnieją twarde zasady, procesy, przewodniki i techniki, które możesz zastosować, aby to osiągnąć.

Każda witryna na świecie może załadować się w mniej niż jedną sekundę. Musisz tylko przestrzegać zasad.

Na szczęście Google oferuje szeroki zakres dokumentacji na ten temat.

Gdzie zaczynamy optymalizację prędkości?

Musisz zacząć od znalezienia powolnych rzeczy. Chociaż narzędzia nie są precyzyjne w podawaniu czasu, są naprawdę dobre w wykrywaniu problemów.

Najważniejszą rzeczą, jaką możesz dowiedzieć się o optymalizacji prędkości, jest spojrzenie na sposób ładowania stron i sprawdzanie na co czeka się na Twojej stronie podczas jej ładowania

Jeśli możesz usunąć te wąskie gardła, zmienić kolejność wczytywania danych i załadować je od razu, a nie pojedynczo, to wszystko inne dzieje się wcześniej.

Jedną z rzeczy do zapamiętania jest to, że Google monitoruje, mierzy i analizuje witryny w technologii mobilnej. Wielu użytkowników korzysta z urządzeń mobilnych i właśnie tam występują szczególnie liczne problemy.

Najważniejsze wskazówki dotyczące szybkości strony

Załaduj mniej rzeczy

Możesz rozważyć zmniejszenie elementów znajdujących się na stronie

Kilka podstawowych elementów, na które powinieneś rzucić okiem to:

Podstawy

• Wtyczki, rozszerzenia i integracje
• Liczba przesłanych bitów
• Złożoność DOM
• Czcionki
• Kolory, szczegóły, ikony, linie, obramowania, cienie
• JavaScript

Zaawansowane

• Powolne ładowane, odraczanie lub asynchronizacja zasobów
• Redukcja zasobów międzydomenowych
• DNS i wstępne pobieranie / ładowanie zasobów

Uporządkuj swój CMS

• Użyj wtyczek, rozszerzeń i integracji, aby zmierzyć wydajność systemu
• Zaprzyjaźnij się z CDN (Cloudflare)
• Uzyskaj dobry hosting
• Użyj statycznej pamięci podręcznej stron

Co używać:  Query Monitor , New Relic

Zamiast wymagać od każdego użytkownika, aby przy każdej wizycie od nowa wczytywał wszystkie zasoby strony, czcionki, szablony, grafiki i skrypty zastosuj pamięć podręczną zapisując w niej elementy i procesy rzadziej aktualizowane. Zaoszczędzisz w ten sposób zasoby serwera i usprawnisz korzystanie z witryny przez użytkownika

Co używać:  WP Rocket lub Total Cache dla WordPress, Redis , Varnish Cache

Optymalizuj swoje zasoby

Rozważ zoptymalizowanie swoich obrazów za pomocą narzędzi takich jak TinyPNG lub Squoosh . 

Możesz także zrobić kilka zaawansowanych rzeczy, takich jak:

• Ładuj obraz z zasobów zewnętrznych
• Użyj obrazu CDN, takiego jak Cloudinary lub Imgix.
• Modularyzacja CSS i JavaScript.

Użyj AMP (?)

Głównym celem projektu AMP jest próba naprawienia tego, jak powolny jest Internet, zwłaszcza sieć mobilna.

Zamiast generować wyświetlaną zawartość za pomocą zwykłego HTML, JavaScript i CSS, możesz użyć struktury AMP. Twoja strona będzie szybka, jednak będziesz ograniczony przez ich wytyczne i ograniczenia.

Dostosowanie się do wymagań technicznych AMP jest bardziej skomplikowane, zwłaszcza przy zastosowaniu customowych bibliotek JavaScript do generowania reklam, analityki i tym podobnych

Droga do prędkości nie jest prosta, ale przyspieszenie strony ma zdecydowany wpływ na jej postrzeganie przez Google, a często zastosowanie zaledwie kilku poprawek może mieć gigantyczny wpływ na zmianę User Experience osób odwiedzających stronę.