Proste kroki, aby przyspieszyć twoją witrynę z dużym obrazem

Właściciel witryny może w końcu chcieć zwiększyć prędkość pobierania. Zwiększa to ranking wyników wyszukiwania; poza tym dla odwiedzających witrynę przyjemniej jest pracować, uzyskując szybszą reakcję na ich 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 pracę. Nie mamy nic przeciwko wtyczkom optymalizacyjnym, ale trzeba z nimi korzystać rzeczowo i ze znajomością zasad ich działania.

Poza tym właściciele witryn, którzy nigdy nie mieli doświadczenia z administracją, często nie rozumieją optymalizacji. W ich rozumieniu optymalizacja to przyspieszenie działania skryptu za wszelką cenę. Zadaniem optymalizacji jest wytworzenie optymalnej szybkości serwisu przy optymalnej cenie zasobów. Dlatego nie może być uniwersalnych instrukcji dla wszystkich witryn.

Aby Twoja witryna była szybka, to pilne zadanie dla 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, wraz z wysokiej jakości treścią i pięknym projektem graficznym.

Powolne ładowanie czasami zwiększa prawdopodobieństwo utraty użytkowników. Zwłaszcza, gdy odwiedzający pochodzą z urządzeń mobilnych. Proste zalecenia dotyczące 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 pliki CSS, JS

Optymalizacja pobierania jest niemożliwa bez troski 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, więc jego zwięzłość jest krytycznym czynnikiem sukcesu.

Jak zminimalizować kod, aby przyspieszyć ładowanie witryny?

Usuń niepotrzebne znaki, elementy znaczników i znaczniki kodu źródłowego. Automatyzacja 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 przydatna, ale może spowodować 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 lub 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 o takie elementy zauważalnie spowalniają działanie serwisu.

Aby uniknąć „dodatkowych” żądań, musisz zmniejszyć liczbę komponentów strony. Pociągnie to za sobą proporcjonalny spadek połączeń z serwerem i przyspieszy ładowanie strony.

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

• Połącz wiele obrazów w jeden plik graficzny (sprite CSS);
• Użyj wbudowanych obrazów (inline-pictures) 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 najpierw zostanie załadowana zawartość statyczna, a dopiero potem dynamiczna grafika.

Elementy Flash lub animacje, które wymagają więcej zasobów do pobrania, nie „wyciągną się” do przodu i nie psują wrażenia witryny od pierwszych sekund. Zapewni to płynne pobieranie treści i zwiększy atrakcyjność estetyczną zasobu.

4. Zmniejsz liczbę zewnętrznych skryptów

Skrypty zewnętrzne to fragmenty kodu (teksty), do których dostęp uzyskuje się za pośrednictwem łącza zewnętrznego. Łącza 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 spowoduje 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 spłukiwanie

Ta funkcjonalność PHP pozwala nie czekać, aż serwer użytkownika załaduje informacje z zasobu, ale wyprowadzić je w częściach. Podczas przesyłania danych do przeglądarki otwarte okno nie pozostanie puste, ale będzie płynnie wypełniane ładowalnymi elementami witryny. 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. Buforuj strony

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

Buforowanie można włączyć, dodając nagłówek wygasa do kodu HTML. Witryny WordPress można łatwo buforować za pomocą instalacji wtyczek z darmową lub częściowo darmową funkcjonalnością, takich 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 tworzenia, dalsze zmiany mogą nie być poprawnie wyświetlane w witrynie.

7. Użyj 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ący znajduje się od serwerów CDN, tym szybciej przesyłane są pakiety danych z witryny.

Korzystanie z CDN jest szczególnie ważne w przypadku kontentu i mocno obciążonych portali, których główni odbiorcy znajdują się bardzo daleko od serwerów fizycznych. Ta usługa minimalizuje czas oczekiwania na pliki do pobrania z witryn zagranicznych, przyczyniając się do wzrostu ich pozycji w lokalnych wynikach wyszukiwania. W końcu zawartość jest pobierana z magazynu serwera najbliższego użytkownikowi w jego kraju.

8. Zoptymalizuj grafikę i wideo

Musisz wybrać odpowiednią grafikę i format 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 logotypów wektorowych i prostych elementów interfejsu;
• PNG – dla schematów i logo niewektorowych;
• JPG – dla zdjęć i obrazów;
• MPEG4 – do wideo i animacji.

Również w przypadku 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. Formularz ma jednak ograniczoną obsługę przeglądarki (na przykład nie ma obsługi w przeglądarce macOS / iOS Safari). Dlatego zaleca się użycie pliku WEBM jako priorytetowego źródła wideo i zainstalowanie MPEG4 jako alternatywnego źródła. Możesz także użyć jedynego MPEG4, jeśli udostępnianie jest niedopuszczalne lub niewygodne.

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

Etapy optymalizacji obrazu

Krok 1 – Zmniejszenie rozmiaru obrazu.

Wiele popularnych CMS, takich jak WordPress czy Joomla, ma wbudowane wtyczki do optymalizacji obrazów z oryginału. Ale ta metoda powoduje dodatkowe obciążenie i może spowolnić działanie witryny. 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 nadal daleka od optymalnej. Wygodne i bezpłatne usługi, takie jak ImageResize lub 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ę plików 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 obsługi Gzip jest dość proste – wystarczy dodać kilka linijek kodu do pliku .htaccess. Na przykład przy korzystaniu 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 pliku gzip jest wykonywana w celu zmniejszenia liczby żądań do serwera z przeglądarki. Mówiąc krótko, 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 hostingu. Oszczędność na alokacji zasobów często prowadzi do znacznego pogorszenia jakości usług, co podważa wszelkie próby przyspieszenia serwisu na winorośli.

Jeśli manipulacje treścią, kodem i wtyczkami nie przynoszą rezultatów, czas pomyśleć o wyborze bardziej przyzwoitego „domu” dla witryny. 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. A doceni to wdzięczna publiczność.

Najważniejszą rzeczą jest…

Należy dążyć do uzyskania dostępu do serwisu 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 również zrozumieć, że istnieją dwa parametry szybkości ładowania strony.

Pierwszym z nich jest szybkość wyświetlania treści (w tym momencie strona jest już otwarta i widoczna dla użytkownika, podczas gdy przezroczysty wskaźnik strony jest nadal wyświetlany do momentu połączenia wszystkich plików statycznych i skryptów asynchronicznych).

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

Wniosek

Nie można zignorować takiej liczby, jak szybkość ładowania strony. To on od pierwszych sekund tworzy komfortowe warunki dla odwiedzających. Im szybciej użytkownik dostanie pożądaną treść, tym większe prawdopodobieństwo ukształtowania się pozytywnego wizerunku zasobu i zbudowania wobec niego lojalności.