Autoptimize: Autoptimize — Плагин для WordPress

Обзор и настройка плагина Autoptimize : WEBCodius

Содержание

Продолжаю серию статей про плагины для оптимизации сайтов, работающих на WordPress. И сегодня речь пойдет про плагин Autoptimize.

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

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

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

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

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

Настройка плагина Autoptimize.

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

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

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

Когда вы попадете на страницу основных настроек, вы увидите четыре вкладки:

• JS, CSS и HTML
• Изображения
• Дополнительные
• Оптимизируйте больше!

Настройка JavaScript

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

• Объединения JS-файлов
• Объединения встроенных JS
• Перемещения JavaScript в head
• Исключения определенных скриптов
• Добавления «Try-Catch»

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

Настройки CSS

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

• Объединение файлов CSS
• Объединение встроенных CSS
• Создание данных: URI для изображений
• Встроить и отложить выполнение CSS
• Встраивать все CSS
• Исключить CSS из Autoptimize

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

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

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

Подробнее об оптимизации HTML, CSS, JavaScript, читайте в этой статье.

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

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

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

Теперь, что касается CDN. Если вы используете CloudFlare, то это поле заполнять не нужно. В CloudFlare привязка сайта осуществляется через изменение nameserver. Но если вы используете другой CDN, например, StackPath, то в нём вы указываете свой домен, после чего, получаете определенный URL. Вот его и нужно ввести в поле плагина Autoptimize.

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

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

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

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

Изображения

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

• Оптимизировать изображения.
• Отложенная загрузка изображений.

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

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

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

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

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

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

Оптимизируйте больше

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

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

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

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

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

Всем приветик! Хотите сделать свой сайт быстрее, используя Autoptimize? Узнайте, какие настройки авто-оптимизации нужно настроить, чтобы повысить скорость вашего сайта WordPress. Если вам интересны советы по скорости и оптимизации WordPress, то данное руководство — оптимизация WordPress с помощью плагина Autoptimize (Автоматическая оптимизация ВордПресс) — для вас. В наши дни скорость загрузки сайта имеет решающее значение для нашего успеха.

Поисковые системы, такие как Google и Яндекс, да и другие, оценивают вас гораздо выше в выдаче, если ваш веб-ресурс быстрее и доступнее, чем ваши конкуренты.

Как ускорить сайт или блог WordPress до максимума

Зная это, вам не составит труда выбрать для своего сайта подходящую тему WordPress, которая следует по этим принципам — быстро и доступно. А такие в каталоге wordpress.org есть. Об этом будет сказано дополнительно, к основной сегодняшней теме поста — оптимизация WordPress сайта с помощью плагина Autoptimize. Данный плагин делает ваш сайт быстрее за счет оптимизации CSS, JS, изображений, шрифтов Google и многого другого. В том числе и  кэширования страниц вашего сайта.

Оптимизация WordPress сайта

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

Как увеличить скорость загрузки сайта на WordPress?

В этой статье будут перечислены некоторые советы по оптимизации скорости загрузки страниц WordPress, которые вы можете использовать на своём сайте прямо сейчас. Мы можем сделать несколько вещей, которые помогут вам еще больше повысить оптимизацию загрузки своего сайта на ВордПресс. А именно, уменьшить количества CSS и JS-файлов, загружаемых при каждой загрузке страницы. И это будет иметь огромное значение для скорости загрузки страниц на сайте.

Представляю лучший плагин для минимизации и объединения JS и CSS. Активных установок уже более 1 миллиона. Autoptimize упрощает оптимизацию вашего сайта ВордПресс.  

Плагин Autoptimize для оптимизации WordPress

Autoptimize — это бесплатный плагин для оптимизации WordPress. Помимо оптимизации HTML, CSS и JavaScript, Autoptimize также включает в себя функции оптимизации , ориентированные на другие аспекты современных сайтов WordPress. Плагин работает с кодом, скриптами и стилями страницы, ускоряя загрузку. Хорошо справляется в тандеме с плагином кэширования.

Оптимизация сайта с помощью Autoptimize

Autoptimize — это отличный плагин. В нем есть все, что нам нужно, он делает процесс оптимизации невероятно простым. Плагин Autoptimize может объединять, минимизировать и кэшировать скрипты и стили. По умолчанию вставлять CSS в заголовок страницы (но также может откладывать), перемещать и откладывать скрипты в нижний колонтитул и минимизировать HTML.

Возможности Autoptimize:

• Оптимизация JavaScript и CSS;
• Исправление кода, блокирующего отображение верха страницы.
• Кэширование и объединение скриптов и стилей;
• Работа с заголовками;
• Перемещение скриптов в нижний колонтитул;
• Упрощение HTML.

Параметры «Extra» позволяют оптимизировать шрифты Google и изображения ( Autoptimize включает оптимизацию изображений на «лету» (с поддержкой форматов WebP и AVIF) и CDN через ShortPixel), асинхронный не агрегированный JavaScript. Удалять основные эмоции (emoji) WordPress и многое другое. Таким образом, он может улучшить производительность вашего сайта, даже если уже используется HTTP / 2! Доступен обширный API, позволяющий адаптировать Autoptimize к конкретным потребностям каждого сайта WP.

Установка и настройка Autoptimize

Как настроить Autoptimize для сайта WordPress? Вы можете установить плагин стандартным способом. Перейти в панель админки вашего сайта. Перейдите в раздел плагины — Добавить новый. Искать плагин по названию Autoptimize. Нажмите кнопочку Установить.

Установка и активация плагина

После установки нужно активировать плагин и перейти к его настройкам. Раздел Настройки — пункт Autoptimize. Модуль на русском языке.

После установки и активации плагина у вас будет доступ к странице администратора, где вы сможете включить оптимизацию HTML, CSS и JavaScript.  По своему вкусу вы можете начать просто включать их все, или, если вы более осторожны, по одному.

Я предлагаю/рекомендую выбрать такие основные настройки плагина Autoptimize:

Настройки Autoptimize. Первая вкладка

Не забывайте сохранять изменения. Во вкладке Images (оптимизация изображений). Сделайте свой сайт значительно быстрее, просто отметив несколько флажков для оптимизации и отложенной загрузки изображений, включая поддержку формата WebP!

Настройки оптимизации изображений

Вкладка — Дополнительные возможности оптимизации. Если вы не используете смайлики на своем сайте, тогда нет смысла загружать скрипты для них.

Дополнительные возможности оптимизации

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

Если ваш блог WordPress не работает нормально после включения автоматической оптимизации, вот несколько советов по выявлению и решению таких проблем с помощью дополнительных настроек:

• Если все работает, но вы заметили, что ваш блог работает медленнее, убедитесь, что у вас установлен плагин кэширования страниц (WP Super Cache или аналогичный), и проверьте информацию о размере кэша (решение этой проблемы также влияет на производительность для не кэшированных страниц) в этом часто задаваемом вопросе.
• В случае, если ваш блог выглядит странно, т. е. когда макет испорчен, возникает проблема с оптимизацией CSS. Попробуйте исключить один или несколько CSS-файлов из процесса оптимизации. Вы также можете заставить CSS не агрегироваться, заключив его в теги noptimize в вашей теме или виджете или добавив имя файла (для внешних таблиц стилей) или строку (для встроенных стилей) в список исключений.
• В случае, если некоторые функции на вашем сайте перестанут работать (карусель, меню, поисковый ввод…), вы, скорее всего, столкнетесь с проблемами оптимизации JavaScript. Измените «Агрегатный встроенный JS» и/ или «Принудительный JavaScript в голове»?» настройки и повторите попытку. Исключая ‘js/jquery/jquery.min.js’ из оптимизации и при необходимости активируя Добавить обертку try/catch) также может помочь. В качестве альтернативы для технически подкованных — вы можете исключить определенные сценарии из обработки (перемещения и/ или агрегирования) с помощью Autoptimize, добавив строку, которая будет соответствовать нарушающему Javascript, или исключив ее из файлов шаблонов или виджетов путем переноса кода между тегами noptimize.  Идентификация нарушающего JavaScript и выбор правильной строки исключения могут быть методом проб и ошибок, но в большинстве случаев проблемы оптимизации JavaScript могут быть решены таким образом. При отладке проблем с JavaScript консоль ошибок браузеров является наиболее важным инструментом, который поможет вам понять, что происходит.
• Если вашей теме или плагину требуется jQuery, вы можете попробовать либо заставить все в голове и/ или исключить jquery.min.js (и jQuery-плагины, если это необходимо).
• Если вы не можете заставить работать оптимизацию CSS или JS, вы можете, конечно, всегда продолжать использовать два других метода оптимизации.
• Если вы попробовали советы по устранению неполадок, приведенные выше, и вы все еще не можете заставить CSS и JS работать вообще, вы можете запросить поддержку на форуме поддержки WordPress Autoptimize. 

Теперь, когда все вышеперечисленное сделано, вы можете проверить показатели скорости сайта.

Оценки скорости PageSpeed Insights для мобильных

И для компьютеров:

Скорость загрузки для компьютеров

Когда вы устанавливаете больше плагинов и добавляете контент, то эти оценки будут меняться. Имейте в виду, что качество вашего хостинга / сервера играет большую роль в скорости вашего сайта.

Если вы считаете производительность важной, вам следует использовать один из плагинов для кэширования страниц. Некоторыми хорошими кандидатами для дополнения Autoptimize являются, например, WP Super Cache (настройки читайте тут), Hyper Cache , Comet Cache или KeyCDN Cache Enabler.

Плагины плагинами, а начинать надо с выбора темы для вашего сайта. Предлагаю вам обратить внимание на пару самых быстрых тем WordPress. Ищете идеальные базовые быстрые темы ВордПресс? Вот они.

Быстрая WordPress тема GeneratePress

Идеальная легкая тема вордпрессо

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

Если вы используете компоновщики страниц, GeneratePress — тема для вас. Шаблон полностью совместим со всеми основными конструкторами страниц, включая Beaver Builder и Elementor.  

Проверенный HTML, встроенные структурированные данные schema.org и молниеносное время загрузки. Некоторые из многочисленных функций включают интеграцию микроданных, 9 областей виджетов, 5 местоположений навигации, 5 макетов боковой панели, раскрывающиеся меню (щелчок или наведение) и предустановки цвета навигации.

Тема бесплатная, установка стандартная из каталога вордпрес.орг. Уже тестировал её, с контентом и плагинами — результат на лицо (смотрите скриншоты теста PageSpeed Insights). Хочу перейти на неё.

Тема WordPress Astra-супербыстрая

Быстрая тема Astra для сайта на WordPress

Тема Astra — это быстрая, полностью настраиваемая и красивая тема, подходящая для блога, личного портфолио, бизнес-сайта и витрины WooCommerce. Шаблон очень легкий (менее 50 КБ на внешнем интерфейсе) и предлагает беспрецедентную скорость.

Созданная с учетом SEO, Astra поставляется с интегрированным кодом Schema.org и готова к использованию Native AMP, поэтому поисковым системам понравится ваш сайт. Тема WP предлагает специальные функции и шаблоны, поэтому шаблон отлично работает со всеми конструкторами страниц, такими как Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi и т. д.

Авторы шаблона Astra посмотрели на GeneratePress и создали почти такую же тему, с таким же функционалом, но с другим названием. Молодцы, а чего теряться, это же всё для нас. А мы и не против.

Установить представленную бесплатную тему можно также из админки сайта.

В заключение

Плагин Autoptimize — отличный вариант для пользователей WordPress, желающих повысить производительность сайта. Благодаря базовым функциям, таким как оптимизация HTML и CSS, и более продвинутым, таким как интеграция CDN и возможность указывать директивы preconnect и preload, Autoptimize имеет все необходимое для оптимизации производительности веб-интерфейса вашего сайта WordPress.

Оптимизация и скорость загрузки сайта WordPress — это то, над чем надо работать постоянно и искать решение для этого. Оптимизация и ускорение веб-ресурса всегда должны быть приоритетом. Нам всегда есть чем заняться. О, да!

Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь оставить комментарий.

До новых встреч, друзья! Пока, пока!

Как настроить Autoptimize для вашего сайта WordPress

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

В этом посте мы поделимся лучшими настройками плагина Autoptimize для повышения производительности и скорости страницы вашего сайта WordPress.

Мгновенно ускорьте свой сайт WordPress на 20%

Воспользуйтесь преимуществами самых быстрых серверов Google и сети Premium Tier, поддерживаемой более чем 275 CDN Cloudflare по всему миру, для невероятно быстрой загрузки. Входит бесплатно во все планы WordPress.

Начните сегодня

Зачем автооптимизировать?

Прежде чем мы углубимся в лучшие настройки Autoptimize, давайте быстро рассмотрим три причины, по которым Autoptimize — отличный плагин для оптимизации.

1. Бесплатная версия Autoptimize имеет полный набор функций для оптимизации вашего сайта WordPress.
2. Autoptimize — это исключительно плагин для оптимизации, который не кэширует HTML-страницы. Это означает, что он совместим со всеми веб-хостами, даже с настраиваемыми конфигурациями кэширования страниц, такими как Kinsta.
3. Autoptimize имеет более 1 миллиона активных установок в репозитории WordPress и постоянно обновляется новыми функциями и исправлениями ошибок.

Автооптимизация настроек JS, CSS и HTML

HTML, CSS и JavaScript — это хлеб с маслом для Autoptimize. Как и в случае с другими плагинами для оптимизации, изучение обширного набора функций и настроек Autoptimize может оказаться непростой задачей. Чтобы упростить задачу, мы собрали лучшие настройки автооптимизации для повышения производительности вашего сайта.

Параметры JavaScript

Оптимизация JavaScript в Autoptimize.

Оптимизировать код JavaScript

Мы рекомендуем включить эту опцию. Когда «оптимизировать код JavaScript» включена, Autoptimize уменьшит ваши файлы JavaScript.

Объединение файлов JS

Опция Autoptimize «Объединить файлы JS» объединит все ваши файлы JavaScript в один файл. В прошлом объединение файлов JS и CSS было ключевым шагом в оптимизации WordPress. В Kinsta мы используем современные серверы HTTP/2, поддерживающие параллельную загрузку и мультиплексирование. Это означает, что объединение файлов уже не так важно, как раньше, поскольку HTTP/2 позволяет загружать несколько файлов одновременно. С учетом сказанного, объединение файлов CSS и JS по-прежнему будет приводить к скачку скорости для определенных типов сайтов WordPress, поэтому мы рекомендуем протестировать скорость вашей страницы с включенной и отключенной этой опцией.

Также агрегировать встроенный JS

Параметр «также агрегировать встроенный JS» извлекает встроенный JS в ваш HTML и объединяет его с оптимизированным JS-файлом Autoptimize. Поскольку этот параметр может привести к быстрому увеличению размера кеша Autoptimize, мы рекомендуем оставить этот параметр отключенным, если у вас нет особой причины для его включения.

Принудительно загружать JavaScript в

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

Исключить скрипты из автооптимизации

Этот параметр позволяет исключить определенные каталоги и файлы JavaScript из агрегации. По умолчанию Autoptimize исключает следующие сценарии.

• ВП-включает/JS/расстояние/
• wp-includes/js/tinymce/
• js/jquery/jquery.js

Обратите внимание, что добавление сценария для исключения по умолчанию влияет только на агрегацию. Исключенные файлы JavaScript по-прежнему будут уменьшены до тех пор, пока не будет снят флажок «Минимизировать исключенные файлы CSS и JS» в разделе «Разные параметры».

Добавить оболочку Try-Catch

При включении опции «добавить оболочку try-catch» ваш код JavaScript будет заключен в блоки try-catch. Этот параметр полезен для отладки проблем, вызванных минификацией и агрегацией JS. Если ваш сайт работает только с включенной опцией «добавить обертку try-catch», мы рекомендуем обратиться к разработчику, чтобы просмотреть ваши файлы JavaScript, чтобы определить тот, который вызывает проблему, поскольку чрезмерное использование блоков try-catch может снизить производительность JS.

Autoptimize: бесплатный плагин для оптимизации WordPress, о котором вы не знали, что он вам нужен… но он сделает ваш сайт молниеносно быстрым ⚡️В этом руководстве объясняется, почему он вам нужен 🚀Нажмите, чтобы твитнуть

Параметры CSS

Автооптимизация Оптимизация CSS.

Оптимизировать код CSS

Мы рекомендуем включить эту опцию. Когда «оптимизировать код CSS» включена, Autoptimize уменьшит ваши файлы CSS.

Объединение файлов CSS

Опция Autoptimize «Объединить файлы CSS» объединит все ваши файлы CSS в один файл. Как мы упоминали ранее, эта функция может не приносить пользу сайтам, поддерживающим HTTP/2. Мы рекомендуем провести A/B-тестирование этой опции на вашем сайте, чтобы определить, положительно ли она влияет на скорость страницы.

Также агрегировать встроенный CSS

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

Генерировать данные: URI для изображений

Если этот параметр включен, автооптимизация будет кодировать в base64 небольшие фоновые изображения и внедрять их в CSS. Мы рекомендуем протестировать эту опцию, чтобы оценить влияние на скорость вашей страницы. Хотя кодирование изображений в формат base64 уменьшает количество HTTP-запросов, файлы представлений base64 обычно на 20-30% больше, чем их двоичные аналоги.

Встраивание и откладывание CSS

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

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

Создать критический CSS.

После создания критического CSS скопируйте и вставьте его в настройки автооптимизации.

Встроить и отложить CSS в Autoptimize.

Следующим шагом является проверка внешнего интерфейса вашего сайта. Если вы заметите какие-то странные вспышки нестилизованного содержимого (FOUC), вам, вероятно, потребуется идентифицировать эти нестилизованные элементы и добавить соответствующие стили в Autoptimize для встраивания.

Autoptimize предлагает «улучшение», которое автоматически генерирует критический CSS для ваших страниц WordPress. По нашему опыту, эта функция может иногда замедлять работу вашего сайта, поскольку использует внешние вызовы API для создания критически важного CSS. Таким образом, первоначальная критическая генерация CSS зависит от скорости отклика внешнего сервера. В большинстве случаев вышеупомянутый метод, который не требует каких-либо внешних вызовов API, является более чистым решением.

Встроить все CSS

Для большинства сайтов мы не рекомендуем встраивать все CSS, так как это может значительно увеличить размер страницы. Кроме того, встраивание всего CSS делает невозможным кэширование CSS для веб-браузера.

Исключить CSS из автооптимизации

По умолчанию автооптимизация исключает следующие каталоги и файлы CSS из агрегации. Если вы не хотите, чтобы Autoptimize собирал какие-либо из ваших файлов CSS, вы можете добавить их в этот список. Подобно исключению JavaScript, поведение этой функции по умолчанию не предотвращает минимизацию файлов CSS, а только агрегирование.

• wp-контент/кеш/
• wp-контент/загрузки/
• админ-бар.min.css
• dashicons.min.css

Параметры HTML

Оптимизация HTML Autoptimize может помочь уменьшить размер ваших страниц за счет удаления пробелов.

Оптимизация HTML в Autoptimize.

Оптимизация HTML-кода

Мы рекомендуем включить функцию «оптимизировать HTML-код», поскольку она уменьшает размер страницы за счет удаления ненужных пробелов в HTML-коде. Хотя эта функция совместима с большинством сайтов, удаление пробелов может вызвать сбои на некоторых сайтах. Поэтому мы рекомендуем тщательно протестировать оптимизацию HTML-кода, прежде чем использовать ее в производственной среде.

Сохранить HTML-комментарии

Включите эту функцию, если хотите сохранить HTML-комментарии для оптимизированных страниц.

Параметры CDN

Если вы используете Kinsta CDN или прокси-сервис с возможностями CDN, например Cloudflare, вам не нужно ничего настраивать в параметрах CDN Autoptimize. Для еще более быстрого и легкого повышения общей оптимизации вы можете рассмотреть возможность минимизации кода. Это можно сделать прямо в личном кабинете MyKinsta с помощью функции минификации кода.

Если, однако, вы используете другую службу CDN для ускорения ваших ресурсов, вы должны ввести URL-адрес CDN в это поле.

Если вы используете Kinsta CDN, вам не нужно ничего вводить в параметрах CDN.

Cache Info

«Информация о кэше» Autoptimize отображает важную информацию, такую ​​как расположение и права доступа к папке кэша, а также общий размер кэшированных стилей и скриптов. Если вы видите «Нет» рядом с «Можем ли мы написать?», вам нужно будет поработать с вашим хостом, чтобы исправить права доступа к папке.

Автооптимизировать данные кэша.

Misc Options

Autoptimize имеет несколько различных настроек оптимизации. Если у вас возникли проблемы с загрузкой оптимизированных файлов CSS и JS на ваш сайт, вам может потребоваться перенастроить некоторые из приведенных ниже параметров.

Различные оптимизации в Autoptimize.

Сохранять агрегированные скрипты/CSS как статические файлы

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

Минимизировать исключенные файлы CSS и JS

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

Также оптимизировать для вошедших в систему редакторов/администраторов

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

Оптимизация изображений в Autoptimize

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

Пользователям Kinsta мы не рекомендуем использовать функцию оптимизации изображения в Autoptimize. Вместо этого мы рекомендуем использовать полнофункциональные плагины от ShortPixel или Imagify напрямую. С полным плагином у вас будет более детальный контроль над настройками оптимизации, включая переписывание изображений для использования 9Тег 0045 , необходимый для поддержки WEBP на Kinsta.

Отложенная загрузка изображений с автооптимизацией.

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

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

Дополнительные оптимизации в Autoptimize

Дополнительные оптимизации в Autoptimize.

Google Fonts

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

• Оставить как есть.
• Удалить шрифты Google.
• Объединить и соединить в голове.
• Комбинирование и предварительная нагрузка в головке.
• Комбинируйте и загружайте шрифты асинхронно с помощью webfont.js.

Мы не рекомендуем использовать вариант «оставить как есть», так как он не дает преимущества в скорости.

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

Если вы хотите сохранить Google Fonts на своем сайте, мы рекомендуем протестировать последние три варианта, чтобы выяснить, какой из них лучше всего подходит для вашего сайта.

Удалить смайлики

Этот параметр автоматической оптимизации удаляет CSS и JavaScript, связанные с основными смайликами WordPress. Мы рекомендуем включить этот параметр, поскольку он может помочь уменьшить размер страницы. Кроме того, большинство основных операционных систем поставляются со стеками шрифтов, включающими эмодзи. Конечно, есть и другие способы отключить смайлики на вашем сайте WordPress.

Удалить строки запроса из статических ресурсов

Если вы хотите удалить строки запроса (например, ?ver=) из статических ресурсов, вы можете включить эту опцию. Удаление строк запроса не повлияет на время загрузки, но может помочь улучшить оценку вашего сайта в GTmetrix, Google Pagespeed и других службах тестирования производительности.

Предварительное подключение к сторонним доменам

Директива предварительного подключения позволяет вашему браузеру подключаться к указанным доменам для обработки поиска DNS и согласования согласования SSL перед отправкой полного HTTP-запроса.

Например, если на вашем сайте есть изображение логотипа, которое обслуживается с https://site.kinsta.cdn.com/logo.png , вы можете указать Autoptimize добавить директиву preconnect для обработки начальных подключений DNS и SSL. в элементе

до того, как HTTP-запрос будет сделан в элементе вашего HTML.

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

• https://cdn.brianli.com
• https://www.google-analytics.com
• https://www.googletagmanager.com

Эти три домена можно добавить в список предварительного подключения Autoptimize.

Поиск внешних ресурсов с помощью инструментов разработчика.

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

Специальные запросы предварительной загрузки

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

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

Асинхронные файлы JavaScript

Функция Autoptimize «асинхронные файлы JavaScript» позволяет указать определенные внешние файлы JavaScript для асинхронной загрузки с помощью флага async HTML. Хотя асинхронная загрузка JS-файлов может повысить скорость страницы, мы рекомендуем провести адекватное тестирование, чтобы убедиться, что это не влияет на функциональность сайта.

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

Резюме

Если вы знаете, как настроить его параметры, плагин Autoptimize станет отличным вариантом для пользователей WordPress, желающих повысить производительность сайта.

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

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

Идеальные настройки Autoptimize 2023 (JS/CSS, HTML, Разное)

Autoptimize — отличный плагин для оптимизации CSS, JS и HTML, которые влияют на основные веб-жизненные функции. И он может работать даже лучше, чем ваш плагин кеша.

Он может минимизировать, объединять, откладывать и встраивать файлы. Он также имеет настройки для обслуживания файлов с URL-адреса CDN и дополнительные настройки для оптимизации Google Fonts, удаления Gutenberg CSS и предварительной загрузки/предварительного подключения.

Но основной функцией плагина является оптимизация CSS, JS и HTML. Это может быть особенно полезно, если вы находитесь на хосте, который заносит плагины кэша в черный список (например, Kinsta, GoDaddy и WP Engine). Вы по-прежнему захотите оптимизировать свои файлы, и именно здесь в игру вступает Autoptimize.

Итак, как настроить параметры автооптимизации? Давайте погрузимся в каждую вкладку и посмотрим, что они делают.

1. JS, CSS и HTML
2. Изображения
3. Критический CSS
4. Дополнительный
5. Оптимизировать больше

 

1.

JS, CSS и HTML

Параметры JavaScript

• Оптимизация кода JavaScript: ON  – уменьшает файлы JavaScript.
• Совокупные JS-файлы : согласно WP Johnny, объединение JS/CSS обычно должно выполняться только на небольших веб-сайтах. Проверьте свою диаграмму водопада GTmetrix и, если размер вашего CSS/JS меньше 10 КБ, включите 9.0283 НА . Если он больше, оставьте ВЫКЛ . Это должно быть проверено.
  • Также агрегировать встроенный JS: ВЫКЛ. — если файлы JS найдены в HTML, они объединяются, что не рекомендуется автооптимизации, поскольку это приводит к быстрому увеличению кеша.
  • Force JavaScript in : OFF — ранняя загрузка файлов JS, что делает их блокирующими рендеринг. Если файлы необходимо загрузить в голову, вместо этого исключите их.
  • Добавить упаковку try-catch: ВЫКЛ. — если агрегация файлов JS ломает ваш сайт, это может быть решением. Но лучше найти проблемные файлы + исключить их.
• Не агрегировать, а отложить: Фрэнк из Autoptimize говорит, что когда этот флажок установлен, AO будет минимизировать файлы, которые не были минимизированы, на основе имени файла… example.js будет считаться неминифицированным и, следовательно, станет файлом autoptimize_single_xyz123.js.
  • Также отложите встроенный JS: обычно вам нужен этот ON , если предыдущая настройка включена. АО рекомендует удалять исключения и добавлять только те, которые необходимы.
• Исключить скрипты из автооптимизации : если вы видите ошибки после включения определенных настроек JavaScript, найдите проблемные файлы JavaScript и исключите их здесь.
• Удалить неиспользуемый JavaScript : проверьте вкладку охвата в Chrome Dev Tools, чтобы просмотреть самые большие файлы CSS/JS. Часто они происходят из тем, плагинов или стороннего кода. Уменьшение этого в источнике (т.е. замена плагинов облегченными вариантами) является наиболее эффективным. В противном случае отключите плагины там, где они не используются, через Perfmatters.

Только веб-сайты с небольшими размерами CSS/JS обычно должны объединять (агрегировать) файлы Проверьте вкладку охвата в Chrome Dev Tools, чтобы увидеть самые большие файлы JS/CSS вашего сайта Оптимизировать код CSS: ON  – минимизирует файлы CSS.

Агрегированные CSS-файлы : та же концепция для агрегированных JS-файлов. Небольшие сайты обычно должны объединяться и превращать это в , более крупные сайты обычно не должны и оставляют ВЫКЛ .

Также агрегировать встроенный CSS: ВЫКЛ. — то же самое, что и агрегировать встроенные JS-файлы, только для CSS (опять же, это обычно не рекомендуется, так как это может привести к быстрому увеличению кеша).

Генерация данных: URI для изображений : ВЫКЛ. — CDN предупреждают, что при включении принудительно изображения будут обслуживаться с исходного сервера вместо CDN. Его включение может изначально привести к меньшему количеству HTTP-запросов, но не после того, как вы настроите CDN и будете обслуживать изображения.

Устранение блокировки рендеринга CSS: ON  – Google рекомендует встраивать стили в верхней части страницы. Используйте бесплатный генератор CSS критического пути и вставьте код в Autoptimize.

Встроить все CSS: ВЫКЛ. — увеличивает размер HTML + предотвращает кэширование файлов CSS.

Исключить CSS из автооптимизации : аналогично настройкам JavaScript, вы можете исключить определенные файлы CSS из оптимизации, если они вызывают проблемы на вашем сайте.

Удалить неиспользуемый CSS : FlyingPress и Perfmatters лучше всего справляются с удалением неиспользуемых CSS/JS, потому что они загружают использованный CSS в отдельный файл, который можно кэшировать и который лучше подходит для просмотра в реальном мире (в отличие от WP Rocket, который встраивает используемый CSS, что приводит к лучшим результатам, но более медленный просмотр). Как пояснил Викас в посте на FB.

FlyingPress (а теперь и Perfmatters) лучше удаляют неиспользуемый CSS, загружая используемый CSS в отдельный файл

Параметры HTML

• Оптимизация HTML-кода: ВКЛ — минимизирует HTML для уменьшения пробелов и размера страницы.
• Сохранять комментарии HTML: ВЫКЛ . Если вы видите ошибки SyntaxError или проблемы с отступами/интервалами в комментариях, вы можете включить эту функцию. В противном случае этот параметр должен быть выключен.

Параметры CDN

• Базовый URL-адрес CDN : перезаписывает файлы автооптимизации для обслуживания из CDN (BunnyCDN, KeyCDN, но не CDN Cloudflare, который не использует URL-адрес CDN). Если вы просмотрите диаграмму водопада GTmetrix и просмотрите свои файлы, вы заметите, что они, вероятно, сейчас обслуживаются с помощью Autoptimize. Когда вы зарегистрируетесь в CDN и добавите зону вытягивания, они назначат вам URL-адрес CDN, который вы добавите здесь. Я лично рекомендую BunnyCDN.

Добавьте URL вашего CDN в автооптимизацию для обслуживания файлов из CDN ваш сервер не может обрабатывать сжатие и истечение срока действия.

Минимизировать исключенные файлы CSS и JS: ON — даже если вы исключите файлы CSS и JS, они будут минимизированы по умолчанию. Если это по-прежнему вызывает ошибки, снимите этот флажок.

Включить резервные версии 404: ON  — снижает вероятность поломки вашего сайта из-за «не найденных» файлов за счет создания резервных версий, но также может потребоваться настройка вашего сервера.

Также оптимизируйте для вошедших в систему редакторов/администраторов : OFF — вы, вероятно, не хотите активировать автооптимизацию для вошедших в систему пользователей, особенно если вы используете компоновщик страниц.

Включить настройку для поста/страницы: ON  — добавляет метабокс, который позволяет управлять несколькими настройками автооптимизации для каждой страницы (оптимизировать страницу, JS, CSS и добавить изображение LCP для предварительной загрузки). Полезно, если Autoptimize ломает части вашего сайта.

Метабокс Autoptimize позволяет управлять оптимизацией определенных страниц/сообщений Настройки автооптимизации

 

2. Изображения

или плагин для оптимизации изображений, такой как ShortPixel или Smush. В этом случае пропустите настройки изображения Autoptimize. В Autoptimize также не так много настраиваемых параметров, как в других сервисах, но не стесняйтесь попробовать. Он оптимизирует изображения, обслуживает их из CDN изображений ShortPixel в WebP, а также позволяет лениво загружать изображения с настройками исключения.

• Оптимизировать изображения : перезаписывает URL-адреса изображений, которые будут обслуживаться из CDN ShortPixel.
  • Исключения оптимизации : добавьте классы/имена файлов изображений, которые вы не хотите обслуживать из CDN ShortPixel (обычно здесь ничего делать не нужно).
  • Качество оптимизации изображения : выберите сжатие с потерями, глянцевое изображение или сжатие без потерь.
    • Lossy : наибольшее сжатие, большая потеря качества.
    • Глянцевый : среднее сжатие, небольшая потеря качества.
    • Без потерь : низкое сжатие, минимальные потери качества, но самый быстрый.
  • Загрузить AVIF в поддерживаемых браузерах: OFF — я бы использовал WebP вместо AVIF.
• Отложенная загрузка изображений: ВЫКЛ — большинство плагинов кэширования (и Perfmatters) имеют гораздо больше настроек отложенной загрузки по сравнению с Autoptimize, поэтому вы, вероятно, будете использовать его вместо этого.

Автооптимизация настроек изображения

 

3. Критический CSS

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

Вы можете использовать бесплатный критический генератор CSS и вставить код в поле в Autoptimize. Основное преимущество платной подписки на сайте cryptocss.com заключается в том, что она гарантирует создание правильного критического CSS для всего контента (поскольку страницы/записи могут иметь разные CSS и, следовательно, разные критические CSS). Это стоит 3 доллара в месяц, поэтому вы можете протестировать этот метод по сравнению с бесплатным методом и увидеть свои результаты.

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

 

• Google Fonts : ссылка в голове», которая является самой быстрой, но «комбинация и отложенная ссылка в голове» может дать вам лучшие результаты. Протестируйте каждый из них, а затем обновите свой сайт, чтобы убедиться, что вы довольны загрузкой шрифтов и оценками. Локальный хостинг шрифтов, их предварительная загрузка и уменьшение семейств/весов/значков — безусловно, лучшее, что вы можете сделать для оптимизации шрифтов, однако этот вариант тоже может помочь.
• Удалить смайлики : отключает смайлики, которые не подходят для времени загрузки.
• Удалить строки запроса из статических ресурсов : старый элемент PageSpeed, и не должно иметь значения, включен он или выключен, но вы можете проверить его самостоятельно.
• Удалить блочный CSS в WordPress: отключайте только в том случае, если вы уверены, что ваш сайт не использует блочный CSS или глобальные стили, и в этом случае это может уменьшить количество файлов CSS.
• Предварительное подключение к сторонним доменам : предварительное подключение обычно выполняется только со сторонними шрифтами (fonts.gstatic.com) и URL-адресами CDN. Однако шрифты всегда должны быть предварительно подключены с использованием перекрестного источника, которого нет в Autoptimize. Возможно, вы захотите использовать другой плагин (при необходимости) или выполнить предварительное подключение вручную, чтобы использовать перекрестное происхождение.
• Предварительная загрузка определенных запросов : предварительная загрузка должна выполняться только для важных элементов в верхней части сгиба (шрифты, изображение LCP, даже скрипты/стили). Многие плагины кеша предварительно загружают только шрифты, в то время как Autoptimize может предварительно загружать любой файл. Проверьте свою диаграмму GTmetrix Waterfall и проверьте, как предварительная загрузка ключевых файлов влияет на ваши результаты.
• Async Javascript-Files : если вам нужно применить асинхронность, Autoptimize предлагает установить асинхронный JavaScript вместо использования этой функции, которую проще настроить.
• Оптимизация видео YouTube : большинство плагинов кэширования лениво загружают видео и заменяют iframe изображением для предварительного просмотра или используют WP YouTube Lyte. Я предпочитаю FlyingPress, так как он самостоятельно размещает заполнители YouTube, чтобы предотвратить сторонние запросы от ytimg.com.

Автооптимизация Дополнительные настройки

 

5. Оптимизируйте больше

Автооптимизация — это здорово, но этих рекомендаций не так много. Если бы я изменил их, вот как они выглядели бы:

• FlyingPress или LiteSpeed ​​Cache : они лучше справляются с оптимизацией для реального просмотра, чем WP Rocket, если сравнивать, как они удаляют неиспользуемый CSS, размещают шрифты локально, ленивый загружать фоновые изображения, самостоятельно размещать заполнители YouTube и т. д.
• ShortPixel : или вы можете просто использовать Cloudflare Mirage + Polish или Bunny Optimizer.
• Хостинг : я предпочитаю Cloudways или Rocket.net с Cloudflare Enterprise.
• Perfmatters : удалить неиспользуемый CSS/JS с настройками для удаления раздувания, задержки JavaScript, предварительной загрузки важных изображений и других вещей, которые многие плагины кэширования не делают.