Критическая/отложенная реализация CSS

Google PageSpeed ​​Audits предлагает добавить критический CSS содержимого верхней части страницы к тегу <style> в теге <head>, а остальные отложить до загрузки содержимого.

Хотя я не согласен с этой практикой, как правильно ее реализовать?

У меня есть несколько оговорок против его использования:

  • FOUC (либо отдельные элементы, либо страница в целом с использованием visibility: hidden)
  • Слишком много контента в верхней части страницы для стилизации с минимальным встроенным CSS, чтобы не было видно FOUC.
  • Дополнительный вес страницы при загрузке, прежде чем перейти к самому контенту
  • Нет кэширования встроенного CSS, что означает, что его нужно повторно загружать каждый раз, когда загружается страница.

Я не использую CSS-фреймворки, поэтому в любом случае не нужно скачивать раздутый CSS.


css pagespeed-insights critical-css
person nick-roberts91    schedule 23.11.2019    source источник
comment
каков правильный способ его реализации? это очень широкий вопрос. Наверное, есть много способов. Есть ли какой-то конкретный подход, который вы пробовали и с которым вам нужна помощь? Что вы пробовали?   -  person pixelistik    schedule 24.11.2019
comment
@pixelistik Это не я, это новый сотрудник, который непреклонен в его использовании. То, как он реализовал это, просто стилизует заголовок, поэтому FOUC происходит с остальной частью страницы (даже не изящно), что выглядит не очень хорошо. Мне сказали, что весь CSS выше сгиба должен быть встроенным. Я не думаю, что его следует использовать в нашем случае использования из-за этого. Я ведущий разработчик с тех пор, как в прошлом году ушел предшественник, но они не принимают во внимание то, что и как мы работаем. Поскольку он так непреклонен в его использовании, я пытаюсь найти компромисс, который меня устроит.   -  person nick-roberts91    schedule 24.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

«Правильный» способ реализации — это автоматизированный способ, обеспечивающий

  • у вас нет дополнительной работы после настройки
  • вы не делаете ошибок (например, пропуска отдельных элементов)

Существуют инструменты, которые могут идентифицировать и извлечь ваш критический CSS как часть процесса сборки. Одним из популярных вариантов будет addyosmani/critical:

Основное использование:

critical.generate({
     base: 'test/',
     src: 'index.html',
     target: 'styles/main.css',
     width: 1300,
     height: 900
});

Вы передаете ему примерную HTML-страницу и размер порта просмотра, чтобы определить «выше сгиба». Затем он дает вам критический CSS. Существуют плагины сборки и конфигурации, доступные для Webpack, Grunt и Gulp.

Получив такую ​​технически правильную настройку, вы сможете взвесить все за и против, о которых вы уже знаете.

person pixelistik    schedule 25.11.2019