Co to jest mobilna wersja strony WWW i dlaczego jest istotna?
Po ostatnich aktualizacjach algorytmów indeksujących firmy Google, jednym z bardzo istotnych czynników wpływających na pozycję strony w wyszukiwarce jest zgodność z urządzeniami mobilnymi takimi jak smartfony czy tablety.
Dostawcy usług wyszukiwania zauważyli trend polegający na tym że coraz więcej użytkowników internetu pochodzi urządzeń mobilnych.
Obecnie szacuje się że ponad 50% całego ruchu w internecie pochodzi z urządzeń mobilnych jest i trend jest wzrostowy.
Jest to znacząca zmiana w stosunku do lat 2000, gdzie ruch pochodzący urządzeń mobilnych stanowił jedynie około 10% ruchu sieciowego.
Nie dziwi więc fakt że dostawcy usług wyszukiwania doszli do wniosku iż należy promować strony przystosowane do urządzeń mobilnych w sytuacji gdy wyszukiwanie odbywa się bezpośrednio z urządzenia mobilnego.
Aby to osiągnąć wprowadzono dwie wersje indeksu wyszukiwania: jedna przeznaczona wyłącznie dla urządzeń mobilnych, a druga dla pozostałych urządzeń czyli komputerów stacjonarnych.
W praktyce wygląda to tak, że wyszukując tą samą frazę, w tej samej lokalizacji z urządzenia mobilnego, dostaniemy inne wyniki niż wyszukiwanie tego samego hasła z komputera stacjonarnego.
Strony które są przystosowane do urządzeń mobilnych są promowane i prezentowane znacznie wyżej w wynikach wyszukiwania niż strony nie dostosowane do urządzeń mobilnych – oczywiście w przypadku gdy uruchamiamy wyszukiwanie głosowe lub tekstowe na urządzeniu mobilnym.
Naturalną konsekwencją takiego obrotu sprawy jest to, że specjaliści od SEO i SEM podejmują wysiłki mające na celu dostosowanie swoich stron do urządzeń mobilnych. Głównym celem tego działania jest zwiększenie ilości ruchu organicznego pochodzącego z urządzeń mobilnych. Ma to kluczowe znaczenie, jeżeli uświadomimy sobie fakt, że ilość użytkowników mobilnych stale rośnie.
Jak zoptymalizować stronę do urządzeń mobilnych?
Odpowiadając na pytanie “Na czym polega optymalizacja strony do wersji mobilnej” należy zdać sobie sprawę z tego że w firma Google, która jest potentatem na rynku wyszukiwarek, opublikowała wytyczne dla webmasterów pracujących nad dostosowaniem swojej strony do urządzeń mobilnych.
W dokumentach od Google możemy znaleźć informacje o tym, że aby strona została uznana za dostosowaną do urządzeń mobilnych, należy wziąć pod uwagę kilka kluczowych elementów związanych z tworzeniem strony, jej budową, wielkością zasobów, szybkością działania i oczywiście wyglądem końcowym.
Prawidłowa wielkość czcionek i obrazków na stronie mobilnej
Jednym z podstawowych elementów decydujących o uznaniu strony jako “mobile-friendly” jest widoczność elementów oglądanej na urządzeniu mobilnym.
Strona mobilna nie może zawierać zbyt małych czcionek, treści i obrazków, które są bardzo blisko siebie, co uniemożliwia odbiór ich zawartości.
Generalnie strona nie może wyglądać w ten sposób aby do jej odczytania konieczne było używanie funkcji zoom czyli powiększenia w telefonie czy tablecie lub przewijania w poziomie (np. od lewej do prawej)
Obrazki przedstawione na stronie mobilnej powinny być skalowane do szerokości urządzenia, a rozmiar czcionki powinien automatycznie dostosowywać się do rozdzielczości i gęstości pikseli na ekranie urządzenia.
Szybkość ładowania strony i ilość danych pobieranych z serwera
Innym równie istotnym czynnikiem wpływającym na jakość strony mobilnej jest czas jej ładowania oraz ilość danych, która musi zostać pobrana, aby strona została wyświetlona.
Mimo iż urządzenia mobilne mają coraz mocniejsze procesory i są w stanie przetwarzać większe ilości danych bez wątpienia mają mniejszą moc obliczeniową niż nowoczesne komputery stacjonarne, które są wyposażone w optymalizowanie sprzętowo przeglądarki internetowe, układy GPU, większą ilość pamięci RAM etc.
Tym samym ilość danych pobieranych na urządzenie mobilne i rozmiar skryptów przetwarzanych po stronie telefonu bądź z tabletu istotnie wpływa na czas ładowania strony i ogólne wrażenie z jej używania.
Zjawisko to jest znacznie mniej widoczne w przypadku korzystania z komputera czy laptopa.
Dlatego też zaleca się, aby wersje mobilne były lekkie – w sensie ilości danych, tak aby ładowały się w jak najkrótszym czasie oraz ilości użytych skryptów JavaScript, bibliotek i stylów CSS.
Zbędne i duże obrazki lub animacje powinny zostać zastąpione mniejszymi miniaturami a wielkie biblioteki języka JavaScript powinny być minimalizowanie i używanie wyłącznie do niezbędnych potrzeb działania strony w wersji mobilnej.
Zalecane jest również używanie nowych formatów graficznych o większej kompresji, których użycie gwarantuje mniejszą ilość danych niezbędnych do pobrania z serwera.
Zalecane jest też stosowanie technik zwanych leniwym ładowaniem obrazków (lazy loading) polegającym na tym że strona nie ładuje wszystkich obrazków na które się na niej znajdują od razu, a obrazki ładowane są dopiero w momencie, gdy użytkownik przewinie ekran w miejsce gdzie dany obrazek powinien być widoczny.
Techniki wykonania optymalizacji strony mobilnej
Zasadniczo istnieją dwie metody wykonywania optymalizacji strony WWW do wersji mobilnej.
Pierwsza z nich, która nieco odchodzi już do lamusa, polega na tym, że tworzymy dwie odrębne wersję serwisu internetowego i za pomocą skryptu rozpoznającego urządzenie z jakim mamy do czynienia podczas ładowania wybieramy jedna z wersji.
Może być to wersja stacjonarna dla komputerów oraz mobilna dla urządzeń mobilnych. W tej sytuacji mamy więc dwie zupełnie oddzielnie wersje strony, które mogą wyglądać zupełnie inaczej i prezentować zupełnie różne treści.
Drugą znacznie bardziej popularniejszą i coraz częściej używaną metodą, jest przygotowywanie stron w tak zwanej technologii responsywnej (RWD)
RWD polega na tym, że mamy jeden kod źródłowy strony i jedną wersję serwisu, która jednak wygląda zupełnie inaczej na komputerze stacjonarnym niż na urządzeniu mobilnym.
Przykładowo klasyczny – horyzontalny trój-kolumnowy lub dwukolumnowy układ widoczny na urządzeniu typu komputer – w wersji mobilnej jest “przełamany” i prezentowany w pionie dzięki technologi “zmieniany układu strony w locie”.
Używanie technologii responsywnej jest znacznie wygodniejsze dla programistów i webmasterów ponieważ mamy do czynienia wyłącznie z jedną wersją kodu źródłowego strony WWW a nie dwoma, które należy równolegle aktualizować .
Zasadniczo wersje responsywne oszczędzają też miejsce na serwerze oraz zmniejszają ilość danych potrzebnych do załadowania strony.
Nowoczesne biblioteki do generowania widoków responsywnych takich Jak bootstrap pomagają webmasterem w przygotowywaniu stron w technologii RWD.
Technologia responsywna pozwala również na ukrywanie niektórych elementów w wersji mobilnej, zmianę ich rozmiarów etc. i jest polecana przez Google jako rekomendowany sposób na dostarczanie wersji stron WWW dostosowanych do komórek i urządzeń typu tablet.