Czy zadbałeś o to, aby Twoja strona internetowa działała bez zarzutu na urządzeniach mobilnych?
Czy wiesz, że algorytm Google preferuje strony dostosowane do urządzeń mobilnych, stosując zasadę „Mobile-First”?
Coraz większa liczba internautów rezygnuje z komputerów stacjonarnych, wybierając zamiast tego smartfony i tablety do przeglądania stron i robienia zakupów online.
Responsywne projektowanie stron umożliwiło tworzenie witryn, które prezentują się dobrze na różnorodnych urządzeniach. Jednak nawet taki projekt to tylko część szerszej strategii optymalizacji doświadczeń użytkownika na urządzeniach mobilnych.
Aby osiągnąć prawdziwą optymalizację, warto rozważyć także inne podejścia.
Z tego powodu tak istotne jest traktowanie tworzenia witryny z myślą o urządzeniach mobilnych jako priorytetu. Mówiąc prościej, „mobile-first” oznacza, że projekt i treść strony są dostosowane przede wszystkim pod kątem użytkowników mobilnych.
W tym artykule nie będziemy jednak tworzyć zupełnie nowej witryny od podstaw. Zamiast tego skupimy się na podstawowych zasadach projektowania dla urządzeń mobilnych. Poświęćmy chwilę na omówienie technicznych szczegółów, które pomogą zoptymalizować wrażenia użytkowników mobilnych.
#1: Projektowanie z naciskiem na mobilność
Internet w dużej mierze bazuje na założeniu obsługi użytkowników komputerów. Wspaniała strona w pełnym wymiarze ekranu to coś pięknego. Jednak smartfony i inne urządzenia mobilne stały się faktem, więc przyszedł czas, aby przystosować się do koncepcji projektowania z myślą o mobilności.
Jakie elementy projektu, poza responsywnością, powinniśmy uwzględnić, tworząc strony internetowe zorientowane na urządzenia przenośne?
- Ustalanie priorytetów. Ekrany mobilne mają ograniczoną przestrzeń. Prezentują treść w układzie pionowym, w przeciwieństwie do znacznie szerszych, poziomych ekranów komputerów. Musimy więc projektować, kierując się hierarchią ważności elementów. Które elementy są najistotniejsze dla użytkowników? Jeśli na stronie znajdują się przyciski Call To Action, jak łatwo je zauważyć na urządzeniu mobilnym?
- Treść na pierwszym miejscu. Kolor to sprawa drugorzędna. W projektowaniu dla urządzeń mobilnych możemy wykorzystać różne ciekawe rozwiązania, ale na pewno nie w takim zakresie jak na komputerach stacjonarnych. Dlatego najpierw skupmy się na treści. Upewnijmy się, że tekst i inne elementy są czytelne i łatwo dostępne. Ekrany mobilne są znacznie mniej wyrozumiałe dla rozpraszających elementów wizualnych.
- Prosta nawigacja. Na telefonie nie można tak po prostu kliknąć w dowolne miejsce i wrócić na stronę główną. Chyba że wcześniej pomyślimy o takim rodzaju nawigacji. I właśnie tak powinniśmy zrobić. Warto eksperymentować z widgetami do przewijania na górę, a także z płynnie działającymi, przylepnymi nagłówkami.
Najlepszym sposobem, aby przekonać się, czy wszystko dobrze działa, jest wzięcie do ręki telefonu (sam tak robię!) i odwiedzenie swojej witryny. Warto dokładnie przyjrzeć się temu, jak strona działa i jak elementy układają się w całość.
Jeśli akurat siedzimy w kawiarni lub czekamy na samolot na lotnisku, możemy poprosić kogoś o szybkie sprawdzenie strony na ich urządzeniu. Następnie możemy wygodnie posłuchać ich opinii. Zazwyczaj jesteśmy zaskoczeni tym, jak inni ludzie postrzegają wygodę korzystania z naszej strony.
#2: Optymalizacja zasobów – obrazów, ikon itp.
Jak często wybieramy elementy wizualne na podstawie własnych upodobań, a nie z myślą o UX? To się zdarza. Jeśli mamy zamiar dać upust naszej kreatywności, powinniśmy zrozumieć, na czym polega optymalizacja multimediów.
Elementy wizualne, takie jak zdjęcia, ilustracje, ikony i filmy, generują największe obciążenie przepustowości łączy internetowych.
Średnia wielkość strony internetowej w 2018 roku, w zależności od branży i kraju.
Chociaż nie ma jednej, idealnej wagi strony, intuicja podpowiada, że mniejsza strona ładuje się szybciej.
Jak więc możemy zredukować liczbę kilobajtów, a nawet megabajtów zawartych w elementach wizualnych?
- Zmieńmy rozmiar obrazów. Wydaje się to oczywiste, prawda? Jednak zdarzało mi się przeglądać stronę na urządzeniu mobilnym, która wczytywała w tle zdjęcia o wymiarach 1980 x 1200 pikseli. Zamiast tego powinniśmy ładować pełnowymiarowe zdjęcia, tam gdzie to konieczne, jako alternatywne linki. Zmiana rozmiaru obrazu może zmniejszyć jego wagę nawet o 80%, w zależności od potrzebnych wymiarów. W przypadku urządzeń mobilnych nie ma powodu, by przekraczać szerokość 600-700 pikseli.
- Zmniejszmy rozmiar pliku za pomocą kompresji. Kompresja, czyli optymalizacja obrazu, polega na wykorzystaniu specjalnego oprogramowania, które redukuje liczbę kolorów na obrazie. Możemy to zrobić w taki sposób, aby zdjęcia nie straciły swojej naturalnej jakości, a jednocześnie zajmowały znacznie mniej miejsca. Jeżeli szukasz narzędzi do kompresji obrazów, to warto zapoznać się z naszym zestawieniem.
- Wykorzystajmy alternatywne formaty plików. Wszyscy znamy formaty PNG i JPEG. To standardy, jeśli chodzi o obrazki w internecie. Jednak to się zmienia. Najnowsze rozwiązania w zakresie dostarczania obrazów to WebP i formaty plików SVG. Na przykład, pliki SVG mogą automatycznie skalować się do wielkości ekranu, redukując liczbę zasobów potrzebnych do załadowania pewnych elementów wizualnych.
Optymalizacja wrażeń użytkownika z myślą o urządzeniach mobilnych jest oznaką staranności. Projektowanie pod wpływem impulsu może skutkować negatywnymi konsekwencjami. Natomiast świadome podejście pomaga tworzyć witryny od podstaw z myślą o użytkownikach mobilnych.
Warto wiedzieć: Zgodnie z koncepcją intuicyjnego projektowania dla urządzeń mobilnych, nie musimy stosować tych samych elementów wizualnych na urządzeniach mobilnych i stacjonarnych. Usunięcie niektórych obrazów w tle i zastąpienie ich kolorowym tłem na urządzeniach mobilnych nie wpłynie negatywnie na wrażenia użytkownika. Zawsze warto poszukiwać sposobów na zaoszczędzenie nawet najmniejszej ilości przepustowości.
#3: Wstępne i leniwe ładowanie
Czy konieczne jest wczytywanie wszystkich zasobów multimedialnych na stronach, których przeglądanie zajmuje dużo czasu? Czy może pomóc wyrenderowanie stron zewnętrznych przed ich wyświetleniem użytkownikowi?
Na początek przyjrzyjmy się modułom wstępnego ładowania, nazywanym też wskazówkami przeglądarki.
Moduły wstępnego ładowania to sposoby, dzięki którym strona informuje przeglądarkę o potencjalnych ścieżkach nawigacji. Na przykład, użytkownik może przejść ze strony A na stronę B.
Dzięki wstępnemu ładowaniu strona B może być wyrenderowana, jeszcze zanim użytkownik kliknie link na stronie A.
Trzeba pamiętać, że wstępne ładowanie nie zawsze działa, a ostateczną decyzję podejmuje przeglądarka. Pod uwagę brane są indywidualnie czynniki takie jak typ urządzenia i przepustowość sieci.
Jakie są najczęściej stosowane moduły wstępnego ładowania?
- Wstępne pobieranie. Ten rodzaj wskazuje, że dany adres URL jest najprawdopodobniej kolejnym wyborem użytkownika. Jeśli przeglądarka wykona to żądanie, automatycznie zapisze w pamięci podręcznej najważniejsze zasoby strony, co znacznie przyspieszy ładowanie kolejnej strony.
- Wstępne renderowanie. W przeciwieństwie do powyższego, który pobiera tylko niektóre zasoby, wstępne renderowanie zapisuje całą stronę w pamięci podręcznej. Cała zawartość jest przechowywana w pamięci urządzenia użytkownika.
- Wstępne pobieranie DNS. Wstępne pobieranie DNS rozwiązuje określony DNS i nic więcej. Dzięki temu, jeśli użytkownik wykona konkretny ruch w obrębie witryny, czas nawigacji zostaje skrócony.
- Wstępne połączenie. Działa jak powyższe, ale nawiązuje też połączenia i uzgadnia protokoły TCP i TLS.
Jak wyglądają przykłady kodu modułów wstępnego ładowania?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Ponieważ moduły wstępnego ładowania korzystają z dynamicznych tagów HTML, można wstępnie załadować czcionki Google lub stworzyć własny skrypt do wstępnego ładowania zasobów JavaScript w WordPress.
Jeśli korzystasz z WordPress, WP Rocket może Ci w tym pomóc.
Skoro wiemy już trochę o modułach wstępnego ładowania, przejdźmy do innego ważnego zagadnienia: leniwego ładowania.
Czym jest leniwe ładowanie?
Z każdym wejściem na stronę, niezależnie od tego, czy jest to wpis na blogu, czy strona statyczna, przeglądarka pobiera całą zawartość strony, a następnie prezentuje ją w oknie przeglądarki. Zazwyczaj musimy pobrać całą stronę, zanim zaczniemy ją przeglądać.
Leniwe ładowanie sprawia, że przeglądarka ładuje (renderuje) tylko to, co znajduje się w obszarze widocznym dla użytkownika. Jeżeli na stronie znajdują się zdjęcia lub filmy o dużych rozmiarach, będą one ładowane dopiero wtedy, gdy użytkownik przewinie stronę w dół.
Jeśli martwisz się o SEO, niepotrzebnie. Yoast potwierdził, że Google indeksuje strony wykorzystujące leniwe ładowanie i postrzega to jako pozytywny sygnał.
Do leniwego ładowania obrazów polecam bibliotekę Layzr.js – jest prosta i skuteczna. Skrypt jest aktywowany na stronie projektu, więc można sprawdzić, jak działa na żywo. Użytkownicy WordPressa znajdą wiele wtyczek do leniwego ładowania w publicznym repozytorium wtyczek.
#4: Buforowanie sieci
Buforowanie stron polega na kopiowaniu wersji strony, którą możemy w każdej chwili pokazać użytkownikowi. Strony są zapisywane w pamięci podręcznej podczas pierwszej wizyty na stronie. Kiedy kolejny użytkownik próbuje wejść na stronę, serwer zamiast przesyłać aktualną wersję, wyświetla wersję z pamięci podręcznej.
Celem buforowania jest poprawa wydajności witryny i zmniejszenie obciążenia serwera. W zależności od stosowanego rozwiązania do buforowania, można konfigurować niestandardowe interwały i inne zdarzenia oparte na wyzwalaczach.
Do popularnych rozwiązań buforowania należą Varnish, Squid i Memcached. Na rynku jest wiele innych rozwiązań, szczególnie dla użytkowników WordPress.
Możemy także rozważyć skorzystanie z CDN.
Co to jest CDN (sieć dostarczania treści)?
Sieć dostarczania treści wykorzystuje rozproszoną globalnie infrastrukturę serwerów, aby zapewnić szybkie dostarczanie treści. CDN szybko dostarcza różne typy danych: filmy, zdjęcia, kod JavaScript itp. Obecnie większość ruchu w internecie przechodzi przez jakąś formę CDN.
CDN najlepiej działa w przypadku witryn o dużym natężeniu ruchu. Jeśli Twoją stronę odwiedza zaledwie kilka tysięcy osób miesięcznie, poprawa może nie być aż tak zauważalna. Mimo to, CDN to świetne rozwiązanie, aby przyspieszyć ładowanie strony, zredukować koszty przepustowości, zwiększyć dostępność treści i poprawić ogólne bezpieczeństwo.
Jeśli nie masz doświadczenia z CDN, warto spróbować Cloudflare, które oferuje darmowy plan. Jeżeli Cloudflare nie spełni Twoich oczekiwań, sprawdź nasze zestawienie najlepszych darmowych dostawców CDN.
#5: AMP (przyspieszone strony mobilne)
Projekt AMP Google to mobilna optymalizacja na sterydach! W zasadzie AMP redukuje elementy strony do minimum, aby zapewnić błyskawiczne ładowanie, z naciskiem na czytelność. Biorąc pod uwagę, jak istotna jest szybkość strony, warto rozważyć to rozwiązanie.
Jak działa AMP?
AMP to zwykła strona HTML z pewnymi ograniczeniami co do wyświetlanej treści. Skutkuje to znacznie krótszym czasem ładowania i lepszą wydajnością ze względu na ograniczenia dotyczące wykonywania skryptów.
Na przykład, JavaScript nie działa w AMP. Chyba że korzystamy z biblioteki AMP JS dostępnej na GitHubie. Biblioteka JS pozwala osiągnąć pewne rezultaty, jak chociażby obejście blokad reklam. Jednak aby osiągnąć prawdziwą wydajność, najlepiej używać surowego AMP.
Ciekawe studia przypadku dla AMP:
#6: Testuj przed wdrożeniem
Obecnie nie ma żadnego powodu, aby nie posiadać oddzielnego środowiska testowego. Większość platform hostingowych oferuje takie środowiska, więc warto to sprawdzić u swojego dostawcy.
Czym jest środowisko przejściowe?
Najprościej mówiąc, jest to kopia Twojej aktualnej witryny. Ta witryna, którą teraz widzisz, to tak zwana witryna produkcyjna – czyli działająca na żywo wersja kodu, skryptów i treści, z których składa się Twoja strona. Środowisko przejściowe to kopia Twojej strony produkcyjnej. Fałszywa strona, jak kto woli. W tym środowisku możesz wprowadzać zmiany i dodawać nowe funkcje bez ryzyka uszkodzenia działającej witryny.
Zawsze wracam myślami do wpisu Ashley Harpp, Nie trać czasu – testuj zmiany przed wdrożeniem.
Jej podejście do tego, jak „oszukujemy” samych siebie, żeby nie brać odpowiedzialności za błędy, jest bardzo pouczające. W tym wpisie znajdziesz też linki do narzędzi, które pomogą Ci skonfigurować lokalne środowisko testowe.
Testowanie nie jest takie straszne, jak się wydaje. Jest natomiast przerażające, kiedy przypadkowo usuniesz całą bazę danych na serwerze produkcyjnym!
Podsumowanie
Optymalizacja strony pod kątem urządzeń mobilnych nie jest wcale tak trudna. Wystarczy odrobina determinacji i chęć zastosowania metod omówionych w tym artykule. Być może znasz już takie pojęcia jak buforowanie i leniwe ładowanie. A co ze środowiskami przejściowymi i wstępnym ładowaniem?
Mamy nadzieję, że ten artykuł rzucił nieco światła na zagadnienia związane z optymalizacją mobilnych wersji stron.