TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

4

Autoptimize – один з популярних плагінів для прискорення роботи вашого сайту WordPress. Існує більше 1 мільйона активних установок цих плагінів із середнім рейтингом 4,7 від 1 тисячі користувачів. Не може бути помилкою, що так багато людей встановлюють і використовують цей плагін для оптимізації свого сайту. Однак вам потрібно забезпечити правильне налаштування, щоб плагін працював для вас.

Пов’язані: Топ -8 плагінів кешування для WordPress.

Що робить автоматична оптимізація?

По -перше, ви повинні розуміти, що функція автоматичної оптимізації – це не плагін кешування, такий як WP Rocket або W3 Total Cache. Це плагін для оптимізації, який допомагає виконувати такі дії:

  • Об’єднайте всі файли CSS та JavaScript
  • Згортайте стислі файли та кешуйте їх, а також зменшуйте HTML, видаляючи коментарі та пробіли
  • Додайте заголовок закінчення терміну дії до файлів, щоб обслуговувати кешовану версію
  • Перемістіть CSS у верхній колонтитул, а сценарії – у нижній колонтитул

Пізніше розробник також включив оптимізацію зображень для ледачого завантаження та обслуговування зображень WebP для прискорення медіафайлів. Як згадувалося на сторінці плагіна на WordPress.org, сервери HTTP/2 можуть автоматично виконувати багато дій, які робить цей плагін. Тому вам слід протестувати випробуваннями, щоб переконатися, що плагін дійсно додає будь -яку цінність для вашої установки.

Як правильно налаштувати автоматичну оптимізацію в WordPress?

Автооптимізація – один з найпростіших плагінів для налаштування. Після встановлення та активації плагіна перейдіть до меню «Налаштування> Автооптимізація», де є варіанти оптимізації JS, CSS, HTML та зображень на вашому сайті.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Автоматична оптимізація налаштувань

Налаштування JS, CSS та HTML

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

Параметри JavaScript

  • Оптимізувати код JavaScript – увімкніть цю опцію, щоб зменшити файли JavaScript. Це призведе до стиснення та зменшення розміру файлів сценаріїв на вашому сайті.
  • Агрегувати JS-файли? – увімкніть цю опцію для об’єднання всіх файлів JavaScript та сервера асинхронно під час завантаження сторінок на ваш сайт. Це допоможе вам усунути проблему зі сценарієм блокування візуалізації в інструменті Google PageSpeed ​​Insights. Однак у більшості випадків це зламає ваш сайт. Найкращий варіант – увімкнути це та надати винятки, щоб сторінка могла завантажуватися без розривів. Але це призведе до проблеми блокування візуалізації в PageSpeed ​​Insights. Ви можете вимкнути цей параметр і ввімкнути лише опцію "Оптимізувати код JavaScript", щоб лише зменшити файли.
  • Також агрегувати вбудований JS? – ми рекомендуємо вам вимкнути цю опцію, якщо ваша тема або плагін вводять багато сценаріїв динамічно. Увімкнення цього може призвести до того, що розмір кешу зростатиме швидше і більше, що вплине на продуктивність замість покращення.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Параметри JavaScript

  • Включити JavaScript? – найкраща практика – завантажувати файли JavaScript у нижній колонтитул, щоб вони завантажувалися наприкінці завантаження сторінки. Це ефективно усуне блокування візуалізації та проблеми, пов’язані зі сценаріями, показані в засобах вимірювання швидкості. Однак, якщо ви бачите, що попередні параметри зламали ваш сайт, увімкніть це для завантаження сценаріїв у заголовку, щоб перевірити, чи це допомагає. Знову ж таки, завантаження сценаріїв у заголовку покаже попередження про блокування рендерингу в інструменті PageSpeed ​​Insights.
  • Виключити сценарій із автоматичної оптимізації – плагін за замовчуванням заповнює це поле jquery.js та іншими важливими файлами на вашому сайті. Якщо ви помітили, що певна тема чи файли плагінів порушують роботу вашого сайту, ви можете додати файл сюди. Не забудьте заповнити відносний шлях до файлу, ігноруючи доменне ім’я. також, як згадувалося в описі, плагін все одно зменшує виключені файли, якщо ви не виключите їх у розділі «Різне». Після тестування з різними темами ми рекомендуємо вам виключити jquery.js, щоб уникнути будь -яких проблем із розривом макету на вашому сайті. Іноді ви можете не помітити проблему на сайті, проте ви можете побачити помилку консолі в інструментах розробника Google Chrome. Помилка покаже щось на кшталт «$ або jQuery не визначено» або «невідома функція».
  • Додати обгортку try-catch? – увімкніть цю опцію, коли виявите, що плагін порушує роботу вашого сайту. Ми рекомендуємо вимкнути цей параметр і виключити файл, який розривається у винятку.

Параметри CSS

Параметри CSS майже подібні до параметрів JavaScript.

  • Оптимізувати код CSS? – увімкніть цю опцію для стиснення та зменшення файлів CSS на вашому сайті.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Параметри CSS

  • Агрегувати CSS-файли? – увімкніть цю опцію, щоб об’єднати всі файли CSS на вашому сайті та служити як єдиний стиснений та згорнутий файл CSS.
  • Також агрегувати вбудований CSS – увімкніть для включення вбудованого CSS для агрегації. Якщо ваша тема або плагін вводять багато вбудованого CSS, ця опція збільшить розмір кешу.
  • Створення даних: URI для зображень? – увімкніть цю опцію, щоб Автооптимізація могла вставляти невеликі зображення, завантажені вашою темою та плагінами.
  • Вбудований і відкладений CSS – щоб увімкнути цю опцію, спершу слід знати критичний CSS для вашого сайту. На жаль, отримати критично важливий CSS непросто, оскільки кожен шаблон на вашому сайті потребує окремого критичного CSS. Наприклад, якщо на вашому сайті є WooCommerce, ви не можете використовувати критичний CSS для публікацій або сторінок для сторінок продуктів WooCommerce. На нашу думку, слід відключити цю опцію в Автооптимізації. В іншому випадку ви можете отримати преміальний API із сайту kriticss.com та інтегруватися з функцією автоматичної оптимізації на вкладці «Критичний CSS».
  • Вбудувати весь CSS – увімкніть цей параметр, щоб вставити весь CSS замість того, щоб посилати як файл. Увімкнувши цю опцію, ви можете переглянути вихідний код свого сайту, щоб побачити величезну кількість CSS. Вбудований контейнер CSS різко підвищить швидкість, проте це може негативно вплинути, якщо у вас є великий файл CSS.
  • Виключити CSS з автоматичної оптимізації – якщо ви виявите, що сайт зламаний, ви можете виключити окремі файли CSS у цьому текстовому полі. Подібно до файлів JavaScript, вам потрібно вказати відносний шлях, ігноруючи доменне ім’я. Автоматична оптимізація також виключає кеш, значки та інші CSS за замовчуванням. Ви також можете надати відносні папки, такі як “wp-content/uploads/", щоб виключити всі файли CSS у цій папці.

Вивчіть WordPress: Перегляньте 400+ безкоштовних посібників WordPress.

Параметри HTML

Подібно до JS та CSS, увімкніть опцію «Оптимізувати HTML -код», щоб стиснути та зменшити вміст HTML на своєму сайті. Ви також можете ввімкнути або видалити коментарі за допомогою опції "Зберегти коментарі HTML?" варіант. Ми рекомендуємо включити обидва ці варіанти.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Параметри HTML

Параметри CDN

Якщо ви використовуєте CDN, який створює URL -адресу зони, тоді слід ввести кореневу URL -адресу тут у текстовому полі "Базова URL -адреса CDN". Однак ви можете ігнорувати це, якщо ви не використовуєте CDN або Cloudflare або будь -які інші CDN, які використовують сервери імен DNS.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Параметри CDN

Інформація про кеш

У розділі “Інформація про кеш” можна знайти стан автоматичного оптимізації кешування. Він покаже вам шлях, розмір та кількість кешованих файлів.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Інформація про кеш

Різні параметри

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

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Різні параметри

  • Зменшити виключені файли CSS та JS? – плагін автоматично зменшує всі файли CSS і JS, хоча ви виключили певні файли в налаштуваннях CSS або JS. Вимкніть цей прапорець, якщо ви хочете вимкнути мініфікацію виключених файлів CSS та JS.
  • Також оптимізувати для редакторів / адміністраторів, які увійшли в систему? – ми рекомендуємо вимкнути цю опцію, щоб ви могли переглядати фактичний сайт без автоматичної оптимізації, коли ви ввійшли як адміністратор або редактор. В іншому випадку ви можете помітити проблеми з роботою з плагінами конструктора сторінок.

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

Зображення

Вкладка «Зображення» пропонує варіанти оптимізації зображень.

  • Оптимізувати зображення – ця опція допомагає використовувати глобальну CDN Shortpixel для оптимізації та обслуговування зображень у дорозі. Shortpixel – це преміальне рішення для стиснення зображень, яке дозволяє оптимізувати 150 зображень на місяць. Ви можете переглянути поточний стан та використання квот у цьому розділі.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Оптимізація зображення

  • Якість оптимізації зображення – ви можете обрати один із глянцевих варіантів із втратами чи втратами. Ви можете перевірити відмінності між цими параметрами та перевірити свої зображення на сторінці Shortpixel. Це допоможе вам вибрати оптимальний варіант для ваших потреб.
  • Завантажити WebP у підтримувані браузери? – виберіть цей параметр для показу зображень WebP для Chrome та інших підтримуваних веб -переглядачів.
  • Відкладені завантаження зображень?ледаче завантаження відкладе зображення поза екраном і завантажиться лише тоді, коли користувач досягне позиції зображення у браузері. Увімкніть цю опцію, щоб покращити швидкість завантаження та покращити оцінку в інструменті Google PageSpeed ​​Insights.
  • Винятки з відкладеного завантаження-тут ви можете ввести типи зображень або назви файлів, щоб виключити їх із ледачого завантаження.

Зауважте, що більшість плагінів і тем мають вбудовану опцію з ледачим завантаженням. Наприклад, тема для газет, плагін Jetpack, плагін WP Smush та плагін SG Optimizer для користувачів SiteGround мають можливість ледачого завантаження. Ми рекомендуємо вам використовувати ледаче завантаження лише тоді, коли ви не використовуєте подібні параметри для інших плагінів або тем на своєму сайті. Аналогічно, увімкніть Shortpixel лише тоді, коли у вас немає зовнішнього CDN для кешування зображень. Також використовуйте це з обережністю, оскільки це обмежує використання.

Екстра

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

  • Шрифти Google – якщо ви використовуєте шрифти Google на своєму сайті, у вас є варіанти відключення або комбінування.
  • Видалити смайлики – WordPress за замовчуванням використовує скрипт смайликів Unicode, щоб додати символи смайликів на свій сайт. Якщо ви не використовуєте смайли, ми рекомендуємо вам увімкнути цю опцію, щоб вимкнути смайли.
  • Видаліть рядки запитів зі статичних ресурсів – файли CSS та JS використовують контроль версій та додайте параметр у URL -адресу за допомогою “ver”. Якщо у вас є статичний веб -сайт (це стосується більшості веб -сайтів WordPress, окрім форумів та спеціальних сайтів), немає необхідності використовувати версії, оскільки файли також мають статичний характер. Коли ви збираєте всі файли CSS та JS, плагін автоматично буде служити кешованому файлу як статичний ресурс. Однак, якщо ви виключили деякі файли або не об’єднали CSS або JS, увімкніть цю опцію, щоб видалити версії з URL -адреси.

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Додаткові параметри

  • Попереднє підключення до сторонніх доменів -попереднє підключення дозволяє підключитися до стороннього сервера, перш ніж фактично надіслати запит браузера HTTP. Ви можете додати домени, які потрібно попередньо з’єднати, у це текстове поле.
  • Попереднє завантаження конкретних запитівпопереднє завантаження допомагає завантажити пов’язані URL -адреси, заздалегідь тим самим збільшуючи швидкість завантаження сторінки. Введіть будь-які сторонні домени, наприклад fonts.google.com, для попереднього завантаження.
  • Асинхронізувати файли JavaScript- введіть сторонні файли JS, які потрібно завантажити асинхронно за допомогою властивості “async”.
  • Оптимізувати відео YouTube – для цього параметра потрібен додатковий плагін для ледачого завантаження відео YouTube.

Часті проблеми з автоматичною оптимізацією

При правильній оптимізації плагін Автооптимізація може покращити швидкість вашого сайту та оцінку в інструменті Google PageSpeed ​​Insights. Однак у нього мало проблем, коли він використовується як рішення для оптимізації швидкості.

1 Використання з іншими плагінами

Проблема автоматичної оптимізації полягає в тому, що це не кешування, а включає половину варіантів оптимізації, які пропонує повноцінний плагін кешування. Ви повинні вибрати такі плагіни, як WP Super Cache, щоб працювати з Autoptimize, щоб уникнути зайвих параметрів. В іншому випадку вам не потрібно використовувати автоматичну оптимізацію, якщо у вас є такі плагіни, як W3 Total Cache або WP Rocket.

2 Поширення інтеграцій

За кількох доступних опцій ви можете побачити, як плагін продає інтеграцію з Shortpixel, WP YouTube Lyte та criticalcss.com. кожна інтеграція потребує додаткового плагіна або облікового запису, що не є необхідним, коли ви вибираєте один плагін преміум -кешування, такий як WP Rocket з хорошою CDN. Крім того, існує окремий розділ "Оптимізуйте більше!" вкладка для продажу продуктів -партнерів.

3 Критичний CSS

Критичний CSS – це CSS, необхідний для завантаження над вмістом сторінки на сторінці. Проблема в тому, що кожному макету сторінки, як -от публікація, сторінка, продукт, портфоліо тощо, потрібен окремий критичний CSS, щоб правильно завантажити верхню частину сторінки. Це складне завдання згенерувати критичний CSS за допомогою іншого плагіна «Autoptimize criticalcss.com включення» та преміум-ключа API з crticialcss.com.

4 Розрив макета сайту

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

5 Збільшення розміру кешу

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

Як правильно налаштувати функцію автоматичної оптимізації на сайті WordPress?

Автоматична оптимізація кешу повна

Висновок

На нашу думку, цей плагін добре працює, якщо у вас проста тема та використовуються прості плагіни кешування, такі як WP Super Cache. Однак більшість користувачів будуть використовувати на своєму сайті стандартні плагіни, такі як Jetpack або W3 Total Cache. У цьому випадку Автооптимізація буде зайвою опцією, яка або не завершує роботу повного плагіна, або вимикає певні параметри.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі