Wp-rocket: Включить оптимизацию ресурсов на некешированных страницах

Что мы предлагаем сделать?

Благодаря этому усовершенствованию наши пользователи смогут использовать функции WP Rocket на некешированных страницах.

В настоящее время эти функции доступны на некешированных страницах:

• Правила, применяемые через файл htaccess (например, правила GZIP, правила кэширования браузера и т. д.)
• Оптимизация запроса WooCommerce get_refreshed_fragments
• Преобразование динамических файлов CSS/JS в статические файлы
• Отключить эмодзи
• Отключить встраивание WordPress
• Настройки сердцебиения
• Предзагрузка для шрифтов

Мы могли бы смело добавить следующие функции:

• Оптимизируйте шрифты Google
• Оптимизируйте доставку CSS
• Удалить перенос jQuery
• Отложить JS
• Ленивая загрузка
• Предварительная выборка DNS
• Предварительная загрузка шрифтов (входит в 3.6 и уже добавлена ​​по дизайну)
• CDN
• Дополнение для отслеживания Google
• Дополнение для пикселя Facebook

Пользователи смогут отключать некоторые из них в пост за постом.

Зачем мы это делаем?

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

Сравнительные тесты

Тестовый сайт: http://mega.wp-rocket.me/

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

Контрольный тест: WP Rocket отключен

Среднее время полной загрузки: 2,44 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Для остальных тестов кеширование страниц WP Rocket отключено с помощью нашего вспомогательного плагина.

Протестируйте с включенным WP Rocket, но все параметры отключены.

Среднее время полной загрузки: 2,46 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Протестируйте с включенными функциями «Оптимизация шрифтов Google», «Оптимизация доставки CSS», «Удаление переноса jQuery» и «Отложенный JS» (безопасный режим).

Среднее время полной загрузки: 2,52 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Наряду с параметрами в предыдущем тесте были включены LazyLoad (изображения и iframe), Disable Emoji и Disable Emeds.

Среднее время полной загрузки: 2,22 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Наряду с параметрами в предыдущем тесте включена минификация для CSS и минификация для JS.

Среднее время полной загрузки: 2,34 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Наряду с параметрами в предыдущем тесте была включена комбинация CSS и комбинация JS.

Среднее время полной загрузки: 2,36 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Чтобы подтвердить это, я использовал тестовую страницу с гораздо большим количеством ресурсов и изображений: http://smashingcoding.com/2020/06/01/lighthouse/

Контрольный тест: WP Rocket отключен

Среднее время полной загрузки: 6,12 с ( #1 , #2 , #3 , #4 , #5 )

Для остальных тестов кеширование страниц WP Rocket отключено с помощью нашего вспомогательного плагина.

Протестируйте с включенным WP Rocket, но все параметры отключены.

Среднее время полной загрузки: 5,86 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Протестируйте с включенными функциями «Оптимизация шрифтов Google», «Оптимизация доставки CSS», «Удаление переноса jQuery» и «Отложенный JS» (безопасный режим).

Среднее время полной загрузки: 5,44 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Наряду с параметрами в предыдущем тесте были включены LazyLoad (изображения и iframe), Disable Emoji и Disable Embeds.

Среднее время полной загрузки: 4,26 с ( # 1 , # 2 , # 3 , # 4 , # 5 )

Я провел еще 13 тестов для подтверждения, и среднее время полной загрузки составило (13 тестов): 3,94 с.

Комбинированное среднее (13+5 = 18 тестов): 4,02 с .

Наряду с параметрами в предыдущем тесте включена минификация для CSS и минификация для JS.

Среднее время полной загрузки: 4,35 с ( #1 , #2 , #3 , #4 , #5 , #6 , #7 , #8 , #9 , #10 , #11 , #12 , #13 , #14 , #15 )

Наряду с параметрами в предыдущем тесте была включена комбинация CSS и комбинация JS.

Среднее время полной загрузки: 4,52 с ( #1 , #2 , #3 , #4 , #5 , #6 , #7 , #8 , #9 , #10 , #11 , #12 , #13 , #14 , #15 )

Примечания:

• На странице есть встроенное видео YouTube и галерея изображений. Улучшение производительности при включении LazyLoad отчетливо видно.
• Минификация и комбинация CSS и JS, по-видимому, вызывают потерю производительности.
• Возможно, в будущем, если мы оптимизируем наш процесс минификации и комбинирования, мы сможем реализовать эту функцию и на некешированных страницах.

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

• Minify HTML — скоро будет обесценен от WP Rocket
• Минимизировать CSS
• Объединить CSS
• Минимизировать JS
• Объединить JS

Ожидания и опыт пользователей. Как мы будем делать эту функцию?

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

Вот как сейчас выглядит метабокс WP Rocket:

Сейчас:

• Если установлен флажок «Никогда не кэшировать эту страницу», состояние других параметров (таких как LazyLoad для изображений и т. д.) не имеет значения.
• Пользователь по-прежнему может включать или отключать другие параметры, даже если включен параметр «Никогда не кэшировать эту страницу».
• У большинства существующих пользователей, вероятно, будут включены другие параметры даже на страницах, которые исключены из кеша, включив «Никогда не кэшировать эту страницу».
• Единственный раз, когда параметр неактивен (например, Minify HTML и CDN на снимке экрана выше), это когда эти параметры не включены в WP Rocket.

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

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

1. Введите параметр скрытой базы данных и установите для него значение 0 для существующих клиентов. Затем дайте существующим клиентам возможность подписаться. Мы могли бы справиться с этим так же, как мы сделали для «CPCSS для мобильных устройств», и иметь согласие на вкладке «Инструменты». Значение этой опции базы данных будет равно 1 для новых установок.
2. Настройте поведение метабокса. Подробности ниже.

Рекомендуемые изменения в мета-поле WP Rocket в редакторе сообщений.

• Для существующих клиентов, пока они не подпишутся на новую функцию, при включенном параметре «Никогда не кэшировать эту страницу» все остальные параметры в мета-поле будут недоступны.
• Измените примечание в нижнем колонтитуле на: «Примечание. Чтобы использовать эти функции на этой странице, сделайте однократную подписку в разделе «Инструменты» WP Rocket. Больше информации".
• Для новых установок (и после того, как существующие клиенты согласились), когда включен параметр «Никогда не кэшировать эту страницу», выберите серый цвет и снимите флажки «Сократить HTML», «Сократить/объединить CSS» и «Сократить/объединить JS». Эти параметры недоступны на некешированных страницах.
• Любая опция, не включенная в глобальных настройках (например, если CDN не включена), будет выделена серым цветом, как мы делаем прямо сейчас.
• Добавьте (i) выносной текст (пример: https://jmp.sh/h3bAv06 ) справки к этим параметрам («Минифицировать HTML», «Минифицировать/объединить CSS» и «Минифицировать/объединить JS»)
• При наведении курсора на выноску (i) отображается текст справки: «Эту опцию можно использовать только на кешированных страницах».
• Удалите примечание из метабокса после того, как пользователь согласится на это улучшение на вкладке «Инструменты».

Примечание об автоматических исключениях

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

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

Обработка подписки для существующих пользователей

Подобно тому, как мы справились с этим в «CPCSS для мобильных устройств», мы могли бы предоставить дополнительный «инструмент» на вкладке «Инструменты» WP Rocket.

Цель этого инструмента состоит в том, чтобы:

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

Технические характеристики

• Прямо сейчас к странице со строкой запроса (пример «?nocache», которую мы используем для отладки) применены некоторые оптимизации. Перечислено здесь . Страницы, исключенные с помощью строки запроса, по возможности не должны подвергаться оптимизации. Это поможет упростить работу службы поддержки и пользователей.
• Такие страницы не должны иметь каких-либо новых оптимизаций, которые мы также добавляем к некешированным страницам благодаря этому усовершенствованию.

Спецификация инструмента во вкладке «Инструменты»:

• Заголовок : «Оптимизация некэшированных страниц»
• Значок : используйте тот же значок на вкладке «Кэш» — https://jmp.sh/4zgrDDw (поскольку он связан с кэшированными и некэшированными страницами).

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

  Это разовое действие, после этого эта кнопка будет удалена. Больше информации

  Будут затронуты следующие страницы:

  • пример.com/ссылка-1/
  • пример.com/ссылка-2/

• Цвет кнопки : синий

• Текст кнопки : Включить оптимизацию на некэшированных страницах
  Кнопка не должна иметь значка

Риски

Мы справляемся с любым потенциальным риском, делая эту функцию доступной для существующих клиентов.

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

Функции, недоступные в мета-поле, а именно: «Оптимизировать Google Fonts», «Удалить jQuery Migrate», «Предварительная загрузка DNS», «Предварительная загрузка шрифтов», «Дополнение Google Tracking», «Дополнение Facebook Pixel», обычно распространяются на весь сайт и вряд ли вызовут проблемы на конкретной странице. Если это становится проблемой, мы можем предложить вспомогательные плагины, чтобы отключить это, или добавить это в мета-поле, если огромное количество клиентов сталкивается с проблемами.

Критерии приемки

• Существующий клиент при обновлении не должен видеть никаких отличий на любых некешированных страницах.
• Для существующих клиентов параметры в мета-поле должны быть выделены серым цветом, если включен параметр «Никогда не кэшировать эту страницу».
• В «инструменте» на вкладке «Инструменты» должен быть список затронутых страниц, включая страницы, которые автоматически исключаются.
• После того, как эта функция включена с помощью кнопки на вкладке «Инструменты» WP Rocket, на некешированных страницах должны отображаться примененные к ней функции WP Rocket.
• Когда клиент включает «Никогда не кэшировать эту страницу», «Свернуть HTML», «Свернуть/объединить CSS» и «Свернуть/объединить JS» должны быть выделены серым цветом. Будет выноска (i), чтобы предоставить краткую информацию о том, почему она неактивна.
• Другие функции должны быть доступны на некэшированных страницах и должны быть отключены, если опция в метабоксе обновлена.

Документация и переводы

• Обновите этот документ: https://docs.wp-rocket.me/article/1285-bypass-wp-rockets-caching-and-optimizations .
• Перевод раздела «Инструменты» и обновленный метабокс в редакторе постов.
• Обновите существующий документ или создайте новый документ о том, как исключить страницу из всех оптимизаций WP Rocket. Перечислите, какие оптимизации можно исключить с помощью метабокса WP Rocket, и предоставьте вспомогательные плагины (если они доступны) для отключения других. Также объясните, почему минимизация и комбинация HTML, CSS и JS недоступны на некешированных страницах (см. тесты производительности).
• Создайте вспомогательные плагины там, где это необходимо, чтобы отключить функции, которые нельзя исключить через метабокс в редакторе сообщений. Например, нельзя исключить предварительную загрузку шрифтов. Но это может подождать, пока мы не получим запрос от пользователя. У пользователя нет реальной причины исключать эти вещи из некэшированной страницы.