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

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

145

Autoptimize – один из популярных плагинов для ускорения вашего сайта WordPress. Есть более 1 миллиона активных установок этих плагинов со средней оценкой 4,7 от 1K + пользователей. Не может быть ошибкой, что так много людей устанавливают и используют этот плагин для оптимизации своего сайта. Однако вам необходимо убедиться в правильной настройке, чтобы плагин работал на вас.

По теме: 8 лучших плагинов кеширования для WordPress.

Что делает автоматическая оптимизация?

Во-первых, вам нужно понять, что Autoptimize – это не плагин для кеширования, такой как WP Rocket или W3 Total Cache. Это плагин оптимизации, который помогает делать следующее:

  • Объедините все файлы CSS и JavaScript
  • Сократите сжатые файлы и кэшируйте их, а также уменьшите HTML, удалив комментарии и пробелы.
  • Добавьте к файлам заголовок срока действия для обслуживания кэшированной версии
  • Переместить CSS в верхний колонтитул, а скрипты в нижний колонтитул

Позже разработчик также включил оптимизацию изображений для отложенной загрузки и обслуживания изображений WebP для ускорения мультимедийных файлов. Как упоминалось на странице плагина на WordPress.org, серверы HTTP / 2 могут автоматически делать многие из того, что делает этот плагин. Поэтому вам следует протестировать пробные версии, чтобы убедиться, что плагин действительно добавляет какую-либо ценность для вашей установки.

Как правильно настроить автоматическую оптимизацию в WordPress?

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

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

Настройки автоматической оптимизации

Настройки JS, CSS и HTML

На этой вкладке есть несколько вариантов для разделения и оптимизации файлов на вашем сайте. Autoptimize объединит и минимизирует скрипты, CSS и HTML из вашей темы и плагинов. Поэтому выбор некоторых параметров может сломать ваш сайт, особенно если вы используете тему на основе jQuery.

Параметры JavaScript

  • Оптимизировать код JavaScript – включите этот параметр, чтобы уменьшить файлы JavaScript. Это сожмет и уменьшит размер файлов сценариев на вашем сайте.
  • Агрегировать JS-файлы? – включите эту опцию, чтобы асинхронно объединять все файлы JavaScript и сервер при загрузке страниц на вашем сайте. Это поможет вам решить проблему скрипта блокировки рендеринга в инструменте Google PageSpeed ​​Insights. Однако в большинстве случаев это приведет к поломке вашего сайта. Лучше всего включить это и указать исключения, чтобы страница могла загружаться без сбоев. Но это приведет к проблеме блокировки рендеринга в PageSpeed ​​Insights. Вы можете отключить эту опцию и включить только «Оптимизировать код JavaScript», чтобы минимизировать файлы.
  • Также агрегировать встроенный JS? – мы рекомендуем вам отключить эту опцию, если ваша тема или плагин динамически внедряют множество скриптов. Включение этого может привести к тому, что размер кеша будет расти быстрее и больше, что скажется на производительности, а не на улучшении.

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

Параметры JavaScript

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

Параметры CSS

Параметры CSS почти аналогичны параметрам JavaScript.

  • Оптимизировать код CSS? – включите эту опцию, чтобы сжимать и минимизировать файлы CSS на вашем сайте.

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

Параметры CSS

  • Агрегировать CSS-файлы? – включите эту опцию, чтобы объединить все файлы CSS на вашем сайте и использовать их в качестве единого сжатого и уменьшенного файла CSS.
  • Также агрегировать встроенный CSS – включите это, чтобы включить встроенный CSS для агрегирования. Если ваша тема или плагин внедряют много встроенного CSS, эта опция увеличит размер кеша.
  • Сгенерировать данные: URI для изображений? – включите эту опцию, чтобы функция Autoptimize могла встраивать небольшие изображения, загруженные вашей темой и плагинами.
  • Встроенный и отложенный CSS – чтобы включить эту опцию, вы должны сначала знать критический CSS для вашего сайта. К сожалению, получить критический CSS непросто, поскольку каждый шаблон на вашем сайте требует отдельного критического CSS. Например, если у вас есть WooCommerce на вашем сайте, вы не можете использовать критический CSS для публикации или страницы для страниц продуктов WooCommerce. По нашему мнению, вам следует отключить эту опцию в Autoptimize. В противном случае вы можете получить премиум API с сайта criticalcss.com и интегрировать его с Autoptimize на вкладке «Critical CSS».
  • Встроить весь CSS – включите этот параметр, чтобы встроить весь CSS вместо ссылки в виде файла. После включения этой опции вы можете просмотреть исходный код своего сайта, чтобы увидеть огромное количество CSS. Встраивание CSS может значительно улучшить скорость, однако может отрицательно повлиять, если у вас большой файл CSS.
  • Исключить CSS из Autoptimize – если вы обнаружите, что сайт ломается, вы можете исключить определенные файлы CSS в этом текстовом поле. Как и в случае с файлами JavaScript, вам необходимо указать относительный путь, игнорируя доменное имя. Autoptimize также исключает кеш, значки и другой 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.
  • Исключения с отложенной загрузкой – здесь вы можете ввести типы изображений или имена файлов, чтобы исключить их из отложенной загрузки.

Обратите внимание, что большинство плагинов и тем имеют встроенную функцию отложенной загрузки. Например, тема Newspaper, плагин Jetpack, плагин WP Smush и плагин SG Optimizer для пользователей SiteGround имеют возможность отложенной загрузки. Мы рекомендуем вам использовать отложенную загрузку только в том случае, если вы не используете аналогичные параметры в других плагинах или темах на своем сайте. Точно так же включайте Shortpixel, только если у вас нет внешнего CDN для кэширования изображений. Кроме того, используйте это с осторожностью, так как это имеет ограничения на использование.

Дополнительный

Использование сторонних ресурсов на сайте повлияет на скорость загрузки страницы. Вкладка «Дополнительно» предлагает дополнительные параметры для оптимизации некоторого стандартного стороннего контента на вашем сайте.

  • Google Fonts – если вы используете Google Fonts на своем сайте, у вас есть возможность отключить или объединить их.
  • Удалить эмодзи – WordPress по умолчанию использует скрипт эмодзи Unicode для добавления символов эмодзи на ваш сайт. Если вы не используете смайлики, мы рекомендуем вам включить эту опцию, чтобы отключить смайлики.
  • Удалите строки запроса из статических ресурсов – файлы CSS и JS используют контроль версий и добавляют параметр в URL-адрес с помощью «ver». Если у вас статический веб-сайт (это относится к большинству сайтов WordPress, кроме форумов и настраиваемых сайтов), нет необходимости использовать управление версиями, поскольку файлы также статичны по своей природе. Когда вы объединяете все файлы CSS и JS, плагин автоматически будет обслуживать кешированный файл как статический ресурс. Однако, если вы исключили некоторые файлы или не агрегировали CSS или JS, включите эту опцию, чтобы удалить версии из URL.

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

Дополнительные опции

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

Часто возникающие проблемы с автоматической оптимизацией

При правильной оптимизации плагин Autoptimize может улучшить скорость вашего сайта и повысить рейтинг в инструменте Google PageSpeed ​​Insights. Однако при использовании в качестве решения для оптимизации скорости у него мало проблем.

1 Использование с другими плагинами

Проблема с Autoptimize заключается в том, что это не кеширование, а включает половину опций оптимизации, предлагаемых полноценным плагином кеширования. Вы должны выбрать плагины, такие как WP Super Cache, для работы с Autoptimize, чтобы избежать лишних опций. В противном случае вам не нужно использовать 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 power-up» и ключа API премиум-класса от crticialcss.com – сложная задача.

4 Взлом макета сайта

В большинстве случаев плагин нарушает верстку вашего сайта. Вам необходимо вручную проверить и проанализировать, чтобы найти сценарий или параметр, который нарушает работу вашего сайта, и исключить их из плагина Autoptimize.

5 Увеличение размера кеша

Встраивание CSS и JS резко увеличит размер кеша. Мы протестировали популярную тему «Газеты» и обнаружили, что размер кеша достигает 100% за один день. Проблема в том, что плагин предоставляет эти параметры без автоматической очистки кеша. Это означает, что вам нужно вручную входить в панель управления и удалять кеш каждый раз, когда размер увеличивается.

Как правильно настроить автоматическую оптимизацию на сайте WordPress?

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

Заключение

На наш взгляд, этот плагин хорошо работает, когда у вас простая тема и используются простые плагины кеширования, такие как WP Super Cache. Однако большинство пользователей будут использовать на своем сайте стандартные плагины, такие как Jetpack или W3 Total Cache. В этом случае Autoptimize будет избыточным вариантом, который либо вы не используете полностью, либо отключите определенные параметры.

Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее