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

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

Dzieje się tak dlatego, że więcej osób korzysta z urządzeń mobilnych, aby uzyskać dostęp do Internetu, niż osób korzystających z komputerów stacjonarnych.

Zgodnie z StatCounterponad 50% użytkowników Internetu 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 stacjonarnych, szkodzisz sukcesowi swojej firmy. Urządzenia mobilne są teraz ważniejsze niż kiedykolwiek.

To, jak Twoja witryna działa na urządzeniach mobilnych, jest bardzo ważne SEO. Podejście Google jest teraz indeksowanie na komórki. Oznacza to, że Google wykorzystuje mobilną wersję witryny 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 stacjonarnych.

Szybkie ładowanie Twojej witryny na urządzeniach mobilnych poprawi Twoje 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ł pomoże Ci przyspieszyć ładowanie Twojej witryny na urządzeniach mobilnych, jeśli zastosujesz się do wskazówek, które tutaj wymieniłem.

Testowanie szybkości Twojej witryny

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

To, że Twoja witryna ładuje się szybko na komputerze, nie gwarantuje, że będzie się szybko ładować na urządzeniu mobilnym. Może się zdarzyć, że Twoja witryna będzie działać bardzo szybko na komputerach stacjonarnych, ale bardzo wolno na urządzeniach mobilnych.

Jest wiele narzędzia do testowania urządzeń mobilnych, ale wolę korzystać z Google Przetestuj moją witrynę do mobilnego testu szybkości.

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

Dla mnie witryna ładująca się w ciągu 3 sekund jest wystarczająco dobra. Ale Think With Google zaleca co najmniej 2.4 sekundy.

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

Oto najlepsze praktyki przyspieszania 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 korzystają z komputerów stacjonarnych, telefonów komórkowych lub tabletów, Twój motyw udostępni im wersję Twojej witryny pasującą do dowolnego urządzenia, z którego korzystają.

Udostępnienie wersji desktopowej witryny użytkownikom mobilnym spowolni czas ładowania. I jest to okropne dla doświadczenia użytkownika.

Korzystanie z responsywnego motywu jest bardzo ważne. To pierwszy fundament szybkiej strony internetowej na urządzenia mobilne. Możesz wybierać spośród kilku responsywnych motywów. Przeczytaj moją listę Top 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 hosting odgrywa najważniejszą rolę w przyspieszaniu 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 usługodawcę hostingowego, niezależnie od tego, jak zoptymalizujesz swoją witrynę, możesz nie zauważyć znaczącej poprawy.

Polecam Cloudways i Kinsta dla ustalonych stron internetowych. Trend docelowy jest hostowany w Cloudways. Dla początkujących stron polecam BlueHost.

Użyj AMP

Przyspieszone strony mobilne (AMP) to a projekt przez Google, aby przyspieszyć strony internetowe na urządzeniach mobilnych.

AMP jest zoptymalizowany pod kątem przeglądania na urządzeniach mobilnych i może znacznie przyspieszyć czas ładowania witryny. Może też zmniejszyć liczbę żądań Według badania o ponad 77%.

Możesz rozpocząć korzystanie z AMP, instalując plik oficjalna wtyczka AMP. Są inne AMPy wtyczki, Ty też możesz z nich skorzystać.

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

Leniwe ładowanie obrazów

Obrazy mogą spowalniać witrynę, zwłaszcza na urządzeniach mobilnych. Najlepszym sposobem poradzenia sobie z nimi jest załadowanie ich, gdy użytkownicy przewiną do nich. W ten sposób będą ładowane tylko wtedy, gdy zajdzie taka potrzeba, a zatem będą miały niewielki lub żaden wpływ na czas ładowania.

Jeśli spróbujesz przetestować swoją witrynę na Informacje o PageSpeed or Web.dev i zostaniesz ostrzeżony, aby „odłożyć obrazy poza ekranem”, oznacza to, że obrazy spowalniają czas ładowania i powinieneś rozważyć leniwe ładowanie ich.

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

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

Wyeliminuj zasoby blokujące renderowanie

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

Zwykle istnieją skrypty Java i CSS, które utrudniają przeglądarce szybkie renderowanie witryny internetowej podczas wizyty użytkownika. Dzieje się tak dlatego, że przeglądarka musi się zatrzymać 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 Autoptimize, 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 WordPress.

Usuń nieużywany CSS

Posiadanie dużej ilości nieużywanego kodu CSS może spowolnić działanie witryny. Nieużywane CSS to CSS, które nie są potrzebne do załadowania witryny. Ponieważ jednak są one obecne, przeglądarka nadal musi je pobrać, przeanalizować i przetworzyć.

Istnieją wtyczki takie jak Perfmatters i Oczyszczanie zasobów które mogą pomóc w usunięciu nieużywanego CSS.

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

Wygeneruj krytyczny CSS

Krytyczny CSS służy do łatwego wyodrębniania zawartości widocznej na ekranie i szybkiego wyświetlania jej użytkownikowi. Posiadanie krytycznej ścieżki CSS może przyspieszyć czas ładowania Twojej witryny na urządzeniach mobilnych i komputerach stacjonarnych.

Istnieją wtyczki, które mogą pomóc w wygenerowaniu krytycznego CSS. WP Rocket może to zrobić, Pamięć podręczna LiteSpeed i Wydajność WP może również generować krytyczne CSS.

Posiadaj dobry system buforowania

Buforowanie to bardzo niezawodny sposób na przyspieszenie witryny internetowej. Aby udostępniać treści z pamięci podręcznej użytkownikom mobilnym, należy używać skutecznej wtyczki buforującej. WP rocket to wysokiej jakości wtyczka do buforowania, która jest bardzo skuteczna. Całkowita pamięć podręczna W3, jeśli jest dobrze skonfigurowana, może być bardzo skuteczna.

Większość zarządzane firmy hostingowe oferują buforowanie na poziomie serwera. Dowiedz się, czy Twój usługodawca hostingowy oferuje to samo i poproś go o aktywację Twojej witryny, jeśli nie jest ona dostępna od razu po wyjęciu z pudełka.

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

Zoptymalizuj obrazy

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

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 prędkości.

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

Zminimalizuj kod

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

Powinieneś rozważyć zminimalizowanie JS i CSS.

Większość wtyczek buforujących oferuje funkcje minifikacji. Ale upewnij się, że do testów używasz testowania, ponieważ wiadomo, że minifikacja psuje strony internetowe.

Minimalizuj przekierowania

Zbyt wiele przekierowań może spowolnić Twoją witrynę, zwłaszcza na urządzeniach mobilnych. Może to spowolnić czas odpowiedzi serwera.

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

Włącz kompresję

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

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

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

Zmniejsz liczbę AdSense na stronę

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

Z moich obserwacji wynika, że jeśli wyłączysz AdSense, natychmiast zauważysz bardzo dużą różnicę w czasie ładowania.

Ale pieniądze są bardzo ważne, podobnie jak szybkość. Trzeba więc osiągnąć kompromis. Google zaleca 3 jednostki reklamowe na stronę. Jeśli będziesz się tego trzymać, wszystko powinno 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 ładowania na urządzeniach mobilnych.

Użyj CDN

A Content Delivery Network 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 bliższej im lokalizacji, gdy próbują odwiedzić Twoją witrynę.

Jeśli nie korzystasz z CDN, tracisz!.

Zapoznaj się z najlepsi dostawcy CDN WordPress.

Użyj czcionki stosu systemowego

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

Czcionki Google i czcionki niesamowite są niesamowite, ale mogą spowolnić witrynę. Używając stosu systemowego, upewnij się, ż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ą przejście na stos systemowy. Po prostu przełącz się na stos systemowy.