Właściciel witryny może w końcu chcieć zwiększyć prędkość pobierania. Zwiększa to ranking wyników wyszukiwania; poza tym odwiedzającym witrynę przyjemniej jest z nią pracować, uzyskując szybszą reakcję na swoje działania.

W poszukiwaniu szybkiego i prostego rozwiązania właściciele witryn instalują ogromną liczbę wtyczek, które z kolei zużywają zasoby i tylko spowalniają jej działanie. Nie mamy nic przeciwko wtyczkom optymalizacyjnym, ale trzeba ich używać rzeczowo i ze znajomością zasad ich działania.

Poza tym właściciele witryn, którzy nigdy nie mieli do czynienia z administracją, często nie rozumieją optymalizacji. W ich rozumieniu optymalizacja to przyspieszenie skryptu za wszelką cenę. Zadaniem optymalizacji jest uzyskanie optymalnej szybkości strony przy optymalnej cenie zasobów. Dlatego nie może istnieć uniwersalna instrukcja dla wszystkich witryn.

Sprawienie, by Twoja witryna była szybka, jest pilnym zadaniem każdego właściciela zasobów lub webmastera. W końcu szybkość ładowania strony jest jednym z najważniejszych czynników sukcesu zasobu internetowego, obok wysokiej jakości treści i pięknego projektu graficznego.

Powolne ładowanie czasami zwiększa prawdopodobieństwo utraty użytkowników. Zwłaszcza, gdy odwiedzający pochodzą z urządzeń mobilnych. Proste zalecenia przyspieszenia ładowania strony, które nawet niedoświadczony użytkownik może wdrożyć w praktyce, pomogą zminimalizować prawdopodobieństwo utraty ruchu.

1 Zoptymalizuj kod HTML i CSS, pliki JS

Optymalizacja pobierania jest niemożliwa bez dbałości o „czystość" kodu przesyłanego do przeglądarki użytkownika podczas wchodzenia na stronę. Duża liczba znaków w kodzie źródłowym znacząco wpływa na szybkość ładowania, dlatego jego zwięzłość jest krytycznym czynnikiem sukcesu.

Jak zminimalizować kod, aby przyspieszyć ładowanie strony

Usuń niepotrzebne znaki, elementy znaczników i znaczniki kodu źródłowego. Zautomatyzowanie procesu pomoże dodać małą wstawkę na początku i na końcu kodu HTML witryny.

Ta metoda buforowania zawartości HTML jest całkiem użyteczna, ale może powodować dodatkowe obciążenie pamięci o dostępie swobodnym.

Grupuj ten sam typ plików CSS i plików JS. Darmowe aplikacje PHP, takie jak JCH Optimize, Cloudflare czy Minify, które są kopiowane do osobnego katalogu i przechodzą przez wszystkie pliki witryny, pomogą połączyć elementy.

2 Usuń dodatkowe żądania HTTP

Przesyłanie elementów strony (javascript, obrazy, CSS i pliki flash) zajmuje lwią część zasobów systemowych podczas ładowania witryny. Żądania HTTP dotyczące takich elementów zauważalnie spowalniają witrynę.

Aby uniknąć „dodatkowych” żądań, musisz zmniejszyć liczbę elementów strony. Pociągnie to za sobą proporcjonalny spadek wywołań serwera i przyspieszy ładowanie strony.

Można to zrobić na kilka sposobów:

Połącz wiele obrazów w jeden plik graficzny (sprajt CSS);
Użyj obrazów wbudowanych (obrazów w tekście) w arkuszu stylów strony;
Wiele plików CSS lub skryptów na jednej stronie łączy się w jeden plik;
Zminimalizuj liczbę scenariuszy i wtyczek.

3 Ułóż JavaScript i CSS we właściwej kolejności

Zaleca się umieszczenie plików CSS na górze kodu strony, a JavaScript na dole. Po tej optymalizacji w pierwszej kolejności zostanie załadowana zawartość statyczna, a następnie tylko dynamiczna grafika.

Elementy Flash lub animacje, które wymagają więcej zasobów do pobrania, nie będą „wyciągane” do przodu i psują wrażenie strony od pierwszych sekund. Zapewni to płynne pobieranie treści i zwiększy estetykę zasobu.

4 Zmniejsz liczbę skryptów zewnętrznych

Skrypty zewnętrzne to fragmenty kodu (teksty), do których dostęp uzyskuje się za pośrednictwem łącza zewnętrznego. Linki tworzą dodatkowe żądania do wielu różnych serwerów, co ostatecznie spowalnia witrynę. Aby tego uniknąć, zaleca się stosowanie głównie lokalnych skryptów osadzonych w strukturze kodu źródłowego strony.

Oczywiście skupienie się na lokalnych skryptach stworzy pewne ograniczenia w wyglądzie i funkcjonalności serwisu. Ale wynikająca z tego przewaga prędkości pobierania jest warta tych „poświęceń”.

5 Włącz przepłukiwanie

Ta funkcja PHP pozwala nie czekać, aż serwer użytkownika załaduje informacje z zasobu, ale wyświetlać je w częściach. Podczas przesyłania danych do przeglądarki otwarte okno nie pozostanie puste, ale zostanie płynnie wypełnione ładowalnymi elementami serwisu. Takie przyspieszenie jest szczególnie potrzebne w przypadku zasobów sieciowych o złożonym interfejsie i dużym ruchu.

Lepiej jest umieścić funkcję flush na początku kodu źródłowego strony, zaraz po nagłówku. Z nagłówka zawartość HTML otworzy się szybciej, a także możesz włączyć równoległe ładowanie elementów CSS i JavaScript.

6 Zapisz strony w pamięci podręcznej

Buforowanie zapisuje niektóre informacje ze stron serwisu (flash, grafika, JavaScript i CSS) do przeglądarki użytkownika. Przy następnym uruchomieniu pliki te są natychmiast pobierane z przeglądarki, co zapewnia stronie dodatkową prędkość.

Buforowanie można włączyć, dodając nagłówek wygaśnięcia do kodu HTML. Witryny WordPress można łatwo buforować za pomocą instalacji wtyczek z bezpłatnymi lub częściowo bezpłatnymi funkcjami, takimi jak W3 Total Cache, Cache Enabler lub Zen Cach.

W przypadku nowych witryn lepiej jest używać buforowania dopiero po pełnej gotowości do uruchomienia. Jeśli włączysz tę funkcję podczas opracowywania, dalsze zmiany mogą nie być poprawnie wyświetlane na stronie.

7 Użyj sieci CDN

Content Delivery Network – sieć serwerów rozproszonych w centrach danych na całym świecie w celu zwiększenia szybkości przesyłania treści do odwiedzających. Im bliżej geograficznie odwiedzającego znajdują się serwery CDN, tym szybciej przesyłane są pakiety danych z witryny.

Korzystanie z CDN jest szczególnie ważne w przypadku portali z treścią i dużym obciążeniem, których główna grupa odbiorców znajduje się bardzo daleko od fizycznych serwerów. Usługa ta minimalizuje czas oczekiwania na pobranie z zagranicznych witryn, przyczyniając się do wzrostu ich pozycji w lokalnych wynikach wyszukiwania. W końcu treść pobierana jest z magazynu serwera znajdującego się najbliżej użytkownika w jego kraju.

8 Zoptymalizuj grafikę i wideo

Musisz wybrać odpowiedni format grafiki i wideo, ponieważ format pliku bezpośrednio wpływa na szybkość, z jaką informacje są prezentowane odwiedzającym.

Zalecane formaty dla różnych treści internetowych:

SVG – dla logo wektorowych i prostych elementów interfejsu;
PNG – dla schematów i logo niewektorowych;
JPG – dla zdjęć i obrazów;
MPEG4 – dla wideo i animacji.

Również dla wideo i animacji dostępny jest stosunkowo nowy format WEBM. W większości przypadków zapewnia mniejszy rozmiar wideo przy tej samej jakości. Jednak formularz ma ograniczoną obsługę przeglądarki (na przykład nie ma obsługi w przeglądarce Safari macOS / iOS). Dlatego zaleca się użycie pliku WEBM jako priorytetowego źródła wideo i zainstalowanie MPEG4 jako źródła alternatywnego. Możesz także użyć jedynego MPEG4, jeśli udostępnianie jest niedopuszczalne lub niewygodne.

Osobno zauważamy, że format wektorowy (SVG) umożliwia skalowanie bez utraty jakości grafiki.

Etapy optymalizacji obrazu

Krok 1 – Zmniejszenie rozmiaru obrazu.

Wiele popularnych systemów CMS, takich jak WordPress czy Joomla, ma wbudowane wtyczki optymalizujące obrazy z oryginału. Ale ta metoda powoduje dodatkowe obciążenie i może spowolnić witrynę. Za każdym razem, gdy strona się ładuje, przeglądarka najpierw uzyskuje dostęp do kodu źródłowego, a dopiero potem zmienia rozmiar obrazu w locie.

Aby uniknąć utraty prędkości podczas ładowania obrazów, pomocne będą edytory graficzne wbudowane w system operacyjny, takie jak Preview (Mac) lub Microsoft Paint (Windows), a także usługi online o podobnej funkcjonalności. Praca z nimi będzie wymagała minimalnych umiejętności pracy z grafiką.

Krok 2 – Skompresuj plik przed pobraniem.

Nawet po zoptymalizowaniu rozmiaru obrazu jego „waga” jest zwykle daleka od optymalnej. Wygodne i bezpłatne usługi, takie jak ImageResize czy TinyPNG, pomagają zmniejszyć rozmiar bez utraty jakości obrazu. Większość procesów tutaj jest zautomatyzowana. Użytkownik musi tylko przesłać pliki i pobrać już skompresowane do optymalnego rozmiaru obrazu.

9 Zastosuj kompresję pliku Gzip

Gzip to prosta metoda kompresji plików witryny w celu zaoszczędzenia zasobów kanału i przyspieszenia ładowania. Za pomocą Gzip pliki są kompresowane do archiwum, które przeglądarka może szybciej pobrać, a następnie rozpakować i wyświetlić zawartość.

Włączenie korzystania z Gzip jest dość proste – wystarczy dodać kilka linijek kodu do pliku .htaccess. Np. podczas korzystania z serwera WWW Apache moduł mod_gzip jest dostępny dla webmasterów, aby aktywować Gzip, w takim przypadku należy dodać taki kod do .htaccess

Kompresja plików Gzip ma na celu zmniejszenie liczby żądań wysyłanych do serwera z przeglądarki. Mówiąc wprost, ta technologia zmniejsza początkową wagę plików do 70%, aby przyspieszyć pobieranie.

Sposób na osadzenie kompresji Gzip

Dodaj następujący fragment kodu do pliku konfiguracyjnego serwera WWW „.htaccess”.

Na serwerze Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Na serwerze Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10 Zmień hosting

Najbardziej podstawową metodą przyspieszenia pobierania jest zmiana dostawcy usług hostingowych. Oszczędność na alokacji zasobów często prowadzi do znacznego pogorszenia jakości usług, co podważa wszelkie próby przyspieszenia strony na winorośli.

Jeśli manipulacje treścią, kodem i wtyczkami nie przynoszą rezultatów, czas pomyśleć o wyborze bardziej przyzwoitego „domu” dla serwisu. Na wysokiej jakości hostingu z wysoką dostępnością i przemyślanym wsparciem technicznym zasób internetowy otrzyma potężny impuls do zwiększenia szybkości pracy. I doceni to wdzięczna publiczność.

Najważniejszą rzeczą jest…

Należy dążyć do wejścia na stronę nie dłużej niż 2-3 sekundy. Nie ma znaczenia, czy strona otwiera się na 2, czy nawet 3 sekundy, ale jeśli jest ich więcej, to jest to powód, aby pomyśleć o przyspieszeniu ładowania strony.

Musisz także zrozumieć, że istnieją dwa parametry określające szybkość ładowania strony.

Pierwszym z nich jest szybkość wyświetlania treści (w tym momencie strona jest już otwarta i pokazywana użytkownikowi, podczas gdy przezroczysty wskaźnik strony jest nadal wyświetlany, dopóki wszystkie pliki statyczne i skrypty asynchroniczne nie zostaną połączone).

Co więcej, druga to szybkość faktycznego tworzenia strony, kiedy wszystko, co miało być połączone, zostało połączone. Należy skupić się na pierwszym parametrze, tzn. nie mogą upłynąć więcej niż trzy sekundy, zanim zostanie wyświetlony układ witryny.

Wniosek

Nie można zignorować takiej liczby, jak szybkość ładowania strony. To on od pierwszych sekund tworzy komfortowe warunki dla zwiedzających. Im szybciej użytkownik dostanie pożądaną treść, tym większe prawdopodobieństwo, że ukształtuje się pozytywny wizerunek zasobu i zbudowana zostanie lojalność wobec niego.

AffiAi