1. Разделите ли вы CSS на файлы компонентов или оставите style.min.css?

Оставлю style.min.css.

Разделю на CSS на файлы компонентов, которые используются на каждой странице. — Верный ответ

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

2. Выберите CSS-компоненты, на которые стоит разделить весь CSS.

common.css — для повторяющихся стилей (стили шапки и футера, подключение шрифтов, другие универсальные стили).

common.min.css — для повторяющихся стилей (стилей шапки и футера, подключения шрифтов, других универсальных стилей). — Верный ответ

Это правильный ответ.

index.min.css — для стилей на главной странице. — Верный ответ

Это правильный ответ. Выделение CSS для конкретной страницы с минимизацией — хорошая оптимизация под HTTP/2.

catalog.min.css — для стилей страницы каталога. — Верный ответ

Это правильный ответ. Выделение CSS для конкретной страницы с минимизацией — хорошая оптимизация под HTTP/2.

product.min.css — для стилей страницы товара. — Верный ответ

Это правильный ответ. Выделение CSS для конкретной страницы с минимизацией — хорошая оптимизация под HTTP/2.

modal.min.css — для стилей модального окна. — Верный ответ

Это правильный ответ. Выделение CSS для модального с минимизацией — хорошая оптимизация под HTTP/2, так как модальное окно используется только на главной.

3. Выберите верные варианты подключения CSS на страницах.

Для страницы index.html — common.min.css, index.min.css.

Для главной страницы — common.min.css, index.min.css, modal.min.css. — Верный ответ

Это правильный ответ.

Для страницы catalog.html — catalog.min.css, modal.min.css.

Для страницы catalog.html — catalog.min.css, common.min.css. — Верный ответ

Это правильный ответ. Для этой страницы нужен файл common.min.CSS с повторяющимися стилями: стилями шапки и футера, подключения шрифтов, других универсальных стилей. Также здесь нужен файл catalog.min.css со стилями страницы.

Для страницы product.html — product.min.css.

Для страницы product.html — product.min.css, common.min.css. — Верный ответ

Это правильный ответ. Для этой страницы нужен файл common.min.CSS с повторяющимися стилями: стилями шапки и футера, подключением шрифтов, другими универсальными стилями. Также здесь нужен файл catalog.min.css со стилями страницы.

4. Разделите ли вы JavaScript на файлы компонентов или оставите scripts.min.js?

Оставлю scripts.min.js

Разделю JavaScript на файлы компонентов, которые используются на определённой странице. — Верный ответ

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

5. Выберите JavaScript-компоненты, на которые стоит разделить весь scripts.min.js.

common.min.js — для повторяющихся скриптов, например, открытия и закрытия меню в мобильной версии. — Верный ответ

Это правильный ответ.

add-to-cart.min.js — скрипт добавления товара в корзину. — Верный ответ

Это правильный ответ.

add-to-favourite.min.js — скрипт добавления товара в избранное. — Верный ответ

Это правильный ответ.

product-carousel.min.js — скрипт для карусели фотографий товара на странице товара. — Верный ответ

Это правильный ответ.

filter.min.js — скрипт для фильтрации на странице каталога. — Верный ответ

Это правильный ответ.

modal.min.js — скрипт открытия модального окна. — Верный ответ

Это правильный ответ.

6. Выберите верные варианты подключения JavaScript на страницах.

Для страницы index.html — common.min.js, modal.min.js. — Верный ответ

Это правильный ответ. На главной странице нужны общие скрипты с открытием мобильного меню и скрипты открытия модального окна.

Для страницы index.html — common.min.js, modal.min.js, add-to-cart.min.js.

Для страницы catalog.html — common.min.js, add-to-cart.min.js, add-to-favourite.min.js.

Для страницы catalog.html — common.min.js, add-to-cart.min.js, add-to-favourite.min.js, filter.min.js. — Верный ответ

Это правильный ответ.

Для страницы product.html — common.min.js, add-to-cart.min.js, add-to-favourite.min.js, filter.min.js, product-carousel.min.js.

Для страницы product.html — common.min.js, add-to-cart.min.js, add-to-favourite.min.js, product-carousel.min.js — Верный ответ

Это правильный ответ.

7. Оставите ли спрайт?

Оставлю спрайт.

Совсем избавлюсь от спрайта. — Верный ответ

Это правильный ответ. Спрайт — это оптимизация под HTTP/1, чтобы использовать одно соединение для всех иконок. При оптимизации под HTTP/2 можно подключать отдельные иконки на странице.

Разделю на спрайты для конкретных страниц. — Верный ответ

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

3.12. Выбор способов оптимизации под HTTP/2