Jak sprawić, by Twoja witryna ładowała się szybko na urządzeniach mobilnych (2022)

Wydajność Twojej witryny na urządzeniach mobilnych jest teraz ważniejsza niż na komputerach stacjonarnych.

Dzieje się tak, ponieważ więcej osób korzysta z telefonów komórkowych, aby uzyskać dostęp do Internetu, niż osób korzystających z komputerów stacjonarnych.

Według StatCounter ponad 50% internautów na całym świecie korzysta z urządzeń mobilnych. Podczas gdy tylko nieco ponad 47% korzysta z komputerów stacjonarnych.

Jeśli optymalizujesz swoją witrynę głównie pod kątem komputerów, szkodzisz sukcesowi swojej firmy. Mobilność jest teraz ważniejsza niż kiedykolwiek.

To, jak Twoja witryna działa na urządzeniach mobilnych, jest bardzo ważne dla SEO. Podejście Google to teraz indeksowanie zoptymalizowane pod kątem urządzeń mobilnych. Oznacza to, że Google używa mobilnej wersji strony internetowej do indeksowania i rankingu.

Jeśli Twoja witryna działa szybko na komputerach stacjonarnych i wolno na urządzeniach mobilnych, ucierpi na tym Twój ranking. Wydajność Twojej witryny na urządzeniach mobilnych powinna być ważniejsza niż jej wydajność na komputerach.

Szybkie ładowanie witryny na urządzeniach mobilnych poprawi SEO, zmniejszy współczynnik odrzuceń i zwiększy konwersję.

Jednak optymalizacja witryny pod kątem szybkości na urządzeniach mobilnych nie jest tak łatwa, jak optymalizacja witryny pod kątem szybkości na komputerach stacjonarnych. Na szczęście ten artykuł może pomóc w szybkim ładowaniu witryny na urządzeniach mobilnych, jeśli zastosujesz się do wskazówek, które tutaj wymieniłem.

Testowanie szybkości witryny

Pierwszą rzeczą, którą powinieneś zrobić, to przetestować szybkość swojej witryny na urządzeniach mobilnych. Dzięki temu uzyskasz jasny obraz tego, jak szybka lub wolna jest Twoja witryna.

To, że Twoja witryna ładuje się szybko na komputerze, nie gwarantuje, że szybko się wczytuje na urządzeniach mobilnych. Twoja witryna może działać bardzo szybko na komputerach, ale bardzo wolno na urządzeniach mobilnych.

Istnieje wiele narzędzi do testowania urządzeń mobilnych, ale wolę używać narzędzia Test My Site firmy Google do testu szybkości urządzeń mobilnych.

Po prostu odwiedź ThinkWithGoogle i wprowadź adres URL swojej witryny. Powinieneś być w stanie przetestować szybkość swojej witryny.

Dla mnie wystarczy strona, która ładuje się w ciągu 3 sekund. Ale Think With Google zaleca co najmniej 2,4 sekundy.

Jak sprawić, by Twoja witryna ładowała się szybko na urządzeniach mobilnych

Oto sprawdzone metody przyspieszenia witryny na urządzeniach mobilnych:

Użyj responsywnego motywu

Motyw responsywny to motyw, który dostosowuje się do wszystkich urządzeń. Oznacza to, że nawet jeśli Twoi użytkownicy pochodzą z komputera stacjonarnego, telefonu komórkowego lub tabletu, Twój motyw będzie im wyświetlał wersję Twojej witryny, która pasuje do używanego przez nich urządzenia.

Udostępnianie komputerowej wersji witryny użytkownikom mobilnym spowolni czas ładowania. I to jest straszne dla doświadczenia użytkownika.

Korzystanie z responsywnego motywu jest bardzo ważne. Jest to pierwszy fundament szybkiej strony internetowej na urządzeniach mobilnych. Istnieje kilka responsywnych motywów, z których możesz wybierać. Przeczytaj moją listę 10 najszybszych i najlepszych motywów WordPress, każdy z wymienionych tam motywów jest wystarczająco dobry i responsywny.

Użyj szybkiego hosta internetowego

Twój host internetowy odgrywa najważniejszą rolę w przyspieszeniu Twojej witryny. Bardzo szybki host internetowy z najnowszymi technologiami hostingowymi sprawi, że Twoja witryna będzie szybko ładować się na urządzeniach mobilnych.

Jeśli masz powolnego hosta internetowego, bez względu na to, jak zoptymalizowasz swoją witrynę, możesz nie zauważyć znaczącej poprawy.

Polecam Cloudways i Kinsta dla uznanych stron internetowych. TargetTrend jest hostowany w Cloudways. Dla początkujących stron polecam Bluehost.

Użyj AMP

Accelerated Mobile Pages (AMP) to projekt Google mający na celu przyspieszenie stron internetowych na urządzeniach mobilnych.

AMP jest zoptymalizowany pod kątem przeglądania na urządzeniach mobilnych i może znacznie przyspieszyć ładowanie witryny. Według badań może również zmniejszyć liczbę wniosków o ponad 77%.

Możesz zacząć korzystać z AMP, instalując oficjalną wtyczkę AMP. Istnieją inne wtyczki AMP, możesz z nich również korzystać.

Po aktywacji wtyczki możesz wybrać dowolny z trzech dostępnych trybów. Jeśli większość użytkowników pochodzi z urządzeń mobilnych, rozważ skorzystanie z trybu przejściowego lub standardowego. Ale Twój motyw musi być zgodny z AMP.

Lazy ładuj obrazy

Obrazy mogą spowolnić działanie witryny, zwłaszcza na urządzeniach mobilnych. Najlepszym sposobem ich obsługi jest załadowanie ich, gdy użytkownicy przewiną do niego. W ten sposób ładują się tylko wtedy, gdy są potrzebne, a zatem mają niewielki lub żaden wpływ na czas ładowania.

Jeśli spróbujesz przetestować swoją witrynę za pomocą informacji PageSpeed ​​lub Web.dev i otrzymasz ostrzeżenie, aby „odłożyć obrazy poza ekranem”, oznacza to, że obrazy spowalniają czas ładowania i powinieneś rozważyć ich leniwe ładowanie.

Lazing ładowania obrazów polega na opóźnianiu ładowania obrazów, dopóki użytkownik nie przewinie do nich. Może to poprawić prędkość.

Istnieje wiele wtyczek do obsługi leniwego ładowania. Większość wtyczek pamięci podręcznej i wtyczek do optymalizacji obrazu ma opcje leniwego ładowania.

Wyeliminuj zasoby blokujące renderowanie

Wyeliminowanie zasobów blokujących renderowanie może przyspieszyć ładowanie witryny na urządzeniach mobilnych.

Zwykle istnieją skrypty Java i CSS, które utrudniają przeglądarce szybkie renderowanie witryny, gdy użytkownik ją odwiedza. Dzieje się tak, ponieważ przeglądarka musi zatrzymać się i odczytać te pliki, zanim będzie mogła wyświetlić witrynę użytkownikowi.

Wyeliminowanie tych zasobów może przyspieszyć czas ładowania. Istnieją wtyczki, takie jak Autooptimize, które mogą pomóc wyeliminować zasoby blokujące renderowanie.

Mam pomocny artykuł na ten temat, powinieneś przeczytać: Jak wyeliminować zasoby blokujące renderowanie w WordPressie.

Usuń nieużywany CSS

Posiadanie wielu nieużywanych CSS może spowolnić działanie witryny. Nieużywane CSS to CSS, które nie są potrzebne do załadowania strony internetowej. Ale ponieważ są obecne, przeglądarka nadal musi je pobierać, analizować i przetwarzać.

Istnieją wtyczki, takie jak Perfmatters i Asset CleanUp, które mogą pomóc w usunięciu nieużywanego kodu CSS.

Napisałem na ten temat prosty przewodnik: Jak usunąć nieużywane CSS i JS w WordPressie.

Generuj krytyczny CSS

Krytyczny CSS służy do łatwego wyodrębniania zawartości strony widocznej na ekranie w celu szybkiego renderowania jej dla użytkownika. Posiadanie krytycznej ścieżki CSS może przyspieszyć czas ładowania Twojej witryny na urządzeniach mobilnych i stacjonarnych.

Istnieją wtyczki, które mogą pomóc w generowaniu krytycznego CSS. WP Rocket może to zrobić, LiteSpeed ​​Cache i WP Performance mogą również generować krytyczny CSS.

Miej dobry system buforowania

Buforowanie to bardzo niezawodny sposób na przyspieszenie strony internetowej. Powinieneś użyć skutecznej wtyczki do buforowania, aby wyświetlać zawartość z pamięci podręcznej użytkownikom mobilnym. WP rocket to wtyczka do buforowania premium, która jest bardzo skuteczna. W3 Całkowita pamięć podręczna, jeśli jest dobrze skonfigurowana, może być bardzo skuteczna.

Większość zarządzanych firm hostingowych oferuje buforowanie na poziomie serwera. Dowiedz się, czy Twój usługodawca hostingowy oferuje to samo i poproś go o aktywację dla Twojej witryny, jeśli nie jest po wyjęciu z pudełka.

Możesz poprosić swojego hosta o zainstalowanie i aktywację pamięci podręcznej Varnish. Pamięć podręczna lakieru znana jest z przyspieszania stron internetowych.

Optymalizuj obrazy

Upewnij się, że kompresujesz obrazy. Wolę całkowicie skompresować obrazy przed ich przesłaniem. Istnieje jednak wiele wtyczek, takich jak optimole i inne, które mogą pomóc w kompresji obrazów w WordPressie.

Udostępnianie obrazów WebP może również pomóc w zwiększeniu szybkości witryny. WebP są mniejsze niż JPG i PNG, dlatego są bardziej przyjazne dla szybkości.

Istnieje wiele wtyczek, które mogą pomóc w konwersji i wyświetlaniu obrazów WebP. Optimole i obrazy latające mogą to zrobić bardzo dobrze.

Zminimalizuj kod

Minifikacja to proces kompresji kodu strony internetowej z większego do mniejszego rozmiaru. Im mniejszy, tym lepiej, o ile niczego nie złamie.

Powinieneś rozważyć zminimalizowanie JS i CSS.

Większość wtyczek do buforowania oferuje funkcje minifikacji. Ale upewnij się, że używasz testowania do testowania, ponieważ minifikacja jest znana z łamania stron internetowych.

Zminimalizuj przekierowania

Zbyt wiele przekierowań może spowolnić działanie Twojej witryny, zwłaszcza na urządzeniach mobilnych. Może spowolnić czas odpowiedzi serwera.

Upewnij się, że nie masz zbyt wielu przekierowań. Jeśli tak, zmniejsz je tak bardzo, jak możesz.

Włącz kompresję

Kompresuj pliki, aby Twoja witryna była szybka na urządzeniach mobilnych. Im mniejsze rzeczy, tym szybsza będzie Twoja witryna.

Gzip lub Brotli mogą znacznie zwiększyć szybkość Twojej witryny, kompresując pliki witryny. Ogólnie Brotli jest lepszy niż Gzip. Ale każdy z nich będzie działał dobrze. Skontaktuj się z usługodawcą hostingowym, aby włączyć kompresję.

Istnieją również wtyczki, które mogą pomóc w włączeniu kompresji, jeśli rozwiązanie wtyczki jest dla Ciebie bardziej odpowiednie.

Zmniejsz liczbę AdSense na stronę

Google AdSense jest jednym z najpopularniejszych sposobów zarabiania na blogach, ale wiadomo również, że znacznie spowalnia strony internetowe.

Z moich obserwacji, jeśli dezaktywujesz AdSense, od razu zauważysz bardzo dużą różnicę w czasie ładowania.

Ale pieniądze są bardzo ważne, podobnie jak szybkość. Musisz więc dojść do kompromisu. Google zaleca 3 jednostki reklamowe na stronę. Jeśli będziesz się tego trzymać, powinieneś być w porządku.

Zauważyłem, że jednostki z dopasowaną treścią i reklamy na poziomie strony mają najbardziej negatywny wpływ na czas wczytywania na urządzeniach mobilnych.

Użyj CDN

Sieć dostarczania treści może pomóc zwiększyć szybkość Twojej witryny, tworząc statyczną kopię witryny i udostępniając ją użytkownikom na całym świecie z lokalizacji bliżej nich, gdy próbują odwiedzić Twoją witrynę.

Jeśli nie korzystasz z CDN, tracisz!.

Sprawdź najlepszych dostawców CDN WordPress.

Użyj czcionki stosu systemowego

Ostatnio próbowałem przyspieszyć ładowanie tej strony na urządzeniach mobilnych. Postanowiłem więc przestać używać czcionki Google i wypróbowałem stos systemowy, i ku mojemu zdziwieniu nastąpiła znaczna poprawa szybkości.

Czcionki Google i czcionki są niesamowite, ale mogą spowolnić działanie witryny. Korzystanie ze stosu systemowego zapewnia, że ​​nie są wysyłane żadne żądania zewnętrzne, ponieważ potrzebna jest czcionka dowolnego urządzenia, z którego korzysta użytkownik.

Niektóre motywy ułatwiają zmianę na stos systemowy. Po prostu przełącz się na stos systemowy.

Korzystaj z nowszych wersji PHP

Nowsze wersje PHP są zazwyczaj szybsze niż starsze. Powinieneś upewnić się, że korzystasz z najnowszej wersji PHP lub tylko jednej wersji wstecz.

Nie tylko ze względu na szybkość, ale także bezpieczeństwo.