Увеличить скорость загрузки страницы

gzip

LazyLoad

Стили

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

Разбивать итоговый css файл.

1. Можно разбивать на верхнюю часть страницы и всю оставшуюся.

2. Можно разбивать файл в зависимости от размеров экрана. Если мы сможем разделить этот единственный файл блокировки всего рендеринга на соответствующие медиа-запросы:

<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

3. Загружать необходимы css непосредственно перед блоком:

<link rel="stylesheet" href="site-footer.css" />
  <footer class="site-footer">
  </footer>