Блокировка рендеринга и 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 байта, и я все еще получаю блокировку рендеринга.
- Почему?
- Как этого избежать?
Ответы 2
CSS, загруженный как внешний запрос, всегда блокирует рендеринг, вы не можете этого избежать. Рекомендация по анализу скорости страницы заключается в том, что вы не выполняете никаких запросов css до загрузки содержимого, чтобы избежать эффекта нестилирования, который они предлагают вам встроить CSS, необходимый для отображения содержимого до сворачивания.
Страница в вашем примере делает именно это: они встраивают некоторый контент css (проверьте исходный код и найдите тег style), затем, когда контент загружен, они добавляют внешнюю таблицу стилей с javascript.
Все, что было сказано, это рекомендация, вы можете игнорировать ее, если вы довольны производительностью своей страницы, если вы хотите следовать рекомендации, вы можете применить некоторые методы для достижения этого путем автоматизации.
Как всегда, в css-tricks у вас есть отличный вводный пост по этим методам: https://css-tricks.com/authoring-critical-fold-css/
Нет, я не думаю, что ты прав. В источнике нет CSS, который бы делал какие-либо стили для содержимого над сгибом. Единственный тег стиль, который я вижу, это изменение img.emoji - вы говорите мне, что это останавливает блокировку рендеринга?
Хорошо, я вижу, что не всегда загружается один и тот же контент, я говорил о другом теге стиля, снимке экрана инструментов разработчика, показывающем CSS, на который я ссылался imgur.com/OEjBmj5
Я предполагаю, что они проводят какой-то A / B-тест, загруженный контент отличается случайным образом.
Да, должно быть, и если это скорость страницы Google, они обслуживают встроенные стили?
Этого я не знаю, может быть, может быть, это просто сочетание удачи и всей славы нескольких типов кешей
У меня есть сайт, где благодаря медиа-запросам все умещается на одном экране, будь то настольный или мобильный, без прокрутки. Так что никакой «фолда» нет. Insights рассматривает javascript, необходимый для рендеринга страницы, как блокировку рендеринга. Этот скрипт является внешним, но, поскольку все другие страницы сайта используют его, он лучше хранится в кеше, чем замедляет скорость страницы. Таким образом, нет гибкости в аналитике Pagespeed. (и, конечно же, Google Analytics - нет-нет)
Ключ к аналитике Google PageSpeed - блокировка рендеринга в верхней части страницы. Если вы проверите сайт, на который вы указали ссылку в качестве справочного материала для проверки скорости страницы, вы не найдете строго встроенных стилей - вы правы. Тем не менее, у них есть блок <style>...</style> внутри их <head>, который устанавливает все их самые важные стили для контента, расположенного в верхней части страницы. Это означает, что эти стили отображаются немедленно, а все остальные поддерживающие стили загружаются вскоре после этого, но ваши посетители (и Google PageSpeed) не заметят разницы.
Вы всегда будете получать блокировку рендеринга, но это совсем не проблема ... это простые рекомендации, и вы никогда не сможете выполнить их все. И вы никогда не получите 100% баллов .. вам нужно сосредоточиться на скорости / загрузке страницы