Від швидкості завантаження сучасного веб-сайту залежить утримання відвідувачів, їх залученість і, в кінцевому підсумку, конверсія. У свою чергу, на швидкість завантаження сайту впливає безліч факторів, і один з найбільш істотних – кількість HTTP-запитів.
У цій статті я поясню, що таке HTTP-запит, як підрахувати кількість запитів стосовно до конкретної веб-сторінки, як ця кількість впливає на продуктивність WordPress, як різні плагіни і теми можуть знижувати швидкість завантаження сайту і як можна вирішити проблему низької швидкості.
Що таке HTTP-запит?
Коли браузер відображає сторінку, він запитує веб-сервера по протоколу HTTP різні статичні компоненти сторінки (наприклад, CSS, скрипти JavaScript або зображення), і сервер відповідає, посилаючи браузеру відповідні файли.
Запит, посланий браузером сервера за допомогою HTTP, називається «HTTP-запит».
Аналіз HTTP-запиту
Щоб краще зрозуміти сенс HTTP-запиту, погляньте на HTML-код простий веб-сторінки:
Як бачите, дана сторінка містить у собі 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-запити;
- Ви побачите загальна кількість запитів у нижній частині вкладки:
Використовуємо Google Chrome або Opera
На відміну від Firefox, Opera або Google Chrome нам не потрібно встановлювати будь-якого розширення. Ми можемо використовувати інструменти, вбудовані в ці браузери.
Такі кроки можна використовувати в обох браузерах:
- Відкрийте ваш сайт на WordPress;
- Клацніть правою кнопкою миші на сторінці і виберіть пункт «Дослідити елемент»;
- Перейдіть на вкладку «Мережа» і оновіть сторінку сайту;
- Ви побачите загальна кількість запитів у нижній частині вкладки:
Чи знаєте ви, що установка більшості плагінів для WordPress збільшує кількість компонентів на сторінці, тим самим збільшуючи кількість HTTP-запитів?
Як плагіни і теми збільшують число HTTP-запитів
Безліч плагінів, які ми встановлюємо, збільшують кількість запитів HTTP непомітно для нас.
Велика частина плагінів використовують власні стилі і скрипти. Вони додають посилання на ці компоненти до кожної сторінки WordPress, що збільшує число HTTP-запитів.
Щоб зрозуміти, як відбувається збільшення кількості HTTP-запитів, розглянемо в якості прикладу плагін WP Subscriber Form.
Активація плагіна помістить форму підписки у підвал посади, а також включить посилання на свій файл стилів сторінки 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 має опції для комбінування та мінімізації стилів і скриптів:
Будучи веб-розробником, я редагую плагіни, які додають компоненти в WordPress, вирізаючи з них JavaScript і CSS, комбінуючи їх і поміщаючи всередину скриптів і стилів моєї теми.
Висновок
Важко переоцінити значення прискорення роботи веб-сайту. Повільний сайт відштовхує відвідувачів.
Існує багато прийомів прискорення роботи веб-сайтів, один з яких – зменшення числа HTTP-запитів – ми і розглянули в цій статті.
Переклад статті «Analysis and Effects of HTTP Requests on WordPress Performance» був підготовлений дружною командою проекту Сайтостроение від А до Я.