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

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

Що таке HTTP-запит?

Коли браузер відображає сторінку, він запитує веб-сервера по протоколу HTTP різні статичні компоненти сторінки (наприклад, CSS, скрипти JavaScript або зображення), і сервер відповідає, посилаючи браузеру відповідні файли.

Запит, посланий браузером сервера за допомогою HTTP, називається «HTTP-запит».

Аналіз HTTP-запиту

Щоб краще зрозуміти сенс HTTP-запиту, погляньте на HTML-код простий веб-сторінки:

Аналіз HTTP-запитів та впливу їх числа на продуктивність WordPress

Як бачите, дана сторінка містить у собі 4 HTTP-запиту.

Вплив числа HTTP-запитів на WordPress

Як сказано в Правилах продуктивності Yahoo:

80% часу відгуку середнього веб-сайту залежить від роботи фронтенда. Більша частина цього часу йде на завантаження всіх компонентів сторінки: графіки, стилів, скриптів, Flash-анімації і т. д.

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

З вищенаведеної цитати ми можемо справедливо зробити висновок, що, чим менше кількість HTTP-запитів, тим швидше сайт. Тому середній сайт на WordPress, що містить безліч зображень, стилів і скриптів, схильний бути повільним.

Підрахунок числа HTTP-запитів

Число запитів, що містяться в одній сторінці, нескладно підрахувати за допомогою розширення для браузера Firefox, яке називається Firebug, або вбудованого в браузери Opera і Google Chrome інструменту «Inspect Element».

Використовуємо Firefox

Переконайтеся, що Firebug встановлено:

  • Відкрийте ваш блог на WordPress і натисніть F12, щоб відкрити консоль Firebug;
  • Перейдіть на вкладку «Мережа». Якщо вона заборонена, дозвольте її;
  • Оновіть сторінку вашого сайту, щоб Firebug захопив і записав всі HTTP-запити;
  • Ви побачите загальна кількість запитів у нижній частині вкладки:

Аналіз HTTP-запитів та впливу їх числа на продуктивність WordPress

Використовуємо Google Chrome або Opera

На відміну від Firefox, Opera або Google Chrome нам не потрібно встановлювати будь-якого розширення. Ми можемо використовувати інструменти, вбудовані в ці браузери.

Такі кроки можна використовувати в обох браузерах:

  • Відкрийте ваш сайт на WordPress;
  • Клацніть правою кнопкою миші на сторінці і виберіть пункт «Дослідити елемент»;
  • Перейдіть на вкладку «Мережа» і оновіть сторінку сайту;
  • Ви побачите загальна кількість запитів у нижній частині вкладки:
    Аналіз HTTP-запитів та впливу їх числа на продуктивність WordPress

Чи знаєте ви, що установка більшості плагінів для WordPress збільшує кількість компонентів на сторінці, тим самим збільшуючи кількість HTTP-запитів?

Як плагіни і теми збільшують число HTTP-запитів

Безліч плагінів, які ми встановлюємо, збільшують кількість запитів HTTP непомітно для нас.

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

Щоб зрозуміти, як відбувається збільшення кількості HTTP-запитів, розглянемо в якості прикладу плагін WP Subscriber Form.

Активація плагіна помістить форму підписки у підвал посади, а також включить посилання на свій файл стилів сторінки WordPress:

Аналіз HTTP-запитів та впливу їх числа на продуктивність WordPress

Переглядаючи вихідний код сторінки після активації плагіна можна виявити додавання посилання на новий CSS-компонент, що означає один додатковий HTTP-запит:

Теми WordPress, аналогічно плагінів, містять багато CSS і JavaScript-включень. Типова тема містить кілька шрифтів, файл стилів JavaScript-компоненти та бібліотеки, що веде до зростання числа запитів.

Як співвідносяться мінімізація і HTTP-запити

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

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

Як зменшити число HTTP-запитів на WordPress-сайті

Щоб зменшити кількість HTTP-запитів, потрібно зробити так, щоб сторінка містила менше зображень, стилів і скриптів.

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

WordPress використовує в своїх темах CSS-тег background-image. Ви можете перевести зображення, завантажені цим тегом, спрайт.

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

Існують спеціальні плагіни для WordPress: WP Minify і Better WordPress Minify. Я сам використовував ці плагіни і з задоволенням рекомендую їх вам. Вони об’єднують файли стилів і скриптів і тим самим зменшують число HTTP-запитів.

Якщо ви використовуєте плагін W3 Total Cache, то у вищенаведених плагінах немає необхідності, так як W3 Total Cache має опції для комбінування та мінімізації стилів і скриптів:

Аналіз HTTP-запитів та впливу їх числа на продуктивність WordPress

Будучи веб-розробником, я редагую плагіни, які додають компоненти в WordPress, вирізаючи з них JavaScript і CSS, комбінуючи їх і поміщаючи всередину скриптів і стилів моєї теми.

Висновок

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

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

Переклад статті «Analysis and Effects of HTTP Requests on WordPress Performance» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here