Jak przyspieszyć ładowanie strony dzięki prostej optymalizacji witryny?
Opublikowany: 2022-07-02Szybkość strony może sprawić, że będziesz w Internecie.
Szybsze wczytywanie strony zwykle oznacza ogólnie lepsze wyniki dla szybkości witryny. Każdy aspekt sukcesu witryny jest powiązany z szybkością strony, od SEO po konwersje, doświadczenie użytkownika i nie tylko.
Od dostawcy hostingu, którego wybierzesz, po aplikację, z którą zdecydujesz się pracować, istnieje wiele obszarów, które można zoptymalizować. Przy tak wielu obszarach do rozważenia poprawa szybkości strony może być złożonym procesem. Nauczenie się, jak zoptymalizować czas ładowania strony internetowej w łatwy do wdrożenia sposób, ma kluczowe znaczenie dla sukcesu.
Co więc możesz zrobić, aby upewnić się, że jesteś zoptymalizowany? Przyjrzyjmy się kilku sposobom na przyspieszenie strony internetowej, przyspieszeniu czasu ładowania strony i innym sprawdzonym metodom dotyczącym czasu ładowania strony i zwiększania jej szybkości.
Dlaczego czas wczytywania strony ma znaczenie
Zanim przejdziemy do tego, jak przyspieszyć czas ładowania strony, najpierw zrozummy, dlaczego jest to tak ważne.
Google po raz pierwszy ogłosił, że szybkość witryny wpłynie na ranking w 2010 roku i nadal demonstruje swoje znaczenie. W 2018 r. Google wprowadził szybkość strony jako czynnik rankingowy szybkości witryny mobilnej.
Specjaliści SEO szybko zaczęli próbować zoptymalizować elementy na stronie i zredukować wyszukiwarkę. Te, które nie zostały w tyle. A teraz, dzięki niedawno ogłoszonym kluczowym elementom sieciowym, szybkość jest bardziej istotna niż kiedykolwiek.
Chcesz dowiedzieć się więcej o tym, jak poprawić szybkość ładowania strony? Oto kilka kluczowych obszarów do rozważenia.
Znaczenie szybkości strony
Czas ładowania strony zawsze był ważny z dość oczywistego powodu: konwersji. Mówiąc najprościej, szybkie witryny zwiększają konwersje, a wolne witryny je zmniejszają.
W rzeczywistości poprawa szybkości witryny mobilnej o 0,1 sekundy powoduje wzrost współczynnika konwersji dla firm detalicznych o 8,4%, jak Google stwierdził w badaniu z 2020 roku.
Szybkość witryny wpływa również na współczynnik odrzuceń. Gdy użytkownicy napotykają powolną witrynę, opuszczają ją. Dwusekundowe opóźnienie w czasie ładowania strony może zwiększyć współczynnik odrzuceń witryny o 103%, wynika z raportu firmy Akamal Technologies.
Testowanie czasu wczytywania strony
Aby uzyskać migawkę swojej witryny i utworzyć testy porównawcze przed i po procesie optymalizacji, pierwszą rzeczą, którą będziesz chciał zrobić, jest przetestowanie bieżącej szybkości strony. Kilka narzędzi, od których możesz zacząć, to Google Page Speed Insights i Webpagetest.org.
Upewnij się, że wykonałeś wiele testów i uśredniłeś swoje wyniki. Test strony internetowej pozwala to zrobić automatycznie w menu ustawień. Zawsze dobrze jest wybrać lokalizację testową, która znajduje się blisko miejsca, w którym hostowana jest Twoja witryna, aby zapewnić najdokładniejsze wyniki.
W ten sposób zwykle konfigurujemy webpagetest.org do podstawowych kontroli prędkości.
Poniżej możesz zobaczyć uśrednione wyniki testu szybkości strony na stronie demonstracyjnej Magento. Wybraliśmy trzy najważniejsze i najważniejsze statystyki, które chcemy wykorzystać do optymalizacji witryny.
Czas ładowania | Czas na pierwszy bajt | Bajty In |
2.264s | 0,318s | 927 KB |
Pierwsza statystyka to czas ładowania. To pokazuje nam całkowity czas potrzebny do załadowania naszej strony. Pamiętaj, że jeśli strona ładuje się dłużej niż trzy sekundy, możesz tracić połowę potencjalnego ruchu. Ta liczba jest dla nas najważniejsza do zmiany.
Druga statystyka to Time To First Byte (TTFB). Chociaż może pomóc w dostarczeniu wskazówek, TTFB można stosunkowo łatwo manipulować, a jego znaczenie może się różnić. Jeśli korzystasz z Google Lighthouse, możesz również śledzić Pierwsze treściwe malowanie i Pierwsze znaczące malowanie, które informują o tym, jak szybko Twoja strona „maluje” ekran elementami treści.
Czy kiedykolwiek załadowałeś przepis, a połowa nie nadążyła za szybkością przewijania, ponieważ próbujesz ominąć wszystkie reklamy i narrację? To dlatego, że czas FCP/FMP jest bardzo wolny.
Trzecia statystyka to rozmiar informacji pobieranych na stronę. Jeśli ta liczba jest bardzo duża, warto przyjrzeć się bliżej, jak długo zajmują różne elementy strony.
Wodospad szybkości strony
Jeśli chcesz dowiedzieć się, jak przyspieszyć czas ładowania strony, odizoluj, które elementy spowalniają jej działanie, i spójrz na wodospad. Przykład tego, jak wygląda wodospad, można zobaczyć poniżej.
Gdy spojrzysz na wodospad, powinieneś mieć lepsze pojęcie o tym, co można poprawić. Powyżej widzimy, że niektóre frontendowe pliki .js mogą zostać nieco przyspieszone.
Poniżej wodospadu (poza stroną) znajdują się również pliki graficzne, których ładowanie trwa dłużej i należy je zoptymalizować. Zrozumienie, jakie elementy powodują opóźnienia stron, jest kluczowe, gdy skupiasz się na szybszym czasie ładowania strony.
Jak przyspieszyć ładowanie strony za pośrednictwem treści internetowych?
Kompresuj i optymalizuj obrazy
Patrząc na to, jak przyspieszyć czas ładowania strony, kompresja obrazu jest świetnym miejscem do rozpoczęcia. Zbyt często projektanci stron internetowych tworzą obrazy o niepotrzebnie wysokiej rozdzielczości. Obrazy o wysokiej rozdzielczości zajmują więcej miejsca na serwerze i mogą znacznie wydłużyć czas ładowania.
Zdecydowanie zalecamy odpowiednie skalowanie obrazów. Jeśli obraz w Twojej witrynie ma zajmować tylko obszar 100 x 100 pikseli, nie ma potrzeby, aby był to 1000 x 1000. Zalecamy wtyczkę, taką jak Smush lub EWWW Image Optimizer, jeśli prowadzisz witrynę WordPress.
Jak przekonwertować obrazy WebP na WordPress >>
Rozszerzenia typu obrazu
Podczas zapisywania obrazów ważna jest wiedza, którego rozszerzenia użyć. Czy powinien to być .jpg czy .png? Czy ktoś wysłał Ci logo w formacie .svg? Istnieje wiele sprzecznych informacji na temat tego, co jest najlepsze.
Wielu twierdzi, że .png (przenośna grafika sieciowa) jest lepszym rozwiązaniem, ponieważ jest przeznaczony do kompresji obrazów w jak największym stopniu bez utraty jakości. To częściowo prawda. Biorąc to pod uwagę, są wyjątki od reguły. Na przykład pliki .JPEG działają znacznie lepiej podczas korzystania ze zdjęć.
Naszą sugestią jest sprawdzenie, jak zapisanie pliku na kilka różnych sposobów wpływa na rozmiar i jakość podczas wyświetlania na podglądzie Twojej strony. Jeśli zauważysz wyraźną różnicę, wybierz lepsze rozszerzenie.
Kompresuj zawartość witryny
Obrazy to nie jedyne elementy strony, które wymagają ściśnięcia. Powinieneś także kompresować elementy CSS, HTML i JavaScript w swojej witrynie. GZip to wysoce zalecane narzędzie do kompresji, które Google sugeruje, aby przetestować przed wdrożeniem w środowisku produkcyjnym. Zalecamy korzystanie ze środowiska Dev Site, które naśladuje własne środowisko produkcyjne, jeśli planujesz to zrobić.
Kompresowanie zawartości witryny polega na tym, że istnieją pewne dowody na to, że może to nieznacznie wydłużyć czas trwania Time To First Byte. Jednak znacznie zwiększa ogólny czas ładowania strony, co niektórzy eksperci SEO sugerują, że Google może faktycznie traktować priorytetowo. Zalecamy testowanie kompresji na poszczególnych stronach zamiast przełączania w całej witrynie.
Uprość projektowanie stron internetowych
Jeśli chcesz skrócić czas ładowania strony, mniej znaczy prawie zawsze więcej. Zamiast dodawać dodatkowe funkcje do podstawowych stron, co powiesz na coś prostszego i szybszego? Im mniej żądań HTTP ma strona, tym szybciej zwykle się ładuje.
Oprócz poprawy szybkości strony, w wielu przypadkach wykazano również, że proste projektowanie stron internetowych poprawia wrażenia użytkownika. W badaniu UX przeprowadzonym przez Google stwierdzono, że użytkownicy mają tendencję do oceniania estetyki witryny w ciągu 1/50 do 1/20 sekundy, a wizualnie złożone witryny prawie zawsze były oceniane jako mniej piękne niż ich prostsze odpowiedniki.
Im piękniejsza strona jest postrzegana, tym lepszy będzie UX i SEO, tym więcej konwersji wzrośnie. Prostszy projekt strony internetowej to jedna z najszybszych metod poprawy szybkości strony w krótkim czasie. Zalecamy jednak przeprowadzanie testów A/B, aby zobaczyć, jak faktycznie działają zmiany, zamiast od razu dokonywać 100% zmiany.
Jak przyspieszyć ładowanie strony przez hosta?
Twój host odgrywa również dużą rolę w czasie ładowania strony. Oto kilka sposobów na przyspieszenie czasu ładowania strony na Twoim hoście.
Włącz buforowanie
Buforowanie polega na tym, że wielokrotni odwiedzający mogą załadować witrynę znacznie szybciej dzięki elementom strony przechowywanym na dysku twardym w pamięci podręcznej lub pamięci tymczasowej. W przypadku witryn WordPress i WooCommerce wykorzystujemy pamięć podręczną obiektów Redis do zarządzania funkcjami buforowania. Będzie to wstępnie zainstalowane i wstępnie skonfigurowane po zakupie planu hostingowego zoptymalizowanego pod kątem WordPressa za pośrednictwem Nexcess.
Aby jeszcze bardziej zoptymalizować szybkość strony, Nexcess Cloud umożliwia korzystanie z akceleratora chmury. Można to łatwo włączyć i wyłączyć za pomocą kliknięcia przycisku w sekcji wydajności w Portalu Klienta.
Nie jesteś pewien, czy powinieneś włączyć Varnish czy NGINX? Dowiedz się więcej o różnicy między lakierem a NGINX w naszym Ostatecznym przewodniku po optymalizacji Magento 2.
Buforowanie i CDN
Buforowanie z włączoną siecią CDN (Content Delivery Network) jest bardziej skomplikowanym procesem i może wymagać zaawansowanej konfiguracji. Jednak właściwa konfiguracja pamięci podręcznej z CDN może pomóc w dotarciu do tej globalnej publiczności, tak jakbyś był z lokalnym hostem.
Dlaczego potrzebujesz WordPress CDN >>
W przypadku WordPress i WooCommerce zapoznaj się z naszym przewodnikiem, jak skonfigurować Nexcess CDN za pomocą WordPress i CDN Enabler.
Inne obszary do rozważenia
Którą stronę optymalizujesz?
Struktura Twojej witryny ma ogromne znaczenie, jeśli chodzi o optymalizację. Ważne jest, aby zastanowić się, którą stronę optymalizujesz i jak ma to związek z ogólną strukturą witryny. Jeśli zaktualizujesz jedną stronę, należy również wziąć pod uwagę strony, z którymi wchodzi w interakcję.
Na przykład nie jest nam pomocna po prostu optymalizacja Nexcess.net, musimy również zoptymalizować Nexcess.net/magento/hosting i Nexcess.net/cloud/hosting.
Zanim rozpoczniesz ten proces, opracuj plan, które kluczowe strony generują najwięcej konwersji i generują największy zwrot z inwestycji. Zacznij tutaj, aby uzyskać jak największy wpływ.
Szybkość strony i SEO
Chociaż szybkość strony i SEO są ze sobą nierozerwalnie powiązane, nie popełnij błędu, że nie jest to decydujący czynnik określający pozycję strony. Sam Google powiedział, że jeśli treść jest bardziej odpowiednia, a ludzie chcą poczekać na jej załadowanie, nie będą karać tej witryny.
Ostatecznie szybkość strony jest ważną częścią optymalizacji, ale treść, jakość i wrażenia użytkownika powinny zawsze być głównym celem.
Przyspiesz czas ładowania z odpowiednim hostem
Przeszliśmy długą drogę od oczekiwania na wczytanie obrazów linia po linii. Szybkość strony to nie tylko coś, na co narzekają konsumenci — może również powodować lub łamać konwersje, rankingi i nie tylko. Robienie wszystkiego, co możesz, aby zwiększyć szybkość strony, jest ZAWSZE dobrym pomysłem.
Jeśli inwestujesz czas i wysiłek w skrócenie czasu ładowania strony, chronisz swój cyfrowy biznes. Dopasuj swój kapitał potu do inteligentnych inwestycji. Zrób następny krok, wybierając host, który ma sprawdzoną skalowalność, bezpieczeństwo, szybkość i wsparcie — taki jak Nexcess.
Nexcess zapewnia w pełni zarządzany hosting WordPress, który obejmuje:
- Automatyczne aktualizacje.
- SSL dla bezpieczeństwa.
- Wbudowana sieć CDN.
- Kompresja obrazu.
- Buforowanie.
- I więcej!
Przekonaj się sam, korzystając z dwutygodniowego bezpłatnego okresu próbnego.
powiązana zawartość
- Jak szybkość strony wpływa na SEO
- 5 zaawansowanych technik przyspieszających działanie witryny WordPress
- Jak zwiększyć szybkość witryny WooCommerce i uniknąć powolnych zapytań?
- Najlepsze hacki dotyczące rozmiaru obrazu WooCommerce, aby Twoja witryna była szybka
- Co to jest sieć dostarczania treści (CDN)?
- 7 najszybszych motywów WordPress
- Dlaczego potrzebujesz CDN? | Niezbędna rozmowa o technologii
Ten blog został pierwotnie opublikowany w lipcu 2018 r. Od tego czasu został zaktualizowany pod kątem dokładności i kompleksowości.