Odkrywanie sekretów SEO: przedstawiamy najlepszy przewodnik po szybkości witryny

Szybkość ma znaczenie zarówno dla użytkowników, jak i SEO: nikt nie chce czekać kilka sekund na załadowanie strony internetowej. Użytkownicy wolą opuścić Twoją witrynę i udać się do konkurencji, niż spędzać czas na czekaniu. Cytat „czas to pieniądz” jest tak samo prawdziwy teraz, jak wtedy, gdy Benjamin Franklin powiedział to wieki temu. Dla Google liczy się również czas. Szybkość jest jednym z czynników rankingowych Google. Wszystko bez zmian, im szybsza strona, tym wyższy ranking. I nie ma nikogo, kto będzie twierdził, że posiadanie szybkiej strony internetowej nie jest w dzisiejszych czasach koniecznością. Pytanie brzmi: jak sprawić, by Twoja strona internetowa była szybsza? Naszym gościnnym autorem w tym Unwrapping the Secrets of SEO jest Tomek Rudzki, szef zespołu ds. badań i rozwoju w Elephate, zwycięzca „Best Small SEO Agency” w 2018 European Search Awards. Rudzi oferuje porady dotyczące przyspieszenia witryny i wygranej.

Ten obszerny Przewodnik po szybkości witryny zawiera trzy artykuły. Przeczytaj następujące posty tutaj: The Ultimate Guide to Website Speed ​​– część 2 i The Ultimate Guide to Website Speed ​​– część 3.

Bezpłatne badanie szybkości strony

1. Czas to pieniądz

Istnieje wiele badań wskazujących na to, że szybsza strona internetowa to większe przychody.

• Pinterest zdał sobie sprawę, że skrócenie postrzeganego czasu oczekiwania spowodowało wzrost liczby rejestracji o 15% .
• BBC zauważyło, że co sekundę ładuje się ich strona, 10% użytkowników opuszcza.
• DoubleClick by Google zbadał, że zmniejszenie obciążenia strony z 19 (ekstremalne!) do 5 sekund spowodowało o 35% niższe współczynniki odrzuceń i o 70% dłuższe sesje.
• Badanie Amazona pokazuje, że zaledwie jedna sekunda spowolnienia ładowania strony internetowej może skutkować spadkiem sprzedaży o 1,6 miliarda rocznie.

Możesz powiedzieć: „ok, ale nie obchodzi mnie Pinterest, BBC czy Amazon; porozmawiaj ze mną o MOJEJ firmie”. Google stworzył fajne narzędzie, które oblicza wpływ prędkości na potencjalny dochód . Wypełniłem narzędzie przykładowymi danymi: Średnia miesięczna liczba odwiedzających 1 000 000, współczynnik konwersji 3,26%, przy średniej wartości zamówienia 82 USD.

Możesz zapytać: „Tomek, dlaczego wybrałeś te dane: współczynnik konwersji 3,26, ale nie 1%, 4%, a nawet 10%?” Ok, mam dane ze Statista. Według ich raportów średnia wartość zamówień na zakupy online w Stanach Zjednoczonych w IV kwartale 2017 r. (w dolarach amerykańskich) wyniosła 82. Co więcej, średni współczynnik konwersji wyniósł 3,26.

Wydaje się, że zmniejszenie szybkości ładowania strony z 5 do 2,8 s może skutkować wzrostem przychodów o 1,97 miliona USD rocznie. Brzmi dobrze!

Oczywiście to tylko kalkulator. Ale kalkulator opiera się na rzeczywistych danych. Nie sądzę, aby Google dodał kilka zer na końcu obliczonej wartości, aby wyglądała poważnie.

2. Zawsze myśl o użytkownikach mobilnych

Według Statcounter w lutym 2018 r. ponad 55% użytkowników łączyło się z internetem za pomocą telefonu komórkowego lub tabletu – imponujące statystyki!

W dzisiejszych czasach, jeśli chcesz zadowolić swoich użytkowników mobilnych, powinieneś:

• upewnij się, że Twoja witryna działa dobrze na urządzeniach mobilnych (tj. czy jest responsywna)
• sprawić, że strona będzie naprawdę szybka.

Trzeba mieć na uwadze, że użytkownicy mobilni często mają słabe łącza i korzystają z urządzeń z niższej półki, więc każdy kilobajt przesłany po „drutu” naprawdę ma znaczenie. Twoja witryna może działać szybko na komputerze osobistym ze wszystkimi dodatkami , ale może działać bardzo wolno na urządzeniach mobilnych. A szanse, że dostaniesz to pierwsze, nie są już na twoją korzyść.

3. Użyj GTMetrix

Jest świetne narzędzie, które podpowie Ci, co możesz ulepszyć, aby Twoja witryna była szybsza. Możesz bezpłatnie audytować dowolną stronę internetową. Nie musisz być właścicielem strony internetowej, aby rozpocząć audyt (tzn. audytowałem Giphy.com). Narzędzie łączy zarówno dane, jak i podpowiedzi z Google PageSpeed ​​Insights i Yahoo Slow.

Warto poświęcić swój czas, aby wejść na https://gtmetrix.com/ i wpisać adres URL swojej witryny.

Możesz zobaczyć listę zaleceń dotyczących poprawy szybkości witryny, klikając zakładki „PageSpeed” lub „YSlow”.

Na razie wiele informacji na tych zakładkach może być niezrozumiałych, ponieważ są zbyt techniczne. W porządku. Nie od razu Rzym zbudowano. Zrobię co w mojej mocy, abyś zaczął. Istnieje interesująca sekcja o nazwie „Wodospad”, która pokazuje dokładnie, kiedy zasoby (pliki JS i CSS, pliki graficzne) zostały pobrane i załadowane.

Gorąco polecam założenie konta GTMetrix (to nic nie kosztuje!). Zarejestrowani użytkownicy mogą dostosować test oraz zmienić lokalizację przeglądarki i serwera. Co więcej, po zalogowaniu możesz włączyć opcję „utwórz wideo”. Opcja wideo jest świetna. Pokazuje, jak długo użytkownicy będą musieli czekać, aż zobaczą wizualne zmiany na Twojej stronie.

Ale nie zwariuj z GTMetrix

Chociaż GTMetrix to świetne narzędzie, czasami jego rekomendacje mogą zaprowadzić Cię w pogoń za dziką gęsią. Nie ma nic złego w GTMetrix. Po prostu nie ma zasady „jeden rozmiar dla wszystkich” podczas optymalizacji prędkości – coś, o czym GTMetrix doskonale zdaje sobie sprawę:

Na przykład GTMetrix zaleca ustawienie buforowania przeglądarki dla zasobów przechowywanych na serwerze Google Analytics lub Facebook. Prawdę mówiąc, te zasoby są poza twoją kontrolą – nie możesz nic zrobić . Twórcy Google i Facebooka zdecydowali, że z jakiegokolwiek powodu te zasoby nie powinny być buforowane przez długi czas.

Oczywiście istnieje wiele narzędzi podobnych do GTMetrix, takich jak WebPageTest (który jest znacznie potężniejszy niż GTMetrix). Postanowiłem jednak przedstawić wam GTMetrix z dwóch powodów:

1. GTMetrix jest bardziej przyjazny dla użytkownika
2. WebPageTest nie daje jasnych zaleceń dotyczących tego, co należy zrobić.

Chciałbym wspomnieć o jeszcze jednym ciekawym narzędziu – Google Lighthouse (jeśli korzystasz z Chrome, masz je już zainstalowane). Kamila Spodymek z Elephate napisała świetny artykuł na temat tego, jak SEO mogą skorzystać na wskaźnikach wydajności Google Lighthouse . Zdecydowanie dobra lektura!

4. Użyj kompresji GZIP

Jest jedna zasada, o której powinieneś wiedzieć: jeśli zasób waży mniej, przeglądarka może go pobrać znacznie szybciej, co spowoduje szybsze ładowanie strony . Twoi mobilni użytkownicy naprawdę na tym skorzystają.

Możesz zmniejszyć rozmiar plików tekstowych (takich jak HTML, SVG, CSS i JS), wdrażając kompresję GZIP. Dość często kompresja GZIP pozwala zaoszczędzić 70-80% rozmiaru zasobów bez utraty jakichkolwiek informacji. To naprawdę wielka sprawa!

Odwiedź https://checkgzipcompression.com/ , aby sprawdzić, ile kilobajtów możesz zaoszczędzić (lub już zapisanych!) wdrażając GZIP. W przypadku Searchmetrics.com włączony jest GZIP (pozwala to zaoszczędzić 83% rozmiaru strony). Brzmi dobrze!

Bądź jednak ostrożny! Czasami webmasterzy popełniają błąd i kompresują wszystkie pliki statyczne, w tym obrazy JPEG, PNG i PDF. Pozwolę sobie zacytować dokumentację Yahoo Developer Network : „Pliki obrazów i PDF nie powinny być spakowane gzipem, ponieważ są już skompresowane. Próba ich skompresowania nie tylko marnuje procesor, ale może potencjalnie zwiększyć rozmiary plików”.

Jeśli chcesz zaoszczędzić dodatkowe kilobajty, dobrym pomysłem jest również zminimalizowanie plików HTML, JS i CSS .

5. Wyświetlaj skalowane obrazy

Faktem jest, że strona ładuje się bardzo wolno (zwłaszcza na telefonach komórkowych!) z powodu dużej liczby obrazów.

Dlatego czasami dobrym pomysłem może być zmniejszenie liczby obrazów. Ale zamiast je ograniczać, sugerowałbym optymalizację istniejących . Mówiąc to, obrazy podawane użytkownikom powinny być skalowane i skompresowane (albo bezstratnie, albo stratnie).

Najpierw porozmawiajmy o skalowaniu obrazów. Załóżmy, że na stronę przypada dziesięć miniaturek o wymiarach 220×220, ale przesłałeś na serwer obrazy o wymiarach 800×800. Czy wyświetlać użytkownikom już przeskalowane obrazy, czy zmusić przeglądarkę do skalowania ich „w locie”?

Odpowiedź jest prosta. Jeśli nie skalujesz obrazów po stronie serwera, przeglądarka musi pobrać o wiele więcej kilobajtów niż to konieczne. Na nic, bo obrazy i tak będą skalowane. Ponadto jest to dodatkowe zadanie dla GPU po stronie klienta. Nie wspominając o szybkości ładowania strony ucierpi.

6. Kompresuj swoje obrazy

Porozmawiajmy teraz o kompresowaniu obrazów. To kolejna technika, która jest niezbędna we współczesnej sieci.

Generalnie istnieją dwa rodzaje kompresji obrazu:

• Bezstratny (robi naprawdę dobrą robotę, możesz być pewien, że jakość nie ucierpi).

• Stratny (zwykle sprawia, że ​​obraz jest lżejszy, ale jak sama nazwa wskazuje: tracisz część jakości).

Powstaje pytanie: jaki rodzaj kompresji jest lepszy: bezstratny czy stratny?

• To naprawdę zależy od sytuacji. Jeśli Twoja witryna zawiera obrazy przestrzeni kosmicznej, każdy szczegół ma znaczenie. Ale jeśli prowadzisz osobistego bloga, prawdopodobnie nie będziesz mieć problemu z kompresją stratną, nawet przy wysokim współczynniku kompresji. Zalecam poeksperymentowanie, aby sprawdzić, które ustawienia najlepiej pasują do Twojej witryny.

7. Nie zmuszaj swoich mobilnych gości do pobierania zdjęć Full HD!

Użytkownicy mobilni mają znacznie mniejsze ekrany i po prostu nie skorzystają z Twoich zdjęć HD. Zamiast tego wpadną w złość, jeśli zmusisz ich do pobrania dużych obrazów.

Przyjrzyjmy się przykładowi Elephate.com . Na górze naszej strony głównej mamy dość duże zdjęcie (2600×1463 pikseli) członków naszej firmy (522kb)

Jest całkowicie w porządku na komputerach stacjonarnych – można je pobrać naprawdę szybko. Ale w przypadku użytkowników mobilnych używamy parametrów „srcset” HTML. Dzięki temu mobilni użytkownicy będą po prostu pobierać znacznie mniejszy obrazek (większy nie potrzebują), co ma pozytywny wpływ na czas ładowania strony.

Użytkownicy komputerów stacjonarnych nie ucierpią, ponieważ zobaczą zdjęcie w pełnej rozdzielczości HD. Ale użytkownicy mobilni naprawdę na tym skorzystają.