Удалите из верхней части страницы код CSS, блокирующий отображение. Как лучше сделать?

#javascript #html #css #оптимизация_сайтов

Сейчас работаю над увеличением скорости загрузки сайта, используя Google PageSpeed
Insights.
Google PageSpeed Insights дает такую рекомендацию:
Удалите из верхней части страницы код CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 20. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных
далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно
или встроить их самые важные компоненты непосредственно в код HTML.
Что мне лучше сделать - вынести все теги  за тег ?
Или использовать, например, yepnope (Modernizr) и подгружать CSS асинхронно с помощью
JS? Можете предложить еще варианты решения этой проблемы?!    

Ответы

Ответ 1

Css надо оставить в head.
Скрипты отправить в конец body (кроме модернайзера и тех, которые нужны сразу).
Стили и скрипты по возможности минимизировать и объединить.


Ответ 2

Google выдаёт такие советы исходя из оптимизации critical rendering path. Если коротко
и обобщенно, то путь от первого запроса на сервер до появления страницы на экране такой:
запрос → ответ с HTML → построение DOM → загрузка необходимого CSS → построение CSSOM
→ событие DomContentLoaded → рендер. Более длинно и правильно описано в статье Ильи
Григорика.

Как получить зеленый свет в Google Pagespeed?

Помимо очевидных и первоочередных советов о минификации и склеивании ваших CSS-файлов,
необходимо всё-таки разобраться с блокированием первого рендера страницы. Мне нравится
идея добавлять CSS первого экрана в , а весь остальной CSS закидывать в конец
страницы перед . Для этих целей я рекомендую использовать npm-модуль Critical,
который хорошо интегрируется в Gulp.

Используемые мной настройки:

gulp.task('critical', ['styles', 'html'], (cb) => {
  critical.generate({
    base: 'dist/',
    src: 'index.html',
    css: ['dist/styles/main.min.css'],
    dimensions: [{
      width: 320,
      height: 480
    },{
      width: 768,
      height: 1024
    },{
      width: 1366,
      height: 960
    }],
    dest: 'styles/critical.css',
    minify: true,
    ignore: ['@font-face']
  });
});


Т. е. после окончания работы над страницей, необходимо запустить таск gulp critical,
который предварительно запускает таски по сборке CSS и HTML, а затем формирует в отдельный
файл critical.css CSS первого экрана, который можно вставлять инлайном в . Также
не забудьте проверить как выглядит ваш первый экран исключительно с инлайновым CSS,
удалив из страницы ваш основной файл — ручная проверка всё еще необходима, потому что
плагин хоть и хорош, но не идеален.

Разумеется, это не единственный способ использования этого модуля. Есть также возможность
генерировать отдельную страницу с уже вставленным инлайном CSS, который будет исключен
из основного CSS-файла, а основной, в свою очередь, будет подгружаться асинхронно.
Для этого надо использовать параметры inline: true, extract: true и dest: 'index-critical.html'.

В результате таких действий, предупреждение о блокирующем рендер CSS убирается и
у вас есть +10 баллов в Google Pagespeed. Скорость появления страницы на экране тоже
увеличивается, иногда очень значительно — в зависимости от размера вашего CSS-файла.


Ответ 3

Постараться склеить все css в один и минимизировать.
Не зацикливаться на результатах PageSpeed. Это только рекомендации.
В случае упертости - подключить yepnope, но PageSpeed будет ругаться на скрипты в
head, а если перенесешь yepnope вниз страницы, то ругаться будут пользователи на прыгающий
с загрузкой контент.


Ответ 4

Если хочется 100/100, подгружайте стили с помощью XMLHttpRequest и потом вставляйте.




  





Код не проверял.