Co to urządzenia przenośne?

Żeby rozpocząć przygotowywanie wersji mobilnej naszej strony internetowej musimy sobie zadać pytanie „co to jest urządzenie przenośne”.

Urządzeniem przenośnym według Google nie jest tablet bo ten ze względu na większy wyświetlacz może z powodzeniem wyświetlać witrynę przygotowaną jak na komputery stacjonarne. Nie mniej jednak ten poradnik odnosi się również do nich jak i wersji na komputery stacjonarne.

Według Google urządzeniami przenośnymi są m. in. telefony starszej generacji, które nie obsługują HTML5, Javascript itp. Nie będziemy sobie nimi głowy zawracać ponieważ przygotowanie wersji pod takie zabytki przypomni raczej walkę z wiatrakami.

Urządzeniem przenośnym jest również smartfon, czyli urządzenie z systemem Android, Windows Phone lub iPhone. Te urządzenia obejmują w chwili obecnej zdecydowaną większość urządzeń przenośnych.

Pod te urządzenia możemy przygotować treści na 2 sposoby. Przygotować specjalną, znacznie uproszczoną wersję strony (według starych zasad tworzyło się subdomenę np. http://m.secureglass.net lub http://secureglass.net/mobile w zależności od upodobań). Zaletą tej wersji jest bardzo uproszczony kod, treść, zwykle bez animacji, sliderów itp. Wadą utrata dużej części funkcjonalności strony.

Wersja taka średnio się sprawdza przy dynamicznie generowanych treściach, rozbudowanych witryn. Wprawdzie swego czasu istniał dodatek dla Joomla, który generował tego typu witryny ale swój kres miał w chwili powstania Joomla 3 i stron responsywnych. Google nie faworyzuje żadnej z wersji.

W chwili obecnej najbardziej popularną wersją są właśnie strony responsywne a więc płynnie dopasowujące się do smatrfonów. Treści generowane są automatycznie przez chyba wszystkie CMS’y Open source (WordPress, Joomla, Prestashop i inne) i zapewniają użytkownikowi wszystkie funkcjonalności wersji na komputery stacjonarne.

To czy strona ma swoją wersję na komórkę i Google poprawnie ją rozpozna można sprawdzić tu: https://www.google.com/webmasters/tools/mobile-friendly.

Problem pojawia się w chwili transferu dość rozbudowanej treści na urządzenie posiadające często limity transferowe. Żeby zaserwować użytkownikowi dobrą treść szybko i bez zbędnych obciążeń należy stronę bardzo dobrze zoptymalizować.

 

Optymalizacją tej wersji się zajmiemy.

Polecam rozpoczęcie prac od dobrej analizy naszej strony. Można to zrobić za pomocą GTMetrix (https://gtmetrix.com/)

W rezultacie otrzymamy ilość odwołań do serwera, które nasza strona generuje, ciężar strony i czas jej wczytywania. Często witryny okazują się niesamowicie ciężkie. Dopiero po analizie dowiadujemy się jak bardzo.

Wszystkie usprawnienia, które wykonamy dla wersji mobilnej zaskutkują zwiększeniem szybkości działania również wersji stacjonarnej a więc i wzrostu pozycji w Google. Warto więc się do niej należycie przyłożyć.

 

Punktem odniesienia niech będą poniższe wartości (dla strony z wyłączonymi dodatkami)

optymalizacja seo

Wersja niezoptymalizowana generuje aż 88 odwołań do serwera (pobiera 88 małych plików składowych). Ciężar strony to 1,68 MB przy czasie wczytywania aż 10,1 sekundy. Dało to nam wynik D a więc słabo. Szczegółowy raport można pobrać stad: GTmetrix-report-secureglass.net-20150810T142714-C3AWBZTx

Pracę rozpoczynam od wyłączenia części dodatków dla wersji mobilnej lub dla podstrony. Nie chcemy przecież żeby strona główna wczytywana była wraz z oskryptowaniem do obsługi formularzy kontaktowych czy innych elementów nie używanych na stronie głównej i odwrotnie… slidera w kontakcie. Tu przychodzi nam z pomocą dodatek do WordPress Plugin Organizer, który umożliwia zarządzanie wtyczkami na poszczególnych podstronach. Możemy zatem zyskać kilkaset kilobajtów na stronie.

 

 

optymalizacja seo

Po odpowiedniej konfiguracji pluginu mamy 71 odwołań a czas wczytywania zmalał o połowę. Bardzo dobrze … jedziemy dalej. Szczegółowy raport można pobrać stad: GTmetrix-report-secureglass.net-20150810T134832-nJHIN0yj

Bardzo popularnym dodatkiem, który poprawia szybkość witryny jest W3 Total Cache (dla WordPress) i JCH Optimize (dla Joomla). Oczywiście tych dodatków jest znacznie więcej ale te znam, używam, jestem zadowolony i mogę je polecić.

Obydwa dodatki oferują całą masę opcji, które poprawiają szybkość ale trzeba używać ich z głową. Warto włączając którąkolwiek z opcji przeprowadzać co chwilę test. Różne są przecież ustawienia serwerów i dodatki wykorzystywane na stronie.

 

optymalizacja seo

Wersja z włączonym i skonfigurowanym dodatkiem W3 Total Cache wczytuje się już ponad 8 sekund szybciej, waży o połowę mniej i co najważniejsze … generuje kolejne 58 odwołań mniej. Czas wczytywania będzie się zmieniał w zależności od obciążenia serwera ponieważ szybszy jest transfer jednego dużego pliku niż kilkunastu mniejszych. Szczegółowy raport można pobrać stad: https://gtmetrix.com/reports/secureglass.net/SXiqZOK3

GTMetrix podpowiada co należy zmienić by jak najlepiej zoptymalizować stronę więc mamy łatwiej.

Kiedy już mamy teoretycznie wszystko wychuchane a pojawia się apetyt na więcej można się pokusić o maksymalną optymalizację obrazów i plików js/css.

 

Po całej operacji zyskujemy 56 odwołań do serwera a czas wczytywania jest grubo ponad połowę krótszy.

Bardzo fajnym narzędziem, które oprócz powyższych zmian podpowiada co należałoby dopracować w wersji mobilnej jest https://varvy.com/mobile/. Bardzo estetycznie wyglądający interface sprawia, że miło się z niego korzysta.

 

Po krótce postarałem się opisać kilka sposobów na poprawę szybkości a tym samym poprawę rankingu w Google. Działajcie zatem i chwalcie się swoimi osiągnięciami.

 

Optymalizacja stron mobilnych 4.79/5 (33 głosów)

1 Komentarz

  1. Sigma System pisze:

    Szukałem jakiś informacji na innych blogach odnośnie wpływu optymalizacji stron mobilnych i znalazłem dopiero tutaj. Dzięki :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *