optymalizacja mobilna

Responsywne projektowanie stron internetowych: Jak działa optymalizacja mobilna?

W tym artykule wyjaśniam różnicę pomiędzy responsywnością a gotowością na urządzenia mobilne oraz jak zoptymalizować witrynę pod kątem urządzeń mobilnych. Poznasz także kilka bardzo fajnych sztuczek, które pozwolą Ci poprawić czas ładowania Twojej witryny WordPress, tak aby ładowała się szybko.

Coraz więcej osób korzysta z internetu mobilnie. Stwarza to nowe możliwości i oczywiście wymaga przemyślenia tematów "responsive web design" i "optymalizacji mobilnej strony internetowej".

Dlaczego optymalizacja mobilna?

Zanim pokażę ci konkretne możliwości optymalizacji, chciałbym krótko omówić z tobą "dlaczego". Przy tej okazji omówię bardziej szczegółowo dwa najważniejsze powody:

Powód #1

Coraz więcej osób korzysta z urządzeń mobilnych (smartfonów i tabletów). Z kolei komputery i notebooki są coraz rzadziej używane. Jest to szczególnie prawdziwe w przypadku użytku prywatnego, gdy szukasz konkretnego problemu, tematu, rozwiązania, restauracji, produktu lub usługi.

Każdy operator witryny powinien dostosować się do tej zmiany. Ponieważ tylko wtedy, gdy Twoja strona jest optymalnie wyświetlana na urządzeniach mobilnych, odwiedzający pozostaną na niej i zarezerwują u Ciebie produkt lub usługę.

Powód #2

Dla Google to, jak Twoja strona zachowuje się na urządzeniach mobilnych, jest kryterium rankingowym. Niezwykle ważne są dwa poniższe aspekty:

  1. Czy strona jest w pełni responsywna?
  2. Jaki jest czas ładowania Twojej strony?

Im lepiej radzisz sobie w tych dwóch aspektach, tym więcej punktów dodatnich otrzymasz i ostatecznie tym lepszy będzie Twój ranking w wynikach wyszukiwania.

Różnica: responsywny czy kompatybilny z urządzeniami mobilnymi

Wiele witryn twierdzi, że wystarczy mieć responsywny projekt i wszystko jest w porządku. Ja jednak mam zupełnie inne zdanie na ten temat i dlatego chciałbym się skupić przede wszystkim na tym punkcie. Właśnie w tym miejscu można idealnie zoptymalizować witrynę pod kątem urządzeń mobilnych.

Procedura jest zasadniczo następująca: Operator witryny instaluje na przykład responsywny motyw dla witryny WordPress. W większości przypadków na tym sprawa się kończy. Moim zdaniem jednak od tego właśnie się zaczyna. Ponieważ motyw responsywny oznacza jedynie, że projekt automatycznie dostosowuje się do danego urządzenia końcowego. Jest to podstawowy warunek wstępny, a tym samym zasadniczy.

Motyw responsywny oznacza jedynie, że projekt automatycznie dostosowuje się do danego urządzenia końcowego.

Kolejnym krokiem jest obejrzenie Twojej strony na tablecie i smartfonie. Szybko zauważysz, czy responsywny projekt wygląda profesjonalnie i zachęcająco. Często zdarza się, że optymalizacja pod kątem urządzeń mobilnych nie została przeprowadzona pomimo stworzenia responsywnego projektu.

W tym celu chciałbym podać kilka przykładów, które na pewno zauważyliście na niektórych stronach internetowych:

  • Czcionka nagłówka jest zdecydowanie za duża.
  • Czcionka tekstu głównego jest zbyt duża lub zbyt mała.
  • Odstępy między wierszami są zbyt duże.
  • Obrazy są wyświetlane w zbyt dużych lub zbyt małych rozmiarach.
  • Niektóre formatowania nie są wyświetlane poprawnie na urządzeniach mobilnych.
  • Nawigacja jest trudna w użyciu.

Ta lista mogłaby być oczywiście znacznie dłuższa, ale myślę, że rozumiecie, o co mi chodzi.

Nawet jeśli te aspekty nie są zoptymalizowane, masz responsywną stronę, którą Google również ocenia pozytywnie. Niemniej jednak, powinieneś poważnie potraktować optymalizację mobilną dla swoich odwiedzających i zwrócić uwagę na te aspekty oraz zlecić ich optymalizację programiście.

Projektowanie stron responsywnych i optymalizacja mobilna

Zazwyczaj masz smartfona i może tablet. Jeśli jednak chcesz sprawdzać swoją stronę na różnych urządzeniach mobilnych, szybko osiągniesz granice swoich możliwości. Jest jednak na to bardzo proste rozwiązanie. Jeśli używasz przeglądarki Google Chrome, masz do tego wbudowaną funkcję.

Możesz wyświetlać swój "responsywny projekt strony" na wielu różnych urządzeniach końcowych. Aby to zrobić, kliknij prawym przyciskiem myszy i z menu, które się pojawi, wybierz "inspect". Otworzy się konsola, w której możesz wybrać urządzenia mobilne (zobacz zrzut ekranu). Przeglądarka pokaże ci wtedy, jak twoja strona jest wyświetlana na niektórych urządzeniach.

responsywny webdesign urządzenia mobilne testowanie

Wskazówki: Optymalizacja WordPress mobile

Jeśli używasz WordPressa, poniższe wskazówki z pewnością będą dla Ciebie bardzo pomocne. Dzięki WordPressowi możesz przeprowadzić wiele optymalizacji za pomocą wtyczki lub wewnętrznej funkcji. Ułatwia to pracę i oszczędza czas:

  • Podstawowym wymaganiem jest responsywny motyw. Zalecam, byś wybrał motyw premium dla WordPressa. Może to kosztować kilka dolarów, ale daje ci znacznie więcej możliwości. Ponadto motyw premium jest zazwyczaj lepiej zaprogramowany, co również jest korzystne dla Ciebie.
  • Jeśli Twój motyw wymaga optymalizacji w widoku mobilnym, masz dwie opcje. Albo zmienisz motyw, albo zoptymalizujesz istniejący motyw. Do optymalizacji możesz użyć motywu potomnego. Zatrudnij programistę, który wprowadzi optymalizacje za ciebie.
  • W międzyczasie istnieje wiele kreatorów motywów, za pomocą których można łatwo stworzyć pożądany projekt, a tym samym zoptymalizować WordPressa pod kątem urządzeń mobilnych. Przykładem mogą być Thrive Themes lub Divi.

Jeśli temat WordPressa jest dla ciebie nowy, ale wydaje ci się interesujący, możesz zapoznać się z poniższymi materiałami. Na tej stronie znajdziesz tutorial WordPress, w którym poznasz wszystkie ważne podstawy tego genialnego systemu zarządzania treścią.

Przejdźmy teraz do małej, sekretnej wskazówki, która ma ogromną moc: w tekście na stronie internetowej zamieść odnośniki do wewnętrznych podstron związanych z danym tematem. Ułatwia to odwiedzającym poruszanie się po witrynie. Ponieważ zwłaszcza użytkownicy smartfonów wolą łatwo kliknąć łącze w tekście, zamiast mozolnie przeszukiwać menu hamburgera.

Wykonując tę prostą optymalizację, tworzysz kilka pozytywnych rzeczy naraz:

  • Linkowanie wewnętrzne, które jest czynnikiem rankingowym w Google.
  • Dzięki linkowaniu wewnętrznemu, ułatwiasz pracę odwiedzającym i sprawiasz, że czują się oni bardziej komfortowo na Twojej stronie.
  • Odwiedzający średnio przeglądają kilka podstron, co wydłuża czas spędzony na Twojej witrynie. I to jest również czynnik rankingowy, który będzie miał pozytywny wpływ.
Zgoda*
To pole służy do weryfikacji i nie powinno być zmieniane.

Czas ładowania urządzeń mobilnych

Dużo mówiliśmy o „optymalizacji stron internetowych dla urządzeń mobilnych". Jest jednak jeszcze jeden aspekt, który powinieneś wziąć pod uwagę: Temat „optymalizacja czasu ładowania". Moim zdaniem, ten temat jest szczególnie ważny z dwóch powodów:

  • Czas ładowania witryny jest jednym z czynników rankingowych Google.
  • Im dłuższy czas ładowania strony, tym więcej odwiedzających.

Dotyczy to zwłaszcza użytkowników telefonów komórkowych, ponieważ czasy ładowania w tych urządzeniach są zawsze nieco dłuższe niż w przypadku komputerów stacjonarnych. Oto 3 konkretne wskazówki, jak można zoptymalizować WordPress pod kątem czasu ładowania dla urządzeń mobilnych:

1: Obrazy:

Największy procent czasu ładowania zajmują obrazy. W związku z tym masz tu największą przewagę. Najważniejszą rzeczą jest to, byś wgrywał do WordPressa obrazy w dokładnie takim rozmiarze, w jakim będziesz je osadzał. To już oszczędza rozmiar pliku i skraca czas ładowania.

Co więcej, obecnie dostępne są gigantyczne narzędzia, dzięki którym można jeszcze bardziej automatycznie zmniejszyć rozmiar plików obrazów. Użytkownik może sam zdecydować, czy jakość ma być utrzymana, czy nieco obniżona. Polecam następujące dwie wtyczki do WordPressa:

ewww optymalizator obrazu optymalizacja obrazów

Dzięki niektórym wtyczkom do optymalizacji obrazu można również automatycznie generować obrazy w formacie WebP. Jest to zupełnie nowy format opracowany przez Google, który jeszcze bardziej zmniejsza rozmiar pliku przy zachowaniu tej samej jakości.

2: Buforowanie

Drugi ważny punkt dotyczy cachowania. Nie chcę wchodzić w zbyt wiele szczegółów, ponieważ nie potrzebujesz tej wiedzy.

Chodzi o to, że zapytania do bazy danych nie są wykonywane za każdym razem, gdy wywoływana jest twoja strona (lub podstrona). Dzięki "buforowaniu" kopia każdej podstrony jest przechowywana na twoim serwerze i dzięki temu jest dostępna znacznie szybciej, ponieważ nie trzeba wykonywać osobnych zapytań.

Zalecana przeze mnie wtyczka: WP Rocket. WP Rocket jest łatwy w użyciu i można go całkowicie skonfigurować w ciągu zaledwie kilku minut. Ponadto wtyczka oferuje dalsze optymalizacje, dzięki którym można zaoszczędzić dodatkowy czas ładowania strony.

3: Wyczyść wtyczki i motywy

Wprawdzie ta wskazówka brzmi bardzo banalnie i taka jest. Niemniej jednak jest to skuteczne:

Zalecam odinstalowanie wszystkich wtyczek i motywów, których nie używasz. Sama ich dezaktywacja nie wystarczy.

Dzięki temu twój system będzie czysty, a każde dodatkowe rozszerzenie niesie ze sobą pewne ryzyko dla bezpieczeństwa. Z czasem wkrada się wiele wtyczek i motywów, których tak naprawdę nie potrzebujesz.

Na mojej stronie znajdziesz darmową serię filmów o tym, jak przyspieszyć działanie WordPressa. Objaśnienia pokazują na żywo na ekranie, które ustawienia należy ustawić w danym miejscu.

Podsumowanie: Czy optymalizacja mobilna się opłaca?

Internet rozwija się z prędkością światła. Jest tu wiele interesujących tematów i być może zadajesz sobie teraz pytanie, czy optymalizacja mobilna jest dla mnie rzeczywiście tego warta? Cóż, oczywiście musisz sam zdecydować. Zalecam jednak, byś zoptymalizował swoją stronę w tym kierunku:

  • Zoptymalizuj stronę pod kątem urządzeń mobilnych
  • Popraw i zoptymalizuj czas ładowania

Strona internetowa jest tym symbolem, który pracuje dla ciebie 365 dni w roku. A żeby twój okręt flagowy spełniał swoją rolę, musi być regularnie dopieszczany. Moja rekomendacja jest więc taka: dostosuj swoją stronę do urządzeń mobilnych, a na pewno na tym skorzystasz.

Responsywne projektowanie stron internetowych - Twoje pytania

Jakie masz pytania do Olivera? Zachęcamy do korzystania z funkcji komentarzy. Chcesz być informowany o nowych artykułach na temat marketingu internetowego? Śledź nas na Twitter, Facebook, LinkedIn lub za pośrednictwem naszego Biuletyn informacyjny.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany.