Jak przyspieszyć swoją stronę i dostosować ją do urządzeń mobilnych

Poprawa szybkości strony internetowej, by przyspieszyć działanie aplikacji

Ponieważ aplikacje stworzone z webtoapp.design wyświetlają Twoją stronę w wbudowanej przeglądarce (Chrome na Androidzie, Safari na iOS), szybkość Twojej strony ma ogromny wpływ na szybkość aplikacji. Mówiąc wprost, jest praktycznie identyczna. Jeśli Twoja strona ładuje się sekundę, aplikacja też będzie potrzebować sekundy. Dlatego bardzo ważne jest, by Twoja strona była jak najszybsza.

Pomiar wydajności za pomocą PageSpeed Insights

Dobrym punktem wyjścia do oceny i poprawy wydajności strony jest test PageSpeed Insights. To test stworzony przez Google, który symuluje, jak użytkownik doświadcza Twojej strony pod względem wydajności (szybko lub wolno). Test symuluje zarówno ładowanie strony na komputerze (z szybkim internetem i dużą mocą obliczeniową), jak i na urządzeniu mobilnym (z wolniejszym internetem i mniejszą mocą). Jeśli chcesz odnieść wyniki testu do wydajności aplikacji, najprawdopodobniej powinieneś patrzeć na wyniki dla urządzeń mobilnych, bo aplikacja jest używana na smartfonach i tabletach.

Na górze możesz też zobaczyć sekcję „Sprawdź, co naprawdę przeżywają Twoi użytkownicy”. To najbardziej realistyczne dane, bo pochodzą od prawdziwych użytkowników Twojej strony (anonimowo zbierane przez przeglądarkę Chrome). Pamiętaj, że jest to dostępne tylko, jeśli w ciągu ostatnich 28 dni wystarczająco dużo osób odwiedziło tę stronę. Jeśli nie masz takich danych, symulowane wyniki testu też dobrze pokazują, jak szybko ładuje się Twoja strona.

Poprawa wydajności strony wpływa też pozytywnie na pozycję w wynikach wyszukiwania Google, bo Google wyżej ocenia szybsze strony (bo użytkownicy to lubią). Oprócz zadowolonych użytkowników, to kolejna korzyść z przyspieszenia ładowania strony.

Jeśli przewiniesz trochę niżej na stronie PageSpeed Insights, znajdziesz sugestie, jak możesz przyspieszyć swoją stronę.

Ogólne wskazówki, jak poprawić szybkość strony internetowej

Oto kilka porad, które zazwyczaj pozwalają skrócić czas ładowania Twojej strony:

• Zmień lub ulepsz pakiet hostingowy na szybszy

• Używaj mniej wtyczek i skryptów

• Optymalizuj obrazy (mniejsze wymiary, nowoczesne formaty plików jak webp), aby zmniejszyć ich rozmiar

Oczywiście istnieje wiele innych sposobów na poprawę wydajności strony, ale te ogólne wskazówki pomogą prawie każdej stronie, niezależnie od tego, z jakiego oprogramowania korzystasz.

Jak dostosować stronę do urządzeń mobilnych

Obecnie urządzenia mobilne stały się głównym sposobem, w jaki użytkownicy korzystają z internetu. Dlatego ważne jest, aby Twoja strona i aplikacja były przyjazne dla urządzeń mobilnych. Strona dostosowana do urządzeń mobilnych sprawia, że odwiedzający mogą łatwo poruszać się po treści i korzystać z niej, niezależnie od tego, z jakiego urządzenia korzystają.

Responsywny design

Responsywny design to podstawa tworzenia stron przyjaznych dla urządzeń mobilnych. Polega na projektowaniu i tworzeniu strony w taki sposób, by dostosowywała się do różnych rozmiarów i orientacji ekranu. Innymi słowy, układ i treść strony automatycznie dopasowują się, by zapewnić optymalne wrażenia na urządzeniach od małych smartfonów po duże monitory.

W skrócie, polega to na tym, że elementy Twojej strony stają się mniejsze lub większe i zmieniają swoje położenie w zależności od rozmiaru ekranu.

Ocena przyjazności dla urządzeń mobilnych

Google rozumie, jak ważna jest przyjazność dla urządzeń mobilnych i udostępnia narzędzie do jej oceny, podobnie jak wspomniane wyżej PageSpeed Insights. Strona Google Mobile Friendly Test pozwala sprawdzić, jak bardzo Twoja strona jest przyjazna dla urządzeń mobilnych. Idealnie, po teście powinieneś zobaczyć taki komunikat:

Typowe problemy i ich rozwiązania

Istnieje kilka problemów, które mogą utrudniać korzystanie ze strony na urządzeniach mobilnych. Nie wszystkie z nich są wykrywane automatycznie przez test Google, więc sam też zwracaj na nie uwagę.

• Nieczytelny tekst: Tekst, który jest zbyt mały, by go przeczytać bez powiększania, może zniechęcić użytkowników. Odpowiednia wielkość czcionki jest kluczowa dla pozytywnych wrażeń na urządzeniach mobilnych.

• Elementy klikalne zbyt blisko siebie: Przyciski i linki umieszczone zbyt blisko siebie mogą prowadzić do przypadkowych kliknięć. Rozsuń je, by uniknąć frustracji użytkowników.

• Treść szersza niż ekran: Użytkownicy powinni móc poruszać się po stronie bez konieczności przewijania w poziomie, bo to uciążliwe na małych ekranach. Upewnij się, że elementy na stronie nie są szersze niż ekran, by przewijanie poziome nie było możliwe ani konieczne.

• Dużo wyskakujących okienek: Alerty i okienka dialogowe, które pojawiają się automatycznie, mogą negatywnie wpływać na doświadczenie użytkownika, zwłaszcza na urządzeniach mobilnych. Czasem nie da się ich uniknąć (np. banery cookies), więc stosuj te zasady, by były jak najbardziej przyjazne:

  • Okienka powinny być łatwe do zamknięcia, więc nie używaj malutkiego przycisku „X”, w który trudno trafić na smartfonie.

  • Okienka powinny pojawiać się od razu po załadowaniu strony, jeśli to możliwe. Nie ma nic bardziej irytującego niż próba kliknięcia linku, gdy nagle wyskakuje okienko i przypadkowo klikasz w nie.