Массивные изменения в версии 2: код сокращен на 90 %, новый блок входа в систему, специальные возможности ARIA, FSE и многое другое.

Следующая статья поможет вам: Массивные изменения в версии 2: код сокращен на 90 %, новый блок входа в систему, специальные возможности ARIA, FSE и многое другое.

Ожидание наконец закончено! Мы рады объявить о выпуске нашей долгожданной версии 2. Это обновление с множеством новых функций и улучшений, которого вы так долго ждали. Мы усердно работали над тем, чтобы продукт был не только быстрее и эффективнее, но и более удобным и доступным для пользователя.

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

Приготовьтесь испытать мощь v2!

Почему обновление задержалось?

Мы знаем, что прошло более 3 месяцев с момента нашего последнего крупного обновления, но мы обещаем, что ожидание того стоило.

Мы получили ценные отзывы от наших пользователей относительно производительности и других проблем, которые препятствовали полному раскрытию потенциала Plus Blocks для Gutenberg. Мы поняли, что чего-то не хватает в нашем видении блоков WordPress, ориентированных на производительность, поэтому мы сделали шаг назад, чтобы переработать все с нуля.

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

Итак, без лишних слов, давайте углубимся в то, что изменилось во второй версии The Plus Blocks for Gutenberg. Приготовьтесь испытать совершенно новый уровень производительности и функциональности!

Сокращение кода до 90% в блоках

Вау! 90% Это много. Разве это не так? Вот данные

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

Так, например, если вы примените CSS к блоку, код этого блока будет загружаться при его настройке, а самый простой стиль останется самым легким. Для блоков не загружается общий файл CSS.

Мы очень тщательно продумали это обновление, чтобы убедиться, что наш продукт максимально оптимизирован. И мы рады поделиться с вами тем, насколько мы сократили код.

Взгляните на размеры некоторых наших блоков до и после:

И это только некоторые из них! Мы также добавили условную загрузку, чтобы еще больше усовершенствовать этот процесс. Мы уверены, что это обновление значительно изменит производительность и функциональность нашего продукта, и с нетерпением ждем, когда вы его опробуете.

Новый метод доставки ресурсов CSS и JS: плюс производительность

Мы понимаем важность производительности для наших пользователей, и поэтому мы сделали все возможное, чтобы сделать наш режим Plus Performance еще более мощным и быстрым, чем когда-либо прежде. С двумя режимами на выбор теперь у вас есть еще больше контроля над работой вашего веб-сайта.

Наши оптимизации автоматически применяются ко всем ресурсам, загружаемым The Plus Blocks for Gutenberg.

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

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

Переходим к первому,

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

Вот как это работает простыми словами:

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

Что касается JS, мы динамически загружаем только 1 файл JS для каждой страницы, независимо от того, сколько блоков вы используете.

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

Переходим к следующему

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

В этом режиме каждый блок будет загружать свой собственный выделенный CSS и JS, а каждый блок Template или Reusable, используемый на странице, будет иметь свой собственный выделенный CSS и JS.

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

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

Ускорьте работу с параметрами Delay & Defer Asset

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

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

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

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

Отложите CSS и JS – Это означает загрузку и выполнение файлов CSS и JavaScript до тех пор, пока не будет загружен HTML-контент веб-страницы. Этот подход используется для сокращения времени загрузки страницы, позволяя браузеру сначала отображать HTML-контент, не блокируя ресурсы CSS и JavaScript. ‘

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

Мы добавили эти параметры специально для файлов, загружаемых через The Plus Blocks for Gutenberg. Если ваш плагин производительности имеет аналогичную функциональность, вы можете продолжайте использовать его вместе с нашими инструментами, поскольку они могут без проблем работать вместе.

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

• Шрифт Потрясающий PRO
• Карты Гугл
• Файлы Лотти.

Мы продолжим добавлять задержку к некритическим файлам JS по умолчанию, чтобы обеспечить максимальную производительность.

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

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

Тестирование в режиме реального времени с новыми улучшениями

Что ж, хватит громких слов, пора показать некоторые наглядные результаты оценки производительности с нашей старой версией и новой версией 2.0.

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

Чтобы гарантировать, что на результаты не повлияют какие-либо сторонние плагины или инструменты, мы не устанавливали никаких плагинов кеша или других плагинов, кроме наших БЕСПЛАТНЫХ и PRO-версий плагина.

И наши результаты для Gtmetrix составляют 96% для производительности и 95% для Sturture, хорошо, но это может быть лучше.

Мы также записали размеры JS и CSS. Это покажет нам общее сокращение активов в обеих версиях плагина.

В нашей старой версии на сайте было

• Размер JS: 214 КБ
• Размер CSS: 155 КБ

Теперь давайте обновимся до версии 2.0 и увидим заметную разницу в оценках и размере активов для CSS и JS.

И мы наблюдали колоссальные 100% производительности и 95% структуры. И давайте перейдем к нашим основным цифрам, т.е. размерам активов.

На этот раз мы заметили, и гораздо меньшее время загрузки в 669 мс и

• Размер JS: 47,7 КБ
• Размер CSS: 37,33 КБ

это уменьшение 75% в JS и 82% в CSS, и это замечательная разница, о которой мы говорим.

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

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

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

Лучшая доступность веб-сайта с текстом ARIA

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

Именно поэтому мы добавили новую функцию, позволяющую добавлять текст ARIA ко всем вашим ссылкам и кнопкам. Текст ARIA — это текст, добавляемый на веб-сайт или в приложение с использованием спецификации Accessible Rich Internet Applications (ARIA).

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

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

Теперь всякий раз, когда вы добавляете ссылку, вы увидите поле под ссылкой, которое запрашивает метку Aria. Здесь вы можете предоставить описание того, о чем ссылка, чтобы пользователям с нарушениями зрения было легче понять контекст ссылки.

Лучшее отзывчивое управление

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

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

Самая ожидаемая блокировка входа, регистрации и забытого пароля

Вы устали от стандартной формы входа в WordPress, которую сложно настроить?

Не ищите ничего, кроме нашего нового мощного блока формы входа — одного из лучших на рынке! Если у вас есть сайт членства, такой как WooCommerce, то эта форма не составит труда, чтобы повысить качество обслуживания клиентов на вашем веб-сайте.

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

Управляйте содержимым своей электронной почты, перенаправляйте пользователей после входа в систему и даже добавляйте параметры входа в социальные сети, такие как Facebook и Google. Мы даже интегрировались с Mailchimp, автоматически регистрируя каждого пользователя в вашем списке рассылки. Но это еще не все — мы также добавили вход без пароля, Google reCAPTCHA и все функции безопасности, которые только можно себе представить, что сделало эту форму входа самой мощной и безопасной для WordPress.

Вы хотите получить больше информации от ваших пользователей во время регистрации? Вы можете легко интегрировать популярный плагин ACF (Advanced Custom Fields) для сбора дополнительных данных, таких как пол, дата рождения, дескрипторы социальных сетей, пользовательские изображения, загруженные файлы и многое другое.

Наш плагин в настоящее время поддерживает следующие поля ACF для пользовательских регистрационных форм:

• Текст
• Число
• Флажок
• Радио
• Выберите раскрывающийся список
• Поле изображения
• Поле файла

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

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

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

Полная совместимость с редактированием сайта (FSE)

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

Благодаря этим улучшениям Plus Blocks для Gutenberg теперь оптимизированы для полной интеграции с темами FSE, что обеспечивает беспроблемную работу для наших пользователей.

Хотя наша текущая тема Nexter построена на классических темах WordPress, мы планируем добавить поддержку FSE в будущем. Мы планируем использовать тему гибридной системы, которая предлагает пользователям больше гибкости и возможностей настройки. Мы стремимся постоянно улучшать наш продукт, чтобы удовлетворить потребности наших пользователей и предоставить им наилучшие возможности.

Новая гибкая типографика для текста

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

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

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

И другие мелкие исправления ошибок и улучшения UX.

Мы приняли ваши отзывы из нашего живого чата, службы поддержки и сообщества и внесли несколько улучшений, чтобы сделать работу с The Plus Blocks для Gutenberg еще более удобной. Мы ценим ваши отзывы и будем признательны за ваши мысли в разделе комментариев ниже.

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

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

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

Проверьте полный список изменений здесь