Jak zoptymalizować układy WordPress pod kątem ruchu mobilnego

Liczba urządzeń mobilnych i osób, które z nich korzystają, stale rośnie. Nic dziwnego, że ponad połowa całego ruchu internetowego to ruch mobilny, a większość zapytań w wyszukiwarkach odbywa się na urządzeniach mobilnych. Ponadto Google nakłada kary na witryny, które nie są zoptymalizowane pod kątem urządzeń mobilnych.

Aby zoptymalizować układy WordPress pod kątem ruchu mobilnego, musisz zrobić znacznie więcej niż tylko zainstalować motyw. Musisz zainwestować w mobilną wersję swojej witryny, nie tylko z punktu widzenia UX, ale także z punktu widzenia SEO, CRO, reklamy i wydajności.

Dlatego w tym artykule wyjaśnimy, do czego należy się kierować w swojej witrynie WordPress, aby działała w ruchu mobilnym i aby zapewnić użytkownikom jak najlepsze wrażenia podczas odwiedzania witryny na urządzeniu mobilnym.

Dlaczego ruch mobilny ma znaczenie

W 2016 r. Po raz pierwszy ruch mobilny w Internecie przekroczył liczbę komputerów stacjonarnych. Aby nadążyć za tym, musisz przygotować swoją witrynę WordPress na ruch przychodzący z dowolnego typu urządzenia.

Optymalizacja to nie tylko świetny wygląd na smartfonach, to także posiadanie funkcjonalnej strony internetowej. Posiadanie strony internetowej przystosowanej do urządzeń mobilnych poprawi UX i poprawi współczynnik konwersji, a jest to kluczowe dla witryn, które opierają swoje dochody na reklamach.

Oprócz ulepszonego UX, przyjazny dla urządzeń mobilnych układ pozytywnie wpływa również na Twoje SEO. Od aktualizacji Google w 2015 r. Nastąpiła znacząca zmiana w algorytmach wyszukiwarek. Teraz przyjazność dla urządzeń mobilnych jest jednym z ważnych czynników wpływających na lepszą pozycję w wynikach wyszukiwania i zwiększony ruch w sieci.

Ruch w sieci mobilnej stale rośnie, jak pokazano na tym wykresie od Statista.

Dlatego też, jeśli Twoja witryna doskonale prezentuje się na urządzeniach mobilnych, będzie miała lepszą pozycję w SERPach, a to zaowocuje większą sprzedażą na urządzeniach mobilnych. Nawet duzi detaliści, tacy jak Walmart Canada, odnieśli dalsze korzyści z optymalizacji układu strony mobilnej, uzyskując 98% wzrost sprzedaży mobilnej!

Kiedy firma dowiedziała się, że prawie 50% jej docelowych klientów to mamy korzystające z tabletów, zdała sobie sprawę, że muszą coś zrobić ze swoim mobilnym doświadczeniem. Aby skutecznie rozwiązać problemy z ich układami mobilnymi, wdrożyli następujące rozwiązania:

• Stworzenie planu Mobile First: zespół podjął decyzję, że musi przyjąć podejście zorientowane na dotyk do projektu i sprawić, by wyglądał naprawdę dobrze na tabletach i smartfonach.
• Wdrażanie optymalizacji projektu mobilnego: podejście do projektowania responsywnego sprawiło, że ich witryna wyświetla się doskonale na każdym rozmiarze ekranu. Ponadto zoptymalizowali swoje strony produktów pod kątem ruchu w sieci mobilnej.

Rezultat: 20% wzrost ich ogólnego współczynnika konwersji i 98% wzrost sprzedaży mobilnej, jak wspomniano powyżej.

Jak Google ocenia układy witryn mobilnych?

Oceniając zdolność witryny do odbierania ruchu z wyszukiwania mobilnego, Google bierze pod uwagę następujące czynniki:

• Układ strony: Google sprawdza, czy Twoja strona renderuje się poprawnie na ekranie telefonu komórkowego.
• Ułatwienia dostępu: sprawdzanie, czy przyciski, multimedia i tekst są wystarczająco duże, aby były łatwo dostępne bez powiększania przez użytkowników.
• Wydajność: szybkość strony ma kluczowe znaczenie dla korzystania z Internetu na komputerach i urządzeniach mobilnych, a Google w SERPach priorytetowo traktuje wydajność stron mobilnych nad komputerami.
• Miejsce docelowe reklamy: strona wypełniona reklamami jest dla wielu uciążliwa, a także stanowi problem dla Google. Dlatego korzystając z reklam, należy upewnić się, że nie naruszasz wskazówek dotyczących ich umieszczania.

Zacznij od testów

Pierwszą rzeczą, którą musisz zrobić, jest sprawdzenie, czy Twoja obecna witryna odpowiednio reaguje na ruch mobilny w sieci, czy nie. W tym celu możesz skorzystać z narzędzia Google Mobile-Friendly Test.

Test optymalizacji mobilnej Google jako jedno z najlepszych narzędzi do badania responsywnych układów Twojej witryny.

Po prostu wprowadź adres URL witryny i wybierz Testuj URL . Analiza nie zajmie więcej niż kilka sekund. Jeśli Twoja witryna działa na urządzeniach mobilnych, narzędzie poinformuje Cię o tym, przedstawiając zrzut ekranu, jak strona wygląda na smartfonie. Lub, jeśli Twoja witryna nie jest dostosowana do urządzeń mobilnych, narzędzie wskaże, co należy dostosować.

Istnieje kilka innych przydatnych narzędzi, których możesz użyć do przetestowania dostosowania do urządzeń mobilnych, takich jak:

• Varvy Mobile SEO
• W3C Mobile Validator
• Responsive Design Checker

Narzędzia są świetne, ale nic tak naprawdę nie przebije doświadczenia z pierwszej ręki. Zawsze sugerujemy, aby przejść przez witrynę, wykonać czynności, które uważasz za priorytetowe dla użytkowników (np. Dodanie produktu do koszyka, przesłanie formularza, przejście do strony, udostępnienie postu). Podczas całego procesu zwracaj uwagę na potencjalne problemy. To najprostsza forma testów UX.

Przetestuj wydajność

Szybkość jest ważniejsza niż kiedykolwiek wcześniej. Google uważa szybkość za jeden z najważniejszych czynników rankingowych, a aż 85% użytkowników oczekuje, że strony mobilne będą ładować się znacznie szybciej niż wersje na komputery.

Oto kilka narzędzi, których możesz użyć do przetestowania szybkości swojej witryny:

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

Jeśli chcesz przyspieszyć wyświetlanie treści na urządzeniach mobilnych, CDN może pomóc w szybszym udostępnianiu treści dzięki buforowaniu i dystrybucji z wielu lokalizacji.

Załóżmy na przykład, że Twój serwer hostingowy znajduje się w San Francisco w Kalifornii, a osoba odwiedzająca witrynę mobilną pochodzi z Paryża. Jest to odległość, która może spowolnić przekrój treści. CDN może przechowywać wersję Twojej witryny na francuskim serwerze w pobliżu Paryża i dzięki temu wyświetlać Twoje treści znacznie szybciej.

Dodatkowo musisz wybrać potężnego dostawcę hostingu zarządzanego dla swojej witryny WordPress. Współdzielony host obsługuje setki witryn jednocześnie, a jeśli jedna z nich odnotuje większy niż normalny wzrost ruchu, zmniejszy to szybkość innych witryn.

Aktualizacja do hostingu WordPress, takiego jak Pagely, może znacznie poprawić wydajność. Pagely korzysta z infrastruktury serwerowej, która natychmiast przyspieszy Twoją witrynę. Korzystają również z najnowszej wersji PHP 7 i zawierają CDN, który może podnieść poziom zasobów Twojej witryny.

Zachowaj prostotę

Ponieważ smartfony mają znacznie mniejszy ekran niż układy stacjonarne, liczba elementów, które możesz pokazać użytkownikom, jest mniejsza. Dlatego jeśli chcesz wyświetlać mnóstwo treści, po prostu utrudnisz użytkownikom korzystanie z nich.

Na przykład, spójrzmy na brazylijski oddział Toyoty. Na laptopie wygląda naprawdę solidnie.

Dobrze wyglądająca witryna na komputery stacjonarne nie oznacza, że ​​układ mobilny będzie pasował. Źródło obrazu: Toyota Brazil

Ale co, jeśli chcesz przeglądać ich pojazdy na swoim smartfonie.

Zagracony układ witryny mobilnej prowadzi do mniejszego ruchu i zmniejszenia współczynnika konwersji. Źródło obrazu: Toyota Brazil

Nie jest tak źle, ale znowu ten górny pasek i główne menu są nieco za duże, przez co całe doświadczenie jest przestarzałe i zagracone.

Upraszczanie projektu poprawia mobilny interfejs użytkownika, a użytkownicy mogą wydajniej poruszać się po stronach. Ponadto proste układy poprawiają szybkość strony mobilnej, ponieważ im mniej elementów musi załadować przeglądarka, tym szybsza jest strona.

Prosty układ WordPress na urządzenia mobilne firmy Swell

Projektując układ mobilny, najlepiej jest skupić się na układzie strony z jedną kolumną, aby zwiększyć przewijanie strony. Pomyśl - dlaczego Facebook i Instagram są tak popularne jak platformy mobilne?

Użytkownicy naturalnie przesuwają palcem w pionie. Źródło obrazu: Giphy

Ponadto należy wziąć pod uwagę inne dopuszczalne funkcje prostego projektowania witryn mobilnych, takie jak „menu hamburgera”.

Przycisk Hamburger Menu w lewym górnym rogu. Źródło obrazu: AMC

Obecnie jest to standardowy składnik w projektowaniu witryn mobilnych, a gdy użytkownicy chcą przeglądać inną stronę, przeszukują górną część układu strony. Nie używaj rozbudowanych menu rozwijanych. Poruszanie się po smartfonach jest trudne, a czasami utrudniają nawet użyteczność witryn na komputery stacjonarne.

Wyklucz niepotrzebne treści

Oprócz usprawnienia przejścia strony na urządzenia mobilne poprzez usunięcie niepotrzebnych elementów, możesz również usunąć dodatkową zawartość. Oczywiście nigdy nie należy usuwać treści, które poprawiają współczynnik konwersji. Jednak jest po prostu pewna zawartość, która nie jest konieczna dla mobilnej wersji Twojej witryny.

Podczas przeglądania treści, które powinny pojawić się na stronie, zadaj sobie następujące pytania:

• Jak trafna jest ta treść dla strony?
• Czy treść ma kluczowe znaczenie dla podróży użytkownika?
• Jeśli musimy uwzględnić ten fragment treści, jak możemy go uprościć na urządzenia mobilne?
• Jeśli możemy go usunąć na telefonie komórkowym, czy nadal jest potrzebny na komputerze?

Wyeliminowanie niepotrzebnych treści poprawi komfort użytkowania i współczynniki konwersji. Zapisuj tylko najważniejsze treści dla odwiedzających witrynę mobilną. Upraszczaj swoje treści tam, gdzie to możliwe, ale nie eliminuj żadnych kluczowych treści, które mogłyby przekonać użytkowników do wybrania Twojego produktu.

Prosty interfejs użytkownika z mobilnej witryny internetowej BuildFire.

Ogranicz obszary, które można kliknąć

Kiedy ludzie odwiedzają strony internetowe na urządzeniach mobilnych, nie chcą klikać zbyt wielu opcji. To może być przytłaczające i nie uda Ci się zapewnić sprawnego mobilnego UX. Zamiast tego musisz podkreślić najważniejsze wezwania do działania i klikalne obszary na swoich stronach.

Todoist ma tylko wezwanie do działania i piękną grafikę.

Należy pamiętać, że przeglądanie strony internetowej na smartfonie polega na patrzeniu i klikaniu ekranu dotykowego palcami zamiast wskazywać strzałkami. Dlatego uwzględnienie ograniczonej liczby linków i prawidłowe ich rozmieszczenie zapewni dostępną stronę, po której użytkownicy urządzeń mobilnych będą mogli się poruszać.

Witryna mobilna Quicksprout ma duże klikalne obszary.

Ma to kluczowe znaczenie, ponieważ jeśli klikalne obszary znajdują się blisko ekranu telefonu komórkowego, użytkownicy mogą kliknąć niewłaściwe łącze. Ponadto Google może oznaczyć Twoją witrynę jako nieprzyjazną dla użytkowników mobilnych, przez co stracisz wiele potencjalnych bezpłatnych wyników wyszukiwania.

Elastyczny projekt uprzęży

Jeśli chcesz poprawnie wyświetlać swoją witrynę na komputerze i telefonie komórkowym, musisz sprawić, by była responsywna. Responsywna witryna korzysta z tych samych elementów strony w wersjach na komputery i urządzenia mobilne. Zgodnie z urządzeniem projekt zmienia się, aby dopasować się do ekranu.

Oprócz ulepszonego UX dla odwiedzających na urządzeniach mobilnych, responsywny projekt zapewnia Twojej witrynie również następujące korzyści:

• Elastyczność: dzięki responsywnemu projektowi nie musisz myśleć o zmianie projektu na dwóch stronach internetowych. Musisz tylko raz naprawić lub dodać elementy i robisz to zarówno dla wersji mobilnej, jak i stacjonarnej.
• Opłacalność: prowadzenie strony stacjonarnej i mobilnej może być kosztowne. Dzięki elastycznemu projektowaniu eliminujesz te niepotrzebne koszty.
• Korzyści z SEO: Elastyczny projekt jest korzystny dla Twojego rankingu wyszukiwania, ponieważ Google, jak omówiono na początku artykułu, nadaje priorytet witrynom przyjaznym dla urządzeń mobilnych w SERP.

Musisz jednak uważać. Większość responsywnych witryn internetowych po prostu konwertuje trzy kolumny treści na komputery w jedną.

Witryna responsywna to taka, która pasuje do każdego ekranu. Ładuje te same dane z pulpitu do wersji mobilnej. Na przykład, jeśli chcesz wyświetlić zdjęcie pulpitu o rozdzielczości 1200 pikseli na ekranie urządzenia mobilnego o rozdzielczości 300 pikseli, załaduje się całe 1200 pikseli, tylko renderowane jako mniejsze.

Źródło obrazu: Giphy

Jeśli chodzi o obrazy, WordPress poczynił już znaczne postępy w kierunku lepszych wrażeń. Od wersji 4.4 CMS automatycznie skaluje nawet największe obrazy za pomocą atrybutu srcset HTML.

PNG i JPEG to najpopularniejsze formaty plików graficznych. Jednak wraz z najnowszymi osiągnięciami technologii i obrazu cyfrowego formaty WebP i SVG stają się coraz bardziej obecne.

SVG jest obrazem wektorowym i można go skalować w celu dopasowania do dowolnego rozmiaru ekranu. Zwykle pliki SVG są znacznie mniejsze niż pliki PNG, więc oszczędza cenny czas podczas ładowania.

Jednak nadal powinieneś być ostrożny. Elementy wizualne, takie jak filmy, zdjęcia i grafika, mogą mieć istotny wpływ na wydajność witryn internetowych. Mimo że nie ma ściśle określonych reguł dotyczących rozmiaru pliku multimedialnego, mniejsze pliki skutkują lepszym czasem ładowania.

Pamiętaj, że te same elementy wizualne z wersji na komputery stacjonarne Twojej witryny WordPress mogą nie zawsze działać w wersji mobilnej. Dlatego wyeliminowanie dużych obrazów tła i zastąpienie ich obrazem, który nie utrudnia UX na urządzeniach mobilnych, jest znacznie lepszą opcją.

Weźmy jako przykład stronę główną HubSpot. Grafika w sekcji bohaterów doskonale przedstawia, jak CRM wprawia w ruch. Wyobraź sobie realistyczny obraz biurowca z tyloma osobami w każdym oknie. To nie działałoby tak dobrze, jak to.

Źródło: HubSpot

Optymalizuj formularze

Wypełnianie formularzy na smartfonie może być wyzwaniem, zwłaszcza jeśli użytkownicy muszą podać zbyt dużo danych i poruszać się po zbyt wielu polach. Dlatego musisz zadbać o uproszczenie formularzy mobilnych i zebranie tylko najważniejszych informacji.

Postaraj się, aby formularze dla stron mobilnych były jak najprostsze. Źródło: Copyblogger

W WordPress możesz zainstalować wtyczkę, taką jak WPForms, i szybko i łatwo tworzyć responsywne formularze, które mogą pomóc w konwersji odwiedzających witrynę mobilną.

Z punktu widzenia programisty korzystamy z Formularza Kontaktowego 7, ponieważ zapewnia on największą elastyczność. Chociaż należy zauważyć, że jego interfejs użytkownika nie jest przyjazny dla użytkowników nietechnicznych, którzy chcą niestandardowego projektu swoich formularzy.

Contact Form 7 to lepsze narzędzie do optymalizacji formularzy z punktu widzenia programisty.

Podsumowanie

Posiadanie przyjaznego dla urządzeń mobilnych układu WordPress jest obecnie kluczowe. Jest to konieczne, aby docelowi użytkownicy i wyszukiwarki zaakceptowali Twoją witrynę.

Przyjazna dla urządzeń mobilnych witryna WordPress może przyciągać więcej ruchu organicznego, pozyskiwać nowych potencjalnych klientów i klientów.

Teraz, gdy wiesz już, co przetestować, jak szukać problemów z mobilnym interfejsem użytkownika i identyfikować dodatkowe problemy. Możesz postępować zgodnie z poradami przedstawionymi powyżej, aby zapewnić, że mobilny UX Twojej witryny WordPress jest zawsze na miejscu.

Osoby stojące za najlepszym CMS robią również duże postępy w kierunku ulepszonego natywnego mobilnego UX. Od skalowania obrazów w przeglądarkach mobilnych do ulepszonego zaplecza, możesz być pewien, że wyprzedzasz właścicieli witryn korzystających z innego CMS.

Jeśli masz więcej pytań lub potrzebujesz pomocy w rozwiązywaniu problemów z UX na urządzeniach mobilnych i tworzeniu nowoczesnego środowiska internetowego na urządzeniach, nie wahaj się i skontaktuj się z nami.