Блокировка рендера и CSS - PullRequest
Новая
       26

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

0 голосов
/ 31 мая 2018

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

Я делаю несколько простых тестов с файлом 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.Если вы просматриваете источник страницы, он использует точно так же, как я использовал выше.

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

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

  1. Почему?
  2. Как этого избежать?

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

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

0 голосов
/ 05 июня 2018

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...