Выпущен Breeze v1.2: обзор новых функций, которые приносит это крупное обновление

Cloudways выпустила Breeze v1.2 с упором на улучшение совместимости с Core Web Vitals и, в конечном итоге, на улучшение показателей PageSpeed ​​Insights для ваших веб-сайтов.

Если вы еще не слышали, в этом месяце Google выпустит новое обновление страницы. Недавно мы запустили бесплатную программу Google Page Experience Checker, которая поможет вам измерить производительность вашего сайта и другие факторы, влияющие на качество страницы, по сравнению с обновлением. Фактически, с начала 2021 года мы серьезно сосредоточились на улучшении нашего продукта и выпуске обновлений, которые обеспечивают максимальное удобство работы со страницами Google.

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

Что нового в Breeze v1.2?

Теперь давайте кратко рассмотрим, какие интересные новые функции Breeze привнес в версию 1.2.

Безопасные ссылки для разных источников

Если вы знакомы с методами SEO, вы поймете важность атрибутов «noopener noreferrer». На этот раз Breeze поставляется с новой функцией, которая автоматически добавляет атрибут «noopener noreferrer» к ссылкам, имеющим целевое значение «_blank».

Примечание: не добавляйте их в редактор WordPress, поскольку редактор добавляет noopener noreferrer автоматически; добавьте ссылки в файлы вашей темы. После добавления ссылок вернитесь в wp-admin и сохраните настройки Breeze или очистите кеш.

- Безопасные ссылки для разных стран в Breeze

Некоторые варианты использования

1. _blank целевого значения и без атрибута rel , функция напрямую добавит rel = « noopener noreferrer ».
2. _blank, но атрибут rel содержит только значение noopener , тогда noreferrer не будет добавлен. Например, ссылка содержит только атрибут noopener : noreferrer Эта функция также добавляет атрибут noreferrer: <a href = schemehttps://example.com" target = scheme_blank" rel="noopener noreferrer _blank, но rel содержит значение noreferrer , тогда также будет добавлен noopener .
3. _blank target value, а rel содержит noopener noreferrer , никаких изменений не будет.
4. href содержит # ссылку (ID), она будет проигнорирована, что означает без изменений.

Код ввода:

- Код ввода в редакторе темы

Вывод кода:

- Вывод кода

Шрифт остается видимым во время загрузки

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

Эта функция будет видна, когда вы проверите минимизацию CSS, и работает только для параметров минимизации CSS и групп CSS. Чтобы добавить атрибут font-display: swap к классам CSS, нам нужно изменить содержимое.

- Минификация на ветру

Чтобы протестировать эту функцию, вы можете проверить файлы .css в исходном коде страницы просмотра и найти @ font-face . Будет добавлен атрибут font-display . Если это определение font-face уже имеет атрибут font-display, то ничего не изменится.

- Отображение шрифтов в CSS

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

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

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

- Ленивая загрузка изображений в Breeze

Код распознает размеры данных и атрибуты data-srcset, используемые для отображения правильного размера изображения в зависимости от разрешения. Следующие атрибуты заменяют исходные атрибуты:

data-breeze = src

data-brsrcset = data-srcset

data-brsizes = данные-размеры

Если вы хотите проверить, работают ли изображения с отложенной загрузкой или нет, нажмите «CTRL + Shift + I» → « Сеть» → выберите img → прокрутите страницу вниз.

- Проверьте ленивую загрузку в вашем браузере

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

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

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

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

- Предварительная загрузка ссылок в Breeze

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

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

Предварительно загрузите свои веб-шрифты

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

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

- Предварительно загрузите веб-шрифты на Breeze

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

Встроенные скрипты Delay JS

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

Концепция, лежащая в основе этого - ленивая загрузка, при которой ваш встроенный скрипт js будет появляться, когда вы взаимодействуете (прокручиваете вниз, перемещаете курсор и т. Д.) С вашим сайтом. Это отличный метод для повышения производительности вашего сайта и повышения показателей Web Vital.

- Задержка встроенных скриптов JS в Breeze

Здесь вам нужно указать ключевое слово для вашего встроенного js-скрипта, такого как Google Реклама, и он автоматически загрузит определенный скрипт в конце.

Резюме!

Команда Cloudways круглосуточно работает над тем, чтобы сделать Breeze вашим плагином для кеширования. Это первый крупный выпуск, который предлагает шесть новых интересных функций, которые помогут вам улучшить скорость загрузки страниц и улучшить показатели Web Vital.

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

Если у вас есть какие-либо вопросы или отзывы о Breeze v1.2, дайте нам знать в разделе комментариев.