Устранение блокировки рендеринга css

Мои файлы CSS вызывают медленную визуализацию моей страницы, поэтому я переместил их в нижний колонтитул. Это, однако, создает проблему UX в том, что когда страница загружается, она изначально полностью отключена.Устранение блокировки рендеринга css

Я думал о двух решений этой проблемы и было интересно, что является лучшим:

Перемещение декларации CSS для панели навигации и заголовков страниц в новый файл CSS, который будет размещен в заголовок. Хотя это будет относительно небольшой файл, он имеет недостаток в создании другого HTTP-запроса.
Встроенный CSS для навигации и заголовков страниц в самом заголовке. Хотя это не создаст другого HTTP-запроса и решит проблему, CSS не будет кэшироваться, как если бы я поместил его во внешний файл.

Какое оптимальное решение этой проблемы? И есть ли рекомендации по эффективной практике?

источник

2016-07-23 Adam Scot

Да, решение этой проблемы заключается в том, чтобы встроить критические разделы (или все) вашего css непосредственно в файл like (index.html), потому что, если у вас больше файлов, это новый запрос для каждого из них и, следовательно, больше времени требуется для загрузки страницы :)

источник

2016-07-23 12:42:42

Но тогда браузеру нужно будет загрузить встроенный css на каждую новую страницу, не так ли? Вы говорите, что, хотя это добавило бы к общему размеру страницы, разница невелика? –

Разница значительна, потому что вы делаете меньше запросов :) У вас есть css, который больше 1 МБ :), так что да, поисковые системы больше жалуются на количество запросов (каждый тег ссылки - другой запрос), а затем размер загружаемого css :) –

что поселилось тогда ... спасибо: D –

Согласно Google, лучший вариант - второй.

As described here

источник

2016-07-23 12:43:05

Хорошие практические рекомендации являются:

Запись как минимальный CSS, как это возможно, избежать написания ненужных свойств CSS.
Всегда старайтесь создать один файл css для всех стилей, если только не нужно использовать несколько файлов css. Тем не менее, не создавайте более 3 файлов css.
Используйте ссылку CDN для включения фреймворков, наборов инструментов.
Избегайте написания встроенных стилей css, используйте внешний файл css.
Правильно используйте html-теги. html5 представил некоторые новые теги, такие как header, main, aside, nav, footer. Правильно используйте эти теги. Это дает четкую структуру. Поэтому нет необходимости создавать div-класс для этих тегов вручную.

Мой вопрос в том, что, как вы знаете, что ваши файлы css вызывают медленную визуализацию вашей страницы? Используете ли вы javascript/jQuery-плагины?

источник

2016-07-23 13:15:54 Rakib

Устранение блокировки рендеринга css

ответ

Смежные вопросы