ОБЗОР И НАСТРОЙКА ПЛАГИНА AUTOPTIMIZE

Функция Autoptimize упрощает оптимизацию вашего сайта. Он может агрегировать, минимизировать и кэшировать сценарии и стили, по умолчанию вставлять CSS в заголовок страницы, но также может встраивать критический CSS и откладывать агрегированный полный CSS, перемещать и откладывать сценарии в нижний колонтитул и минимизировать HTML.

Вы можете оптимизировать и отложенно загружать изображения (с поддержкой форматов WebP и AVIF), оптимизировать Google Fonts, асинхронный неагрегированный JavaScript, удалять базовые смайлы WordPress и многое другое. Таким образом, это может улучшить производительность вашего сайта, даже если он уже подключен к HTTP/2! Доступен обширный API, позволяющий адаптировать автоматическую оптимизацию к конкретным потребностям каждого сайта.
Если вы считаете, что производительность действительно важна, вам следует хотя бы рассмотреть один из многих бесплатных плагинов для кэширования страниц (например, пакет Speed ​​Booster или KeyCDN Cache Enabler) в дополнение к Autoptimize или даже рассмотреть Autoptimize Pro, который не только обеспечивает кэширование страниц, но и оптимизацию изображений. CDN, критический CSS и многое другое!

Автооптимизация Pro

Autoptimize Pro — это расширение премиум-класса, добавляющее оптимизацию изображений, CDN, кэширование страниц, автоматические важные правила CSS и дополнительные «усилительные» опции — и все это в одной удобной подписке, чтобы сделать ваш сайт еще быстрее!

Как плагин помогает ускорить мой сайт?

HTTP/2, безусловно, является большим шагом вперед, значительно уменьшая влияние нескольких запросов с одного и того же сервера за счет использования одного и того же соединения для выполнения нескольких одновременных запросов, и по этой причине при новых установках Autoptimize не будет объединять CSS и JS. файлы больше. При этом объединение CSS/JS все еще может иметь большой смысл, как описано в этой статье css-tricks.com и в этом блоге одного из инженеров Ebay. Вывод; настройте, протестируйте, переконфигурируйте, повторно протестируйте, настройте и посмотрите, что лучше всего работает в вашем контексте. Может быть, это просто HTTP/2, может быть, HTTP/2 + агрегация и минификация, может быть, это HTTP/2 + минификация.

Будет ли это работать с моим блогом?

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

Почему jquery. мин. js не оптимизирован при агрегировании JavaScript?

Начиная с AO 2.1, jquery.min.js ядра WordPress не оптимизирован по той простой причине, что многие популярные плагины внедряют встроенный JS, который также не агрегируется (из-за возможных проблем с размером кэша с уникальным кодом во встроенном JS), что зависит от доступности jquery, поэтому исключение jquery.min.js гарантирует, что большинство сайтов будут работать без дополнительных настроек. Если вы также хотите оптимизировать jquery, вы можете удалить его из списка исключений оптимизации JS (возможно, вам придется также включить «также агрегировать встроенный JS» или переключиться на «принудительно использовать JS в голове»).

Почему блокируется рендеринг Autoptimized JS?

Это происходит при агрегации JavaSCript и включении опции «force in head» или когда не агрегируется и не откладывается. Рассмотрите возможность изменения настроек.

Почему автооптимизированный CSS по-прежнему называется блокировкой рендеринга?

При настройке Autoptimize по умолчанию CSS связан в заголовке, что является безопасным значением по умолчанию, но Google PageSpeed ​​Insights жалуется. Вы можете посмотреть «встроить весь CSS» (просто) или «встроить и отложить CSS» (лучше), которые также описаны в этом FAQ.

Какая польза от «встроенного и отложенного CSS»?

Здесь нет простого решения, поскольку «выше сгиба» зависит от того, где находится сгиб, что, в свою очередь, зависит от размера экрана. Однако существуют некоторые инструменты, которые пытаются определить, что именно находится «над сгибом». Этот список инструментов является отличной отправной точкой. Критический CSS-генератор Sitelocity и Criticalpathcssgenerator Джонаса Олссона — хорошие базовые решения, а http://criticalcss.com/ — премиум-решение от того же Йонаса Олссона. В качестве альтернативы может быть полезен этот букмарклет (только для Chrome).

Или вам следует встроить весь CSS?

Autoptimize не имеет надлежащего механизма очистки кэша, так как это может привести к удалению оптимизированного CSS/JS, который все еще упоминается в других кэшах, что может привести к поломке вашего сайта. Более того, быстрорастущий кэш указывает на другие проблемы, которых следует избегать.

Вместо этого вы можете поддерживать размер кэша на приемлемом уровне одним из следующих способов:

Несмотря на приведенные выше возражения, существуют сторонние решения для автоматической очистки кэша AO, например. используя этот код или этот плагин, но по причинам, указанным выше, их следует использовать только в том случае, если вы действительно знаете, что делаете.

«Очистка кэша» не реализована?

Кроме того, не волнуйтесь, если ваш кеш никогда не достигает значения 0 файлов/0 КБ, поскольку Autoptimize (начиная с версии 2.2) автоматически предварительно загружает кеш сразу после его очистки, чтобы значительно ускорить дальнейшую минификацию.

Мой сайт выглядит сломанным, когда я очищаю кеш Autoptimize!

При очистке кэша AO ни один кэш страниц не должен содержать страницы (HTML), которые ссылаются на удаленный оптимизированный CSS/JS. Хотя для этой цели существует интеграция между Autoptimize и некоторыми кэшами страниц, эта интеграция не охватывает 100% настроек, поэтому вам может потребоваться очистить кэш страниц вручную.

На данный момент (июнь 2017 г.) кажется, что RocketLoader может нарушить «встроенный и отложенный CSS» AO, основанный на loadCSS Filamentgroup, в результате чего отложенный CSS не загружается.

Я попробовал автооптимизацию, но моя скорость страницы в Google почти не улучшилась

Autoptimize — это не просто плагин «исправить мои проблемы со скоростью страницы»; он «только» объединяет и минимизирует (локальные) JS, CSS и изображения, а также позволяет использовать некоторые приятные дополнительные функции, такие как удаление шрифтов Google и отсрочку загрузки CSS. Таким образом, Autoptimize позволит вам повысить производительность (время загрузки измеряется в секундах) и, вероятно, также поможет вам устранить некоторые конкретные предупреждения о скорости страницы. Если вы хотите совершенствоваться дальше, вам, вероятно, также придется изучить, например, кэширование страниц и конфигурация вашего веб-сервера, что улучшит реальную производительность (опять же, время загрузки, измеренное, например, https://webpagetest.org) и ваши рейтинги скорости страницы «лучшая практика производительности».

Что я могу делать с помощью API?

Начиная с версии 1.7.0, CDN активируется при входе в корневой каталог блога CDN (например, http://cdn.example.net/wordpress/). Если этот URL-адрес присутствует, он будет использоваться для всех файлов, сгенерированных Autoptimize (т. е. агрегированных CSS и JS), включая фоновые изображения в CSS (если не используются data-uri).

Почему мои шрифты также не попадают в CDN?

Autoptimize поддерживает это, но по умолчанию он не включен, поскольку нелокальные шрифты могут потребовать дополнительной настройки. Но если у вас есть политика запросов между источниками в порядке, вы можете указать Autoptimize разместить ваши шрифты в CDN, подключившись к API, установив для autoptimize_filter_css_fonts_cdn значение true таким образом;

add_filter(‘autoptimize_filter_css_fonts_cdn’, ‘__return_true’);

Если ваш веб-сервер правильно настроен для обработки сжатия (gzip или deflate) и истечения срока действия кэша (истекает и управление кэшем с достаточной возможностью кэширования), вам не нужна Autoptimize, чтобы справиться с этим за вас. В этом случае вы можете установить флажок «Сохранить агрегированный скрипт/css как статические файлы?», который заставит Autoptimize сохранять агрегированные файлы как файлы .css и .js (это означает, что для обслуживания этих файлов не требуется PHP). Этот параметр используется по умолчанию начиная с Autoptimize 1.8.

Как работает «исключить из оптимизации»?

Оптимизация CSS и JS позволяет исключить агрегирование и минимизацию кода путем добавления «идентификаторов» в список исключений, разделенный запятыми. Точную строку идентификатора, которую следует использовать, можно определить следующим образом:

Устранение неполадок при автооптимизации

Ознакомьтесь с инструкциями по устранению неполадок на странице https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/.

Я исключил файлы, но они все равно автооптимизируются?

AO минимизирует исключенный JS/CSS, если имя файла указывает на то, что файл еще не минимизирован. Начиная с AO 2.5, вы можете отключить это на вкладке «JS, CSS & HTML» в разделе «Разное». параметры, сняв галочку «минимизировать исключенные файлы».

Если вы используете Apache, файл .htaccess, написанный Autoptimize, может в некоторых случаях конфликтовать с настройками AllowOverrides вашей конфигурации Apache (как в случае с конфигурацией по умолчанию в некоторых установках Ubuntu), что приводит к «внутреннему ошибки сервера» по автооптимизируемым CSS- и JS-файлам. Эту проблему можно решить, установив для параметра AllowOverrides значение «Все».

Невозможно войти на мультисайты с сопоставлением домена

Для мультисайтов с сопоставлением доменов требуется инициализация Autoptimize при другом действии WordPress. Добавьте эту строку кода в свой wp-config.php, чтобы сделать возможным подключение к setup_theme, например:

define( ‘AUTOPTIMIZE_SETUP_INITHOOK’, ‘setup_theme’);

Visual Composer, Beaver Builder и аналогичные решения для создания страниц не работают!!

Отключите опцию оптимизации страниц корзины/оформления заказа (работает для WooCommerce, Easy Digital Downloads и WP eCommerce).

Слайдер Revolution сломан!

Убедитесь, что js/jquery/jquery.min.js находится в списке исключений из оптимизации JS, разделенных запятыми (это исключено в конфигурации по умолчанию).

В этом случае у вас есть неагрегированный JavaScript, требующий загрузки jQuery, поэтому вам придется добавить js/jquery/jquery.min.js в список исключений из оптимизации JS, разделенный запятыми.

Я использую галереи NextGen, и большая часть JS не агрегируется/минимифицируется?

NextGen Galleries делает несколько отличных вещей для добавления JavaScript. Чтобы Autoptimize могла агрегировать это, вы можете либо отключить управление ресурсами галереи Nextgen с помощью этого фрагмента кода add_filter( ‘run_ngg_resource_manager’, ‘__return_false’ ); или вы можете указать Autoptimize выполнить инициализацию раньше, добавив это в ваш wp-config.php: define(«AUTOPTIMIZE_INIT_EARLIER»,»true»);

Что такое оптимизация?

Вы можете сделать это на своей странице/содержимом публикации, в виджетах и ​​в файлах вашей темы (рассмотрите возможность создания дочерней темы, чтобы избежать перезаписи вашей работы обновлениями темы).

Могу ли я изменить каталог и имя кэшированных файлов автооптимизации?

Да, если вы хотите обслуживать файлы, например. /wp-content/resources/aggregated_12345.css вместо стандартного /wp-content/cache/autoptimize/autoptimize_12345.css, затем добавьте это в wp-config.php:

Работает ли это с WP_CONTENT_URL не по умолчанию?

Нет, Autoptimize не поддерживает нестандартный WP_CONTENT_URL «из коробки», но это можно сделать с помощью пары строк кода, подключившись к API Autoptimize.

Можно ли предварительно заархивировать сгенерированный JS/CSS?

Да, но по умолчанию это отключено. Вы можете включить это, передав «true» в «autoptimize_filter_cache_create_static_gzip». Очевидно, вам все равно придется настроить свой веб-сервер для использования этих файлов вместо файлов без сжатия, чтобы избежать накладных расходов на сжатие на лету.

Что значит «удалить смайлы»?

Эта новая опция в Autoptimize 2.3 удаляет встроенный CSS, встроенный JS и связанный JS-файл, добавленный ядром WordPress. Таким образом, это может оказать небольшое положительное влияние на производительность вашего сайта.

Полезно ли «удалить строки запроса»?

Хотя некоторые онлайн-инструменты оценки производительности выделяют «строки запроса для статических файлов» как проблему производительности, в целом их влияние практически отсутствует. Таким образом, Autoptimize, начиная с версии 2.3, позволяет вам удалить строку запроса (или, точнее, параметр «ver»), но отметка «удалить строки запроса из статических ресурсов» практически не окажет влияния на производительность вашего сайта, поскольку измеряется в (милли-)секундах.

(Как) следует настроить шрифты Google?

Preconnect — это довольно продвинутая функция, позволяющая браузерам (если они ее поддерживают) устанавливать соединение с определенными доменами, даже если соединение не требуется немедленно.

Это можно использовать, например. чтобы уменьшить влияние сторонних ресурсов на HTTPS (поскольку DNS-запрос, TCP-соединение и согласование SSL/TLS выполняются раньше). Используйте с осторожностью, так как предварительное подключение к слишком большому количеству доменов может оказаться контрпродуктивным.

Когда я могу(не) асинхронизировать JS?

Когда оптимизация изображений включена, Autoptimize будет искать файлы PNG, GIF, JPEG (.jpg) в тегах изображений и в файлах CSS, загруженных из вашего собственного домена, и меняет src (источник) на ShortPixel CDN. для тех. Важно: это может работать только для общедоступных изображений, в противном случае прокси-сервер оптимизации изображения не сможет получить изображение для его оптимизации, поэтому брандмауэры, прокси-серверы, защита паролем или даже предотвращение хотлинкинга могут нарушить оптимизацию изображения.

Что означает «включить откат 404»? Зачем мне это нужно?

Автоматическая оптимизация кэшей, агрегирование и оптимизация CSS/JS, а ссылки на эти кэшированные файлы сохраняются в HTML, который будет храниться в кэше страниц (который может быть плагином, может быть на уровне хоста, может быть сторонним). , в кеше Google, в браузере). Если в кеше страниц есть HTML, который ссылается на автоматически оптимизированный CSS/JS, который был удален за это время (когда кеш был очищен), то страница из кеша не будет выглядеть/работать должным образом, поскольку CSS или JS не были найдены. (ошибка 404).

Цель этого параметра — предотвратить сбои в работе за счет использования «резервного» CSS или JS. Резервные файлы представляют собой копии первых автоматически оптимизированных файлов CSS и JS, созданных после очистки кеша, и поэтому будут основаны на домашней странице. Это означает, что CSS/JS может не применяться на 100% на других страницах, но, по крайней мере, влияние отсутствия CSS/JS будет уменьшено (часто значительно).

Когда эта опция включена, Autoptimize добавляет ErrorDocument 404 в .htaccess (как используется Apache), а также подключается к ядру WordPress template_redirect для захвата 404, обрабатываемых WordPress. При использовании NGINX должно работать что-то вроде ниже (я не специалист по NGINX, но у меня это работает);

И это хороший альтернативный подход (предоставлен fboylovesyou);

Какое программное обеспечение/проекты с открытым исходным кодом используются в Autoptimize?

Вы можете получить помощь на форуме поддержки wordpress.org. Если вы на 100% уверены, что вашу проблему невозможно решить с помощью конфигурации Autoptimize и что вы действительно обнаружили ошибку в коде, вы можете создать проблему на GitHub. Если вам нужна поддержка премиум-класса, воспользуйтесь нашими услугами поддержки Autoptimize Pro и оптимизации веб-производительности.

Оптимизация сайта с помощью плагина WordPress — Autoptimize

Плагин Autoptimize — универсальный плагин для оптимизации сайтов WordPress. Это эффективный и простой способ оптимизации, особенно если вы не хотите глубоко вникать в технические детали.

Как обычно, сначала нужно установить и активировать плагин Autoptimize с панели управления WordPress.

Теперь включите «Настройки», выберите «Автооптимизировать» и перейдите на страницу настроек для плагина оптимизации.

Теперь вам откроется главное окно с настройками плагина Autoptimize. Давайте посмотрим, что нужно настроить.

Настройка плагина Автооптимизация.

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

Не стесняйтесь поиграть с настройками, пока вы не получите именно тот результат, который вы хотите.

Штука в том, что можно сильно переоптизировать сайт. Тогда он будет загружаться быстрее, но при этом, какой-то полезный для посетителя функционал, может быть урезан. В общем, тут только вам решать. Заодно, вы можете проверять каждое свое действие с помощью PageSpeed Insights.

Нажмите на вкладку JS, CSS и HTML. В первом окне представлены параметры JavaScript. К ним относится возможность оптимизирования кода JavaScript путем.

Установите флажок «Оптимизировать код JavaScript», и вам откроются параметры.

Прокрутите немного до Опции CSS и включите эту опцию, выставив соответствующую галочку. Вы увидите варианты, которые включают в себя:

Опять же, вы можете настроить эту область, как считаете нужным. Вот несколько вещей, которые следует помнить при настройке CSS-опций плагина:

Не все варианты хороши для сайтов большего размера. Для небольших сайтов, да. Для крупных сайтов с большим трафиком, вероятно, не стоит включать опции «Встраивать все CSS».

Возможно, вам не следует включать опцию «Создать данные: URI для изображений». На самом деле это может привести к уменьшению количества запросов при загрузке вашего сайта, но заставит изображения загружаться непосредственно с вашего хостинга, вместо подключенного CDN.

Настройка HTML и CDN

Прокрутите вниз еще немного, и вы увидите еще две области опций для плагина: параметры HTML и параметры CDN. Тут плагин особых настроек не даёт.

Оптимизацию HTML вы можете либо включить, либо оставить его выключенным.

Если вы не используете CDN, то это поле также не нужно заполнять.

Кеширование и другие параметры

Последние две области параметров для этой вкладки включают информацию о кеше и раздел «Дополнительные параметры». В области Информация о кеше просто отображается текущая информация о кеше. У Другие настройки есть еще три варианта на выбор. Включите или отключите те, которые вы хотите.

Примечание. Не забудьте нажать «Сохранить изменения» или «Сохранить изменения и очистить кэш», чтобы убедиться, что все выбранные параметры вступили в силу.

Теперь перейдите на вкладку «Изображения». В этой вкладке вы сможете оптимизировать свои изображения на сайте с помощью плагина Autoptimize. Вы увидите, что есть два раздела.

Что касается первого пункта, то лично я всегда загружаю на сайт уже оптимизированные картинки. Хотя вы можете выбрать этот пункт.

Что касается ленивой загрузки, то вскоре эта опция будет включаться по умолчанию в самом WordPress. Но пока этого не произошло, вы можете включить ленивую загрузку с помощью плагина Autoptimize.

И не забудьте сохранить изменения))

Если вас интересуют некоторые из дополнительных опций, которые предоставляет этот плагин, нажмите на вкладку «Дополнительные» и посмотрите, есть ли что-то, что вы хотите включить.

Удалив шрифты Google вы тем самым немного ускорите свой сайт. И это хорошо. Но если, шрифты на вашем сайте выполняют важную декоративную роль, то проверьте, повлияет ли удалиние Гугл шрифтов на них. Тоже самое касается смайликов, удалив их, вы немного ускорите свой сайт, но тогда, смайлики не будут отображаться на вашем сайте. В общем, выбор за вами.

Если вам интересно, то на вкладке «Оптимизируйте больше» вы увидите другие дополнения и плагины, которые помогут вам ещё больше ускорить ваш сайт, но это уже платные решения.

Оптимизация производительности WordPress не должна быть сложной. Вам просто нужны правильные инструменты и сделать всего несколько кликов, чтобы выполнить оптимизацию сайта WordPress.

Я надеюсь, что эта статья показала вам, как легко можно оптимизировать ваш сайт WordPress.

А если у вас остались ещё вопросы, то задавайте их в комментариях.

Недостатки плагина Autoptimize

Более того, по умолчанию размер кеш-памяти плагина ограничена и приходится её часто чистить. На особо посещаемых сайтах я увеличил эту папку до 10Гб (об этом чуть ниже), увеличение скорости загрузки не вижу.

Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe и WP Speed of Light.

Я уверен, вы знаете, как установить плагин. Страница плагина: Настройки плагина элементарные, но всё-таки пройдемся по ним.

Вся настройка заключается в выделении чек боксов. В принципе, все дополнительные настройки плагина, выставлены в максимально приемлемом режиме. Поэтому они и скрыты. Я выделяю три основных чекбокса JS, HTML, CSS и сохраняюсь. В манипуляциях с дополнительными настройками эффекта в ускорении не заметил.

Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.

Это может быть важно! Я не привожу советов по тонким настройкам плагина, потому что, на каждом шаблоне, сервере плагин может вести себя по-разному. Экспериментировать с настройками придется самостоятельно. В экспериментах, не забывайте чистить кеш плагина и учитывать, что ускорение не моментальное, кеш должен накопиться.

оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize

Как увеличить размер cash хранилища Autoptimize

Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.

Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.

Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:

Устанавливают плагин «Code Snippets» (). Он нужен для простого добавления произвольного кода на свой сайт WordPress, без добавления пользовательских фрагментов в файл functions.php.

Проблема чистки кэш плагина Autoptimize

08-04-2020. Со времени написания статьи плагин значительно изменился. Добавлена функция ленивой загрузки изображений и работа по оптимизации изображения не стороннем сервере. Плагин стал вновь радовать работой,  но осталась проблема автоматической читки кеша.

Решить её можно так. Рекомендую, пока работает, использовать плагин “Autoclear Autoptimize Cache”. Он чистит именно кеш этого плагина по настройкам объёма. Работает гарантированно.

Второй вариант можно попробовать через код. Опять используем описанный выше плагин Code Snippet и делаем с его помощью такой сниппет.