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

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

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

Если вы используете тему/плагин с плохо написанным кодом CSS, эти параметры могут нарушить макет вашей веб-страницы.

Если эти параметры хорошо работают на вашем сайте, вы можете попробовать включить « Также агрегировать встроенный CSS? ” вариант. Autoptimize объединит CSS в HTML.

Оптимизация HTML — это бонус после оптимизации файлов JavaScript и CSS на вашем сайте.

Включение « Оптимизировать код HTML? » уменьшит вывод HTML вашей веб-страницы. Это сделает код вывода HTML неудобным для чтения, но размер файла будет меньше.

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

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

Мы рекомендуем использовать параметр « Объединить и связать в заголовке » или « Объединить и связать отложенно в заголовке ». Пожалуйста, проверьте, какой из них лучше всего работает на вашем сайте.

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

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

Если вы включите оптимизацию JavaScript и CSS, этот параметр больше не нужен.

Но если вы отключите оптимизацию JavaScript и CSS, вы можете попробовать включить эту опцию.

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

Глобальные стили, представленные в WordPress 5.9, часто автоматически добавляют CSS и масштабируемую векторную графику (SVG) на ваши страницы. Теперь доступна опция удаления глобальных стилей.

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

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

ДА, критический  CSS является частью оптимизации CSS, но не всем он нужен.

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

Если вы считаете, что можете использовать один и тот же критический CSS для всех страниц, вы можете использовать параметр «Встроить и отложить CSS» в разделе «Оптимизация CSS».

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

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

Панель правил теперь доступна, чтобы помочь пользователям создавать правила вручную, даже если у вас нет ключа Critical CSS API.

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

«Сохранить агрегированный скрипт/CSS как статические файлы?» Опция очень важна для кэширования оптимизированных файлов JavaScript/CSS как статических файлов.

Вот почему вы увидите опцию «Автооптимизация — Удалить кэш» на панели администратора, которая позволит вам удалить оптимизированные файлы JavaScript/CSS, и они будут созданы заново.

Если вы используете комбинацию RunCloud Hub и Autoptimize, когда вы нажимаете «Удалить кэш» в Autoptimize, он автоматически очищает кэши RunCloud Hub. И когда вы нажмете «Очистить весь кэш» в RunCloud Hub, он также автоматически очистит кэши Autoptimize.

Теперь вы можете « Включить настройку для поста/страницы? », чтобы изменить настройки для каждой страницы или для каждого сообщения, что идеально подходит для оптимизации Largest Contentful Paint для вашего сайта.

Autoptimize — популярный плагин WordPress для оптимизации вывода JavaScript / CSS / HTML вашей веб-страницы для повышения производительности WordPress. С последним набором новых функций, представленных в версии 3. 0.3, Autoptimize — отличный выбор, если на вашем сайте есть дополнительные файлы CSS и Javascript. Используете ли вы кэширование на стороне сервера RunCloud и рассматриваете возможность его объединения с Autoptimize? Отлично, не стесняйтесь присоединиться к обсуждению ниже, чтобы поделиться своим опытом. 💬

Категории: WordPress, Учебники

Краткое руководство (обновлено)

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

Autoptimize считается отличным плагином для WordPress, так как он может значительно повысить скорость вашего веб-сайта за счет минимизации CSS, HTML и JavaScript с правильными настройками Autoptimize. Однако вы найдете некоторых провайдеров веб-хостинга, таких как GoDaddy и WP Engine, которые заблокировали плагины кэширования из-за своих встроенных систем кэширования. Autoptimize по-прежнему можно использовать для оптимизации скорости вашего сайта WordPress. Лучшее в плагине то, что его можно использовать с другими мощными плагинами WordPress.

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

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

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

Фотография: Josephmuciraexclusives

9009 . ваши файлы JavaScript будут минимизированы с помощью Autoptimize.
• Объединение файлов JavaScript

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

• Кроме того, совокупный встроенный JavaScript

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

• Force JavaScript In

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

• Исключение скриптов из автооптимизации

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

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

Эта конкретная опция может обернуть код JavaScript в блоки try-catch. Если у вас есть какие-либо проблемы с отладкой, вызванные агрегацией и минификацией JS, эта опция может быть очень полезной. С другой стороны, если сайт работает с оберткой Add Try-catch, вам следует работать с разработчиком.

Фото: searchenginejournal

Параметры HTML в настройках автооптимизации

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

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

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

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

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

Параметры CSS в настройках автооптимизации
• Оптимизировать код CSS

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

• Совокупные файлы CSS

С помощью этого выбора вы можете объединить все файлы CSS вместе. Вполне возможно, что эта функция может не приносить пользу сайтам, поддерживающим HTTP/2, поэтому рекомендуется A/B-тестирование этой опции на сайте, чтобы выяснить, есть ли какое-либо положительное влияние на скорость страницы.

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

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

• Генерировать данные

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

• Встроить и отложить CSS

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

• Встроенные все CSS

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

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

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

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

Фото: popwebdesign

Параметры CDN в автооптимизации

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

С помощью WordPress Autoptimize вы получаете возможность загрузить оптимизированный файл через CDN. Стоит отметить, что выбор CDN полностью зависит от требований и популярности вашего сайта. MaxCDN, CacheFly и Cloudflare — некоторые из решений WordPress CDN. Вы также можете настроить решение Autoptimize WPEngine Max CDN через пользовательский портал.

Разнообразные настройки Autooptimize
Статические файлы и аутоптимизирующие настройки
• Сохранить агрегированные сценарии в качестве статических файлов

. Включение этого варианта Sake Save It Rocage Files Save It Caser Blocally File. Если вы знаете, что ваш сервер неправильно настроен для обработки истечения срока действия и сжатия файлов, то отключение этой опции будет намного лучше, чтобы предотвратить медленную загрузку веб-сайтов.

• Минимизация исключенных файлов JSS и CSS

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

• Оптимизация для вошедших в систему администраторов

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

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

Для оптимизации изображений существует встроенная интеграция WordPress с ShortPixel. У вас может быть настройка качества изображения, но с интеграцией WordPress Autoptimize вы также можете создавать и обслуживать версии изображений WEBP.

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

Дополнительные параметры автооптимизации
• Google Fonts

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

• Удалить эмодзи

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

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

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

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

С помощью директивы pre-connect вы можете разрешить своему браузеру подключаться к указанным доменам и обрабатывать подтверждение SSL и поиск DNS перед отправкой полного HTTP-запрос. Было бы намного лучше, если бы вы не пытались добавить более шести доменов в свой список Autoptmize, так как это может привести к снижению производительности.

• Предварительная загрузка определенных запросов

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

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

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

Фото предоставлено: kinsta

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

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

Автооптимизация WP Engine
• WP Engine

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

• Optimole

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

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

В настройках Autoptimize вы не можете добавить Cloudflare CDN, но настройка может быть для вас довольно простой. Это важно сделать, потому что Autoptimize Cloudflare добавляет в CDN еще 200 центров. На первом этапе вам необходимо зарегистрироваться в Cloudflare, а затем вам будет предложено добавить сайт и начать сканирование.

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

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

Настройки автооптимизации: Преимущества Autoptimize прошел долгий путь, и теперь этот плагин оказался лидером в оптимизации скорости веб-сайта WordPress.
Конкуренция за Autoptimize

Некоторые из конкурентов за Autoptimize: WP-Sweep, WP-Optimize, Async Javascript, Perfmatters, Hypercache, CacheEnabler, WP Performance Score Booster, WP Rocket, WP Fastest Cache и W3 Total Cache. Несмотря на то, что у плагина много конкурентов, у Autoptimize есть свои преимущества, такие как проблемы несовместимости, которые возникают редко и почти не содержат ошибок. Это делает Autoptimize идеальным плагином для многих веб-сайтов WordPress.

Заключительные слова об автооптимизации

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