Как оптимизировать макет вашего сайта с помощью Elementor

Хотите знать, как оптимизировать макет вашего сайта с помощью Elementor ?

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

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

Производительность веб-сайта - одна из наших главных ценностей как создателей Интернета. Поэтому мы создали этот курс из 5 частей.

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

К концу этого руководства вы будете полностью готовы оптимизировать производительность каждого веб-сайта. Elementor вы создаете и немедленно пожинаете плоды.

Урок 1: Рекомендации по оптимизации макета

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

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

Мы рассмотрим следующие темы:

• Присмотритесь к структуре правильной страницы
• Просмотр и тестирование производительности вашего сайта
• Оптимизация заголовка, нижнего колонтитула и содержимого страницы
• Примеры хороших и плохих практик верстки веб-сайтов
• Правильное использование виджетов, позиционирования и глобальных стилей
• Советы, как избежать задержки загрузки, улучшить SEO и увеличить время загрузки
• Оптимизация доступности
• Уменьшение количества элементов DOM
• И многое другое !

Чтобы лучше понять оптимальные макеты в Elementor, мы собираемся изучить шаблон Elementor, который показывает распространенные злоупотребления разделами, столбцами и виджетами. К концу этого урока мы полностью перестроим всю страницу, уменьшив количество столбцов и виджетов. Наша начальная страница состоит из девяти разделов, 31 столбца, пяти внутренних разделов и 44 виджетов.

В конце руководства наша оптимизированная страница будет уменьшена до шести разделов, семи столбцов и 16 виджетов.

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

Тестирование на плохие методы

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

Шаг 1. Подтвердите свой сайт в режиме инкогнито

• Откройте новое окно в «режиме инкогнито» и введите URL-адрес тестируемой веб-страницы.

Шаг 2. Убедитесь, что вы используете прямой URL-путь

Если вы не уверены в ссылке на свою страницу, вы можете легко найти ее, перейдя на панель управления WP:

• Нажмите «Страницы», чтобы просмотреть все страницы вашего веб-сайта.
• Наведите курсор на свою страницу и нажмите на опцию «Просмотр». Вы попадете прямо на свою страницу.
• Скопируйте и вставьте этот URL-адрес в окно в режиме инкогнито, и как только веб-сайт загрузится, вы готовы его протестировать!

Тестирование и просмотр результатов производительности

Шаг 1. Проверьте результаты производительности

Возможно, раньше вы использовали Инструменты разработчика Chrome.

Если нет, то для проверки и отображения содержимого HTML и CSS вашей страницы:

• Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить». Вы увидите несколько вкладок, на которых вы можете читать свой HTML и CSS, находить ошибки, получать результаты SEO и запускать различные тесты.
• Выберите вкладку «Сеть» и нажмите кнопки cmd или ctrl + R, чтобы загрузить результаты.

Как видите, наш текущий макет загружается за 2,88 секунды и выполняет 81 запрос.

Шаг 2. Просмотрите результаты производительности

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

Это даст нам больше информации о текущей производительности страницы.

• Выберите «Создать отчет». Через несколько секунд появится ваш отчет.

В настоящее время мы получаем рейтинг производительности 73/100, и мы, безусловно, можем работать над этим.

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

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

Оптимизация элементов страницы

Шаг 1. Оптимизируйте заголовок

Давайте начнем с заголовок.

Как вы можете видеть в этом дизайне, заголовок состоял из трех столбцов.

В первом столбце наш логотип состоит из двух виджетов:

1. Un Изображение виджета который отображает файл изображения .png нашего логотипа
2. Виджет заголовка.

Во втором столбце меню заголовка состоит из нашего виджета меню навигации.

Третий столбец содержит:

1. Внутренний виджет раздела (который управляет положением виджета значка).
2. Наши контактные данные для заголовка

Давайте посмотрим, как мы можем минимизировать здесь количество разделов, виджетов и разделов.

Шаг 2. Создайте новый заголовок

Столбец 1:

• Создайте 1 раздел только с 1 столбцом.
• Добавить Виджет логотипа веб-сайта и перетащите в раздел.

Лучшие практики для изображений:

• Дайте каждому файлу изображения на вашем веб-сайте соответствующий заголовок и замещающий текст в медиатеке.

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

• Определите размеры изображения внутри виджета.

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

В примере, над которым мы работаем вместе, решите эту проблему, перейдя на вкладку «Стиль» и установив ширину изображения на 200 пикселей.

Колонны 2

Вернитесь на панель виджетов:

• Перетащите виджет меню навигации под логотип
• Установите указатель на «Нет».
• Перейдите на вкладку «Стиль» и добавьте шрифт по своему вкусу (так, чтобы он соответствовал нашему предыдущему дизайну).

Лучшие практики для общей стилизации:

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

Глобальные шрифты:

Это можно сделать с помощью функции Global Fonts:

• Перейдите на вкладку «Стиль» и добавьте желаемый шрифт (чтобы он соответствовал нашему предыдущему дизайну), выбрав его, внесите небольшие изменения и наведите указатель мыши на значок плюса.
• Щелкните значок плюса и выберите нужное семейство шрифтов.
• Сохраните стили, которые вы будете использовать в шаблоне, как глобальные шрифты.

Затем вы можете использовать этот стиль для каждого создаваемого вами виджета.

Глобальные цвета:

Тот же метод можно использовать для ваших общих цветов:

• Щелкните "Global".
• Наведите указатель мыши на палитру цветов и нажмите на нее
• Выберите цвет и наведите указатель на значок плюса
• Нажмите «Глобальный» >> выберите «Принципал».

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

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

Шаг 3. Отредактируйте заголовок

Колонка 3

• Перейдите в панель «Виджеты»
• Перетащите виджет списка значков под меню.
• Удалить дополнительные элементы списка
• Добавьте свой текст
• Выберите значок по вашему выбору
• Перейдите на вкладку "Стиль"
• Определите общие цвета и шрифты по вашему выбору

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

Чтобы решить эту проблему:

• Выберите виджет логотипа сайта >> вкладка "Дополнительно".
• Выберите «Позиционирование» и установите для него ширину «Встроенный».

Повторите этот шаг в точности для виджета «Меню навигации» и для виджета «Список значков».

Теперь, когда все элементы заголовка выстроены в линию, остается только правильно их расположить.

Определение расположения столбца с помощью встроенных элементов

• Выберите свой столбец >> перейдите на вкладку «Макет».
• В «Вертикальном выравнивании» выберите «Снизу».
• «При выравнивании по горизонтали» выберите «Расстояние между»

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

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

Мы можем решить эту проблему, настроив поля:

• Выберите виджет «Меню навигации» >> вкладка «Дополнительно».
• Разгруппируйте поле и удалите интервал с отрицательным значением

Шаг 4. Сделайте заголовок адаптивным

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

Рекомендации по отзывчивости мобильных устройств:

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

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

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

Давайте посмотрим, как мы можем этого добиться, используя настройку «Custom Width» для наших виджетов и элементов.

Установка нестандартной ширины для планшета

• Нажмите на «Меню навигации» >> вкладку «Дополнительно».
• Выберите «Позиционирование» >> установите ширину «Пользовательский».
• Выберите «%» >> задайте виджету такую ​​же ширину (в процентах), что и пустое пространство вокруг него.
• Щелкните вкладку «Содержимое» >> «Переключить выравнивание» >> выберите «Вправо».

Это позволяет выровнять меню переключения в любом месте в пределах ширины виджета.

Теперь давайте закончим настройку меню переключения.

• «Содержимое» >> Щелкните переключатель «Полная ширина» и установите для него значение «Да».
• «Стиль» >> Удалите фон, перетащив панель «Палитра цветов» до упора влево.

Теперь посмотрим, как все выглядит на экране мобильного телефона.

Определение нестандартной ширины для мобильных устройств

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

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

Чтобы решить эту проблему:

Расположение навигационного меню

• Щелкните «Меню навигации» >> вкладку «Дополнительно».
• Выберите «Позиционирование» >> установите ширину «Пользовательский».
• Выберите «%» >> Задайте ширину виджета 30%, чтобы он поместился рядом с нашим логотипом.

Расположение списка значков

• Щелкните «Список значков» >> вкладку «Дополнительно».
• Выберите «Заливка» >> Разгруппировать значения.
• Добавьте отступ 12px к "TOP"

Ты можешь в это поверить?

Наш заголовок изначально использовал 2 раздела, 12 виджетов и 10 столбцов. Теперь наш заголовок использует 1 раздел, 3 виджета и 1 столбец.

И результат такой же!

Шаг 5. Оптимизируйте раздел "Герой"

Перейдем к следующему разделу нашего сайта: разделу героев.

Лучшие практики для разделов героев:

• Убедитесь, что текст раздела вашего героя хорошо виден, особенно когда он имеет фоновое изображение.

Управление положением виджета в столбце

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

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

Давайте посмотрим, как мы можем создать такой же дизайн, используя всего одну секцию:

• Удалите лишний столбец справа от текста.
• Снимите проставку.

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

• Выберите столбец.
• Установите «Вертикальное выравнивание» на «Среднее».
• Перейдите на вкладку «Дополнительно».
• Выберите «Заливка» >> Разгруппировать значения.
• Установите Right Padding на 50%.

• Выберите раздел.
• Выберите «Минимальная высота» >> установите значение 80.

Фиксированный контраст между текстом и фоном

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

Есть несколько способов улучшить четкость раздела, чей фон представляет собой цветное изображение (как мы видим в этом шаблоне):

• Щелкните заголовок.
• Перейдите на вкладку «Стиль» >> выберите «Тень текста».

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

Еще один способ сделать текст более четким - использовать наложения.

• Выберите раздел >> вкладка "Стиль" >> "Наложение фона".
• Выберите один из общих цветов и поиграйте с непрозрачностью, пока не получите желаемый результат.

Шаг 6. Оптимизируйте раздел с помощью значков

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

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

Содержимое области значков

• В меню виджетов нажмите кнопку »Icon Box Widget« и перетащите ее в столбец.
• Выберите "Значок"
• Наведите указатель мыши на изображение значка
• Выберите «Загрузить SVG» **
• Вставьте свой собственный значок

** Примечание. Значки - это файлы SVG. Если нет, перейдите в панель управления WordPress, а затем в Elementor >> Настройки. Вам нужно будет включить «Разрешить загрузку файлов без фильтров».

• Введите свой "заголовок"
• Введите свое "Описание"
• Выберите "Стиль" >> Выберите общий цвет.
• Выберите «Размер» и перетащите полосу на нужный размер.
• Выберите «Padding» и перетащите полосу на номер по вашему выбору.

Шаг 8. Оптимизируйте раздел «Услуги»

Теперь мы собираемся перестроить раздел «Услуги», который в настоящее время использует два столбца, два изображения, виджет заголовка и виджет текстового редактора.

Давайте создадим такой же дизайн в новом разделе, но только с одним столбцом.

• Создайте новый раздел с колонкой
• В «Макете» >> установите для «Ширина содержимого» значение «Полная ширина».
• Выберите «Окно изображения виджета» на панели виджетов и перетащите его в столбец.

(Мы сможем интегрировать все активы раздела в этот виджет)

• Введите заголовок
• Введите описание

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

• Вставить то же изображение из медиатеки
• Перейдите на вкладку «Содержимое» >> Установите для параметра «Положение изображения» значение «Правое».

• Перейдите на вкладку "Стиль"
• Увеличить расстояние между элементами
• Увеличьте «ширину» изображения.
• Разверните раздел «Контент»
• Выберите выравнивание "по центру"
• Установите "Вертикальное выравнивание" на "Среднее"
• Определите общие цвета и шрифты по вашему выбору
• Перейдите на вкладку "Дополнительно"
• Добавьте 10% заполнения виджета

Теперь раздел «Услуги» имеет такой же дизайн, но с меньшим количеством ресурсов.

Шаг 9. Оптимизируйте раздел призыва к действию

Лучшие практики для ссылок CTA:

• Убедитесь, что все ваши ссылки в социальных сетях работают правильно и кнопка содержит ссылку.
• Когда вы добавляете ссылку на другой веб-сайт, включите этот атрибут: "rel | noopener"

(Вы можете сделать это, щелкнув значок шестеренки и введя атрибут в «Настраиваемые атрибуты»). Это откроет ссылку в новой вкладке браузера и повысит вашу оценку производительности.

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

В настоящее время в разделе два столбца, которые содержат:

1. Фоновое изображение с разделителем
2. Два заголовка, внутренний раздел, текстовый редактор и кнопка

Давайте создадим такой же дизайн в новом разделе, но только с одним столбцом.

• Перейдите на вкладку «Макет» >> установите для параметра «Ширина содержимого» значение «Полная ширина».
• Перейдите на вкладку «Дополнительно» >> Удалите лишнее заполнение.

• Выберите «Виджет с призывом к действию» на панели виджетов и перетащите его в столбец.
• Установите "Image Position" в "Left"
• Выберите свое изображение из медиатеки
• Разверните раздел «Контент»
• Введите заголовок
• Введите описание
• Введите текст кнопки

• Перейдите на вкладку "Стиль"
• Добавьте "Padding" между элементами
• Отрегулируйте ширину изображения
• Разверните раздел «Контент»
• Выберите глобальный шрифт для вашего заголовка
• Увеличьте расстояние между описанием и кнопкой
• Выбирайте глобальные цвета, подходящие для каждого ресурса
• Разверните раздел «Кнопка»
• Установите его размер на "Большой".
• Настройте его в соответствии с вашими потребностями, такими как цвет фона и радиус границы.

Пока это был раздел из 2 столбцов с 6 виджетами. Теперь это раздел из 1 столбца и только 1 виджет!

Шаг 10: оптимизируйте карусель изображений

В текущем дизайне раздела «Карусель изображений» часто встречается ошибка, связанная с отображением нескольких изображений.

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

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

• Создайте новый раздел с 1 столбцом
• Перейдите на вкладку «Макет» >> установите для параметра «Ширина содержимого» значение «Полная ширина».
• Выберите кнопку «Виджет карусели изображений» на панели виджетов и перетащите ее в столбец.
• Добавьте желаемые изображения из медиатеки

• Перейдите на вкладку «Контент».
• Установите "Размер изображения" на "Средний - 300 x 300".
• Отрегулируйте «Слайды для отображения», «Слайды для прокрутки» и «Навигация» в соответствии с вашими предпочтениями.

• Перейдите на вкладку "Стиль"
• Установите "Вертикальное выравнивание" на "Центр".
• Настройте «Интервал»

• Перейдите на вкладку "Дополнительно"
• Добавьте необходимую начинку

То, что когда-то было разделом из 5 столбцов, теперь стало только одним столбцом.

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

Шаг 11. Оптимизируйте раздел видео

Рекомендации для видеоконтента:

• По возможности используйте отложенную загрузку, чтобы ускорить загрузку ваших веб-сайтов.

Что происходит, когда мы применяем опцию «Ленивая загрузка»?

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

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

• Выберите «Виджет видео»
• Перейдите на вкладку "Стиль"
• Выберите «Ленивая загрузка».

Шаг 12. Оптимизируйте нижний колонтитул и постоянно обновляйте его

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

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

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

Для этого поступим следующим образом:

• Удалите лишние виджеты, оставив только виджет Заголовок
• Выберите виджет заголовка
• Щелкните символ «Динамические теги» справа от поля «Заголовок» (также известный как «Родительская кнопка».

• В раскрывающемся меню выберите пункт «Текущая дата и время».
• Нажмите на родительский значок ключа
• Перейдите на вкладку «Формат даты» и выберите пункт меню «Пользовательский».
• Удалите то, что в настоящее время находится в поле «Пользовательский формат», кроме «Y».
• Выберите вкладку «Дополнительно».
• Выделите поле «Вперед» и одновременно удерживайте клавиши «option» и «G» (или «control», alt и «C» одновременно), чтобы ввести символ «©».
• Добавьте пробел после "©"

• Выберите поле "После"
• Введите пробел и введите текст, который будет отображаться после года, например «Все права защищены».

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

В идеале, чем меньше у вас разделов, тем меньше у вас будет дополнительного HTML-КОДА.

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

Вот и все, ваш макет оптимизирован!

Оценка производительности нового веб-сайта

Результаты проверим в окне DevTools (Inspector):

• Выберите вкладку «Сеть»:

Здесь есть несколько приятных и положительных изменений:

• Теперь загрузка веб-сайта занимает 568 миллисекунд.
• Мы увеличили количество запросов с 81 до 46.
• Выберите вкладку «Маяк», где вы увидите, что наша оценка производительности увеличилась с 73 до 98.

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

Шаг 13: проверьте результаты с помощью эффектов движения

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

Сделайте заголовок «фиксированным» элементом:

• Выберите заголовок
• Перейдите на вкладку "Дополнительно"
• Разверните вкладку «Эффекты движения».
• Установите для параметра «Прикреплено» значение «Сверху».

Сделайте раздел героя «фиксированным» элементом:

• Выберите раздел героя
• Перейдите на вкладку "Стиль"
• Выберите раскрывающийся список «Вложение» и выберите «Фиксированный».

Используйте Входная анимация для текста героя (заголовок):

• Выберите виджет заголовка
• Перейдите на вкладку "Дополнительно"
• Разверните вкладку «Эффекты движения».
• Выберите «Анимация ввода» и установите для нее значение «Затухание».

Используйте анимацию ввода для текстового описания героя (виджет текстового редактора):

• Выберите виджет текстового редактора
• Перейдите на вкладку "Дополнительно"
• Разверните вкладку «Эффекты движения».
• Выберите «Входная анимация» и установите для нее «Затухание».

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

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

• Вернуться в окно «Инспектор»
• Выберите вкладку "Маяк".
• Нажмите «Создать отчет».

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

Вы можете поверить в нашу новую оценку производительности?

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

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

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

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

Получите Elementor Pro прямо сейчас!

Заключение

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...