Zwiększ widoczność swojej witryny i skontaktuj się z
Jeszcze kilka lat temu mało kto łamał sobie głowę nad czymś takim jak optymalizacja strony pod urządzenia mobilne, o zakupach dokonywanych za pośrednictwem smartfona nie wspominając. Ale już rok później świat internetu zapowiedział przyjście mobilnej rewolucji.
Według badań Morgan Stanley Research, przytoczonych w raporcie „Mobile Online w Polsce 2015”, w 2007 na świecie było 1100 mln użytkowników internetu korzystających z desktopu wobec 400 mln internautów przeglądających sieć na urządzeniach mobilnych. Osiem lat później (2015) stosunek ten się odwrócił – użytkownicy sieci na urządzeniach mobilnych przeważyli nad tymi, którzy korzystają z desktopu w stosunku 1900 mln do 1700 mln.
Dynamicznie rosnąca liczba posiadaczy smartfonów ze stałym dostępem do internetu wymusiła nową jakość. I tak w 2012 roku pojawiły się pierwsze wzmianki o tym, że strony dostosowane do urządzeń mobilnych są wyżej oceniane przez Google i że ten trend będzie jednym z wiodących w branży digital – web developementu czy UX. Było to także pokłosie różnorodnych badań przeprowadzonych przez Google. Oczywiście mówię tutaj o rynku USA, ponieważ do Kraju Nad Wisłą trendy docierają nieco opieszale.
Obecnie, w 2016 roku, powszechne jest dostosowywanie stron internetowych pod urządzenia mobilne. Trend mobile-friendly sites już kilka lat temu został określony przez Google jako jeden z ważniejszych czynników podnoszących ranking strony w wyszukiwarce. Obecnie większość stron wykorzystuje rozwiązania techniczne stanowiące ukłon w stronę użytkowników przeglądających witryny na smartfonach, tabletach czy laptopach.
Jak tworzyć strony www, by dostosować je do urządzeń przenośnych? Najpierw warto wykonać test zgodności strony z wymaganiami urządzeń mobilnych. Google stworzyło w tym celu specjalne narzędzie. Jeśli strona wciąż nie spełnia wymogów giganta – przeczytajcie przygotowany przeze mnie niżej poradnik optymalizacji witryny pod urządzenia mobilne. I wykonajcie test ponownie 🙂
Na samym początku warto przemyśleć, czy wolimy mieć stronę responsywną czy raczej stworzyć dwie wersje tej samej strony (na desktopy i na urządzenia przenośne) lub może tylko wersję mobilną. Strony responsywne (inaczej RWD) to witryny, które dopasowują wszystkie swoje widoczne elementy do rozdzielczości ekranu, na którym są przeglądane. Można powiedzieć, że są elastyczne i uniwersalne – dobrze przegląda się je zarówno na ekranie komputera stacjonarnego, jak i na dużo mniejszym wyświetlaczu smartfona.
Od jakiegoś czasu pierwsze rozwiązania zdecydowanie wiedzie prym. Dlaczego? Jest mniej czasochłonne, a przez to tańsze. Co jednak najważniejsze – w kwietniu 2015 roku Google oficjalnie wprowadziło responsywność stron jako czynnik rankingujący, o czym poinformowało na swoim blogu. Nie masz strony RWD? Spadasz w rankingu w wyszukiwarce mobilnej.
Strony mobilne to z kolei serwisy tworzone tylko dla urządzeń mobilnych. Często mają zupełnie inny wygląd i nawigację niż jej wersja na desktopy. Ich zaletą jest możliwość szybszego wykonania – opcja dobra, jeśli planujemy posiadać tylko mobilną wersję strony. To samo z czasochłonnością – samą stronę mobilną wykonamy szybciej i taniej, niż analogiczną stronę responsywną. Wszystko zmienia się oczywiście w przypadku, gdy wdrażamy jednocześnie wersją mobilną i desktopową. Z kolei do wad można zaliczyć konieczność stworzenia np. zupełnie innych przekierować dla strony mobilnej i desktopowej czy konieczność odrębnego śledzenia statystyk w Google Analytics (oddzielny kod).
Optymalizacja strony pod urządzenia mobilne powinna zakładać także zwiekszenie jej prędkości ładowania. Jest to kluczowe dla użytkowników smartfonów – wystarczy o jedną sekundę za długo, aby stracić spory ruch i konwersję. Optymalna długość to zaledwie 2-3 sekundy – po nich użytkownik zaczyna się niecierpliwić i wychodzi ze strony.
Według wyników badań opublikowanych przez wpengine.com jedna sekunda za długo powoduje spadek niezadowolenie użytkowników o 16%, spadek konwersji o 7% oraz liczby odsłon o 11%. A mówimy o jednej sekundzie – co jeśli strona ładuje się za długo o 3-4 sekundy?
Aby polepszyć prędkość ładowania strony najpierw trzeba wykonać speed test za pomocą dostępnych darmowych narzędzi. Jeśli wynik jest niezadowalający – pora na wdrożenie rozwiązań przyspieszających ładowanie. W tym celu twórcy zarówno mobilnych, jak i responsywnych stron starają się usprawnić kod. Na przykład w przypadku stron RWD można wykorzystać funkcję WordPressa o nazwie wp_is_mobile, która pomija wczytywanie dużych elementów, jak filmów w tle, dużych zdjęć, animacji czy innych. Warto pamiętać o zmniejszaniu ciężaru grafik i filmików już na etapie ich tworzenia. W tym celu trzeb wykorzystać funkcję kompresji zdjęć w programach graficznych.
Szybkość ładowania strony możesz sprawdzić np. za pomocą darmowego narzędzia PageSpeed Insights
Obok wspomnianej już przeze mnie konieczności kompresji zdjęć oraz możliwości zastosowania specjalnej blokady wczytywania filmików na urządzeniach mobilnych (strony RWD), musimy zoptymalizować także inne elementy. Pozbądźmy się zbędnych wtyczek i skryptów oraz stosujmy zasadę ładnego pisania kodu (konieczne jest zmniejszenie jego objętość do niezbędnego minimum i uproszczenie). Polecam poczytać także o rozwijającym się projekcie Accelerated Mobile Pages (AMP) wspieranym m.in. przez Google i WordPress. Jest to projekt typu open source (programiście z niego korzystający mogą go modyfikować i udoskonalać; powstałe narzędzia są darmowe), którego celem jest udostępnienie narzędzi pozwalających na przygotowanie strony przyjaznej urządzeniom mobilnym. Standard AMP ma zatem podobną misję, co strony RWD.
Niedawny komunikat Google (23 sierpnia 2016 roku) mówi wprost o tym, że strony internetowe z wyskakującymi reklamami, które przysłaniają treść podczas ich przeglądania na urządzeniach mobilnych, będą niżej oceniane w rankingu wyszukiwania. Tendencja jest taka, aby użytkownik klikając w link w SERP przechodził od razu do treści, która go zainteresowała i nie musiał wcześniej szukać krzyżyka do wyłączenia ogromnej, często pełnoekranowej reklamy. Optymalizacja strony pod urządzenia mobilne zakłada zatem, że jeśli planujesz wyświetlać reklamy mobilne na swojej stronie mobilnej lub responsywnej pamiętaj, aby zoptymalizować je pod kątem zgodności z wytycznymi Google.
Sposób korzystania z Twojej strony, jej nawigacja, kompozycja elementów klikalnych składają się na user experience. Trzeba pamiętać, że urządzenia mobilne posiadają ograniczenia w postaci niewielkiej rozdzielczości ekranu, przez co trudniej jest o precyzję klikania, szczególnie za pomocą palców. Optymalizacja strony pod urządzenia mobilne powinna pamiętać o dostosowaniu tych elementów do zachowań użytkowników – liczą się duże, czytelne elementy klikalne, minimalizacja efektu przypadkowego kliknięcia, podziały na sekcje i czytelna czcionka. Zlecając wykonanie strony responsywnej czy mobilnej postaraj się o możliwość testowania strony także pod tym kątem.
Strony mobilne mają być szybkie pod każdym względem – także warstwy treści. Przez ograniczone miejsce i widoczność tekstu nagłówki zoptymalizowane pod urządzenia mobilne powinny być krótkie (3-4 słowa to max). Dobrym rozwiązaniem jest podzielenie treści na mniejsze akapity, stosowanie krótkich podpunktów. Należy pamiętać także o dobrze widocznej czcionce – aby tekstu nie trzeba było przybliżać. Z kolei elementy klikalne, butony CTA czy inne powinny być duże.
Optymalizacja strony pod urządzenia mobilne zakłada także skupienie się na metatagach, metadescription i oczywiście nagłówkach. Wszystkie elementy powinny zawierać potrzebne frazy kluczowe, ale nie należy pakować ich wszędzie, gdzie się da. Wystarczy jednokrotne jej użycie w każdym z elementów.
Według danych podanych przez Google w sierpniu 2016 roku aż 85% stron zaindeksowanych w ich zasobach jest dostosowana do urządzeń mobilnych. Oznacza to, że korporacja dopięła swego, a my – jako użytkownicy smartfonów czy tabletów – łatwiej przeglądamy strony internetowe na telefonie, drobimy zakupy w sklepach internetowych czy korzystamy z dedykowanych aplikacji. Warto zatem podjąć nieco więcej wysiłku i dostosować stronę pod urządzenia przenośne.
