Як зробити менше запитів HTTP у WordPress та GTmetrix YSlow

Потрібно зробити менше HTTP-запитів на вашому сайті WordPress?


Це просто означає, що вам потрібно зменшити кількість елементів (запитів) на ваш сайт.

Зробити менше HTTP запитів

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

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

1. Поєднайте таблиці стилів CSS + JavaScript

Поєднання таблиць стилів CSS + JavaScript означає, що вам потрібно скопіювати / вставити все у файли CSS в один файл. Це дозволяє браузерам робити один єдиний запит на файл CSS замість кількох запитів. У більшості плагінів кешу є можливість комбінувати файли CSS + JavaScript.

Крок 1: У налаштуваннях додатка кеша знайдіть опцію комбінувати та мінімізувати CSS + JavaScript.

Крок 2: Увімкніть по черзі кожне налаштування та результати тестування в GTmetrix.

Мінімізуйте комбінування файлів CSS

Мінімізуйте комбінування файлів JavaScript

Крок 3: Перевірте видимість помилок на своєму веб-сайті. Якщо ви бачите помилки, перегляньте вихідний код, знайдіть проблемні файли та виключіть їх із налаштувань мінімізації CSS або JavaScript. Наприклад, якщо ваш слайдер зникає при включенні певного параметра, перевірте свої файли слайдера у вихідному коді та виключіть проблемний файл. Якщо ви не бачите помилок, у цьому немає необхідності.

Крім того, ви можете вручну об’єднати ваші CSS файли в WordPress під зовнішнім виглядом > Тематичний редактор. Ви просто скопіюйте та вставте вміст у всі файли в один єдиний CSS-файл.

CSS файли WordPress

2. Вибіркове вимкнення плагінів

Багато плагінів працює на всьому веб-сайті, навіть на сторінках, де вони не потрібні.

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

Якщо вимкнути плагіни на сторінках, де їх не потрібно завантажувати, це призводить до меншої кількості HTTP-запитів. Це не обмежується додатками; сценарії та стилі також можна відключити на певних сторінках (наприклад, сценарії, стилі, кошики WooCommerce можна відключити на сторінках, що не входять в електронну комерцію).

Крок 1: Встановіть очищення активів або Perfmatters (обидва дозволяють вибірково відключати плагіни).

Крок 2: Відредагуйте сторінку чи публікацію, прокрутіть униз до розділу очищення активів та перегляньте, які файли CSS + JavaScript завантажуються на сторінку. Це можуть бути плагіни, теми чи зовнішні сценарії.

Вимкнути зовнішні сценарії WordPress

Крок 3: Вимкніть усі додатки та запити, які вам не потрібні на цій сторінці. Ви можете відключити їх на одній сторінці на всьому веб-сайті за типом публікації або використовувати RegEx (регулярні вирази), щоб відключити їх за певними шаблонами URL-адрес. RegEx поставляється лише з Perfmatters або Asset CleanUp Pro.

3. Вимкніть сценарії, стилі та фрагменти кошика WooCommerce

Сайти WooCommerce, природно, генерують більше HTTP-запитів.

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

Використовуючи програму Asset CleanUp або Perfmatters, відключіть їх на сторінках, де їх не потрібно завантажувати:

Актив CleanUp WooCommerce

Крім того, Perfmatters дозволяє вимкнути їх у 1 клік:

оптимізація зовнішньої комерції

4. Уникайте високих плагінів процесора

Високі плагіни CPU можуть генерувати безліч HTTP-запитів.

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

Крок 1: Перевірте наявність повільних плагінів у GTmetrix Waterfall або Монітор запитів.

Повільний WordPress-плагін

Крок 2: Уникайте відомих плагінів високого процесора.

  1. Додайте це
  2. Моніторинг шахрайства щодо натискань AdSense
  3. Календар подій “все в одному”
  4. Резервний приятель
  5. Бівер будівельник
  6. Краще WordPress Google XML мапи сайту
  7. Перевірка зламаної посилання (використовуйте доктор перевірка посилання)
  8. Постійний контакт для WordPress
  9. Контактна форма 7
  10. Переглянути всі 65 повільних плагінів

Крок 3: Замініть повільні плагіни швидшими, легкими плагінами. Необхідні дослідження та тестування.

5. Замініть плагіни кодом

Ви можете уникнути багатьох плагінів, замінивши їх кодом.

Приклади:

  • Google Fonts: розміщуйте свої шрифти локально
  • Код відстеження Google Analytics: вставити вручну
  • Зміст: спроектуйте його вручну в HTML + CSS
  • Вбудовані твіти або Карти Google: замість цього зробити знімок екрана
  • Вбудований віджет Facebook: замініть фактичним віджетом Facebook

Об’єднання плагінів також допомагає. Класичним прикладом є використання WP Rocket, яке постачається з розміщенням шрифтів, аналітикою та Facebook Pixel локально, ледачим завантаженням зображень + відео, очищенням бази даних, попередньою завантаженням, серцебиттям та інтеграцією як Cloudflare, так і декількох CDN. З іншими плагінами кешу (оскільки у більшості з них немає цих функцій) вам потрібно буде встановити 6-7 додаткових плагінів, щоб отримати ці оптимізації швидкості, коли вони вбудовані в WP Rocket.

6. Усуньте зовнішні сценарії

Зовнішні сценарії – це все, що тягне запити із зовнішніх веб-сайтів.

Шрифти Google можна об’єднати в 1 файл. Відеозаписи можуть бути ледачими, а кадр замінити на попередній образ. Багато сценаріїв можна оптимізувати, інші – не. Нижче наведено кілька прикладів.

  • Google Шрифти: комбінуйте шрифти та розмістіть їх локально, використовуючи плагіни, такі як WP Rocket, Autoptimize, OMGF, Self-hosting Google Fonts та Asset CleanUp.
  • Google Analytics: код відстеження хоста локально в WP Rocket / CAOS Analytics.
  • Google AdSense: завантажте асинхронно та спробуйте Cloudflare Rocket Loader.
  • Гугл-мапи: сфотографуйте Карту Google і додайте посилання на вказівки щодо руху, коли люди натискають на зображення (це виглядає так само добре, як і Карта)!
  • Менеджер тегів Google: зазвичай приносить більше шкоди, ніж користі при спробі поєднання декількох сценаріїв. Потрібно використовувати лише для великих неоптимізованих сайтів.
  • Вбудовані відео: використовуйте WP Rocket або WP YouTube Lyte, щоб ледаче завантажувати відео та замінювати iframe зображенням попереднього перегляду (відео дуже важкий елемент).
  • Вбудовані віджети + пости: візьміть скріншоти, а не вставляйте їх.
  • Facebook Pixel: WP Rocket може додати кешування браузера до Facebook Pixel.
  • Граватари: для мене нічого не вийшло, окрім відключення Gravatars (WP Rocket також не використовує їх у своєму блозі). Але, ви можете спробувати Гаррі, Ф. В. або Оптимальний кеш-граватар, або спробувати зламати або приховати розгорнуті коментарі.
  • Плагіни соціального доступу: ганебно генерувати запити з Facebook, Twitter та соціальних мереж, щоб оновити, як рахувати. Спробуйте більш швидкий плагін, як Соціальний мопс, Машшарер, Соціальне оснащенняAddToAny, WP Соціальний обмін, або Легка соціальна частка

7. Поєднайте шрифти Google

Шрифти Google можна комбінувати для створення 1 запиту замість кількох запитів.

Google-Fonts-GTmetrix

У наступних плагінах є варіанти оптимізації Google Fonts:

  • Ракета WP
  • Очищення активів
  • Автоматично оптимізувати
  • OMGF

Найкращий спосіб, однак, – це розміщення Google Fonts на локальному рівні. Це передбачає завантаження ваших шрифтів безпосередньо з веб-сайту Google Fonts, при цьому мінімальна кількість шрифтів та ваги шрифту. Далі, використовуйте такий інструмент Трансфонтер або конвертувати шрифти у файли веб-шрифтів. Потім ви завантажите нові файли веб-шрифтів у папку wp-content / uploads, додасте спеціальний шрифт до CSS та протестуйте шрифт, щоб переконатися, що він працює. Знову дивіться це посилання для повного підручника.

Transfonter-Google-Font-Conversion

7. Мінімізуйте HTML, CSS, JavaScript

Мінімізація файлів зазвичай виконується вашим плагіном кешу (див. Крок 1).

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

8. Оптимізуйте доставку CSS

Це має виправити ресурси, що блокують рендер елемент у статистиці PageSpeed ​​Speed.

WP Rocket, Autoptimize та інші подібні плагіни повинні мати можливість оптимізувати доставку CSS. Просто увійдіть у свої налаштування та переконайтеся, що ви це ввімкнули, і це має виправити.

Оптимізуйте доставку CSS

9. Відкладіть / завантажте комбіновані файли JavaScript асинхронно

Асинхронний JavaScript означає завантаження файлів після сторінка закінчується завантаженням.

Це можна зробити за допомогою WP Rocket або Async JavaScript і має виправити видалити блокування візуалізації блоку. Async JavaScript дає вам повний контроль над тим, до яких сценаріїв слід додати атрибут “async” або “defer”, тоді як WP Rocket автоматично відкладає JavaScript за допомогою одного клацання.

Файли JavaScript

10. Ледачі завантаження відео

Вбудовані відео – це зовнішні ресурси, які генерують HTTP-запити.

Для завантаження вони можуть зайняти 2+ секунди! Хоча ви не можете їх повністю усунути, ви можете затримка завантаження відео поки користувачі не прокрутять вниз (ліниве навантаження) і натисніть кнопку відтворення (легке вставлення).

Тут у вас є кілька варіантів: ви можете використовувати WP Rocket, щоб увімкнути ледачу завантаження та замінити iframe YouTube на зображення попереднього перегляду. Але якщо у вас немає WP Rocket, ви можете спробувати Плагін WP YouTube Lyte або дотримуйтесь цього підручник про легкі вставки в YouTube. Обидва працюють добре.

Ось приклад (і чудове відео на WordPress Speed):

11. Додайте CDN

CDN можуть допомогти зробити менше HTTP-запитів.

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

Кілька CDN = більше центрів обробки даних = швидша доставка контенту та більше завантаження ресурсів. Багато людей починають з Cloudflare, а потім зрештою заглядають у StackPath при використанні декількох CDN (я зараз використовую обидва). KeyCDN також хороший. Це називається “ланцюжком” CDN.

Налаштування декількох CDN
За допомогою Cloudflare вони призначають вам 2 наборів імен, які ви змінюєте у своєму реєстрі домену. З іншими CDN, такими як StackPath та KeyCDN, вони призначають вам URL-адресу CDN, яку ви вставите в поле URL-адреси CDN у вашому плагіні кешу (у більшості з них є) або використовуйте програму CDN Enabler.

Кілька CDN

12. Мінімізуйте перенаправлення

Непотрібні переадресації можуть спричинити додаткові запити HTTP.

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

Мінімізувати помилки перенаправлення

Загальні причини

  • Погані плагіни
  • Зовнішні сценарії
  • Змінено на WWW vs Non-WWW, але не оновлено посилання
  • Змінено на HTTPS на не HTTPS, але не оновлено посилання

13. Оптимізуйте зображення

Для зменшення HTTP-запитів, викликаних зображеннями, є три основні способи оптимізації зображень:

Подавати масштабовані зображення: зміни розміру великих зображень для зменшення розміру. GTmetrix повідомляє, які зображення занадто великі та правильні розміри, на які слід обрізати / змінити розміри. Спробуйте створити шпаргалку щодо розмірності зображення, вимірявши розміри ваших повзунків, зображень блогу повної ширини, віджетів та інших областей вашого веб-сайту. Потім перед завантаженням переконайтесь, що потрібно змінити розмір зображень до правильних розмірів. Якщо ви це зробите, ви ніколи не повинні подавати масштабовані помилки зображення.

Оптимізація зображень (стиснення без втрат): використовуйте плагін типу ShortPixel (рекомендується), Smush або Imagify для стиснення зображень. Хоча ці плагіни кажуть, що без втрат, ви можете іноді помітити невелику втрату якості. Ось чому найкраще створити резервну копію своїх зображень і протестувати пару з них, перш ніж групово оптимізувати всі зображення на вашому веб-сайті, щоб переконатися, що ви задоволені якістю.

Вкажіть параметри зображення: додайте ширину + висоту до HTML або CSS зображення. Це робиться автоматично у візуальному редакторі, але не за допомогою спеціального HTML, деяких розробників сторінок та, можливо, інших областей вашого сайту WordPress. GTmetrix покаже вам, які зображення мають ці помилки, і надасть правильні розміри. Щоб виправити помилку, вам потрібно буде знайти зображення на інформаційній панелі WordPress, відредагувати HTML або CSS, а потім додати ширину + висоту.

Ще потрібно зробити менше запитів HTTP?

Якщо вам все-таки потрібна допомога, залиште мені коментар. The WordPress Speed ​​Up Group Facebook також корисно, або ви можете найняти нас для швидкісних послуг WordPress до + після звітів GTmetrix.

WordPress Speed ​​Up Group Facebook

Часті запитання

&# x1f680; Що викликає HTTP-запити?

HTTP-запити – це все, що створює запит до сервера (наприклад, одне зображення створює 1 запит). Вкладка Водоспад GTmetrix повідомляє вам про всі завантаження запитів на сторінку.

&# x1f680; Назвіть 5 речей, щоб зменшити запити HTTP?

5 простих речей, які ви можете зробити, це комбінувати файли CSS + JavaScript, ліниві завантажувати зображення та відео, уникати нашого списку плагінів із високим процесором, вибірково відключати плагіни з певних сторінок / публікацій за допомогою Perfmatters або Asset CleanUp та оптимізувати ваші шрифти..

&# x1f680; Чи допоможе плагін кешу допомогти зменшити HTTP-запити?

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

&# x1f680; Якщо виправлення інших елементів GTmetrix зменшить запити HTTP?

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

&# x1f680; Який плагін кеша найбільше зменшує запити HTTP та як його налаштувати?

Я рекомендую WP Rocket, який отримав рейтинг №1 у більшості опитувань у Facebook і має більше функцій оптимізації швидкості, ніж більшість плагінів кешу, тому зазвичай він дає кращі результати та час завантаження в GTmetrix. Ознайомтесь з моїм підручником з налаштування параметрів WP Rocket.

Дякуємо за прочитане :)

Ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map