Блокировка рендера и CSS

Question

Блокировка рендера и CSS

Я предполагаю, что об этом спрашивали снова и снова, но я не видел ответ, который я ищу.

Я делаю несколько простых тестов с помощью HTML-файла и CSS-файла, пытаясь остановить рендеринг страницы, блокируя CSS, пробуя сайт через понимание страниц (Google)

Теперь я видел ответы вроде этого:

<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">

и я видел такие ответы:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">

Оба из которых я в порядке, для шрифтов Google! Но не для основных стилей страницы, я не думаю, что это хороший пользовательский опыт, чтобы увидеть страницу без стилей, а затем вдруг они загружаются.

Очевидно, что вы можете устранить любую блокировку CSS, придерживаясь всего этого как встроенные стили, но опять же я не думаю, что это хорошая практика, вы выводите все стили на страницу HTML и не загружаете их через таблицу стилей.

Я видел, что сайты на самом деле загружают стили примерно так:

<link rel='stylesheet' id='main-css'  href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />

Вот ссылка на страницу скорости теста на понимание. Я знаю, что на сайте работает WordPress. Если вы просматриваете страницу источника, он использует точно так же, как я использовал выше.

И они вообще не блокируют рендеринг... Как?

Я нахожусь на https, я использую cloudflare, и моя таблица стилей сжата и составляет всего около 24 байтов, и я все еще получаю блокировку рендера.

Зачем?
Как этого избежать?

0

css styles rendering google-pagespeed render-blocking

Источник

user902305 31 май '18 в 07:46

2 ответа

Другие вопросы по тегам css styles rendering google-pagespeed render-blocking

user6864059 05 июн '18 в 08:36 2018-06-05 08:36 · Answer 1 · 2018-06-05 08:36

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

Страница в вашем примере делает именно это, они вставляют некоторый контент CSS (проверьте исходный код и найдите style тег), затем, когда контент загружен, они добавляют внешнюю таблицу стилей с помощью JavaScript.

Все это говорит о том, что это рекомендация, вы можете ее игнорировать, если вы довольны эффективностью своей страницы, если вы хотите следовать рекомендации, вы можете применить некоторые методы для достижения этой цели с помощью автоматизации.

Как всегда, в css-tricks у вас есть отличное введение в эти приемы: https://css-tricks.com/authoring-critical-fold-css/

user7964547 05 июн '18 в 20:20 2018-06-05 20:20 · Answer 2 · 2018-06-05 20:20

Ключ к пониманию Google PageSpeed - блокировка рендеринга выше сгиба. Если вы проверяете сайт, на который вы ссылались, как ссылку на тест скорости страницы, строго встроенных стилей нет - вы правы. Тем не менее, у них есть <style>...</style> блок внутри их <head> это устанавливает все их наиболее важные стили для содержимого выше всех. Это означает, что эти стили отображаются немедленно, а все другие поддерживаемые стили будут загружены вскоре после этого, но ваши посетители (и Google PageSpeed) не заметят разницы.