Як збільшити швидкість завантаження сайту

Проведення оптимізації швидкості завантаження сайту — один із дієвих способів вплинути на поведінкові фактори читачів на краще. Також це прискорення допомагає вдосконалити юзабіліті сайту та наростити конверсію.

Нерідко власники інтернет-ресурсів втрачають потенційних клієнтів, не розуміючи, що люди йдуть через повільне завантаження сторінок. Сьогодні відвідувачі не бажають чекати, доки відкриється неповороткий веб-документ.

У цій статті я зібрав основні фактори, що гальмують сайти та методи їх усунення, які може застосувати будь-який власник блогу або іншого інтернет-майданчика.

Вступна інформація

Насамперед збільшення швидкості завантаження сайту допомагає наростити глибину переглядів та знизити кількість відмов, тобто покращити поведінкові фактори відвідувачів веб-сторінок.

Фахівці Google з’ясували, що користувачі:

• помічають уповільнення завантаження в 0,4 секунди;
• залишають сторінки, які завантажуються більше 3-х секунд;
• в інтернет-магазинах відмовляться від повторної покупки в 80 % випадків, якщо перше відвідування сторінка завантажувалася довго.

Також прискорення позитивно позначиться на пошуковому просуванні: за інших рівних показників Google підвищить позицію сторінок з більш оперативним завантаженням.

Який має бути час завантаження

При оптимізації сайту швидкість завантаження сторінок орієнтовно вважається протягом:

• 1 секунди — ідеальна, але практично важко досяжна;
• 2-3 секунд — швидка, до якої прагнуть більшість SEO-фахівців;
•  3-5 секунд – невисокою, але для частини проектів допустимою швидкістю; .

Ці показники можуть змінюватись в залежності від розташування та функціоналу сайту, його типу та обсягу. У деяких нішах може бути доречним завантаження сторінок протягом 5-6 секунд.

На найпопулярнішому ресурсі з вимірювання та збільшення швидкості сайту (називається Google PageSpeed ​​insights) потрібно досягти завдяки рекомендаціям не менше 70-80 балів. Це середній показник, що відповідає приблизно 2-4 секундам.

На початковому етапі перевірте такі параметри завантаження сторінок:

• time to first byte – час на стартовий відгук сервера;
• load time – час, за який завантажаться основні елементи;
• page size – вага, тобто повний розмір;
• requests — обсяг запитів, які надсилаються до бази даних, щоб сформувати цю одиницю веб-ресурсу.

Швидкість відповіді сервера залежить від його віддаленості: у тому ж регіоні час відгуку буде мінімальним після того, як користувач натисне на посилання. Розмір сторінки також має значення, тому що відвідувачі, зачекавши на завантаження сайту з 3D-моделями холодильників 3 секунди, ймовірно, занудьгують і підуть, наростивши відсоток відмов. У цьому випадку власнику необхідно збільшити швидкість завантаження свого сайту, щоб отримати в скарбничку замовлення та зростання продажу.

Що впливає на швидкість завантаження сайту

Кожна веб-сторінка ресурсу складається з окремих елементів – зображень, текстів, скриптів та інших. При завантаженні вся ця структура збирається воєдино, тобто відмальовується. Оптимізація сайту для швидкості завантаження умовно поділяється на дві частини:

• серверну;
• клієнтську.

Перша складається з чотирьох дій:

• DNS-запиту щодо найменування ресурсу;
• підключення за IP-адресою;
• дотримання протоколу HTTPS (установки зашифрованого з’єднання);
• запит URL-адреси відповідної HTML-сторінки та очікування відгуку сервера.

Клієнтська частина складається з 8 алгоритмів:

• завантаження знайденої HTML-сторінки;
• розпізнавання структури файлу браузером та створення набору запитів по черзі;
• завантаження CSS-стилів та їх аналізу;
• стартового відтворення сторінки та роботи з JS-кодом;
• завантаження веб-шрифтів;
• завантаження медіафайлів (зображень, відеоконтенту та інших);
• завершення відтворення та виконання відкладеного JS-коду.

Ці дії можуть змінюватися місцями або відбуватися одночасно, але те, що цей процес складатиметься із зазначеного набору, незмінно.

Щоб помітно збільшити швидкість завантаження сторінок в інтернеті, необхідно проаналізувати всі етапи окремо та виявити причини тих чи інших проблем.

«Якщо спочатку завантажити зображення, які при перегляді не вимагають прокручування сторінки вниз, а потім решта, то це приверне увагу користувача і паралельно прискорить завантаження сайту»

На відміну від користувачів десктопних версій сайтів на мобільних пристроях, користувачі іноді готові чекати до 6-10 секунд, списуючи повільність на провайдера. Але в мегаполісах із розвиненою інфраструктурою інтернету забезпечується стабільний доступ і висока швидкість з’єднання, тому все частіше людям потрібне швидке завантаження ресурсів, щоб отримати такий самий сервіс, як на комп’ютері.

На що впливає швидкість завантаження сайту

Всіх вебмайстрів та розробників хвилюють індексація, ранжування та конверсія — важливі показники сайтів, на які суттєво впливає продуктивність ресурсу. Якщо збільшити швидкість завантаження інтернет-сайтів, то лояльність читачів покращиться.

Індексація

Перед кожним SEO-фахівцем стоїть важливе завдання: забезпечити індексацію сторінок у повному обсязі та якнайшвидше.

Пошукові роботи при відвідуванні сторінок мають певний ліміт часу, тому, чим повільніше вантажиться ресурс, тим менша кількість сторінок пройде індексацію. Крім того, якщо тексти та зображення будуть завантажуватися надто довго, пошукові системи можуть вирішити, що сайт недоступний.

У результаті роботи не зможуть індексувати нові сторінки або перестануть враховувати раніше індексовані. Проведення оптимізації швидкості сайтів допоможе усунути проблему з індексацією.

Ранжування

Для будь-якого веб-проекту швидкодія є одним із 200 параметрів, які впливають на його ранжування у пошуковій видачі. Проте воно є обов’язковою частиною юзабіліті, щоб відвідувачі могли зручно використовувати ресурс.

Якщо збільшити швидкість завантаження сайту для Google, позиція у видачі може не змінитись. Зате оперативність показника time to first byte (час стартового відгуку сервера) суттєво позначиться на ранжируванні: чим швидше відповідь сервера, тим становище сайту вище.

Поведінкові фактори людей, які прийшли на заслання, відіграють важливу роль. Нудні читачі можуть не дочекатися завантаження сторінки і просто закриють її, що системи пошуку візьмуть за відмову.

«Чим вищий відсоток відмов від знаходження на сторінці, тим нижча її позиція у пошуковій видачі»

Низька швидкість завантаження – фактор зменшення рейтингу ресурсу пошуковими системами. Водночас оптимізація швидкості роботи сайту до неймовірних величин не стає запорукою підвищення рейтингу сайту, оскільки роботи аналізують його комплексно, враховуючи щонайменше 200 метрик.

Суттєва різниця в ранжируванні може виникати між швидкими та повільними порталами, а з проектами, у яких виявлено середню швидкість завантаження, вона буде малопомітною.

Тому не варто гнатися за гарним результатом, краще провести оптимізацію швидкості сайтів, якщо є відмови у метриці.

Конверсія

Повільно працюючий сайт приречений на зниження обсягу продажів, оскільки користувачі частіше обирають відмову від послуг. І не має значення, наскільки цікавим є контент чи привабливі рекламні пропозиції: відвідувачам, швидше, набридне чекати завантаження сторінки, і вони достроково залишать ресурс. Існує лише один вихід – збільшити швидкість роботи сайту.

Інженери Google у численних опитуваннях отримують такі результати:

• не більше 45-47% відвідувачів готові почекати повного відтворення не довше 2 секунд;
• уповільнення завантаження лише на 1 секунду загрожує втратою лояльності 15-16% респондентів;

Крім того, у користувачів мобільних гаджетів також зросли вимоги щодо продуктивності інтернет-ресурсів. Щонайменше 85% респондентів відповіли, що хочуть швидкого відкриття сторінок на телефонах, як на комп’ютерах.

Від гальмування інтернет-ресурсів знижується не лише рівень продажів, а кількість внутрішніх переходів та тривалість перебування відвідувача на майданчику блогу. Замислюючись збільшити швидкість відкриття сторінок інтернету на вашому ресурсі, будьте готові до зростання конверсії та лояльності покупців загалом до вашої компанії.

Інструменти для моніторингу швидкості завантаження сайту

Перед тим, як збільшити швидкість завантаження сайту, перевірити його показники можна за допомогою спеціально розроблених сервісів.

Google PageSpeed ​​Insights

Миттєво отримати оцінку оптимізації сайту дозволяє найзручніший і найпростіший аналізатор, який знаходиться за адресою: https:// developers.google.com/speed/pagespeed/insights/?hl=UA. Введіть у рядок пошуку URL сайту, що цікавить, і натискаєте кнопку «Аналізувати».

Цей інструмент за допомогою наочної інфографіки дозволить дізнатися:

• швидкість відкриття сторінок;
• рівень оптимізації для десктопної та мобільної версії сайту.

Оцінка швидкодії веб-ресурсу визначається двома показниками: 

• FCP — стартове відображення контенту; якщо цифра невелика, це говорить про наявність проблем зі з’єднанням або вагою сторінок, що використовуються;
• DCL — повне завантаження HTML і створення браузером об’єктної моделі документа для зберігання в пам’яті (DOM-дерева).

Цей аналізатор дозволяє переглянути поточну швидкість сайту та відстежити проблемні місця, а також з’ясувати оцінку якості проведеної оптимізації. Інструмент хороший тим, що видає прості та наочні поради, які допомагають насправді покращити ситуацію.

Більшість компаній, які займаються розробкою та просуванням сайтів, використовують цей популярний сервіс у роботі.

Pingdom

Цей інформер допомагає розраховувати середній час завантаження та кількість запитів, що надсилаються на сервер. При цьому він докладно відображає необхідну інформацію щодо швидкодії окремих елементів: картинок, стилів, JS, скриптів та інших ділянок. Всі проблемні фрагменти, що гальмують, стануть видні, а також сервіс дасть поради щодо поліпшення ситуації.

На сторінці Pingdom можна ввести адресу сайту та вибрати континент, а потім натиснути кнопку «Start test».  Власникам сайту за допомогою цього інструменту зручно моніторити історію продуктивності, оскільки ресурс зберігає всі результати перевірок.

Звіт Google Аналітики

Всі, хто використовує інструменти Google для веб-майстрів, може у звітах знайти відомості про параметри швидкості сайту та підказки, як збільшити швидкість завантаження сторінок інтернету. Ресурс цінується за те, що аналіз сайту відбувається в реальному часі і на основі даних про читачів, що існують зараз.

У результатах виміру можна побачити загальну картину усередненої швидкості:

• відгук сервера;
• пошук домену;
• процесу переадресації;
• завантаження сторінок.

В окремій колонці можна знайти відомості про продуктивність сайту, що враховують браузер та країну.

Крім того, GA (Google Аналітика) надасть дані про можливості користувача: швидкість завантаження, окремих URL-сторінок у порівнянні із загальною продуктивністю проекту.

Розробники передбачили можливість для веб-майстрів та власників ресурсів отримати цінні поради про те, як збільшити швидкість роботи сайту, щоб він сприяв підвищенню лояльності користувачів.

Оцінити переваги інструмента можна після авторизації та додавання ресурсу до свого облікового запису. Дані сайту автоматично відображатимуться в різних уявленнях, де потрібно відкрити розділ «Звіти», знайти пункт «Поведінка» та відкрити потрібну статистику «Швидкість завантаження сайту».

Як прискорити завантаження сайту

Я розповім про наявні підручні засоби та ефективні прийоми, які допомагають збільшити швидкість відкриття сторінок інтернету. Вже через 5-7 хвилин ви зможете на практиці застосувати їх і побачити результат за допомогою вищеописаних сервісів.

Для прискорення завантаження вашого сайту необхідно звернути увагу на його серверну та клієнтську частини – ці узагальнюючі сегменти формують згадану статистику. До речі, відстань між користувачем та сервером має бути мінімальною, тому вирішувати проблему віддаленості допомагають CDN-сервіси, що завантажують картинки з найближчого власного ресурсу.

Покращення сервера

Системний адміністратор легко протестує і скоординує цю частину, адже збільшити швидкість сервера доведеться всім користувачам, незалежно від того, яким типом пристроїв і якою швидкістю підключення вони користуються.

Поліпшення хостингу

Недостатність ресурсів хостингу – головна проблема для власників невеликих блогів. У деяких випадках раціональніше прискорити дискову систему та CPU за рахунок переходу на більш розвинений тариф.

 Існує кілька типів хостингу, які вирішують завдання клієнтів:

• віртуальний розділений;
• віртуальний сервер (VPS);
• виділений сервер.

Чим більший сайт і повільніше швидкість відкриття сторінок, тим більше простору він займає.

Розділений сервер має:

• невисокою вартістю;
• безкоштовними доменними іменами;
• обслуговується техпідтримкою та не вимагає спеціальних знань для власника.

VPS-сервер надає:

• виділений ресурс;
• трафік інших сайтів не впливає на продуктивність ваших сторінок;
• легко налаштовувати, просто масштабувати;
•  дає Root -права доступу до сервера.

Виділений сервер найдорожчий, оскільки призначений виключно для одного сайту. На його основі ви отримуєте:

• повне управління конфігурацією;
• Root-доступ;
• одноосібне управління;
• високий рівень захисту.

Але якщо вартість додаткового обладнання та послуг виявиться помітно вищою, ніж витрати на роботи з оптимізації продуктивності, можна застосувати такі методи.

Налаштування сервера Nginx

Скористатися виділеним сервером Nginx — чудова можливість збільшити швидкість завантаження сайтів. Найбільш ефективний такий спосіб при обробці статичного контенту, і навіть показник 600 000 запитів в одну секунду на Linux можна оптимізувати, правильно налаштувавши параметри.

Позбавлення невикористовуваних модулів nginx

Це не тільки прискорює роботу сервера, а й знижує ризик його вразливості. Досягається за допомогою команди:

«# ./configure –without-http_autoindex_module –without-http_ssi_module

# make

# make install»

У результаті ви отримуєте Nginx з віддаленими модулями SSl та Autoindex, дія яких на практиці не дає результату.

Запустіть скрипт конфігурації (configure) з прапорцем допомоги -help, і ви виявите інші модулі, які можна без жалю видаляти з веб-серверів.

Зміни в секції server

Щоб збільшити швидкість завантаження сторінки сайту, внесіть до цієї секції такі рядки:

# vi /etc/nginx/nginx.conf

# Таймаут під час читання тіла запиту клієнта

client_body_timeout 10;

# Таймаут під час читання заголовка запиту клієнта

client_header_timeout 10;

# Таймаут, після якого keep-alive з’єднання з клієнтом не буде закрито з боку сервера

keepalive_timeout 5 5;

# Таймаут під час передачі відповіді клієнту

send_timeout 10;

Вони допоможуть скоротити час та виключити затримки кількох процесів.

Стиснути дані

Для збільшення швидкості відповіді сайту проведіть процедуру зниження ваги трафіку, що передається. У файлі конфігурації, який знаходиться за адресою /etc/nginx/nginx.conf , секцію http {…} поповніть такою інформацією:

gzip on;

gzip_static on;

gzip_comp_level 5;

gzip_min_length 1024;

gzip_proxied any;

gzip_types text/plain application/xml application/x-javascript text/javascript text/css text/json;

У результаті зменшиться розмір файлів, і сторінки будуть відкриватися швидше.

Кешування статичних файлів

У цьому файлі знайдіть розділ server і доповніть його рядками:

location ~* ^.+.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {

root /var/www/user/data/www/site.ru;

expires 7d;

В останній міститься термін зберігання кешу на комп’ютері користувача.

«Ці дії можуть виконати лише власники виділених та веб-серверів, оскільки на звичайному віртуальному хостингу редагувати конфігурацію Nginx не вийде через відсутність доступу.»

У цьому випадку можна попросити фахівців техпідтримки хостингу внести необхідне коригування, щоб збільшити швидкість відкриття сторінок інтернету.

Налаштування сервера Apache

Найзручнішу можливість для оптимізації веб-сервера надає компанія Google у вигляді модуля mod-pagespeed. Після інсталяції приєднайтеся через SSH до сервера і введіть рядки:

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

dpkg -i mod-pagespeed-*.deb

apt-get -f install

/etc/init.d/apache2 restart

Потім у директорії /var/cache/mod_pagespeed переконайтеся, що модуль правильний.

«Папки вашого сайту з кешуванням запитів до сервера Apache формуються автоматично»

Цей інструмент допомагає:

• усунути зайві прогалини, атрибути HTML-документів;
• об’єднати файли декількох форматів (JS, HTML та CSS) в один;
•  конвертувати зображення у розмір < ;img />, встановлений тегом.

Крім того, він використовує інші способи оптимізації, суттєво прискорюючи відкриття сторінок сайту.

Налаштування серверного кешування

Принцип цієї операції полягає в тому, щоб за допомогою записів у файлі прискорити видачу сервером статичної версії сайту.

«Цими діями ви зможете оптимізувати швидкість роботи свого сайту та знизити навантаження на БД (базу даних) та сервер»

Якщо самостійно виконати ці дії не виходить, можна звернутися до компанії Solarweb. Фахівці допоможуть збільшити продажі, підвищити конверсію, залучити потенційних покупців із соцмереж та цільову аудиторію з мінімальними витратами.

У новій папці, створеній вами на сервері, яку можна назвати будь-яким допустимим ім’ям (cash або іншим), на сторінці PHP з самого початку рядка напишіть:

<?php

  if (file_exists(‘cache/index_’.$_GET[“page”].’_’.$_GET[“id”].’.cache’))

  {

readfile(‘cache/index_’.$_GET[“page”].’_’.$_GET[“id”].’.cache’); exit();

  }

  ob_start();

  // далі йде будь-який ваш HTML-PHP код

  include(“includes/bd.php”);

?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>< /p>

…

Якщо на сервері існує файл index_xx_yy.cache, то скопіюйте вміст і відобразіть його на екрані, де xx — змінна $_GET[“page”], а yy — значення змінної   $_GET[“id”].

Якщо такий файл відсутній, у папці Cash увімкніть буфер і впишіть у нього всі процеси, які запущені на сторінці.

Після тега додайте:

<?php

  $buffer = ob_get_contents();

  ob_end_flush();

  $fp = fopen(‘cache/index_’.$_GET[“page”].’_’.$_GET[“id”].’.cache’, ‘w’); >

  fwrite($fp, $buffer);

  fclose($fp);

Внесіть у $buffer весь вміст, а потім зупиніть буферизацію та видаліть контент. Потім відкрийте файл index_xx_yy.cache (якщо його немає на сервері, то створіть) і запишіть файл  $fp дані $buffer.

Оптимізація бази даних

Зростання сайту збільшує обсяг його БД (бази даних), що призводить до гальмування її роботи. Тому потрібно періодично позбавлятися різного сміття: спаму, застарілих таблиць та іншого.

Цей процес можна здійснити вручну, використовуючи пункт SQL – phpMyAdmin хостингу. Але це довгий шлях, набагато простіше налаштувати оптимізацію в автоматичному режимі за допомогою спеціальних плагінів:

Встановіть програму Notepad++ на свій ПК та підключіться до хостингу за FTP.

У папці public_html знайдіть файл wp-config.php і перемістіть його на робочий стіл.

Відкрийте його програмою Notepad++ і під рядком під назвою бази даних додайте дві команди:

•  define(‘WP_POST_REVISIONS’, false);
• define(‘EMPTY_TRASH_DAYS’, 1);

Перша заборонить проводити ревізії постів, а друга поставить завдання очищати кошик через день. Тепер можна оновити файл та повернути його мишкою на хостинг, замінивши новою версією попередню.

Оптимізація мережевих налаштувань сервера

У цьому розділі я розповім про тонкі мережеві налаштування сервера, які сприяють прискоренню його роботи. Не варто очікувати разючих результатів, але й фінансових витрат це не вимагатиме.

TCP — мережевий протокол, що користується широкою популярністю. Він функціонує на основі перезавантаження вікон. Чим більше кількість пакетів, що передаються (габарити вікна), тим вище пропускна здатність. Тому важливо правильно розрахувати обсяг буфера TCP та налаштувати його. На практиці розробники часто використовують параметри затримки та смуги пропускання, збільшивши їх вдвічі.

Для зміни розмірів буфера використовуйте команду Setsockopt С, а Java —setReceiveBufferSize і setSendBufferSize. Коригування спрямоване на активізацію роботи сервера та масштабних порталів. При цьому необхідно пам’ятати про регулярне оновлення системи.

Налаштування TLS скорочує відгук сервера та підвищує рівень безпеки з’єднань. У файлі конфігурації Nginx виконайте зміни:

• підключіть роздільний кеш сесій і вимкніть вбудований аналог;
• перевірте, щоб кількість операцій відповідала числу процесорів;
•  дайте дозвіл на keep-alive з’єднання;
•  продовжіть час сесії.

У HTTP/2 — порівняно молодому протоколі, вже внесено механізми, що забезпечують швидкодію та зменшують вплив мережевих затримок.

Кількість запитів HTTP

Прискорення відкриття сторінок веб-проекту допомагає зменшити кількість:

• інтерактивних мультимедіа (Flash);
• скриптів;
• CSS;
• зображень.

На цих елементах затримка сайту може становити до 80% часу. Як скоротити обсяг запитів, не змінюючи зовнішній вигляд сторінок?

Добитися такого результату допомагають вбудовані картинки inline images та CSS-спрайти, тобто набір з кількох зображень або фрагментів, комбінованих в один блок.

Це ефективний спосіб зменшити кількість запитів, якщо на сторінці знаходяться кілька CSS та JS-елементів, які легко скомпілювати в один файл.

Зменшення кількості редиректів

У практиці просування сайтів часто доводиться повідомляти серверу, що адреса тієї чи іншої сторінки була змінена. Перенаправлення у вигляді 301-директів дають можливість обійти сторінку з помилкою 404, але при цьому гальмують сайт. Особливо критична така ситуація для власників мобільних пристроїв, коли вони змушені здійснювати додаткові переходи. Фахівці Google рекомендують по можливості скорочувати кількість перенаправлень.

Відшукати редиректи на сайті вам допоможе програма Screaming Frog SEO Spider. Встановіть її на комп’ютер — утиліта Screaming Frog вже за кілька хвилин видасть проблемні місця.

Як збільшити швидкість завантаження певного двигуна

Іноді проблема полягає в особливостях завантаження того чи іншого движка сайту.

WordPress

Щоб оптимізувати Java Script та CSS, потрібно встановити плагін Autoptimize. Також можна використовувати при завантаженні скориговані елементи сторінок із Google PageSpeed ​​Tool.

Важлива роль у вазі сторінки відводиться обраній темі. Якщо діюча версія уповільнює проект, то краще її змінити.

Opencart

Зверніть увагу на зменшення розмірів статичного контенту. Модуль Google ModPagespeed чудово підійде для Nix-систем. Крім того, для стиснення зображень можна використовувати Gzip.

Joomla

Ілюстрації краще оптимізувати під web-контент. У цьому випадку їхня вага значно зменшиться. Не варто завантажувати зображення з високою роздільною здатністю, щоб надалі їх зменшувати через CSS та HTML. Такі елементи вважаються неблагополучними та гальмують сторінку.

1C Бітрікс

Зайдіть до адміністративної панелі цієї просунутої CMS. Ви побачите безліч корисних налаштувань:

•  «Автокешування»;
• «Оптимізація CSS».

В них можна вибрати функції, що цікавлять: стиснення зображень, об’єднання файлів та інші.

Підсумки

Тепер ви побачили, що збільшення швидкості завантаження сторінки позитивно впливає на конверсію, індексацію та ранжування. Використовуючи практичні поради зі статті, власники можуть оптимізувати сайт, докладаючи до цього мінімальних зусиль.  

Виконання цих рекомендацій – процес не складний, але дуже відповідальний. Не варто нехтувати звітами сервісів та ігнорувати регулярне проведення оптимізації сайту.