Идеальные настройки автоматической оптимизации + Cloudflare / StackPath CDN (2020)

Autoptimize отличный плагин, но для кеширования WP Rocket обычно # 1 в опросах Facebook.


Так зачем тебе это?

Потому что некоторые хосты любят GoDaddy а также WP Engine помещают в черный список большинство плагинов кеша (поскольку у них есть своя собственная встроенная система кеширования), но они не занимаются оптимизацией HTML, CSS, JavaScript, Google Fonts или CDN (сеть доставки контента). Таким образом, хотя система кэширования вашего хоста может хорошо работать для кэширования, Autoptimize помогает сделать «остальное» (исправить элементы в GTmetrix + Pingdom). Избегайте Google PageSpeed ​​Insights, поскольку это даже не измеряет время загрузки.

Даже разработчик Autoptimize на своей странице плагинов говорит, что он лучше всего работает в сочетании с плагином кеша. Я рекомендую Swift, если вы едете по бесплатному маршруту, и WP Rocket если вы можете зарабатывать 49 долларов в год, поскольку это проще в настройке (это также то, что я использую, и у меня есть 100% баллов в GTmetrix), поскольку он поставляется с множеством функций, которые большинство плагинов кэша не поддерживают (очистка базы данных, локальный хостинг кода Google Analyitcs, heartbeat контроль и интеграция с Cloudflare + другие CDN). У меня есть учебники для WP Rocket, стриж, WP Fastest Cache, W3TC и даже WP Super Cache.

Итак, давайте настроим параметры Autoptimize. Я также покажу вам, как добавить CDN (в идеале оба Cloudflare а также StackPath) поскольку каждый из них имеет свой собственный набор центров обработки данных, и больше центров обработки данных = более быстрая доставка контента. CDN рекомендуются в Руководство по оптимизации WordPress.

Автооптимизировать плагин

1. JS, CSS, & HTML

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

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

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

  • Агрегировать JS-файлы: enable, это объединяет файлы JavaScript в соответствии с рекомендациями GTmetrix. Если отключено, отдельные файлы будут загружены, и они не будут объединены.
  • Также агрегатный встроенный JS: enable, это объединяет файлы JavaScript, которые находятся в файлах HTML. Autoptimize выдает предупреждение, которое в основном означает, что если что-то ломается на вашем сайте, либо исключите файлы JavaScript, либо отключите.
  • Принудительно использовать JavaScript в : отключить, если у вас нет ошибок JavaScript. Вам лучше попытаться найти проблемные файлы и исключить их, чем выбрать эту опцию, поскольку это делает блокировку рендеринга JavaScript (не оптимальной по скорости).
  • Исключить скрипты из Autoptimize: если вы видите ошибки после включения определенных настроек JavaScript, найдите проблемный JavaScript и исключите файлы здесь.
  • Добавить упаковку try-catch: отключить, если у вас нет ошибок JavaScript. Это еще один способ исправить ошибки JS без необходимости принудительного использования JavaScript в голове.

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

  • Агрегировать CSS-файлы: включить, то же самое, что агрегировать JS-файлы только для CSS.
  • Также агрегировать встроенный CSS: enable, то же самое, что объединять встроенные JS-файлы только для CSS. Включите оба варианта для дальнейшего улучшения времени загрузки + баллы GTmetrix.
  • Генерация данных: URI для изображений: отключить при использовании CDN. MaxCDN (StackPath) предупреждает вас что включение этого параметра приведет к тому, что изображения будут отправляться с вашего источника, а не с CDN. Включение этого может первоначально привести к меньшему количеству HTTP-запросов, но, вероятно, не после настройки CDN и обслуживания образов через это.
  • Встроенный и отложенный CSS: enable, вы можете включить только эту опцию или «встроить весь CSS», который Autoptimize не рекомендует в своих часто задаваемых вопросах. Они говорят: «Хотя встраивание всего CSS сделает блокировку CSS без рендеринга, это приведет к значительному увеличению вашей базовой HTML-страницы, что потребует большего количества« обходов ».
  • Вставить все CSS: отключить, Autoptimize не рекомендует включать это.
  • Исключить CSS из Autoptimize: если вы видите ошибки после включения определенных настроек CSS, найдите проблемные файлы CSS и исключите их здесь. Примечание. Параметр «минимизировать исключенные CSS и JS» в параметрах «Разное» необходимо отключить..

2. Варианты CDN

Это где ваш CDN URL идет (инструкции ниже). Cloudflare не предоставляет вам URL CDN (вместо этого вы поменяете серверы имен). Базовый URL CDN предназначен специально для StackPath, KeyCDN и других CDN, а не Cloudflare. Я предлагаю использовать оба StackPath + Cloudflare, так как ваши CDN будут иметь больше центров обработки данных и больше центров обработки данных = более быстрый веб-сайт.

Шаг 1: Подписаться на CDN. Я использую StackPath, у которого более 34 центров обработки данных, которые расположены в США и где большинство моих посетителей. Это $ 10 / месяц с бесплатной 30-дневной пробной версией.

StackPath-Data-центры

Шаг 2: На панели инструментов StackPath перейдите на вкладку CDN и создать сайт CDN StackPath.

StackPath-CDN-Tab

StackPath-CDN-домен

StackPath-сервер IP-адрес

* Скопируйте IP-адрес вашего сервера так, как это необходимо в шаге 5 этого раздела..

StackPath-CDN-URL-Autoptimize

Шаг 3: Вставьте свой CDN URL в Autoptimize с помощью http: // или https: // (в зависимости от того, что вы используете).

Автооптимизация CDN URL

Шаг 4: В StackPath перейдите в CDN → Настройки кэша, затем нажмите «Очистить все».

StackPath-Purge Кэш

Шаг 5: Белый IP-адрес вашего сервера в StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Шаг 6: Запустите ваш сайт в GTmetrix, а «сеть доставки контента» должна быть зеленой в YSlow.

CDN GTmetrix YSlow

3. Разные настройки

Вот дополнительные настройки:

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

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

Сократить исключенные файлы CSS и JS – если вы исключаете определенные файлы CSS и JavaScript, это связано с тем, что при их оптимизации возникает проблема, и вы не хотите, чтобы они минимизировались.

Также оптимизировать для входа в редакторы / администраторы – отключить, обычно вы хотите отключить функции производительности в админке WordPress, включая функции производительности Cloudflare.

4. Настройки изображения

Autoptimize может также помочь ускорить загрузку изображений.

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

Оптимизировать изображения – URL на вашем сайте будут изменены, чтобы они указывали на Шортпиксель CDN. Это не должно влиять на то, как они выглядят, пока выполняется сжатие без потерь, но они будут загружаться быстрее.

Качество оптимизации изображения – найти свой собственный уникальный баланс между сжатием и качеством (я использую Glossy). Вот отличия каждого уровня сжатия от ShortPixel:

Уровни сжатия изображения ShortPixel

  • с потерями: большая степень сжатия, большая потеря качества.
  • глянцевый: среднее сжатие, небольшая потеря качества.
  • Lossless: низкая компрессия, минимальная потеря качества.

Загрузить WebP в поддерживаемых браузерах – включен, если вы используете изображения WebP и ленивую загрузку изображений.

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

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

Это относится к Autoptimize критический плагин включения питания.

Требуется премия платный план от критического ($ 7 / месяц).

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

Лично я им не пользуюсь и предпочел бы использовать дополнительные 7 долларов в месяц на более мощном сервере.

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

Автоматическая оптимизация критических настроек CSS

6. Дополнительные настройки

Autoptimize-Extra-Настройки

Google Fonts – включить при использовании Google Fonts которые замедляют время загрузки, поскольку они извлекаются из внешних ресурсов (библиотека шрифтов Google). Я предпочитаю параметр «объединять и связывать в голове», так как это сокращает время загрузки без видимости при загрузке шрифтов (что обычно происходит при асинхронной загрузке. Также проверьте последний параметр Google Font «объединять и загружать шрифты асинхронно с webfont.jsИ посмотрим, что дает лучшие результаты в GTmetrix.

Удалить смайлики – включить (эмоджи плохо подходят для загрузки).

Удалить строки запроса из статических ресурсов – строки запроса обычно генерируются плагинами и не могут быть исправлены (в GTmetrix / Pingdom), просто включив это, но вы можете попробовать. Лучшее решение – проверить ваш сайт на наличие плагинов с высоким процессором и заменить их легкими плагинами. Большинство плагинов с высокой загрузкой процессора включают в себя социальные сети, галереи, компоновщики страниц, соответствующие посты, статистику и плагины чата. Вы также должны удалить все ненужные плагины и очистить базу данных (используя плагин как WP-Optimize) очистить таблицы, оставленные неустановленными плагинами.

Предварительное подключение к сторонним доменам – помогает браузерам предвидеть запросы от внешних ресурсов (Google Fonts, Analytics, Maps, Tag Manager, Amazon store и т. Д.). Обычно они отображаются как «сокращение поиска DNS» в вашем отчете GTmetrix, но ниже приведены типичные примеры.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

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

Асинхронные Javascript-файлы – это означает, что что-то мешает быстрой загрузке содержимого выше. Этот учебник по блокировка рендеринга JavaScripts объясняет это хорошо, но если вы видите ошибки JavaScript в GTmetrix и Pingdom, Асинхронный плагин JavaScipt может сделать трюк.

Оптимизировать видео YouTube – если на вашем сайте есть видео, WP YouTube Lyte Ленивые загружают их, поэтому они загружаются только тогда, когда пользователи прокручивают вниз и нажимают кнопку воспроизведения, тем самым устраняя первоначальные запросы к серверам YouTube. Это может сократить время загрузки контента с видео на несколько секунд, поскольку они являются одним из самых тяжелых элементов на странице. В WP Rocket и Swift Performance встроены эти настройки, поэтому вам не нужно, если вы используете один из них в качестве плагина кеша..

7. Оптимизируйте Больше

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

WP Rocket – оценил плагин кэша № 1 в нескольких опросах Facebook и имеет много опций, не включенных в Autoptimize (очистка базы данных, контроль сердцебиения, локальный хостинг Google Analytics, замена iframe YouTube предварительным изображением, добавление кеша браузера в пиксель Facebook и т. Д.). WP Rocket также обрабатывает почти все, что делает Autoptimize, поэтому вам нужен только 1 плагин для всех этих оптимизаций скорости. Вот почему это так здорово. Вы также можете получить 10% здесь.

ShortPixel – популярный плагин для оптимизации изображений и тот, который я использую.

StackPath – CDN с 30+ дата-центрами. Очень прост в настройке; просто подпишитесь на план ($ 10 / месяц), затем скопируйте / вставьте URL-адрес CDN в опцию Autoptimize CDN URL.

SiteGround – обычно оценивают хост № 1 в опросах Facebook, а также используется Yoast.

Yoast-на-Twitter-Мы-только с коммутацией каналов к SiteGround

Опрос по хостингу 2019

2017-WordPress-хостинг-FB-Poll

Elementor Hosting Рекомендации

Июль 2019 Рекомендации по хостингу

WordPress-Host-Poll-Август-2018

Shared-хостинг-Poll-2017

2019-хостинг-Poll

Go-To-хостинг компания

WordPress-хостинг-Poll-2017

Управляемый-хостинг-Poll

WooCommerce-хостинг-FB-Poll

2016-Web-хостинг Опрос

Лучшая WordPress-хостинг-провайдер-Poll

Лучшая веб-хостинг-2019-Poll

WP Friendly Hosting Опрос

2016-WordPress-хостинг-FB-Poll

Любимый хостинг для Elementor

Рекомендации по хостингу на 2018 год

Управляемый-WordPress-хостинг-Poll-2017

2019-Уникальных-Опрос-1

Хостинг-Poll-For-Speed

WordPress-хостинг-Poll-июнь-1

SiteGround-рекомендация

2014-Managed-WordPress-хостинг-FB-Poll

Лучшая веб-хостинг-провайдер-Poll

Хостинг-Poll-февраль-2019

Хостинг-рекомендации-Poll

Bluehost против SiteGround

WordPress Web Host Опрос

Люди обычно мигрируют, потому что их скорость технологии намного быстрее чем ГЦОС или GoDaddy:

Переключение на SiteGround

SiteGround Миграция времени загрузки

Bluehost для SiteGround GTmetrix

HostGator To SiteGround

SiteGround Google PageSpeed ​​Insights

100 Perfect Score на сайтеGround

SiteGround Genesis

Скорость, предоставляемая SiteGround

Сокращенное время загрузки с SiteGround

Новый SiteGround Response Times

HostGator To SiteGround Миграция

Время ответа SiteGround на Joomla

Перешел на SiteGround хостинг

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

SiteGround Сокращенное время загрузки

SiteGround Скоростной Хостинг

Время отклика нового сайта

Улучшение времени отклика SiteGround

SiteGround также делает свободная миграция с GrowBig+.

Cloudways – быстрее, чем SiteGround (это облачный хостинг, а не общий), а также был высоко оценен в опросах Facebook. Начинается с $ 10 / месяц с их План DigitalOcean. Они предлагают 1 бесплатную миграцию (на которой я их принимал), и вот что произошло с временем отклика моего сервера:

SiteGround-против-Cloudways-Cloud-хостинг

Рекомендации хостинга Facebook

VPS облачный хостинг WooCommerce Опрос

Опрос облачного хостинга VPS

WordPress Хостинг Предложения

Время отклика Cloudways

WP Engine To Cloudways

Без названия

Cloudways Pingdom Время загрузки

Cloudways-Facebook-Обзор

Вы можете получить скидку 25% на первые 2 месяца использования Cloudways с промо-кодом OMM25.

Kinsta – Хостинг премиум-класса за 30 долларов в месяц, и хотя я не пробовал их, я ничего не слышал, кроме отличных отзывов о скорости, поддержке, времени работы Kinsta и почти всем, что касается их хостинга..

Perfmatters – плагин от Kinsta, который заботится о том, что я люблю называть «различными оптимизациями», такими как выборочное отключение плагинов, ограничение пост-ревизий, отключение автосохранения, локальный хостинг Google Analytics и многое другое. Он заботится о последних 10% скорости.

Некоторые из них рекомендуются Autoptimize, другие нет:

Autoptimize Add Ons

8. Облако

У Autoptimize нет настроек для добавления Cloudflare ‘CDN, но это легко настроить. И вы определенно должны, потому что это добавляет Еще 200 центров в вашу сеть доставки контента (CDN).

Центры обработки данных Cloudflare

Шаг 1. Зарегистрируйтесь в Cloudflare, и вам будет предложено добавить свой сайт и начать сканирование.

CloudFlare-начать сканирование

Шаг 2. После завершения сканирования выберите бесплатный план, и Cloudflare проведет вас через набор страниц. В конечном итоге вы попадете на страницу, где Cloudflare назначит вас 2 неймсерверов.

Cloudflare-Name-серверы-Dashboard

Шаг 3. Войдите в свой регистратор домена (например, Namecheap) и выполните поиск в Google, чтобы найти «как изменить серверы имен в Namecheap» (поиск только для вашего регистратора домена), а затем следуйте их инструкциям. Вы скопируете 2 сервера имен, предоставленных Cloudflare, и вставите их в пользовательский параметр серверов имен в своем регистраторе доменов. Разрешить 72 часа для размножения.

Godaddy Cloudflare nameservers

Это оно!

Что дальше?

Смотреть мое видео – это 42-минутное видео, но я охватываю почти все (временные метки в описании видео), и вы должны узнать массу полезной информации о скорости сайта WordPress:

Хотите знать, как я получил 100% баллов в GTmetrix?
См. Мое полное руководство по оптимизации скорости WordPress, содержащее более 38 советов по исправлению элементов GTmetrix / Pingdom, включая обновление до PHP 7, обслуживание масштабированных изображений, указание размеров изображений, очистку базы данных, локальный хостинг Google Analytics, отключение WP и другие..

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

&# X1f680; Нужны ли другие скоростные плагины кроме Autoptimize??

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

&# X1f680; Как настроить CDN с помощью Autoptimize??

Выберите ваш CDN (я использую StackPath), скопируйте ваш CDN URL и вставьте его в поле CDN UR Autoptimize..

&# X1f680; Как вы оптимизируете Google Fonts с Autoptimize??

Я рекомендую использовать параметр «Объединить и связать в голове», а для предварительного подключения шрифтов использовать Autoptimize..

&# X1f680; Autoptimize заботится о кэшировании?

Нет, для кэширования вам понадобится отдельный плагин. Я рекомендую WP Rocket или SG Optimizer при использовании SiteGround.

&# X1f680; Как настроить параметры Autoptimize??

Все перечислено в этом руководстве – просто следите за отчетом GTmetrix и за тем, какие конкретные элементы необходимо исправить. Если настройка параметров в Autoptimize не помогает, попробуйте использовать другой плагин для исправления элементов..

Вопросов? Напишите мне!
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map