5 советов по созданию самых быстрых веб-сайтов в Divi 5 (публичная альфа-версия)

Divi 5 — это результат многолетних усилий по созданию лучшего опыта WordPress. Оптимизация каждого взаимодействия и аспекта Visual Builder и внешнего интерфейса стала важной частью этого. В конечном счете, эти улучшения вам понравятся, но есть способы, которыми вы можете воспользоваться Divi 5, чтобы получить наилучшие результаты.

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

Узнайте больше об общедоступной альфа-версии Divi 5 и о том, как ее загрузить.

Загрузите Divi 5 Alpha. Попробуйте демо-версию Divi 5. Станьте тестером ошибок Divi 5.

Divi 5 создан, чтобы быть быстрым

Divi 5 был полностью переписан, при этом производительность стала главным приоритетом. В отличие от Divi 4, созданного с использованием коротких кодов, Divi 5 использует более современную блочную структуру. Один только этот сдвиг значительно сократил время, затрачиваемое на обработку контента и загрузку страниц. Эта новая платформа также позволила нам значительно сократить объем загружаемого HTML, что означает, что ваши страницы загружаются быстрее, особенно при длинных и сложных макетах.

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

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

5 советов по созданию самых быстрых сайтов Divi 5

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

1. Уменьшите количество типов модулей на странице.

Одним из самых больших преимуществ восстановления Divi 5 является то, что он не загружает ненужные ресурсы. Это особенно заметно в модулях Divi: каждый модуль добавляет на страницу свои собственные уникальные стили и скрипты. Чем разнообразнее вы используете типы модулей, тем больше ресурсов потребуется для рендеринга страницы. В этом нет ничего особенного, но если вы заботитесь о производительности, об этом важно помнить (это относится к любому веб-сайту или конструктору страниц).

Вид вставного модуля Divi 5

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

Сохранение строки/раздела/модулей позволяет вам легко повторно использовать эти элементы (с теми же настройками стиля) в другом месте на вашей странице или веб-сайте.

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

Использование 3 отдельных модулей (слева) или модуля рекламного ролика (справа). Какой из них выбрать, может зависеть от того, какие модули вы уже использовали.

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

2. Используйте глобальные пресеты для уменьшения CSS

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

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

Вот несколько идей о том, как вы можете начать использовать пресеты в процессе проектирования:

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

3. Избегайте контента Divi 4, чтобы улучшить производительность.

Если вы хотите получить максимальную производительность от Divi 5, вам потребуется полностью перенести каждую страницу. Поскольку мы запустили Divi 5 в качестве публичной альфа-версии, нам не хватает нескольких функций, которые будут доступны в ближайшее время (хотя большая часть того, что вы ожидаете, уже есть). Если на вашей странице используется элемент, который Divi 5 еще не поддерживает, эту страницу невозможно полностью перенести на D5. В этих случаях для этих страниц загружается платформа Divi 4 (для обратной совместимости), а это означает, что страница по-прежнему работает, но не пользуется преимуществами скорости страницы Divi 5.

Пример Divi 5 Migrator, обнаруживающий неподдерживаемый контент D4

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

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

4. Ограничьте анимацию и эффекты, особенно в верхней части экрана.

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

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

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

5. Используйте кликабельные миниатюры для встроенных видео

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

Видеомодуль Divi делает это очень простым. На вкладке «Содержимое» вы увидите область параметров под названием « Наложения ». Затем вы можете добавить оптимизированное изображение в качестве наложения или автоматически создать его из самого видео YouTube.

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

Резюме: 5 советов по ускорению работы сайтов Divi 5

• Уменьшите количество типов модулей. Минимизируйте количество различных модулей на странице, чтобы оптимизировать загрузку ресурсов.
• Используйте глобальные пресеты: применяйте пресеты, чтобы уменьшить количество пользовательских CSS и создать единообразный дизайн.
• Полный переход на Divi 5. Используйте Divi 5 Migrator для сканирования и замены любого неподдерживаемого контента Divi 4.
• Ограничьте анимацию: уменьшите анимацию и эффекты, особенно в разделе героев, для более быстрой начальной загрузки.
• Используйте интерактивные миниатюры для видео. Замените встроенные видео кликабельными миниатюрами, чтобы избежать загрузки ненужных сценариев.

Заключение

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

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

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

Загрузите Divi 5 Alpha. Попробуйте демо-версию Divi 5.

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

Станьте тестером ошибок Divi 5