Jak zoptymalizować wydajność sieci i wyniki finansowe?

Cierpliwość nie jest cnotą dla odwiedzających witrynę i kupujących online. Liczy się każdy ułamek sekundy, jeśli chodzi o zatrzymanie – lub utratę – użytkownika na Twojej stronie.

Według Kissmetrics czas ładowania jest głównym czynnikiem przyczyniającym się do porzucania stron. Ponieważ przeciętny użytkownik strony internetowej nie ma cierpliwości do strony, której wczytywanie trwa zbyt długo, porzucenie wzrasta procentowo z każdą sekundą czasu ładowania. Jak zauważył blog, prawie 40% użytkowników porzuca stronę po 10 sekundach. Internauci mobilni są prawdopodobnie najbardziej sfrustrowani tym problemem – 73% zauważyło, że zetknęli się z witryną, która ładuje się zbyt wolno.

Problem z ładowaniem strony bezpośrednio wpływa na zachowania zakupowe odwiedzających witrynę. The Kissmetrics zauważył również, że 79% kupujących, którzy byli niezadowoleni z wydajności strony internetowej, jest mniej skłonnych do ponownego zakupu w tej samej witrynie. Prawie połowa konsumentów oczekuje, że strony załadują się w ciągu 2 sekund lub mniej, a 1-sekundowe opóźnienie zmniejszy zadowolenie klientów o 16%.

Konsekwencje tych opóźnień przekładają się na realne pieniądze. Gigant e-commerce Amazon ujawnił, że spowolnienie ładowania strony o zaledwie 1 sekundę kosztowałoby go 1,6 miliarda dolarów przychodów ze sprzedaży. Podobnie Google zauważył, że spowolnienie wyników wyszukiwania o zaledwie cztery dziesiąte sekundy spowodowałoby utratę 8 milionów wyszukiwań dziennie, co przekłada się na miliony mniej w reklamach internetowych.

Dotarcie do sedna problemu

Największymi czynnikami wpływającymi na czas ładowania są obrazy, filmy i grafika. Dzisiejsze witryny internetowe zawierają więcej elementów wizualnych, a mniej tekstu, aby przyciągnąć odwiedzających. Według archiwum HTTP, prawie 64% średniej wagi witryny to obrazy, a filmy wideo stanowią kolejne 8%.

Ponieważ tego typu media stanowią prawie trzy czwarte rozmiaru witryny, ważne jest, aby efektywniej zarządzać obrazami i filmami w witrynie, aby poprawić wydajność i współczynniki konwersji. Przyjrzyjmy się kilku krokom, które możesz podjąć, aby zmniejszyć wpływ obrazów i filmów na wydajność witryny.

Używaj bardziej wydajnych, nowoczesnych formatów obrazu

Google dodał obsługę formatu obrazu WebP do przeglądarek Chrome, a Microsoft zrobił to samo dla JPEG-XR w większości swoich przeglądarek Internet Explorer i Edge. Jednak wielu programistów wciąż nie przyjęło tych zmian, trzymając się tych samych formatów JPG i PNG, zamiast korzystać z tego, jak nowoczesne formaty mogą optymalizować ich witryny.

Najlepiej byłoby przekonwertować obrazy na WebP i JPEG-XR, gdy jest to właściwe, i dostosować jakość kompresji, aby zrównoważyć formaty. Ważne jest również, aby wykryć konkretną przeglądarkę, która uzyskuje dostęp do każdego obrazu i dostarczyć wersję obrazu zoptymalizowaną do odpowiedniej przeglądarki. Dzięki temu zapewnisz użytkownikom najlepsze możliwe obrazy pod względem jakości wizualnej i optymalizacji rozmiaru plików bez spowalniania witryny.

Wyeliminuj marnotrawstwo zmiany rozmiaru po stronie przeglądarki

Deweloperzy często używają zmiany rozmiaru obrazu po stronie przeglądarki jako skrótu, zamiast zmiany rozmiaru obrazów po stronie serwera. Chociaż efekt końcowy wygląda dokładnie tak samo w nowoczesnych przeglądarkach, wpływ na przepustowość jest zupełnie inny. Dzięki zmianie rozmiaru po stronie przeglądarki odwiedzający witrynę tracą cenny czas na pobieranie niepotrzebnie dużego obrazu, a Ty tracisz przepustowość, dostarczając go do nich.

W przypadku starszych przeglądarek problem jest jeszcze bardziej widoczny, ponieważ ich algorytmy zmiany rozmiaru są zwykle poniżej normy. Musisz upewnić się, że Twoje obrazy idealnie pasują do wymaganych wymiarów witryny. Warto tworzyć różne miniatury tego samego obrazu, zamiast dostarczać duży obraz i polegać na przeglądarce, aby zmienić jego rozmiar. Dostępne są pewne narzędzia, które mogą w tym pomóc, takie jak narzędzie do zmiany rozmiaru obrazu typu open source, takie jak ImageMagick lub rozwiązanie oparte na chmurze, takie jak Cloudinary.

Użyj prawidłowych typów plików graficznych

JPEG, PNG i GIF to obecnie najpopularniejsze formaty plików używane w witrynach internetowych, ale każdy z nich ma bardzo różne role. Użyj złego formatu, a marnujesz czas odwiedzających i własne pieniądze. Częstym błędem jest używanie PNG do dostarczania zdjęć. Istnieje powszechne błędne przekonanie, że pliki PNG, jako bezstratne formaty, zapewnią najwyższą możliwą reprodukcję zdjęć.

Chociaż jest to generalnie prawdą, jest to również dość niepotrzebna optymalizacja. Ważne jest, aby pamiętać, jaki format obrazu powinien zostać użyty do pokazywanej treści. PNG powinien być używany do obrazów generowanych komputerowo (wykresów, logo itp.) lub gdy potrzebujesz przezroczystości obrazu (nakładki obrazów); JPEG, gdy pokazujesz przechwycone zdjęcie; i GIF, gdy potrzebna jest animacja (animacja ładowania Ajax itp.).

Nie używaj jednego rozmiaru obrazu we wszystkich mediach dostarczania

Twoja witryna jest przeglądana na wielu różnych urządzeniach, zwłaszcza że smartfony, tablety i smartwatche stały się preferowane przez konsumentów. Często programiści oferują te same obrazy we wszystkich rozdzielczościach urządzeń, korzystając ze zmiany rozmiaru obrazów po stronie klienta. Obrazy mogą wyglądać świetnie, ale odwiedzający marnują czas na ładowanie niepotrzebnie dużych obrazów na swoje urządzenia i płacisz za nadmiarowe wykorzystanie przepustowości.

Jest to szczególnie niesprawiedliwe dla użytkowników 3G i użytkowników roamingu, którzy płacą sporą dopłatę za pobranie niepotrzebnych, dodatkowych obrazów o wysokiej rozdzielczości. Aby uniknąć tych problemów, należy zidentyfikować urządzenia mobilne odwiedzających i rozdzielczość za pomocą ich agenta użytkownika. Mając odpowiednią rozdzielczość, pobierz najlepiej pasujący obraz ze swoich serwerów. Wymaga to udostępnienia zestawu miniatur dla każdego oryginalnego obrazu. Dostępne są doskonałe pakiety JavaScript, które zautomatyzują ten proces.

Wykorzystaj responsywny projekt

Każde urządzenie, z którego odwiedzający korzysta, aby uzyskać dostęp do Twojej witryny, ma inną rozdzielczość. Znaczniki witryny muszą się dostosowywać, aby wyglądały idealnie na różnych urządzeniach, w różnych rozdzielczościach, gęstościach pikseli i orientacjach urządzeń mobilnych. Zarządzanie, manipulowanie i dostarczanie obrazów to jedno z głównych wyzwań projektowania responsywnego, przed którymi stoją twórcy stron internetowych.

Ze względu na te wyzwania, wiele stron internetowych jest tworzonych z obrazami o najwyższej rozdzielczości, które mogą być potrzebne, i po prostu skalowane w dół po stronie klienta, w zależności od punktu przerwania. Ten proces jest nieefektywny i szkodzi wydajności. Istnieją jednak opcje, takie jak narzędzie typu open source Responsive Breakpoints, które może pomóc w wygenerowaniu wszystkich potrzebnych rozmiarów obrazów, a także odpowiedniego kodu HTML.

Wykorzystaj sieci dostarczania treści (CDN)

CDNS zazwyczaj ma serwery strategicznie rozmieszczone na całym świecie, aby skrócić czas podróży w obie strony. Sieci CDN umożliwiają szybsze wyświetlanie obrazów użytkownikom i zmniejszają prawdopodobieństwo awarii, poprawiają wydajność SEO i poprawiają wrażenia użytkownika. Wybierając sieć CDN, musisz wziąć pod uwagę jej poziom globalnego zasięgu, szybkość buforowania, zdolność do wykonywania operacji logicznych na brzegu, średnie czasy odpowiedzi i inne wskaźniki, takie jak średnie czasy unieważniania.

Wpływ zmiany

Stosując te najlepsze praktyki, możesz naprawdę zmienić wrażenia użytkownika, zachęcając odwiedzających do dłuższego pozostania, większego przeglądania, angażowania się i robienia zakupów. Rozważ wyniki tych firm:

Lista mieszkań, źródło internetowe, które pomaga osobom w wyszukiwaniu mieszkań na wynajem, okazało się, że ma do czynienia z różnymi formatami obrazów i rozdzielczościami, ponieważ pobiera kanały danych z obrazami z różnych społeczności mieszkaniowych przedstawionych na jego stronie. Dzięki przekształceniu wszystkich tych obrazów w optymalne obrazy do prezentacji na urządzeniach mobilnych o różnych rozmiarach, a także komputerach stacjonarnych, a także dzięki wykorzystaniu technik projektowania responsywnego, firma odnotowała wzrost współczynników konwersji o prawie 20%.

KartRocket, platforma e-commerce oparta na SaaS, oferująca przejrzysty i kompletny ekosystem e-commerce, który pomaga małym i średnim firmom w szybkim i łatwym tworzeniu sklepów internetowych, niezbędnych do znalezienia sposobu na zapewnienie jakości obrazów bez wpływu na czas ładowania lub wydajność witryny. klientów. Wykorzystano narzędzia do dynamicznej kontroli obrazów, tak aby były zoptymalizowane pod kątem małych miniatur, dużych obrazów banerów i głównych obrazów produktów. Dzięki takiemu podejściu firma KartRocket osiągnęła 100-krotny wzrost czasu odpowiedzi podczas ładowania obrazu.

Dolna linia

Gdy czas to pieniądz, właściciele witryn internetowych nie mogą sobie pozwolić na niepodjęcie wszystkich niezbędnych kroków w celu poprawy doświadczeń użytkowników. Nawet ułamek sekundy opóźnienia w załadowaniu strony może przełożyć się na utratę przychodów i zaufania ze strony konsumenta.

Biorąc pod uwagę, że obrazy i filmy mają największe problemy z przepustowością na większości stron internetowych, musisz poważnie przyjrzeć się projektowi strony internetowej i formatom obrazu, a następnie podjąć niezbędne kroki, aby zapewnić, że media są zoptymalizowane pod kątem Twojej witryny – nie wspominając o przychodach i postrzeganie klientów – nie ucierpieć w rezultacie.