Главная / Блог / Оптимизация верстки

Оптимизация верстки

157

28.02.2022

Обновлено: 04.04.2023

Время прочтения: 9 минут

Василий Кулик программист

Кулик Василий

Оптимизация верстки

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

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

Формат изображений WebP

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

Зайдите на , выберите или перетащите изображение, укажите формат WebP и после оптимизации скачайте сжатое изображение, без потери качества.

Как выбрать хостинг

Формат WebP сжимает изображение, в среднем, на 70%-80% по размеру и это здорово.

Контентные изображения

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

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

<picture> <source media="(max-width:600px)" srcset="/img/logo_mobile.webp " /> <img src="/img/logo.webp" alt="" /> </picture>

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

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

Фоновые изображения

Задавая фон с помощью background и background-image не забывайте использовать @media-запросы, для задания фоновых изображения, для мобильных устройств.

Ситуация индентична пункту выше.

.content{background:url("/img/bg-image.png");} /*Если ширина экрана меньше-равно 500 пкс., подгрузить фоновую картинку для мобильных устройств*/ @media (max-width:500px){ .content{background:url("/img/bg-image_mobile.png");} }

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

Видео в качестве фона

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

Для этого примените тег <picture>, с указанием медиа-условия, как и при вставки контентных изображений.

Важный совет оптимизации: в div-блоке видео-фона сперва показывайте изображения первого кадра из видео, затем спустя 800 млс, через JavaScript вставьте сам тег <picture>, подгружающий видео-фон блока. Таковой способ бережет ресурсы поисковых роботов, при индексации. В итоге увеличивается оценка в Google PageSpeed!

Заполнение пространства для картинки

Для авто-заполнения фоновым изображением блока, в CSS используется функция background-size со значением cover.

Идентичная функция существует для контентных изображений тегов img. Пропишите для к изображению следующие стили:

.blog-img{ display:block; width:100%; height:100%; object-fit:cover; }

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

Шрифты

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

Для тега body пропишите:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Такой подход используют многие сайты, в частности GitHub, Bootstrap, Medium, другие. Мы так же используем и очень довольны результатом.

Недостатки сторонних шрифтов в их огромном весе, как результат затормаживания скорости сайта.

Текст только в одну строку

Текст в одну строку полезен, если он смотрится плохо в две строки и ломает верстку.

Это просто реализуется на чистом CSS. Для текста пропишите:

.blog-name{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
Как выбрать хостинг

Теперь если текста больше, он обрежется и в конце отобразятся три точки.

Прижатие фонового изображения

Задать позицию фонового изображения, например, к правому-нижнему краю можно легко. А если хочется его немного подвигать в верх-низ, право-лево?

Для этого добавьте к позициям значения в пикселях, или других единицах, после ключевых слов позиций top, bottom, right, left. Значения могут быть отрицательные:

.content{background:#151515 url("/img/map.png")right -115px bottom -57px no-repeat;}

Таким способом можно двигать изображения по осям x-y. Это незаменимая возможность тонкой настройки позиции фона.

Необычные фигуры

Создавать необычные фигуры можно свойством border-radius, с 8-ми аргументами.

Первые 4 аргумента скругляют верхние и нижние границы, другие 4 левые и правые.

Так же используйте онлайн-сервис, с удобным интерфейсом, для этого: https://9elements.github.io/fancy-border-radius/. Двигайте ползунки, скопируйте код и получите необычную фигуру.

Оптимизация кода – советы на вес золота

Оптимизация изображений – далеко не 100% оптимизация верстки.

Любой сайт пишется на коде и интерпретация кода браузером занимает основное время. Чистота кода это самое главное в верстке. Нужен комплекс.

Присмотритесь внимательно к этим проверенным советам оптимизации:

На практике очень часто встречается пренебрежение этими советами. Каждая мелочь сложенная до кучи приводит к негативному результату.

Проверка оптимизации и качества верстки

Проверка качества.

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

Сервис оценку формирует из 42-х тех. параметров.

Блестящая работа если оценка 100 из 100 процентов, для мобильной и компьютерной версии. Если меньше 95 – это результат множества допущенных ошибок.

Оценка в PageSpeed 100% положительно скажется на SEO.

Проверка ошибок в коде.
Код верстки не должен содержать ошибки. Это недопустимо!

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

Как выбрать хостинг

Помните: Максимальная оценка в PageSpeed и отсутствие ошибок – прямой показатель высокой квалификации. Это отличает профессионала от непрофессионала.

Итоги

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

Как выбрать хостинг

Что-то не понятно?
Спросите у нас и мы обязательно Вам поможем!

Отправляя форму, Вы подтверждаете указание своего e-mail адреса.

Рекомендуемые статьи этой категории

Как выбрать хостинг

Выбор хостинга, виртуального сервера(VPS), физичесского сервера, для Вашего проекта с ориентировкой на цену, посещаемость и безопасность. Современный и проверенный алгоритм выбора хостинга и сервера, чтобы Ваш сайт попал гарантированно в ТОП!

Подробнее
Ошибки в верстке новичков и опытных

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

Подробнее
Оптимизация верстки + 10 трендовых фишек

Узнайте о фишках оптимизации вашей верстки HTML+CSS и ваши сайты станут еще быстрее, лучше и с высокой оценкой качества. Вы узнаете о легком способе оптимизации изображений, шрифтов, текста и кода.

Подробнее
Как реально сэкономить на SEO-продвижении и кто может сделать качественный сайт

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

Подробнее

Оставить заявку