8 powodów, dla których Twoja strona działa wolno + jak je naprawić
Wtorek, 5 grudnia 2023
1, 2, 3 - dokładnie tyle czasu potrzeba, abyś zaczął tracić odwiedzających, jeśli masz wolno ładującą się stronę.
Wstrzymaj się! Przecież dla użytkowników liczy się tylko to, że Twoja strona działa bez zarzutu i wygląda świetnie... prawda? Nieprawda!
Faktem jest, że wszyscy przyzwyczailiśmy się do natychmiastowego dostępu do informacji i treści. Przeciętny użytkownik internetu przykłada dziś dużą wagę do szybkości, a poprzeczka jest stale podnoszona.
Jeśli jesteś jak większość ludzi, prawdopodobnie czujesz natychmiastowe poczucie strachu na myśl o optymalizacji swojej strony internetowej. Od czego zacząć? Jak dokonać najbardziej znaczących ulepszeń? Co sprawia, że Twoja strona jest powolna w pierwszej kolejności?
Nie obawiaj się, ponieważ odpowiemy na wszystkie Twoje pytania poniżej, jak również umieścimy Cię na drodze do strony internetowej, która ładuje się z prędkością pioruna.
Dobre pytanie!
Aż 53% odwiedzających porzuca stronę, której załadowanie zajmuje więcej niż 3 sekundy. Co gorsza, 1 na 3 kupujących opuści witrynę, jeśli jej ładowanie trwa dłużej niż 5 sekund.
Tak więc, wydajność odgrywa ogromną rolę w doświadczeniach użytkownika na Twojej stronie oraz w tym, czy odwiedzający pozostaną na Twojej stronie lub zostaną przekształceni w klientów.
Od pewnego czasu Google jest tego świadome. Jako wyszukiwarka, Google wie, że polecanie użytkownikom treści jest bezproduktywne, jeśli nie chcą oni pozostać na stronie, aby ją skonsumować.
Dlatego też nieustannie zwiększa rolę, jaką odgrywa wydajność przy tworzeniu rankingu stron w SERP-ach (stronach wyników wyszukiwania).
W ostatnich latach Google wprowadziło podstawowe wskaźniki internetowe (core web vitals). Są to wskaźniki, które mają nadzieję pomóc w ilościowym określeniu, jak wydajność wpływa na wrażenia użytkownika. Ogólnie rzecz biorąc, mierzą one, jak szybko, stabilnie i interaktywnie strona jest podczas ładowania. Będzie to ważniejsze niż kiedykolwiek po tym, jak Google ogłosiło aktualizację Page Experience, która rozpoczęła swoje globalne wdrażanie w czerwcu 2021 roku.
Jak zapewne wiesz, wysoka pozycja w rankingu Google jest kluczowa dla widoczności Twojej strony internetowej. Dla przykładu, 68% doświadczeń online zaczyna się od wyszukiwarki, z czego Google ma 92,7% udziału w rynku. Nawet jeśli uda Ci się wylądować na upragnionej pierwszej stronie Google, pierwsze pięć wyników uzyskuje ponad 70% wszystkich kliknięć (28% na sam pierwszy wynik).
Tak więc, podsumowując, dlaczego szybko ładująca się strona jest tak pożądana:
O.K., więc teraz, gdy wszyscy jesteśmy na tej samej stronie w odniesieniu do znaczenia wydajności witryny, spójrzmy na wspólnych problemów spowalniających witrynę + jak je naprawić.
Jako strona odpowiedzialna za udostępnianie swojej stronie internetowej na zewnątrz, usługa hostingowa może być czynnikiem make-or-break. Nie tylko należy wybrać hosta, który ma dobrą historię, jeśli chodzi o uptime i wydajność, ale także taki, który jest odpowiedni do Twoich potrzeb.
Nawet jeśli podejmiesz wszystkie kroki poniżej, aby zoptymalizować wydajność witryny, to nadal może ładować się powoli, jeśli ruch na stronie jest przytłaczająca dostępnej przepustowości lub pojemność serwera hosta. Jeśli tak się stanie, niektórzy użytkownicy mogą doświadczyć bardzo powolne czasy ładowania, uszkodzone funkcje, a nawet całkowitą niedostępność.
Dla większości osobistych, blogów lub lokalnych / małych witryn biznesowych, szanowanego dostawcy usług hostingowych, takich jak Bluehost lub GoDaddy powinien być wystarczająco dobry. Jednakże, jeśli planujesz uruchomić każdy rodzaj dużej skali, wysoki ruch webstore, portal biznesowy, lub inny rodzaj strony internetowej, będziesz chciał hosting premium, takich jak WPEngine (dla WordPress), VPS hosting, a nawet dedykowany serwer.
Jak zapewne wiesz, media, takie jak zdjęcia i filmy zajmują znacznie więcej miejsca niż większość innych rodzajów treści, takich jak tekst, kod, arkusze stylów lub innych plików statycznych. Nawet pojedynczy obraz może potencjalnie zawierać więcej danych niż dziesiątki stron internetowych zawierających jedynie HTML i tekst.
W prezentacji Speed Essentials, zespół Google zidentyfikował obrazy jako największy czynnik przyczyniający się do wagi strony. W rzeczywistości mają one potencjał, aby pochłonąć cały budżet wydajności witryny, jeśli nie zostaną zoptymalizowane. Obrazy mogą również bezpośrednio wpływać na wszystkie trzy podstawowe wskaźniki Google dotyczące witryn internetowych - kluczowe metryki, których Google używa do pomiaru wydajności witryny.
Jednak wykorzystanie obrazów i wideo będzie prawdopodobnie nadal rosło, zwiększając znaczenie znalezienia zrównoważonego rozwiązania. Według HTTPArchive, liczba obrazów wzrosła o 19,3% na desktopach i 42,7% na urządzeniach mobilnych.
W chwili obecnej i w najbliższej przyszłości, optymalizacja obrazów niesie ze sobą największy potencjał poprawy wydajności.
Problem polega na tym, że optymalizacja zasobów graficznych wymaga wielu kroków. Najważniejszy z nich to:
Jak widzisz, ręczne przechodzenie przez te kroki dla każdego obrazu na Twojej stronie może być niezwykle pracochłonne. Jest to szczególnie prawdziwe, jeśli weźmiesz pod uwagę, że w jakiś sposób musisz stworzyć optymalne warianty dla różnych użytkowników w oparciu o to, z jakiego urządzenia, systemu operacyjnego lub przeglądarki korzystają.
Strategie in-code, takie jak pluginy JS, responsywne obrazy, czy zapytania o media CSS mają tendencję do rozdęcia Twojego kodu i prowadzą do innych problemów z wydajnością, które omówimy poniżej.
Na szczęście, istnieje wiele usług CDN zaprojektowanych specjalnie w celu zapewnienia pewnego stopnia automatycznej optymalizacji obrazów. Platformy te analizują kontekst (tj. konkretny model urządzenia mobilnego, wersję systemu operacyjnego i wersję przeglądarki) użytkownika próbującego załadować jeden z twoich obrazów i próbują zaserwować mu wersję obrazu, która jest dla niego idealnie zoptymalizowana.
Jednak wszystkie platformy optymalizacji mediów nadal wymagają zainstalowania małej wtyczki JavaScript, aby radykalnie poprawić możliwości optymalizacji obrazów i wideo.
Jedynym wyjątkiem jest tutaj ImageEngine. ImageEngine używa WURFL device-detection, aby wychwycić każdy możliwy szczegół urządzenia użytkownika. Logika jest wbudowana w ich urządzenia-aware serwerów brzegowych i nie opiera się na dodawaniu dodatkowego kodu lub znaczników do stron internetowych.
Tak więc, nie tylko zmniejsza obciążenie obrazów nawet o 80% i serwuje je przez globalną sieć CDN, ale nie pozostawia śladu w kodzie Twojej strony. Jako bonus, to również dzieje się, aby wspierać najszerszy zakres formatów obrazu / wideo, w tym animowane GIF-y, jak również podpowiedzi klienta i zapisać tryb danych.
JavaScript jest dziś de facto językiem programowania służącym do dodawania interaktywności i zaawansowanych funkcji do stron internetowych. Podobnie, CSS jest standardem dla dodawania stylizacji. Oba są krytycznymi komponentami dla prawie każdej nowoczesnej strony internetowej.
Jednakże, nic co dobre nie przychodzi za darmo, a oba mogą wpłynąć na wydajność Twojej strony, szczególnie gdy są używane nierozważnie.
Poniżej przedstawiamy kilka kroków, które możesz podjąć, aby zminimalizować wpływ tych zasobów na wydajność Twojej strony:
Ponieważ media mogą mieć bardziej znaczący wpływ na wagę strony, prowadzi to niektórych do przekonania, że dodanie większej ilości JavaScript jest mniejszym złem.
Jednak w zależności od tego, czy masz już JS blokujący renderowanie, Google może oznaczyć to jako zupełnie nowy problem. Niezależnie od tego, będzie to miało negatywny wpływ na Twój wynik wydajności w narzędziach takich jak PageSpeed Insights:
Możesz uniknąć tego całkowicie używając silnika optymalizacyjnego jak ImageEngine, który nie wymaga żadnego JavaScript.
CDN to sieć serwerów rozmieszczonych w różnych regionach na całym świecie. Co to w zasadzie robi, to przechowywać kopię swojej strony internetowej na każdym z tych serwerów. Kiedy internauta odwiedza Twoją stronę, CDN automatycznie serwuje Twoją stronę z najbliższego serwera do tego użytkownika.
To, co to robi, to pozwolić, aby Twoja strona ładuje się szybciej, bez względu na to, gdzie na świecie ludzie odwiedzają go z. Jeśli Twoja strona była umieszczona tylko na jednym serwerze, powiedzmy gdzieś w USA, to ładowanie strony dla odwiedzającego znajdującego się w Azji może trwać znacznie dłużej niż dla odwiedzającego znajdującego się w USA.
Chociaż wszystkie one w zasadzie robią to samo, różne CDN są lepsze w obsłudze różnych typów treści. Cloudflare, Fastly i Akamai to tylko niektóre z najpopularniejszych sieci CDN ogólnego przeznaczenia. Image CDNs jak ImageEngine są specjalnie zbudowane, aby nie tylko służyć obrazów i aktywów wideo, ale także do ich optymalizacji przy użyciu kompresji, formatowania, itp.
Tak więc, dwa główne czynniki, które należy rozważyć to rodzaj treści, które chcesz dostarczyć za pośrednictwem CDN i jego globalnego zasięgu. Jednak zazwyczaj możliwe jest użycie wielu CDN w tandemie, aby pokryć różne rodzaje treści i dotrzeć do szerszego obszaru.
Jeśli masz stronę internetową z dowolnym rodzajem złożoności, prawdopodobnie masz odpowiednią bazę danych. W rzeczywistości wszystkie witryny WordPress wymagają bazy danych do działania.
Z biegiem lat, wiele informacji porusza się w i z bazy danych. Czasami dane mogą się zgubić po drodze lub stać się nieaktualne. Jeśli nie regularnie wiosna-czyścić swoją bazę danych, to może to naprawdę zacząć dodawać. Nie tylko zwiększa to rozmiar pamięci masowej bazy danych, ale również wpływa na szybkość zapytań i żądań do bazy danych.
Użytkownicy systemów CMS są szczególnie podatni na gromadzenie tego typu artefaktów pochodzących z wtyczek i motywów, które były instalowane i usuwane przez lata.
Niestety, nie ma wielu łatwych rozwiązań tego problemu. W przypadku większości dostawców usług hostingowych, prawdopodobnie będziesz musiał użyć phpMyAdmin, aby ręcznie sprawdzić i wyczyścić dane. Jeśli masz zarządzane rozwiązanie hostingowe, zespół wsparcia hosta może być w stanie Ci pomóc. W przypadku, gdy masz lokalnie zainstalowaną bazę danych, istnieją pewne narzędzia, których możesz użyć, choć nie są one w 100% skuteczne.
Najlepszym sposobem na uniknięcie jakichkolwiek problemów jest uczynienie konserwacji bazy danych częścią swojej rutyny i poznanie podstaw działania baz danych.
Dla użytkowników CMS, wtyczki i motywy oferują niemal nieograniczony potencjał, aby ulepszyć wygląd i funkcjonalność ich strony. Jednak każda wtyczka lub motyw zawiera dodatkowy kod i treść, które zwiększają ogólną złożoność i rozmiar Twojej strony.
Jeśli masz ręcznie kodowaną stronę internetową, to samo dotyczy wszelkich dodatkowych apletów lub bibliotek, które chcesz dodać do swojej witryny.
Najlepszym sposobem na zwalczenie tego problemu jest bycie sumiennym podczas dodawania jakichkolwiek dodatków do swojej witryny. Instaluj tylko to, czego naprawdę potrzebujesz lub chcesz, i upewnij się, że odinstalowałeś i prawidłowo usunąłeś je, jeśli nie są już potrzebne.
Jak wspomniano, mogą one pozostawić różne przejściowe lub artefakty, więc należy mieć oko na nich w całym plików witryny (nie tylko bazy danych), gdy robisz jakieś wiosenne porządki.
Buforowanie jest często jedną z najskuteczniejszych, ale ignorowanych technik poprawy wydajności witryny. Buforowanie przechowuje zawartość witryny w pamięci szybkiego dostępu w przeglądarce użytkownika, umożliwiając jej załadowanie niemal natychmiastowo przez użytkowników. Może to obejmować wszystko, od tekstu, przez arkusze stylów, obrazy, aż po pliki JavaScript.
Bez buforowania, użytkownik będzie musiał ponownie pobrać wszystko, gdy przejdzie do strony lub ponownie ją załaduje - niezależnie od tego, czy coś się zmieniło, czy nie.
Jednak niewłaściwe skonfigurowanie buforowania na Twojej stronie może prowadzić do problemów, takich jak ładowanie przez użytkowników tylko nieaktualnych treści. Większość wysokiej jakości narzędzi do buforowania ma wbudowane funkcje, które automatycznie czyszczą pamięć podręczną, gdy dokonasz zmian na określonej stronie lub treści. Tak więc, użytkownicy będą tylko ponownie załadować zawartość, gdy została zmodyfikowana.
Niektórzy gospodarze oferują out-of-the-box narzędzia buforowania z ich usług hostingowych. CMS można również zazwyczaj znaleźć wtyczki do tego, takie jak WPRocket dla WordPress.
W końcu, reklamy są po prostu inną formą mediów, które zwiększa ogólną wagę stron internetowych. Chociaż są one zazwyczaj małe i lekkie, wiele miejsc reklamowych może naprawdę zacząć się sumować.
Co pogarsza sprawę jest to, że reklamy są ładowane z zewnętrznych źródeł. Oznacza to, że będą one trwać dłużej, aby renderować, generować więcej żądań i może bałagan z jak stabilne ładowanie stron - wpływając na swoje podstawowe witalności internetowej.
W zależności od tego, jak ważne są reklamy dla Twojego strumienia przychodów, będziesz chciał dokładnie rozważyć, ile reklam używasz na swojej stronie, gdzie je umieścić, a kiedy się ładują. Jeśli to możliwe, unikać ładowania reklam w tym samym czasie, co reszta strony, zwłaszcza interstitials.
Jak widać, wydajność witryny jest tematem wieloaspektowym. Mimo, że niektóre z nich mogą być gorsze od innych, nie możesz po prostu zająć się jednym obszarem i oczekiwać, że Twoja strona nagle stanie się wydajna.
Jednakże, pewne ogólne zasady mają zastosowanie:
Ostatni punkt zasługuje na jeszcze jedną pochwałę. Jak już wspomnieliśmy, znalezienie rozwiązania optymalizacyjnego dla Twoich mediów, szczególnie obrazów, jest prawdopodobnie najlepszą rzeczą, jaką możesz zrobić, aby poprawić wydajność swojej strony internetowej. Z czysto wydajnościowej perspektywy, nie ma usługi tak skutecznej jak ImageEngine. Jest to również ten, który wymaga najmniejszej ilości wiedzy technicznej i bieżącej konserwacji.
Niezależnie od tego, będziesz chciał uruchomić kilka testów za pomocą narzędzi takich jak PageSpeed Insights, dzięki czemu można zebrać dane na temat tego, jakie problemy napotyka Twoja strona. Stamtąd, można ustalić priorytety poprawek, aby Twoja strona była bardziej konkurencyjna.
[- To jest sponsorowany post w imieniu ImageEngine -]
