Создание сайта с улучшенной скоростью загрузки
3 мин. чтения
Страницы сайта, которые содержат актуальный и лаконичный контент, обычно имеют более быстрое время загрузки и более удобны для посетителей.
Повысьте производительность страниц, следуя приведенным ниже советам по дизайну, таким как оптимизация верхней части страницы и создание отдельных страниц.
Содержание:
- Порядок загрузки элементов
- Размещение контента в верхней части страницы
- Использование галерей, видео и анимации
- Структурирование страниц сайта
- Использование кнопок
Совет:
Мы рекомендуем обратить особое внимание на главную страницу, так как обычно это первая страница, на которую заходят посетители сайта.
Порядок загрузки элементов
Элементы сайта загружаются в определенном порядке. Статичные элементы или элементы с низким разрешением загружаются быстрее, чем большие или интерактивные элементы.
Порядок загрузки элементов на сайте:
- Статичные: элементы с низким разрешением, как правило, без анимации, например текст и фигуры.
- Гибкие: элементы с большим объемом контента или более высокого разрешения, например изображения или видео.
- Интерактивные: контент, который является интерактивным и может содержать внешний код, такие как iFrames и сторонние приложения.
Помните о порядке загрузки при структурировании сайта и добавлении контента. Мы рекомендуем добавлять элементы, которые загружаются быстрее всего в верхнюю часть страницы, поскольку это первый контент, отображаемый, когда посетитель открывает ваш сайт.
Верхняя часть страницы
Верхняя часть страницы — это секция сайта, которую посетители видят без прокрутки, и обычно эта часть сайта загружается первой.
Мы рекомендуем по возможности добавлять только необходимые статичные элементы и сохранять дизайн этого раздела простым и актуальным.
Элементы, которые мы рекомендуем добавить в верхнюю часть сайта:
- Текст: текст дает вашим посетителям четкое представление о странице вашего сайта или о бренде. Кроме того, он может быть проиндексирован поисковыми системами и может улучшить SEO вашего сайта. Мы рекомендуем использовать системные шрифты и избегать чрезмерного использования шрифтов разных семейств и весов.Подробнее об оптимизации текста на сайте
- Призывы к действию: призывы к действию (CTA) — это кнопки и ссылки, которые помогают посетителям совершить желаемое действие на сайте, например, сделать покупку или связаться с компанией. CTA должны быть четкими, и мы рекомендуем избегать добавления рядом с ними элементов, которые могут отвлечь посетителей сайта.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/03/18/583dc6c7-ad65-4aef-bbc5-ffda8fe89923/fe0027db-1a18-4bab-8ac1-6c985912fe58.png)
Галереи, видео и анимация
Гибкие элементы и элементы в высоком разрешении оживляют сайт. Однако они могут увеличить время загрузки сайта и, следовательно, повлиять на производительность.
Мы рекомендуем обращать внимание на эти элементы, использовать их только при необходимости и не добавлять их в верхней части страницы.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/16/5cbae38b-83a3-4a12-9d56-4c94d6789117/37405547-1c26-43d8-8b8b-2b125ba8723f.gif)
Отдельные страницы и длина страниц
Wix предлагает много различных приложений, которые можно добавить на сайт, некоторые из них включают магазины, блог и видео.
Мы рекомендуем создать для этих приложений отдельные страницы и не размещать их на главной странице сайта. Это предотвратит перегрузку главной страницы и сократит время загрузки. Можно настроить ссылки на эти страницы с главной страницы, используя такие элементы, как кнопки, пункты меню и ссылки.
Добавление отдельных страниц также может уменьшить длину страницы, то есть количество экранов, которое посетитель должен прокрутить, чтобы просмотреть всю страницу сайта. Мы рекомендуем сохранять длину страницы на уровне восьми экранов и ниже, добавлять только необходимые компоненты и оптимизировать использование CTA.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/16/64f8fc37-ca1c-47e8-8f1a-545eb8ea5459/cef1bfe3-15f8-4157-86eb-b20d60906b6c.png)
Кнопки
Кнопки— это отличный способ для предварительного просмотра контента без ущерба для производительности сайта.
Добавьте на главную страницу статические элементы (например, текст), которые дают посетителям представление о контенте сайта, и добавьте кнопку, которая ведет на соответствующую страницу. Например, «Просмотрите мой блог», «Подробнее» или «Перейти в магазин».
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/16/9d3f111a-0b65-43f5-874e-6bb159ff08ec/f0da2c91-d6ec-4ac0-89d6-36fb5b5a7cff.png)