WP Rocket 3.11 — запуск совершенно нового удаления неиспользуемого CSS

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

Мы также знаем, какие оптимизации могут повлиять на производительность вашего сайта, а какие сложно решить. Удаление неиспользуемого CSS является одним из них. Неиспользуемый CSS может сильно повлиять на время загрузки и важные показатели производительности, включая «Самое большое отрисовку с содержанием» и «Первое отрисовку с содержанием». Удалив или уменьшив CSS, вы получите возможность значительно улучшить показатель PageSpeed ​​Insights и сделать свой сайт быстрее.

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

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

Что нового в WP Rocket 3.11

WP Rocket 3.11 фокусируется на обновлении удаления неиспользуемых CSS с трех точек зрения: доступность, производительность и совместимость. Новая функция «Удалить неиспользуемый CSS» пока находится в стадии бета-тестирования, но у нас уже есть временная шкала для нее — дочитайте статью до конца, чтобы узнать о ней больше.

При загрузке нашего нового основного выпуска вы получите следующие преимущества:

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

• Лучшая совместимость . Если вы беспокоитесь о потенциальных ошибках удаления неиспользуемых CSS и о том, сколько времени потребуется на их исправление, это для вас.

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

Что означает лучшая доступность

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

С тех пор как мы запустили Remove Unused CSS с WP Rocket 3.9, мы еще не смогли избавиться от бета-режима. Мы не были удовлетворены самой функцией и тем, как она работает. Доступность не была хорошей, и обслуживание часто не работало. Поэтому мы решили перестроить фичу и перейти с синхронного метода на асинхронный. Асинхронный режим кэширует страницу, выполняет вызов API и генерирует используемый CSS через 60 секунд.

Это переключение методологии меняет правила игры по двум причинам:

1. Вы выиграете от лучшей доступности. Другими словами, вы больше не застрянете, когда WP Rocket попытается сгенерировать используемый CSS. Вы будете генерировать используемый CSS для 100 URL-адресов каждые 60 секунд.

2. Асинхронный метод открывает возможность для многих новых улучшений, о которых мы никогда не могли подумать при использовании синхронной методологии. Теперь мы сможем работать над новыми мощными функциями одновременно с обработкой используемого CSS, полагаясь на вызовы API. Считайте новый Remove Unused CSS кратким обзором будущего WP Rocket!

Изменение методологии также повлияло на способ представления процесса оптимизации CSS в пользовательском интерфейсе.

До WP Rocket 3.10 опция «Удалить неиспользуемый CSS» показывала вам, как идет процесс CSS:

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

Во-первых, асинхронная методология и новая серверная инфраструктура предотвратят перегрузки и значительно уменьшат проблемы, с которыми сталкивались в прошлом. Как только домашняя страница будет обработана (отсчитайте 90 секунд), процесс оптимизации CSS будет выполняться партиями для остальных ваших страниц — каждые 60 секунд. Это означает, что вам не нужно ждать, пока процесс полностью завершится, чтобы оценить улучшения производительности. Каждые 60 секунд вы получаете выгоду от текущей оптимизации CSS и сразу же видите ее отражение в аудите PageSpeed ​​Insights.

Что делает это изменение более простым, чем когда-либо, так это таймер обратного отсчета, который вы найдете в WP Rocket 3.11.

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

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

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

Как и в предыдущей версии, когда вы устанавливаете флажки «Активировать предварительную загрузку» и «Активировать предварительную загрузку кеша на основе карты сайта», вы не ждете, пока пользователь посетит страницу для создания используемого CSS.

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

Мы настоятельно рекомендуем одновременно использовать функцию «Удалить неиспользуемый CSS» и предварительную загрузку кэша, потому что вы получите два взаимосвязанных преимущества:

1. Вы значительно уменьшите размер CSS.
2. В результате вы улучшите свой показатель PageSpeed ​​Insights, а также свои оценки Core Web Vitals.

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

Сохранение CSS не только ради этого. Мы видим, как такие усовершенствования могут улучшить результаты производительности.

Мы создали тестовую площадку с помощью Elementor и Astra. Мы активировали WP Rocket и включили LazyLoad. Мы провели первоначальный тест PageSpeed ​​Insights и получили оценку 67.

Затем мы провели еще один тест после включения функции Delay JS. Общая оценка производительности значительно улучшилась, но оценка не стала зеленой, равно как и некоторые показатели Lighthouse:

Наконец мы включили функцию «Удалить неиспользуемый CSS» и провели третий тест. Наша оценка PageSpeed ​​Insights получила 94 балла, а «Первая содержательная краска» и «Самая большая содержательная краска» также получили зеленую оценку.

Что нового в производительности

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

Теперь важное изменение. При активации параметра «Удалить неиспользуемый CSS» и создании используемого CSS WP Rocket автоматически идентифицирует все шрифты и автоматически предварительно загружает их. Почему? Потому что, согласно нашим тестам, сайты могут получить более высокие оценки PageSpeed ​​Insights.

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

Сценарий № 1. Удалить неиспользуемый CSS, активированный без предварительно загруженных шрифтов.

Сценарий № 2. Удаление неиспользуемого CSS, активированного с предварительно загруженными шрифтами.

Что дает лучшая совместимость

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

Говоря простым языком, WP Rocket 3.11 автоматически исправляет 90% известных проблем с удалением неиспользуемых CSS . Оставшиеся и новые можно легко исправить, не требуя минорной версии WP Rocket. Это большой шаг вперед, верно?

Как долго продлится бета-версия?

Готовы поспорить, вам интересно, как будет работать бета-версия Remove Unused CSS. Вскоре сказали: мы оставим его на 3 или 4 недели, чтобы проверить наш сервер в полном объеме. Наша цель — сделать так, чтобы опция «Удалить неиспользуемый CSS» работала без проблем в 95% случаев. Поскольку это такая мощная функция, мы планируем в ближайшем будущем активировать функцию «Удалить неиспользуемый CSS» по умолчанию.

Конечно, мы тебя прикрыли. Будучи ракетчиком, вы получите электронное письмо, когда мы удалим бета-версию.

Подведение итогов

WP Rocket 3.11 поставляется с мощной новой функцией удаления неиспользуемых CSS, которая позволит вам оптимизировать доставку CSS, не беспокоясь об ошибках или проблемах, для устранения которых требуется время.

Благодаря новым функциям «Удалить неиспользуемый CSS» и «Предварительная загрузка шрифта» вы повысите скорость своего сайта и оптимизируете показатели производительности Lighthouse — не нужно ни о чем беспокоиться!

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