Responsive web design ≠ mobile friendly. Oto jak działa optymalizacja mobilna

Oliver Pfeil Ostatnia aktualizacja 21.10.2020
.
. 6 Min.
optymalizacja mobilna
Ostatnia aktualizacja 21.10.2020

W tym artykule wyjaśnię różnicę pomiędzy "responsive" i "mobile enabled" oraz jak zoptymalizować Twoją stronę pod kątem urządzeń mobilnych. Nauczysz się też kilku bardzo fajnych sztuczek, które poprawią czas ładowania Twojej WordPress strony, 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". W tym celu omówię bardziej szczegółowo dwa najważniejsze powody:

Powód nr 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 poszukuje się konkretnego problemu, tematu, rozwiązania, restauracji, produktu lub usługi.

Każdy operator strony internetowej powinien dostosować się do tej zmiany. Ponieważ tylko wtedy, gdy Twoja strona jest optymalnie wyświetlana na urządzeniu mobilnym, odwiedzający pozostanie na stronie i zarezerwuje u Ciebie produkt lub usługę.

Powód nr 2:

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

  • Czy strona jest w pełni responsywna?
  • 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.

Jaka jest różnica między stroną responsywną a przyjazną dla urządzeń mobilnych?

Na wielu stronach internetowych jest napisane, że wystarczy mieć responsywny design i wszystko jest w porządku. Mam jednak zupełnie inne zdanie na ten temat i dlatego chciałbym się skupić w szczególności na tym punkcie. Bo właśnie w tym momencie możesz idealnie zoptymalizować swoją stronę pod kątem urządzeń mobilnych.

Podstawowa procedura jest następująca: Na przykład, operator strony internetowej instaluje responsywną stronę Theme dla strony WordPress . Na tym zazwyczaj kończy się dla niego sprawa. Moim zdaniem jednak to właśnie tutaj tak naprawdę wszystko się zaczyna. Ponieważ responsywna strona Theme oznacza jedynie, że projekt automatycznie dostosowuje się do danego urządzenia końcowego. Jest to podstawowy wymóg i odpowiednio bardzo ważny.

Responsywna strona Theme 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. Ponieważ często zdarza się, że optymalizacja mobilna nie została przeprowadzona pomimo 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. Jednakże, powinieneś poważnie potraktować optymalizację mobilną dla swoich odwiedzających i zwrócić uwagę na te aspekty oraz zlecić ich optymalizację programiście.

Responsive web design: Wskazówki dla przeglądarek dotyczące optymalizacji mobilnej

Zazwyczaj masz smartfona i być może tablet. Jeśli jednak chcesz sprawdzić 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" dla wielu różnych urządzeń. Aby to zrobić, kliknij prawym przyciskiem myszy i wybierz "inspect" z menu, które się pojawi. Otworzy się konsola, w której można wybrać urządzenia mobilne (patrz zrzut ekranu). Przeglądarka pokaże Ci wtedy, jak Twoja strona jest wyświetlana na określonych urządzeniach.

responsywny webdesign urządzenia mobilne testowanie

Na poniższej stronie internetowej znajdziesz instrukcje, jak korzystać z tej funkcji przeglądarki.

Wskazówki: Optymalizacja WordPress mobile

Jeśli korzystasz z WordPress , poniższe wskazówki będą dla Ciebie bardzo pomocne. Dzięki WordPress można wykonać wiele optymalizacji za pomocą Plugin lub funkcji wewnętrznej. Ułatwia to pracę i oszczędza czas:

  • Podstawowym wymogiem jest responsywna strona Theme. Polecam wybrać premium Theme na WordPress . To kosztuje kilka dolarów, ale masz o wiele więcej możliwości. Poza tym premium Theme jest zazwyczaj lepiej zaprogramowany, na czym również Państwo zyskują.
  • Jeśli Twoja strona Theme wymaga optymalizacji w widoku mobilnym, masz 2 opcje. Albo zmieniasz stronę Theme albo optymalizujesz istniejącą Theme. Do optymalizacji można wykorzystać dziecko Theme . Poproś programistę, aby zaimplementował optymalizacje dla Ciebie.
  • Tymczasem istnieje wiele Theme builders, z którymi można naprawdę łatwo stworzyć swój pożądany projekt, a tym samym zoptymalizować WordPress mobile. Przykładami są Thrive -Themes lub również Divi.

Jeśli jesteś nowy w temacie WordPress , ale uważasz, że jest to interesujące, możesz sprawdzić następujące informacje. Na tej stronie znajdziesz WordPress tutorialgdzie możesz nauczyć się wszystkich podstaw o tym wspaniałym systemie zarządzania treścią.

Używaj linków wewnętrznych w tekście

Teraz przejdźmy do małej, wewnętrznej wskazówki, która jest niezwykle potężna: Link do wewnętrznych podstron tematycznych w tekście na Twojej stronie. W ten sposób odwiedzający mogą łatwo poruszać się po Twojej stronie. Szczególnie użytkownicy smartfonów wolą łatwo kliknąć w link w tekście, zamiast przeszukiwać menu hamburgera.

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

  • Linkowanie wewnętrzne 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.

Czas ładowania urządzeń mobilnych

Wiele razy poruszaliśmy już temat "Optymalizacji strony pod kątem urządzeń mobilnych". Jest jeszcze jeden aspekt, który należy również rozważyć: Temat "optymalizacja czasu ładowania". Moim zdaniem temat ten jest szczególnie ważny z dwóch powodów:

  1. Czas ładowania Twojej strony jest czynnikiem rankingowym Google.
  2. Im dłuższy czas ładowania strony, tym więcej odwiedzających ją opuści.

Szczególnie w przypadku użytkowników mobilnych ma to ogromne znaczenie, ponieważ czasy ładowania są zawsze nieco dłuższe w porównaniu do środowiska desktopowego. Oto 3 konkretne wskazówki, jak można zoptymalizować stronę WordPress pod kątem czasu ładowania dla urządzeń mobilnych:

#1: Obrazy:

Obrazy zajmują największy procent czasu ładowania strony. W związku z tym, masz tu największą przewagę. Najważniejszą rzeczą jest to, że przesyłasz zdjęcia do WordPress w dokładnym rozmiarze, w którym będziesz również osadzać grafikę. To już oszczędza rozmiar pliku i skraca czas ładowania.

Ponadto, istnieją obecnie gigantyczne narzędzia, dzięki którym można jeszcze bardziej zmniejszyć rozmiar plików obrazów w pełni automatycznie. Można samemu ustalić, czy jakość ma być utrzymana, czy nieco obniżona. W tym celu polecam następujące dwie strony WordPress -Plugins:

ewww optymalizator obrazu optymalizacja obrazów

Z niektórymi Plugins do optymalizacji obrazu można również automatycznie generować obrazy WEBP. Jest to zupełnie nowy format od Google, który 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 strona (lub podstrona). Dzięki "cache'owaniu" kopia każdej podstrony jest przechowywana na Twoim serwerze i dzięki temu jest dostępna znacznie szybciej, ponieważ nie trzeba wykonywać osobnych zapytań.

Moja Plugin-rekomendacja: WP-Rocket. WP-Rocket jest łatwy w użyciu i całkowicie skonfigurowany w ciągu kilku minut. Ponadto Plugin oferuje inne optymalizacje, dzięki którym można zaoszczędzić dodatkowy czas ładowania.

#3: Wyczyść Plugins i Themes

Co prawda, ta wskazówka brzmi bardzo banalnie i taka jest. Niemniej jednak jest skuteczny:

Polecam odinstalować wszystkie Plugins i Themes, których nie używasz. Samo wyłączenie nie wystarczy.

To również utrzymuje system w czystości, a każde dodatkowe rozszerzenie niesie ze sobą pewne ryzyko dla bezpieczeństwa. Z czasem wkrada się wiele Plugins i Themes , których tak naprawdę nie potrzebujesz.

Na mojej stronie możesz znaleźć darmową serię wideo o tym, jak przyspieszyć WordPress . Te tutoriale pokazują na żywo na ekranie, które ustawienia musisz ustawić w którym miejscu.

Wniosek: Dla kogo optymalizacja mobilna jest naprawdę opłacalna?

Internet rozwija się z prędkością światła. Jest wiele ciekawych tematów i być może zadajesz sobie teraz pytanie, czy optymalizacja mobilna jest dla mnie opłacalna? Cóż, oczywiście musisz zdecydować sam. Polecam jednak optymalizację strony właśnie w tym kierunku:

  • Optymalizacja strony pod kątem urządzeń mobilnych
  • Popraw i zoptymalizuj czas ładowania

Witryna to figurant, który pracuje dla Ciebie 365 dni w roku. Aby Państwa okręt flagowy spełniał swoją rolę, musi być regularnie polerowany. MOto rekomendacja: dostosuj swoją stronę do urządzeń mobilnych, a na pewno na tym skorzystasz.

Przyczynił się obraz: Le Buzz @Unsplash

Oliver Pfeil pomaga ludziom z książkami, e-learningiem i kursami w tworzeniu udanej i dochodowej strony internetowej. Jego specjalnością jest WordPress projektowanie stron internetowych i marketing internetowy.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.