3.13. Эталонное решение: оптимизация проекта под протокол HTTP/2

Наши предложения по оптимизации проекта под протокол HTTP/2.

CSS

Разделим на файлы:

• common.min.css — для повторяющихся стилей: стилей шапки и футера, подключения шрифтов, других универсальных стилей;
• index.min.css — для стилей главной страницы;
• catalog.min.css — для стилей страницы каталога;
• product.min.css — для стилей страницы товара;
• modal.min.css — для стилей модального окна.

Подключим на страницы только те стили, которые на них нужны. Посмотрим:

index.html:

<link rel="stylesheet" href="css/common.min.css">
<link rel="stylesheet" href="css/index.min.css">
<link rel="stylesheet" href="css/modal.min.css">

catalog.html:

<link rel="stylesheet" href="css/common.min.css">
<link rel="stylesheet" href="css/catalog.min.css">

product.html:

<link rel="stylesheet" href="css/common.min.css">
<link rel="stylesheet" href="css/product.min.css">

JavaScript

Разделим на файлы:

• common.min.js — для повторяющихся скриптов, например, открытия и закрытия меню в мобильной версии;
• add-to-cart.min.js — скрипт добавления товара в корзину;
• add-to-favourite.min.js — скрипт добавления товара в избранное;
• product-carousel.min.js — скрипт для карусели фотографий товара на странице товара;
• filter.min.js — скрипт для фильтрации на странице каталога;
• modal.min.js — скрипт открытия модального окна.

Подключим на страницы только те скрипты, которые нужны на них нужны. Например:

index.html:

<script src="js/common.min.js"></script>
<script src="js/modal.min.js"></script>

catalog.html:

<script src="js/common.min.js"></script>
<script src="js/add-to-cart.min.js"></script>
<script src="js/add-to-favourite.min.js"></script>
<script src="js/filter.min.js"></script>

product.html:

<script src="js/common.min.js"></script>
<script src="js/add-to-cart.min.js"></script>
<script src="js/add-to-favourite.min.js"></script>
<script src="js/product-carousel.min.js"></script>

Графика

Разбираем спрайт на иконки и подключаем иконки.

Было:

<!-- Подключение иконки через спрайт -->
<p class="route__address">
  <svg class="route__icon" width="14" height="22"><use xlink:href="sprite.svg#icon-contacts-location"></use></svg>
  ул. Большая Конюшенная, 19/8
</p>

Стало:

<!-- Подключение иконки без спрайта -->
<p class="route__address">
  <svg class="route__icon" width="14" height="22"><use xlink:href="icon-contacts-location.svg"></use></svg>
  ул. Большая Конюшенная, 19/8
</p>

Можно оставить спрайт иконок, используемых на всех страницах: иконок соцсетей, открытия и закрытия мобильного меню. Также можно оставить спрайт иконок, используемых на определённой странице, например, спрайт всех иконок страницы товаров. Главное — не загружать на страницах неиспользуемые иконки.