Чек-лист по оптимизации скорости загрузки

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

Для того чтобы Яндекс корректно учитывал изображения загружаемые лениво, необходимо разместить ссылку на источник изображения в атрибуте data-src (или data-original) тега img. При этом, для корректного учета изображения в Google достаточно того что оно загружается сразу после попадания во viewport.

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

Content Delivery Network - географически распределённая сетевая инфраструктура (группа серверов), позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям.

Использование CDN позволяет быстрее доставлять статические ресурсы (изображения, стили, скрипты и шрифты) конечному пользователю. Стоит обратить внимание что если ваш сайт оказывает услуги только по России, то и CDN стоит выбирать в первую очередь обеспечивающий быструю доставку контента по России (а не по США и Европе).

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

Форматы:

• SVG для иконок;
• JPEG для фотографий и баннеров;
• PNG для изображений с прозрачностью;
• GIF для анимированных изображений.

Можно использовать более современный и экономный формат WebP от Google (вместо JPEG, PNG и GIF), но для его корректного отображения в браузерах нужно дополнительно подключать полифилл - скрипт, который добавляет поддержку WebP в устаревшие браузеры.

Стили страниц должны храниться в минимально необходимом количестве CSS-файлов, а также должны делиться на те что отвечают за формирование контента первого экрана и те что влияют на контент вне первого экрана (и интерактивных блоков - меню за бургером и т.д.). Избегаем использования стилей в HTML и помним что первый экран на мобильных устройствах и компьютерах разный!

Первый экран:

<link charset="utf-8" media='(min-width: 1200px)' rel="stylesheet" type="text/css" href="/desktop-before.css" />

Вне первого экрана:

<link charset="utf-8" media="none" onload="if(media!='(min-width: 1200px)') media='(min-width: 1200px)'" rel="stylesheet" type="text/css" href="/desktop-after.css" />

Мы можем рекомендовать браузеру кэшировать ресурсы, которые повторно используются на других страницах сайта. Это делается с помощью HTTP-заголовков Cache-Control и Expires (если срок кэширования не задан в Cache-Control).

Указываем кэширующий заголовок сроком на 1 год для всех статических ресурсов: CSS, JS, шрифтов, изображений и видео.

Для изменяемых CSS и JS указываем версии (и меняем их в HTML при изменении файлов):

<link href="/bitrix/cache/css/kernel_main.css?14356674393041" type="text/css" rel="stylesheet">

Если сервер Apache указываем в файле .htaccess следующие строки:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Если сервер Nginx указываем в файле конфигураций /etc/nginx/site-enabled/default следующие строки:

location ~* \.(png|jpg|jpeg|gif|js|css|pdf|html|swf)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}

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

К серверному кэшированию относится:

• кэширование страницы целиком (не трогаем страницы с авторизацией!);
• кэширование результатов выполнения отдельных скриптов;
• кэширование отдельных блоков страницы;
• кэширование результатов запросов к базе данных в сводные таблицы.

Минификация - удаление лишних символов из кода, затормаживающих чтение кода браузером или сервером. Минифицируем: серверные скрипты (PHP и т.п.), HTML, CSS и JS.

Обычный код:

.check-item {
   float: left;
   font-family: 'Golos';
   margin: .5em 0;
   position: relative;
}

Минифицированный код (без пробелов, табуляции и новых строк):

.check-item{float:left;font-family:Golos;margin:.5em 0;position:relative}

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

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Скрипты (как и стили) должны храниться в минимально необходимом количестве JS-файлов, а также должны делиться на те что отвечают за формирование контента страницы и те что не влияют на контент (до взаимодействия). Избегаем использования скриптов в HTML!

Указываем атрибут async (срабатывает скрипт который раньше загрузился) или defer (скрипты срабатывают последовательно) для всех скриптов.

<script src="1.js" defer></script>

<script src="2.js" defer></script>

Протокол HTTP/2 позволяет быстрее и эффективнее передавать данные между сервером и браузером (или роботом Googlebot). В отличие от HTTP/1 он не создает отдельное соединение для загрузки каждого файла, а загружает их все параллельно, одни потоком.

Сервис для проверки - http2.pro

HTTP заголовок Last-Modified сообщает клиенту время последнего изменения страницы (объекта).

Если клиент (браузер, поисковый робот) получил заголовок Last-Modified, то при следующем обращении к адресу, при условии, что страница (объект) есть в кэше, он добавит вопрос If-Modified-Since (не изменилась ли страница после даты, полученной в Last-Modified). Если страница не изменялась, то клиент получит ответ 304 Not Modified без контента страницы (его он возьмет из своего кэша).

Пример HTTP заголовка:

Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

Сервис для проверки - last-modified.com

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

Основывается на комбинации алгоритма сжатия LZ77 и кодирования Хаффмана.

Проверить настройку GZIP можно в инструменте по ссылке.

Cookie-Free домен - такой домен, который не поддерживает обработку cookie-файлов. А значит браузеру не нужно отправлять в запросе к нему кучу ваших cookie-файлов.

Используем такой домен для размещения файлов CSS, JS, шрифтов и изображений.