HTML и CSS фичи, советы для 10-кратного ускорения загрузки страниц

Мы все терпеть не можем, когда наша страница загружается так медленно!

Фактически, коэффициент конверсии сайта падает в среднем на 4,42% с увеличением времени загрузки на каждую секунду (от 0 до 5 секунд). Первые пять секунд времени загрузки страницы оказывают наибольшее влияние на коэффициент конверсии. (Portent, 2019)

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

(В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS).

1. Ленивая загрузка

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

a) Разделение CSS-файла 

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

<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />

? Для использования в печатной (Print) версии-

<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />

? Для использования на мобильных (Mobile) экранах-

<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

? Для использования экранов планшетов (Tablet)-

<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" />

? Для мобильных экранов с разной ориентацией (orientation) используйте разные CSS-файлы 

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

При разделении CSS на несколько файлов, основной блокирующий рендеринг файл, в данном случае styles.css, становится намного меньше, уменьшая время блокировки рендеринга, что значительно увеличивает скорость загрузки страницы.

б) Свойство font-display в CSS

Применяемое к правилу @font-face, свойство font-display определяет, как файлы шрифтов загружаются и отображаются браузером, позволяя тексту проявляться с fallback (резервным) шрифтом, пока тот загружается или нет. Это повышает производительность, делая текст видимым, вместо пустого экрана, а в качестве компромисса - нестилизованный текст в данный момент мигает.

@font-face {
  font-family: "nunito", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

c) Изображения в HTML-файле

В первую секунду пользователь видит (должен видеть) сначала только изображения. Зачем тогда заставлять ждать, пока изображение загрузится до конца? Используйте loading="lazy", чтобы изображение загружалось только тогда, когда это необходимо. Это значительно снижает скорость загрузки страницы.

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2. Выбор правильного формата изображения

Создавайте свои изображения в формате .webp. Он рекомендован в качестве стандарта формата изображений для интернета.

Изображения WebP без сжатия (без потерь) по размеру на 26% меньше по сравнению с PNG. Сжатые (с потерями) изображения WebP на 25-34% меньше, чем аналогичные изображения JPEG при эквивалентном индексе качества SSIM. Анимированные WebP-изображения поддерживаются с потерями, без потерь и прозрачностью, что позволяет уменьшить их размеры по сравнению с GIF и APNG.

Формат изображения WebP по сравнению с PNG

Изображения отсортированы по степени сжатия

Формат изображения WebP в сравнении с JPEG

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

Вы также можете проверить формат изображения .avif, который в некоторых случаях лучше, чем .webp. Но он является новым для рынка (выпущен в 2019 году), поэтому еще не многие браузеры поддерживают формат .avif!

? Используйте элемент <picture> для изображений

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

b) Предоставление альтернативных форматов изображения в случаях, когда формат webp не поддерживается.

c) Cохрание пропускной способности и ускорение загрузки страниц за счет использования наиболее подходящего изображения для зрительского дисплея.

Если вы предоставляете версии изображения большей плотности для отображения на дисплее с высоким разрешением (Retina), используйте srcset для элемента <img>. Это позволит браузерам выбирать версии меньшей плотности в режимах экономии данных, и вам не придется прописывать явные условия media.

<picture>
  <source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
  <source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
  <source srcset="my-logo-narrow.webp" type="image/webp" /> 
  <img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3. Рендеринг изображений

Поскольку изображения загружаются асинхронно и после первого наброска (paint)  продолжают загрузку. Если перед этим их размеры не определены, они могут стать причиной изменения содержимого страницы, например, когда текст сдвигается вниз из-за загрузки изображений. По этой причине очень важно задать атрибуты width и height, чтобы браузер смог зарезервировать под них место на макете.

Для любого background-image (фонового изображения) необходимо задать значение background-color (цвет фона), чтобы любой наложенный на него контент оставался читаемым до окончания загрузки изображения.

4. Минификация файлов HTML и CSS

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

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

И, наконец, у нас - все сделано и закончено!

Благодаря этим изменениям скорость загрузки страниц вашего сайта теперь будет в 10 раз выше!

Материал подготовлен в преддверии специализации Fullstack Developer. Узнать подробнее о специализации, а также зарегистрироваться на бесплатный вебинар можно по ссылке ниже.