Jak zwiększyć szybkość ładowania strony o 70% w mniej niż godzinę

W 2006 roku Amazon poinformował, że każde 100 milisekund przyspieszenia Twojej witryny, przekłada się na wzrost przychodów o 1%. Kolejną nowiną było ogłoszenie przez Google, że szybkość wczytywania i działania strony jest brane pod uwagę w kontekście wyników wyszukiwania. Czyli im krótszy czas wczytywania strony, tym witryna wyskakiwała wyżej w wynikach wyszukiwania. 

Od tego czasu, na bieżąco analizowane są korzyści płynące z posiadania szybkiej witryny internetowej. W związku z tym napisaliśmy ten krótki poradnik, z którego dowiesz się, jak polepszyć szybkość swojej strony www, w krótkim czasie. 

Zwiększanie szybkości witryny internetowej

Zapewne zastanawiasz się, jaka szybkość jest uznawana za Google za szybkość prawidłową. Optymalizacja strony może być procesem hedonistycznym, podobnym do biegania na bieżni. Zawsze będzie miejsce na ulepszenia. Więc, kiedy wiadomo, że jest już na tyle dobrze, że możemy odpuścić już ten temat? 

Jednym ze sposobów jest użycie WhichLoadsFaster do porównania szybkości ładowania witryny ze wszystkimi głównymi konkurentami. Staraj się być najszybszym z grupy.

Innym sposobem jest skorzystanie z następujących wskazówek (podany jest czas ładowania strony): 

Poniżej 1 sekundy = idealnie

1-3 sekundy = powyżej średniej

3-7 sekund = średnio

7+ sekund = bardzo słabo

Te testy porównawcze opierają się na badaniach pokazujących, że 47% ludzi spodziewa się, że strona internetowa załaduje się w mniej niż dwie sekundy, a 57% użytkowników porzuci stronę, której wczytanie zajmuje co najmniej 3 sekundy.

Jak przyspieszyć swoją witrynę?

Aby zobaczyć zmiany, jakich dokonasz, zmierz szybkość działania witryny obecnie i po zastosowaniu wskazówek z naszego poradnika. Gotowy? Zaczynamy. 

# 1 Użyj CDN (sieci dostarczania treści)

Hostowanie plików multimedialnych w sieci dostarczania treści jest jednym z najlepszych sposobów na przyspieszenie witryny i często pozwala zaoszczędzić do 60% przepustowości i zmniejszyć o połowę liczbę żądań wysyłanych przez witrynę.

Sieci CDN działają na zasadzie hostowania plików w dużej sieci serwerów na całym świecie. Kiedy użytkownik odwiedza Twoją witrynę z Polski, pobiera pliki z serwera, który jest najbliżej niego. Ponieważ przepustowość jest rozłożona na tak wiele różnych serwerów, zmniejsza obciążenie dowolnego serwera, a także chroni Twoje witryny przed atakami DDoS i skokami ruchu.

Aby wybrać najlepszą sieć CDN, możesz posłużyć się rankingami. 

# 2 Użyj wtyczki do buforowania

Jeśli używasz WordPress, jednym z najszybszych i najłatwiejszych sposobów na skrócenie szybkości ładowania strony jest zainstalowanie wtyczki buforującej, takiej jak WP Total Cache lub WP Super Cache.

Obie wymienione powyżej wtyczki można pobrać bezpłatnie i są bardzo dobre. Pomimo swojej nazwy, wtyczki buforujące robią dużo więcej niż buforowanie przeglądarki, chociaż jest to ich podstawowa funkcja. 

# 3 Dodaj nagłówki Expires, aby wykorzystać buforowanie przeglądarki

Jeśli nie korzystasz z WordPressa lub wolisz nie instalować innej wtyczki, aby dodać nagłówki Expires i buforowanie przeglądarki, oto jak zaimplementować to ręcznie.

Nagłówki Expires informują przeglądarkę, czy zażądać określonego pliku z serwera WWW, czy też pobrać wersję strony z pamięci podręcznej przeglądarki. Oczywiście dotyczy to tylko sytuacji, gdy użytkownik ma już wersję Twojej strony internetowej przechowywaną w pamięci podręcznej, więc przyspieszy to tylko Twoją witrynę dla użytkowników, którzy już ją odwiedzili.

Nagłówki wygasania przyspieszają Twoją witrynę na dwa sposoby. Przede wszystkim zmniejszają potrzebę dwukrotnego pobierania tych samych plików z serwera internetowego. Po drugie, zmniejsza liczbę żądań HTTP, które należy wykonać, dodatkowo skracając czas ładowania strony.

# 4 Użyj dobrego motywu (jeśli korzystasz z WordPress)

Zapobieganie jest zwykle lepszą strategią niż leczenie. Aby uniknąć wielu problemów z szybkością strony, powinieneś wybrać dobrego hosta, dobrą sieć CDN i dobry motyw.

Wielu marketerów cyfrowych podkreśla, że frustrujące jest, gdy projektanci stron internetowych tworzą witryny, które wyglądają pięknie, ale działają strasznie z punktu widzenia SEO lub szybkości. Dlatego lepiej wybierz minimalistyczny motyw, niż bardzo rozbudowany. Zwiększy to szybkość witryny. 

# 5 Kompresuj swoje obrazy

Jeśli korzystasz z WordPressa, zainstaluj wtyczkę WP Smush.it, aby automatycznie kompresować obrazy. Zmniejszy to rozmiar obrazów bez utraty jakości wizualnej. Wspaniałą rzeczą w tej wtyczce jest to, że działa w tle za każdym razem, gdy przesyłasz nowy obraz. Możesz również uruchomić go retrospektywnie na wszystkich obrazach przesłanych do biblioteki multimediów.

# 6 Oczyść swoją bazę danych

Jedną z pułapek związanych z WordPressem jest to, że twoja baza danych może bardzo szybko stać się bałagan z powodu zapisanych wersji roboczych, poprawek postów, dezaktywowanych wtyczek itp. WP Optimize to fantastyczna wtyczka, która rutynowo usuwa wszystkie rzeczy, których nie potrzebujesz, które zaśmiecają twoje bazy danych.

# 7 Skompresuj witrynę za pomocą gzip

Gzip to prosta metoda kompresowania plików witryny w celu zaoszczędzenia przepustowości i przyspieszenia czasu ładowania strony. Gzip kompresuje pliki do pliku zip, co jest szybsze dla przeglądarki użytkownika. Następnie przeglądarka użytkownika rozpakowuje plik i wyświetla zawartość. Ta metoda przesyłania treści z serwera do przeglądarki jest znacznie wydajniejsza i oszczędza dużo czasu.

Możesz włączyć Gzip, po prostu dodając następujący kod do pliku .htaccess:

 

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

 

# Or, compress certain file types by extension:

 

SetOutputFilter DEFLATE

Aby sprawdzić, czy Gzip jest włączony lub działa poprawnie w Twojej witrynie, możesz użyć Gziptest.com.

# 8 Napraw wszystkie uszkodzone linki

Uszkodzone linki nie tylko obciążają przepustowość, ale są także jednym z najpewniejszych sposobów na zmuszenie użytkownika do opuszczenia witryny. 

Aby zidentyfikować uszkodzone linki, zalecamy skorzystanie z następujących (bezpłatnych) narzędzi:

• Narzędzia Google dla webmasterów (karta błędów indeksowania)
• Screaming Frog SEO Spider
• Ahrefs

Powodem, dla którego zalecam używanie wszystkich trzech, jest to, że niektóre sięgają głębiej niż inne i identyfikują błędy indeksowania, których inni nie. 

# 9 Zmniejszanie przekierowań

Chociaż przekierowania 301 (stałe) są lepsze niż błędy 404 (uszkodzone linki), nadal nie są idealne, ponieważ spowalniają czas potrzebny przeglądarce na dotarcie do prawidłowej wersji strony.

Screaming Frog to po raz kolejny świetne narzędzie do wykrywania przekierowań 301. Jeśli korzystasz z komputera, możesz również użyć Xenu Link Sleuth, które jest doskonałym narzędziem do indeksowania danych ze stron internetowych.

# 10 Zminimalizuj pliki CSS i JS

Kiedy przyjrzysz się, co powoduje powolne ładowanie stron, istnieje prawdopodobieństwo, że ma to coś wspólnego z nieefektywnym ładowaniem wielu niezgrabnych plików JavaScript lub CSS. Jedną z pułapek WordPressa i innych systemów zarządzania treścią jest to, że nowy plik JS lub CSS jest dodawany praktycznie za każdym razem, gdy instalujesz nową wtyczkę.

Pliki można zminimalizować na kilka sposobów. Pierwszy sposób polega na złączeniu wszystkich plików w jeden – więc, zamiast wywoływać dziesięć pojedynczych plików javascript, po prostu umieszczasz cały javascript w jednym pliku.

Drugi aspekt minimalizacji polega na usunięciu spacji i zmniejszeniu plików. Jeśli używasz WordPress, WP Minify to świetna wtyczka, która automatycznie robi to wszystko za Ciebie.

# 11 Jeśli to możliwe, zamień PHP na statyczny HTML

PHP doskonale nadaje się do zwiększenia wydajności witryny i zmniejszenia konieczności wielokrotnego wprowadzania tych samych informacji. Jednak wywołanie informacji przez PHP zużywa zasoby serwera i powinno zostać zastąpione statycznym kodem HTML.

# 12 Wyłącz sygnały zwrotne i trackbacki w WordPress

Pingbacki i trackbacki tak naprawdę nie mają praktycznego zastosowania w WordPress, a mimo to często są domyślnie włączone. Zalecam wyłączenie obu tych opcji, ponieważ zapychają bazę danych i zwiększają liczbę wysyłanych żądań.

# 13 Włącz Keep-Alive

HTTP Keep Alive odnosi się do wiadomości wysyłanej między komputerem klienta a serwerem sieciowym z prośbą o pozwolenie na pobranie pliku. Włączenie funkcji Keep Alive umożliwia komputerowi klienta pobieranie wielu plików bez wielokrotnego pytania o pozwolenie, co pomaga zaoszczędzić przepustowość.

Aby włączyć Keep Alive, po prostu skopiuj i wklej poniższy kod do pliku.htaccess.

 

<ifModule mod_headers.c>

    Header set Connection keep-alive

</ifModule>

 

# 14 Określ wymiary obrazu

Zanim przeglądarka będzie mogła wyświetlić stronę internetową, musi dowiedzieć się, jak rozłożyć zawartość wokół obrazów. Nie znając rozmiaru tych obrazów, przeglądarka go rozpracowuje, przez co działa ciężej i trwa dłużej.

Określenie wymiarów obrazu oszczędza przeglądarce konieczności przechodzenia przez ten krok, co pomaga przyspieszyć działanie.

# 15 Określ zestaw znaków w nagłówkach HTTP

Z tego samego powodu, co powyżej, przydatne jest określenie zestawu znaków w nagłówkach odpowiedzi HTTP, aby przeglądarka nie musiała tracić dodatkowego czasu na zastanawianie się, jakiego zestawu znaków używasz.

Możesz to zrobić, po prostu dodając tag zestawu znaków UTF-8 w sekcji swojej witryny.

# 16 Umieść CSS na górze i JS na dole

Za najlepszą praktykę uważa się umieszczanie kodu CSS jak najbliżej góry strony, ponieważ przeglądarki nie renderują strony przed renderowaniem pliku CSS. Z drugiej strony JavaScript powinien znajdować się jak najbliżej dołu, ponieważ zapobiega analizowaniu przez przeglądarki po tagu przed jego załadowaniem i zakończeniem.

Dlaczego szybkość strony jest teraz ważniejsza niż kiedykolwiek wcześniej?

Mobilny internet jest bardzo szeroko wykorzystywany  i dlatego szybkość wczytywania strony jest tak istotny. Użytkownicy Internetu są mniej tolerancyjni dla powolnych witryn internetowych niż kiedykolwiek, a przejście na urządzenia mobilne z dostępem do Internetu oznacza, że ​​jeśli nie jesteś szybki, nie będziesz widoczny.