Как создать самую быструю страницу Divi: оптимизация контента Divi для скорости

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

Давайте погрузимся в это!

Подпишитесь на наш канал Youtube

1. Оптимизация содержимого над сгибом

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

Концепция героя из 4 модулей

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

• Заголовок
• Пункт
• Кнопка

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

• Заголовок
• Пункт
• Кнопка
• Оптимизированное изображение

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

Есть причина, по которой полноэкранные дизайны героев популярны. Они не только делают ваш дизайн более «дышащим», но и помогают с критически важным CSS. Если вы выбираете полноэкранного героя, вы решаете, что это единственное, что появляется над сгибом, независимо от того, какой размер экрана вы используете. Чтобы создать полноэкранного героя в Divi, не забудьте указать минимальную высоту «100vh» в настройках раздела. Назначив минимальную высоту; вы следите за тем, чтобы секция занимала всю высоту браузера. Вы можете разместить что угодно внутри секции, чтобы с этого момента стать частью дизайна вашего героя. Или вы также можете использовать встроенный полноэкранный заголовок Divi.

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

Избегайте анимации в Hero, чтобы предотвратить задержку

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

Изменение содержимого над сгибом на планшете и мобильном устройстве

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

2. Использование смарт-стилей

Как работают умные стили

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

Использование 1 или 2 предустановок для разделов и строк

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

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

Использовать предустановки для модулей

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

Заменять предустановку или нет?

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

3. Согласование выбора дизайна со скоростью

Ограничьте выбор модулей, которые вы хотите использовать (динамические модули)

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

Найдите LCP вашего дизайна и оптимизируйте его

Еще одна вещь, которая может помочь вам улучшить скорость вашей страницы, - это поиск самой большой Contentful Paint и ее оптимизация. Короче говоря, ваш LCP - это самый большой элемент на вашей странице, который помогает определить показатель скорости вашей страницы. Вы можете прочитать об этом здесь. Убедившись, что LCP вашего дизайна оптимизирована, вы можете значительно сократить время загрузки вашей страницы.

Выбор стиля анимации (динамические функции)

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

Сопряжение шрифтов: используйте 1 или 2 семейства шрифтов

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

4. Ручная оптимизация

Адаптивный контент: уменьшите размер изображений на мобильных устройствах

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

Типы файлов и сжатие

Убедитесь, что вы придерживаетесь как можно большего количества JPEG, так как они, как правило, имеют меньший размер файла. PNG обычно имеет смысл только в том случае, если вам нужна прозрачность в вашем изображении для улучшения дизайна, но даже в этом случае вы можете попытаться найти альтернативу, чтобы дизайн работал. Избегайте даже более тяжелых типов файлов, таких как GIF. Что касается видео, это обычно недопустимо, особенно если вы хотите, чтобы оно воспроизводилось в фоновом режиме. И, конечно же, убедитесь, что вы сжимаете файлы, которые используете, даже прежде, чем загружать их в медиатеку WordPress.

За кулисами

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

Создание быстрых страниц с Divi - проще, чем когда-либо

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