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.

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

Плагин Autoptimize — автоматическая оптимизация сайта на WordPress

Как лучше всего оптимизировать веб-сайт? Допустим, вы вручную оптимизировали весь код сайта. Казалось бы, все хорошо и можно дальше работать. Так и есть, но это до того момента, как вы начнете расширять веб-сайт. Добавление новых типов страниц или контента — уже снова нужно проводить оптимизацию. Зачем постоянно оптимизировать сайт вручную, когда можно сделать этот процесс автоматическим. Достаточно всего лишь делегировать эту задачу подходящему плагину и можно спокойно заниматься своими делами и даже не думать об оптимизации. Какой же плагин подойдет для этой цели? Мы можем сказать, что вам нужен именно Autoptimize. Это расширение автоматизирует процесс оптимизации веб-сайта, причем делает это очень качественно. Давайте подробно рассмотрим само дополнение и его функционал.

Перейти к плагину

---

Краткая информация о Autoptimize

Autoptimize — это плагин для оптимизации веб-сайта на WordPress. Расширение имеет достаточно широкий спектр возможностей, которые позволяют проводить тонкую настройку процесса оптимизации ресурса. Стоит заметить, что плагин предоставляет настройки, которые позволяют подстроить его работу под конкретный сайт. Дополнение совместимо с другими инструментами для оптимизации. Поэтому если вы уже используете какое-то расширение, то его можно продолжать использовать вместе с Autoptimize. Средняя оценка плагина — 4,5 звезды при количестве загрузок, которое превышает 1 миллион. Это говорит о его высокой популярности и хорошем качестве работы. Также дополнение имеет очень большое количество положительных отзывов. Autoptimize совместим с WordPress 5.6 и переведен на 30 языков. Разработчики плагина хорошо постарались и добавили в свой продукт все функции, которые нужны для полноценной работы с дополнением. Посмотрим на некоторые из этих функций:

• расширение в автоматическом режиме минимизирует все ваши файлы скриптов и стилей;
• плагин автоматически распределяет стили в шапку сайта, а скрипты в подвал. Так как стили будут загружаться первыми, то скорость загрузки самого ресурса повысится;
• возможность оптимизации и включения отложенной загрузки изображений. Плагин поддерживает также форматы Webp и Avif;
• даже если вы используете HTTP 2, дополнение все равно позволяет еще лучше оптимизировать веб-сайт;
• расширение может оптимизировать даже шрифты, которые вы используете на своем ресурсе;
• плагин имеет расширенный API, который позволяет настроить его в соответствии с конкретными потребностями вашего веб-сайта;
• расширение позволяет отлично работать с визуальными конструкторами.

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

Полезно: подборка лучших тем WordPress для риелтора

Принцип работы Autoptimize

Естественно, очень важно знать, каким образом работает расширение. Исходя из принципа работы дополнения, можно понять, насколько оно нужно и нельзя ли заменить его другим инструментом. Autoptimize работает по достаточно простому принципу. Оптимизация сайта обычно заключается в том, чтобы минимизировать файлы (сценарии и стили), сжать их и распределить по частям кода. Именно это и делает дополнение. Сначала плагин объединяет все сценарии и стили веб-сайта, потом он их минимизирует и сжимает, а после этого кэширует и распределяет. Распределение происходит таким образом: скрипты перемещаются в подвал сайта, а все стили — в шапку. Почему так? Потому что скрипты в начале страницы могут значительно замедлить загрузку сайта. Это очень плохо скажется на поисковой оптимизации.

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

Очищает ли автоматическая оптимизация кэш

Сам плагин не имеет полноценного инструмента, который бы позволил очищать кэш. Почему? Это сделано по некоторым соображениям разработчиков. Они боятся, что расширение может удалить некоторые файлы, которые еще нужны для работы сайта и ресурс просто перестанет работать. К слову, если у вас на сайте быстро растет кэш, это может быть вызвано целым рядом причин и вам стоит попробовать поискать плагины для очистки кэша. Вместо того чтобы вычищать кэш, вы можете попробовать другие методы, которые не позволят ему увеличиваться:

• отключить одну из этих двух опций (или обе опции): «агрегировать встроенный JS» и «агрегировать встроенный CSS»;
• исключить JS-переменные, которые меняются при загрузке каждой страницы.

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

Полезно: обзор редактора блоков Gutenberg

Работа с визуальными конструкторами

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

Почему отложенный CSS несет пользу

В своей работе расширение часто создает отложенный CSS. Разумеется, возникает вопрос — что это такое и почему это стало таким популярным? Все достаточно просто. Вообще весь CSS код всегда должен находиться в заголовке страницы. Это уже стандарт. В последнее время Google решил начать продвижение отложенного CSS. Отложенный CSS — это код сайта, который в принципе нужен веб-сайту, но при этом можно подождать с его загрузкой. То есть, сначала загружаются самые важные файлы, которые отвечают за создание верхней части страницы, видимой пользователем при заходе на веб-сайт, а после этого уже подгружается отложенный код.

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

Как дополнение оптимизирует изображения

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

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

Повышает ли дополнение оценку скорости сайта

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

Полезно: темы для блога на WordPress начала 2021 года

Можно ли использовать Rocket Loader Cloudflare

Rocket Loader Cloudflare — это достаточно продвинутый и очень мощный способ работы с JS без блокировки рендеринга. Этот инструмент вполне хорошо работает одновременно с Autoptimize. Но иногда могут возникать и сбои в работе. Что мы можем вам посоветовать? Сначала стоит отключить Rocket Loader, после этого можно уже настроить Autoptimize, а потом снова запустить Rocket Loader. Когда вы проделаете эти действия, убедитесь, что все работает так, как надо.

Нужна ли автоматическая оптимизация, если уже используется HTTP/2

Стоит заметить, что HTTP/2 — это просто большой шаг вперед. Это работает таким образом, что вместо большого количества запросов к серверу, используется только одно соединение, в котором сразу выполняется несколько запросов. Да, это позволяет значительно оптимизировать скорость загрузки веб-сайта. Но не стоит исключать тот фактор, что расширение не ограничивается лишь парой инструментов для оптимизации сайта. Поэтому даже если вы используете HTTP/2 , Autoptimize все равно будет полезен. Каким образом? Например, все еще имеет смысл попробовать конкатенировать файлы CSS и JS. Это не единственный способ применения дополнения. Но вам стоит самостоятельно попробовать функции Autoptimize на своем веб-сайте, так как у вас может быть связка HTTP/2+агрегация и минификация или HTTP/2 с агрегацией, но без минификации. Поэтому пробуйте и тестируйте, так как плагин поможет гораздо больше, чем просто с оптимизацией файлов.

Полезно: визуальный редактор для WordPress: какие бывают, как выбрать

Как исключить некоторые элементы из оптимизации

Иногда бывает нужно исключить некоторые элементы из оптимизации. Разработчики предусмотрели это, и вы можете добавить в список исключений те файлы, которые не должны оптимизироваться. Сделать это можно таким образом:

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

Это все, что вам нужно знать о том, как можно исключить файлы из оптимизации.

Функция очистки кэша

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

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

Полезно: WP Super Cache как инструмент разгрузки вашего сайта WordPress

Стоит ли своих денег платная версия Autoptimize

Расширение поставляется бесплатно, но также оно имеет и расширенную версию. Разумеется, расширенная версия включает в себя гораздо больше функционала, чем бесплатная. Pro версия поставляется в двух вариантах — Expert и Complete Speed. Посмотрим, что включают в себя оба тарифа.

Autoptimize Expert. Стоимость этой версии — 299 евро. За такую сумму вы получаете весь функционал бесплатной версии, но при этом разработчики добавили следующие функции:

• оптимальная конфигурация, которая полностью адаптирована конкретно к вашему веб-сайту;
• надстройка criticalcss, которая позволяет еще сильнее ускорить веб-сайт.

Complete Speed Optimozation. Этот тариф стоит 799 евро, и он еще включает в себя отчеты со сравнениями до и после. Посмотрим, какие функции входят в этот тариф:

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

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

Отзывы пользователей

Теперь, когда мы рассмотрели суть работы с дополнением и узнали, как можно исправить основные проблемы, можно переходить к теме пользовательского опыта. Разработчики могут долго расписывать все возможности своего продукта. Но проверить это все можно только воспользовавшись плагином. Когда есть отзывы, даже не принципиально самостоятельно проверять работоспособность расширения. Можно просто прочитать мнение пользователей и сделать свои выводы. Вот что пишут пользователи Autoptimize: «плагин Autoptimize — это просто отличное расширение. Он значительно ускорил время загрузки моего веб-сайта. К слову, я использовал не только это дополнение. У меня была связка Autoptimize + CriticalCSS + W3 Total Cache. Независимо от типа устройства и пропускной способности моего интернета, сайта загружался очень быстро», «мне хотелось бы больше внимания уделить поддержке расширения. Команда поддержки все время помогала мне решать все проблемы с дополнением. И это еще при том условии, что проблема заключалась совсем не в плагине. Но, несмотря на это, ребята пробовали новые решения и помогали мне, пока проблемы не была полностью устранена».

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

Заключение

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

Оптимизация 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.

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

Прежде чем мы углубимся в лучшие настройки 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 исключает следующие сценарии.

• wp-includes/js/dist/
• 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-кода, прежде чем использовать ее в производственной среде.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

Присоединяйтесь к более чем 20 000 других, которые получают наш еженедельный информационный бюллетень с инсайдерскими советами по WordPress!

Подпишитесь сейчас

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

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

Параметры CDN

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

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

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

Cache Info

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

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

Разные параметры

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

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

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

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

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

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

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

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

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

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

Пользователям Kinsta мы не рекомендуем использовать функцию оптимизации изображения в Autoptimize. Вместо этого мы рекомендуем использовать полнофункциональные плагины от ShortPixel или Imagify напрямую. С полным плагином у вас будет более детальный контроль над настройками оптимизации, включая переписывание изображений для использования 9Тег 0039 , необходимый для поддержки 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.

---

Экономьте время, деньги и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
• Интеграция с Cloudflare Enterprise.
• Глобальный охват аудитории благодаря 35 центрам обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Конкурирующие плагины или лучшие союзники?

Autoptimize — одна из лучших альтернатив WP Rocket.

Фактически, он решает наиболее распространенные проблемы со скоростью страниц лучше, чем WP Rocket.

Но это ограничено — Autoptimize только хорошо оптимизирует файлы, ничего больше.

С другой стороны, WP Rocket имеет обширный набор функций для оптимизации файлов, а также кэширование, очистку базы данных, интеграцию с CDN и массу других вещей.

Но есть много других вещей, которые нужно учитывать.

У какого инструмента есть то единственное, что может изменить ситуацию?

Какой инструмент вы можете себе позволить?

Итак, прочитайте наше сравнение Autoptimize и WP Rocket, чтобы выяснить, какой из них подходит именно вам.

Автооптимизация против WP Rocket в моментальном снимке

Чрезмерное использование компоновщиков страниц может привести к тому, что ваши тесты будут выглядеть так:

И если вы даже не приблизились к прохождению теста Core Web Vitals…

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

WP Rocket.

На самом деле, в нем есть почти все, что вам нужно для повышения производительности вашего веб-сайта WordPress:

• Исчерпывающая система кэширования со сжатием GZIP и расширенным кэшированием браузера и страниц
• Функция очистки базы данных
• Некоторое (правда, ограниченное) изображение инструменты оптимизации
• Расширенные возможности и настройки минимизации файлов
• Множество дополнительных настроек и хитростей

Для сравнения, в Autoptimize есть только опции минимизации файлов.

Итак, пока мы сравниваем два инструмента в этом обзоре, помните, что они совершенно разные. WP Rocket — это универсальное решение.

Автооптимизация ориентирована на решение одной конкретной проблемы.

Но хорошие новости? Вы можете использовать WP Rocket и Autoptimize вместе.

Их часто считают конкурентами, но эти два плагина могут неплохо работать вместе. Подробнее об этом после того, как мы сравним их.

Краткий обзор WP Rocket

Плагин WP Rocket обладает впечатляющими возможностями веб-производительности.

От мощного кэширования с предварительной загрузкой:

До расширенных настроек оптимизации кода, вы можете рассчитывать на плагин WP Rocket, если вам нужно улучшить скорость сайта.

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

К сожалению, не все так радужно.

Начнем с того, что у WP Rocket нет бесплатной версии. В маркете полно бесплатных плагинов.

Но это нормально, правда? Вы платите больше, вы получаете больше.

В какой-то степени это правда. WP Rocket — самый эффективный плагин для кэширования. Но ему не хватает некоторых функций, которые вы ожидаете в его ценовом диапазоне. В нем нет инструментов сжатия/изменения размера изображений и управления активами.

Pros

• Очень хорошая оптимизация веб-производительности
• Интерфейс, удобный для пользователя
• качество Life Tools
• Great Integrations

Cons

• довольно дорогие
• . 0012

Автооптимизация Краткий обзор

Автооптимизация далеко не так всеобъемлюща, как WP Rocket.

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

Но в данном случае важны мелкие детали.

Autoptimize не является кеширующим плагином, он отвечает только за оптимизацию кода.

Это большой недостаток, даже если Autoptimize полностью бесплатен.

Другие инструменты, такие как WP Super Cache, WP-Optimize, WP Fastest Cache, плагин Litespeed Cache или Breeze, также бесплатны. И они делают более или менее то, что делает WP Rocket.

Однако Autoptimize гораздо мощнее, чем можно было ожидать.

Каждый тип оптимизации кода — например, CSS, HTML или JavaScript — поставляется с расширенными параметрами настройки.

Больше, чем в таких инструментах, как WP Rocket или WP-Optimize.

Кроме того, параметры Autoptimize интуитивно понятны и соответствуют тому, что вы найдете в тесте Google Pagespeeds.

Например, у нас была такая проблема с CSS на одном из наших сайтов:

Это обычное дело для сайтов, использующих шрифты Google.

В некоторых инструментах есть опции для решения ваших проблем с Google Fonts.

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

Плюсы

• Отличная оптимизация файлов
• Интуитивно понятные опции, адаптированные к распространенным проблемам Google Pagespeeds

Минусы

• Неполный набор инструментов

Хорошо ли работает автоматическая оптимизация?

Вас могут ввести в заблуждение такие параметры:

И подумайте, что Autoptimize также выполняет некоторую форму кэширования.

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

Это все еще вопрос оптимизации файлов.

Autoptimize и WP Rocket: сравнение функций

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

В данном случае это было бы не слишком проницательно.

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

Итак, мы будем сравнивать только типы оптимизации файлов, а затем подробнее расскажем о том, что может сделать WP Rocket, чего не может Autoptimize.

Оптимизация CSS

Оптимизация CSS WP Rocket довольно исчерпывающая. Он включается автоматически, как только вы устанавливаете плагин, и вы получаете довольно приличный функционал.

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

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

Одним из таких примеров является возможность удалить неиспользуемый CSS:

Но, конечно, они покрывают свои базы базовыми опциями, такими как возможность исключить файлы из модификации:

Или возможность объединить файлы CSS в один (хотя это не всегда хорошо).

Автооптимизация идет еще дальше.

У них также есть неплохой базовый уровень для оптимизации CSS.

Но они также помогают решить очень распространенную проблему:

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

Оптимизация JavaScript

WP Rocket неплохо справляется с оптимизацией JavaScript. Вы можете использовать плагин для минификации Javascript:

А также:

• Исключить файлы JavaScript из минификации
• Собрать скрипты в один файл
• Отложенная загрузка JavaScript
• Задержка выполнения JavaScript

Всего этого обычно достаточно, чтобы позаботиться о ваших потребностях в оптимизации JS, таких как загрузка JavaScript различными способами.

В этом случае автооптимизация не обязательно лучше. Он просто делает немного другие вещи.

Вы получаете основные инструменты, такие как включение минимизации, исключение файлов, отложенный JavaScript и т. д.

Разница в том, что Autoptimize имеет больше инструментов, которые вы можете включить для повышения производительности:

В то время как WP Rocket позволяет вам персонализировать инструменты, вы получаете немного больше, позволяя вам указывать сценарии, которые вы хотите загружать отложенными или отложенными.

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

HTML-оптимизация

HTML-оптимизация — не самая важная функция плагина кэширования. На самом деле, WP Rocket считает, что это настолько ненужно, что они удалили функцию «Минимизировать HTML» с 2020 года.0003

И мы видим их аргумент.

В проведенных ими тестах оптимизация HTML дала незначительный эффект — только уменьшила размер страницы на 0,01 КБ.

Так что WP Rocket не может конкурировать в этой категории.

И Автооптимизация ничего особенного не делает. У него просто есть возможность включить/отключить оптимизацию HTML:

А также возможность включить/отключить комментарии HTML.

Наверное, это перк. Но это не критерий, чтобы решить, какой из этих инструментов лучше минифицирует файлы.

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

Помимо основных параметров оптимизации CSS/JavaScript, WP Rocket и Autoptimize предлагают дополнительные инструменты.

Вот что умеет WP Rocket:

Некоторые опции по предзагрузке шрифтов, а также быстрые действия по кешированию CSS в главной панели:

Это неплохо, но очень мало по сравнению с тем, что умеет Autoptimize.

Одна из лучших настроек — это параметры Google Fonts:

Мы много мучались с оптимизацией для Google Fonts, и никакой другой инструмент не помог так, как Autoptimize.

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

Но только Автооптимизация с ее расширенными возможностями помогла нам полностью от нее избавиться.

И это только один из вариантов. Вы также можете:

• Удалить эмодзи
• Удалить строку запроса «ver» из статических ресурсов
• Предварительно подключиться к сторонним доменам
• Запросы предварительной загрузки
• Асинхронные файлы JavaScript

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

Функции WP Rocket, помимо оптимизации файлов

Autoptimize фокусируется на оптимизации файлов.

И мы думаем, что он опережает WP Rocket из-за немного лучших опций.

Но для объективного сравнения нужно упомянуть обо всем остальном, что делает WP Rocket. Потому что это имеет большое значение.

Во-первых, WP Rocket — это плагин для кэширования.

Что это?

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

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

Инструменты кэширования WordPress, такие как WP Rocket, просто улучшают работу всего этого.

Возможно, WP Rocket и не самый полный плагин для кэширования, но он неплохо с этим справляется. А также имеет множество расширенных опций, таких как мобильное кэширование:

Создает специальный мобильный кэш вашего сайта.

Вы также можете предварительно загрузить свой кеш:

Или отредактировать мелкие вещи, например, срок службы кеша:

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

В целом, WP Rocket имеет эффективную политику кэширования

Помимо кэширования WordPress, WP Rocket также выполняет небольшую оптимизацию мультимедиа с отложенной загрузкой изображений:

И интеграцией с изображениями WebP:

Но это не очень полезно, так как WordPress делает это в любом случае.

Что полезно, так это инструмент очистки базы данных WP Rocket:

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

WP Rocket не имеет собственной сети доставки контента. Но это может помочь вам интегрировать собственный CDN:

И вообще, помочь вам добавить сторонние инструменты на ваш сайт, такие как Cloudflare, Sucuri или Varnish:

Инструмент может сделать больше, но это суть Это.

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

Итак, в целом, WP Rocket — лучший плагин для оптимизации.

Но когда дело доходит до оптимизации файлов, Autoptimize опережает.

WP Rocket или Autoptimize: что проще в использовании?

Использовать автооптимизацию несложно.

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

Это в основном благодаря его предложениям / объяснениям, помимо большинства настроек:

Это позволяет очень легко понять, что вы можете сделать, и каковы вероятные результаты.

Дело в том, что в WP Rocket это тоже есть:

Кроме того, WP Rocket имеет гораздо более красивый интерфейс:

Быстрые действия, которые помогут вам быстро выполнять задачи:

И в целом более понятный интерфейс.

Имейте в виду, что WP Rocket выполняет все это, а также имеет массу дополнительных возможностей, функций и интеграций. Это полноценный плагин производительности WordPress.

Таким образом, хотя Autoptimize прост в использовании, WP Rocket по-прежнему впереди.

Autoptimize и WP Rocket: цены и поддержка

Autoptimize — это бесплатный плагин без версии Premium.

Тем не менее, они рекомендуют много других платных плагинов, пока вы используете его:

(включая WP Rocket)

И у них есть служба очистки веб-сайта:

Мы понимаем, что они должны как-то зарабатывать деньги, и опыт чтобы сделать то, что включено, может быть трудно найти…

Но это довольно дорого.

По крайней мере по сравнению с имеющимися у вас альтернативами.

Если ваш сайт невелик (мы имеем в виду более 1 миллиона посетителей в месяц), вы можете заплатить лишь часть этой суммы за Nitropack.

Реализация которого занимает мало времени, и ваша оценка Google Pagespeeds выглядит следующим образом:

Если у вас нет денег и на это, WP Rocket стоит всего 49 долларов в месяц. И этого может быть достаточно для большинства сайтов, желающих пройти CWV.

Говоря о WP Rocket — вот сколько он стоит:

Это среднее значение для премиальных плагинов WordPress.

Но он намного дороже, чем большинство его конкурентов.

Breeze, W3 Total Cache, WP-Optimize и даже Autoptimize имеют бесплатную версию. Что обычно не уступает WP Rocket с точки зрения количества функций.

Так стоят ли дополнительные деньги, которые вы платите за WP Rocket?

Мы думаем, что да.

Самый эффективный плагин для оптимизации производительности (подробнее об этом чуть позже).

Так что насчет поддержки?

Оба инструмента имеют базу знаний, которая поможет вам решить любую проблему, с которой вы можете столкнуться:

Хотя «центр знаний» Autoptimize — это просто FAQ. И их поддержка — это простой форум WordPress.

Для сравнения, у WP Rocket более аккуратный центр поддержки. И вы можете получить помощь прямо с панели инструментов WordPress:

Вот почему он также лидирует в этой категории.

Автооптимизация и тесты производительности WP Rocket

Особенности, цены и поддержка имеют большое значение.

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

Повышенная скорость и возможность прохождения Core Web Vitals.

Итак, насколько хорошо Autoptimize и WP Rocket показали себя в наших тестах? Давай выясним.

Benchmark

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

Без какой-либо оптимизации производительности наша оценка Google Pagespeeds:

И это в основном из-за ресурсов, блокирующих рендеринг:

А также некоторые проблемы с изображениями:

Среди более мелких проблем.

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

Результаты тестирования WP Rocket

После не более 5-10 минут установки и оптимизации мы получили вот такую ​​оценку с WP Rocket:

Это большое улучшение.

И это решило многие наши проблемы:

Да, некоторые проблемы остались. Но если потратить немного больше времени на настройку WP Rocket, они тоже могут исчезнуть.

Однако мы все еще боролись с ресурсами, блокирующими рендеринг.

И нас ждал сюрприз от Autoptimize.

Как усилить работу вашего сайта: результаты теста Autoptimize

Результаты тестов, запускаемых только с помощью Autoptimize, не являются чем-то выдающимся. Большой разницы нет, поэтому я не буду их здесь описывать.

Чем я хочу поделиться, так это тем, насколько хорошо Autoptimize работает вместе с WP Rocket.

Да, вы можете использовать их одновременно.

А вот результат, который мы получили на мобильных устройствах с этой комбинацией:

И все проблемы, которые у нас были раньше, исчезли:

Рендеринг больше не блокирует ресурсы!

Это очень важно, если вы хотите оптимизировать производительность своего сайта! Единственный другой способ получить аналогичные результаты — использовать Nitropack, который стоит НАМНОГО дороже, чем WP Rocket.

Нитропак еще быстрее. Проверьте эти результаты теста GTMetrix:

Это результаты WP Rocket + Autoptimize между прочим:

Но комбинация WP Rocket и Autoptimize тоже очень хороша! И очень надежно пройти Core Web Vitals.

Некоторые из вас все еще могут быть сбиты с толку.

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

Не вызовет ли это проблем с совместимостью?

Обычно да. Но Autoptimize и WP Rocket — это особый случай.

Могу ли я использовать Autoptimize и WP Rocket вместе?

Функции Autoptimize и WP Rocket пересекаются. Они оба управляют оптимизацией файлов, поэтому их одновременное включение может вызвать проблемы.

По крайней мере теоретически.

На практике два подключаемых модуля хорошо взаимодействуют друг с другом.

Как только вы включите автооптимизацию на своем сайте WordPress, WP Rocket автоматически отключит функции минимизации:

Вот и все! Никаких специальных настроек не требуется или что-то в этом роде.

Если вы хотите быть на 100% уверены, что проблем с совместимостью не возникнет, заранее отключите оптимизацию файлов в WP Rocket.

И только потом ставить Autoptimize.

Вы не сможете установить/снять эти флажки, если активна автооптимизация.

Еще один важный совет: проверьте свой сайт после включения этих двух плагинов.

В нашем случае все отрендерилось правильно. Но на всякий случай дополнительная проверка не помешает.

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

Рекомендуемые настройки для Autoptimize

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

Конечно, вам нужно потратить некоторое время на настройку параметров WP Rocket. Нельзя просто нажать кнопку и надеяться на лучшее. Например, если вы хотите оптимизировать доставку CSS или встроенный Javascript, вам также может понадобиться потратить некоторое время на WP Rocket.

Но обычно легко начать работу и быстро повысить скорость загрузки.

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

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

Итак, первым параметром, который вы хотите отключить, является агрегация файлов CSS:

Затем все зависит от того, что нужно вашему сайту.

В нашем случае нам пришлось устранить следующие ресурсы, блокирующие рендеринг:

Два файла Google Fonts загружались медленно. Мы решили проблему на вкладке «Дополнительно» в Autoptimize:

Благодаря этому (и не более 5 минут дополнительной работы) наш сайт избавился от проблем.

Вывод: автооптимизировать WP Rocket или и то, и другое?

Самая безопасная ставка, если вы хотите пройти Core Web Vitals и улучшить производительность своего сайта, — это получить WP Rocket. Настройте его, поэкспериментируйте с ним и не забудьте дополнительно приобрести CDN.

Это решит большинство ваших проблем.

Затем, если у вас все еще есть проблемы, которые вы хотите решить, вы также можете попробовать Autoptimize.

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

Но, скорее всего, сам по себе он ничего не сделает. Кэширование важно для веб-производительности, и Autoptimize не заботится об этом.

Часто задаваемые вопросы

Лучше ли Autoptimize, чем WP Rocket?

лучше подходит для решения проблем с производительностью CSS или JavaScript.

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

Плагин Autoptimize хорош?

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

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

Стоит ли покупать WP Rocket?

Да, мы считаем, что WP Rocket стоит тех денег, которые вы за него платите. За 49 долларов в год вы получаете комплексный плагин для повышения производительности, полный полезных функций, таких как кэширование, оптимизация файлов или интеграция с CDN.

И это работает. WP Rocket лидирует во всех наших тестах.

WP-Rocket и Autoptimize: лучший плагин для оптимизации?

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

Из этого руководства вы узнаете:

• Чем автооптимизация отличается от WP-Rocket
• Каковы преимущества (и уникальные особенности) каждого из
• Как вы можете использовать autoptimize и WP-Rocket вместе

Обзор: WP Rocket и Autoptimize

Вот краткий обзор основных различий между этими двумя инструментами.

• Автооптимизация: Отлично подходит для отложенной загрузки изображений, минимизации (и объединения) файлов CSS и JavaScript. Он также оптимизирует шрифты Google и хорошо работает с популярными CDN. Autoptimize не имеет кэша страниц, а критическая генерация CSS является платным дополнением.
• WP Ракета: Плагин оптимизации «все в одном», в котором есть все, что предлагает Autoptimize, а также кеширование страниц, предварительная загрузка HTML, хостинг локальной аналитики и генерация критического CSS.

444394443944443

	Autoptimize	WP Rocket
Minify CSS & JS	Yes	Yes
Combine CSS & JS	Yes	Yes
Defer CSS и JS	Да	Yes
Generate Critical CSS	$5/month per domain	Yes (built-in)
Gzip Compression	Yes	Yes
Image Lazy-loading	Yes	Да
Поддержка Webp	Интеграция 3-й части	Да
Page Cache	1	Page Che
Page
.
Font Optimization	Yes	Yes
Pre-load next page	No	Yes
Database optimization	No	Yes

The most Вот важные различия между WPRocket и Autoptimize:

1. WP Rocket имеет полный кэш HTML-страниц
2. WP Rocket включает критическую генерацию CSS
3. WP Rocket позволяет оптимизировать базу данных и сердцебиение

Оптимизация CSS и Javascript

Autoptimize и WP Rocket во многом совпадают, особенно когда речь идет об управлении скриптами (что является основной целью Autoptimize).

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

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

Autoptimize Оптимизация CSS и JS

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

Чуть позже мы поговорим подробнее о критическом CSS.

WP Rocket Оптимизация CSS и JS

WP Rocket включает все те же функции, что и Autoptimize, когда речь идет об эффективной загрузке файлов CSS и JS.

Вы можете минимизировать, комбинировать и откладывать файлы CSS. Существует также опция оптимизации доставки CSS одним щелчком мыши, которая улучшает время первой отрисовки (в сочетании с функцией Critical CSS).

Вы получаете аналогичные параметры для управления сценариями, и они в основном идентичны Autoptimize.

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

Одним из ключевых отличий является опция «Отложить выполнение Javascript», которая является расширенной функцией, которая может сократить время загрузки страниц с большим количеством JS. Однако он требует некоторой тонкой настройки, поскольку может нарушить работу неожиданных функций (мобильное меню, формы подписки и т. д.).

Вы можете комбинировать, минимизировать и асинхронизировать свой JavaScript. Вы также можете отложить выполнение JS (дополнительно).

Генерация критических CSS

Что такое критические CSS? Критический CSS — это стили CSS, которые необходимы только для правильного отображения содержимого верхней части страницы (то, что вы видите без прокрутки). Загружая важный CSS-код, вы можете значительно ускорить первую отрисовку и самую большую отрисовку контента (LCP) для своего сайта.

• WP Rocket: Встроенный, автоматическая генерация
• Автооптимизация: Critical-CSS — платный аддон (стоит больше, чем WP Rocket в год)

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

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

Важный CSS-аддон Autoptimize стоит 10 долларов в месяц , что, на мой взгляд, возмутительно дорого. Ежегодно это более чем вдвое превышает стоимость лицензии WP Rocket.

Удалить неиспользуемый CSS (WP Rocket)

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

А на отдельных страницах еще хуже. Скорее всего, вам нужно всего 25% (или меньше) всего CSS, загружаемого вашим сайтом.

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

Удалите неиспользуемый CSS и улучшите показатели скорости страницы

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

Кэширование

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

Что такое кеш страницы?

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

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

WP Rocket Caching

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

WP Rocket может использовать как кэширование на стороне сервера, так и кэш браузера вашего посетителя для оптимальной производительности. И делает это невероятно незаметно. На самом деле у вас есть только несколько вариантов кеша:

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

Вы также можете указать продолжительность кэширования (как долго хранить кэшированную страницу перед обновлением).

Существуют также отдельные настройки для обновления кеша (например, когда устанавливается новый плагин или публикуется новый пост).

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

Ни один из этих плагинов не оптимизирует изображения напрямую, но они по-прежнему имеют некоторые важные функции оптимизации изображений, включая:0012

Укажите ширину и высоту для изображений (только WP Rocket)

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

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

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

WebP

Autoptimize может автоматически обслуживать изображения WebP через CDN Shortpixel. Просто введите ключ API Shortpixel, а Autoptimize сделает все остальное (должна быть включена отложенная загрузка). Это позволит отображать оптимизированные изображения «на лету» с точным размером области просмотра посетителей.

Он отлично работает и вполне доступен (я плачу около 30 долларов в год на нескольких сайтах).

Попробуйте Shortpixel бесплатно.

WP Rocket Image Optimization

Lazyload

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

Ленивая загрузка изображений, видео и фреймов

Ленивая загрузка видео значительно сокращает время загрузки страниц, содержащих видео. Он работает, отображая миниатюру изображения видео (с кнопкой воспроизведения), пока она не будет нажата. Я использую его на своей домашней странице (что помогает мне получить пятерку на GTMetrix, несмотря на несколько встроенных видео).

К сожалению, у него (пока) нет функции автоматической оптимизации «отложенной загрузки из nth image», но вы можете указать пользовательский класс (классы) для исключения.

Отсутствующие размеры изображения

Если изображение не имеет указанных атрибутов ширины и высоты в HTML-разметке, WP Rocket может добавить их автоматически. Это помогает с Cumulative Layout Shift (CLS), который является метрикой Google Page Experience.

WebP

WP Rocket может показывать изображения WebP, если у вас установлен совместимый плагин. Он легко интегрируется с плагином Imagify (от того же разработчика), но также работает с Shortpixel и EWWW Image Optimizer.

Предварительная загрузка

Что такое предварительная загрузка? Почему это важно?

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

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

Автооптимизация может предварительно загружать шрифты Google или сторонние ресурсы, указанные вами.

Он также обрабатывает резервные настройки шрифта, такие как font-display: swap;

Предварительная загрузка WP Rocket

WP Rocket позволяет предварительно загружать шрифты (как локальные, так и сторонние), а также предварительно подключаться к любым указанным вами сторонним ресурсам.

Это делает шаг вперед, позволяя вам предварительно загружать карту сайта (она автоматически определяет ее в большинстве плагинов SEO, таких как Yoast и Rankmath).

И самая крутая функция — это возможность предварительной загрузки целых веб-страниц, когда ваши посетители наводят курсор на ссылку. Это заставляет дополнительные просмотры страниц загружаться мгновенно (аналогично бегущим страницам).

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

Дополнительная оптимизация (WP Rocket)

Мы рассмотрели почти все, на что способна Autoptimize, но WP Rocket только начинает. Есть еще несколько способов ускорить работу вашего веб-сайта:

Оптимизация базы данных

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

Всего несколько кликов.

Heartbeat Control

Сердцебиение WordPress — это API, который позволяет передавать данные между внутренним сервером и браузером. Это происходит каждые 15-60 секунд и использует для этого admin-ajax. php.

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

Совместное использование WP Rocket и Autoptimize

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

Это потому, что WP Rocket имеет почти все функции, которые есть у Autoptimize (плюс дополнительные), поэтому от использования обоих очень мало преимуществ.

Причины использовать автооптимизацию с WP Rocket

Автооптимизация имеет небольшое количество функций:

1. работает лучше, чем WP Rocket
2. предлагает, а WP Rocket — нет

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

Наконец, Autoptimize предлагает функцию «ленивой загрузки после nth изображений».

Это единственные причины использовать их вместе. В большинстве случаев вам лучше просто использовать WP Rocket и жить с небольшой разницей в функциональности.

В конце концов я так и сделал, полностью удалив Autoptimize со своего сайта.

Как их комбинировать

В большинстве случаев Autoptimize будет обрабатывать только те функции, которые вам нужны (например, отложенная загрузка изображений или управление скриптами), а WP Rocket сделает все остальное.

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

Вердикт: что выбрать Autoptimize или WP Rocket?

WP Rocket выиграл каждый раунд нашего сравнения и является лучшим, более мощным плагином почти во всех отношениях. Однако это нечестная борьба, поскольку Autoptimize — бесплатный плагин, тогда как WP Rocket стоит денег.