«Устранить CSS, блокирующий рендеринг, в верхнем содержании»

153

Я использовал аналитические данные Google PageSpeed, чтобы попытаться улучшить производительность своего сайта, и до сих пор он оказался чрезвычайно успешным. Такие вещи, как отсрочка скриптов, работали прекрасно, так как у меня уже была собственная версия jQuery .ready()для отсрочки скриптов до полной загрузки страницы, все, что мне нужно было сделать, это вставить эту конкретную функцию и переместить полные скрипты в конец страницы. Это сработало отлично.

Но теперь я обнаружил, что смотрю на одну оставшуюся желтую точку в контрольном списке: «Устранить блокирующий рендеринг CSS в содержимом выше сгиба».

Мой CSS настроен так, чтобы иметь один глобальный _.cssфайл, содержащий стили, которые применяются к общей структуре страницы или используются более чем в одном или двух местах на сайте. Большинство страниц тогда имеют связанный файл CSS (например, party.phpимеет party.css), содержащий стили, специфичные для этой конкретной страницы. Все CSS-файлы кэшируются на неопределенный срок, так как я добавляю /t=FILEMTIMEимена файлов (а затем удаляю их с помощью .htaccess), чтобы гарантировать, что файлы обновляются при их изменении.

Так или иначе, Google рекомендует встраивать критические стили, необходимые для превосходного контента. Проблема в том ... ну, взгляните на этот скриншот: http://prntscr.com/1qt49e

Как вы можете видеть ... ВСЕ содержание выше! Люди ненавидят прокрутку, особенно в игре, которая включает в себя загрузку многих страниц. Поэтому я спроектировал сайт так, чтобы он помещался на одном экране (при условии достаточно хорошего разрешения). Так что это означает ... ВСЕ стили применимы к содержанию выше всяких похвал! Итак ... есть ли решение? Или я застрял с этой желтой отметкой на почти идеальном счете?

Нит Тёмный Абсол
источник
ирония в том, что загрузка этого скриншота занимает много времени :) На самом деле, для меня скриншот так и не загрузился
Anupam
@ Anupam Вероятно, был удален. Prntscr не совсем предназначен для постоянству, и я не ожидал , что этот вопрос будет довольно так популярен.
Niet the Dark Absol
да, все хорошо, был только легкий комментарий
Anupam

Ответы:

182

Ранее был задан связанный вопрос: что такое «содержание выше всех» в Google Pagespeed?

Во-первых, вы должны заметить, что это все о « мобильных страницах ».
Поэтому, когда я правильно истолковал ваш вопрос и скриншот, то это не для вашего сайта!

Напротив, выполнение некоторых вещей, рекомендованных Google в своих рекомендациях, будет хуже, чем лучше для «обычных» веб-сайтов.
И не все, что исходит от Google, является «святым Граалем» только потому, что оно исходит от Google. И сами они не являются хорошим примером для подражания, если вы посмотрите на их HTML-разметку.

Лучший совет, который я могу вам дать:

  • Установите ширину и высоту заменяемых элементов в вашем CSS, чтобы браузер мог размещать элементы без необходимости ждать замененного содержимого!

Кроме того, почему вы используете разные файлы CSS, а не только один?
Дополнительный запрос хуже, чем небольшой объем данных. И после первого запроса файл CSS все равно кэшируется.

Вещи, о которых всегда нужно заботиться:

  • максимально сократить количество запросов
  • сохраняйте общий вес страницы как можно ниже

И не ломайте голову над тем, как получить 100% инструмента Google PageSpeed ​​Insights ...! ;-)

Дополнение 1: Вот страница, на которой Google показывает нам, что они рекомендуют для оптимизации доставки CSS .

Как уже было сказано, я не думаю, что это ни реалистично, ни имеет смысл для «нормального» сайта! Потому что, в основном, когда у вас адаптивный веб-дизайн, наиболее вероятно, что вы используете медиа-запросы и другие стили макета. Так что, если вы не собираетесь загружать свой CSS первым и блокировать его, вы получите FOUT ( Flash из Unstyled Text ). Я действительно не верю, что это «лучше», чем хотя бы еще несколько миллисекунд для рендеринга страницы!

Imho Google начинает новую «шумиху» (когда я смотрю на все вопросы об этом здесь, на Stackoverflow) ...!

Netsurfer
источник
9
Отличный ответ. Беда в том, что Google, кажется, наказывает вас, если у вас медленная страница. Следовательно, они принуждают вас придерживаться их идей, будь они великими или совершенно глупыми. :(
Стив Хорват
10
@Netsurfer не все, что исходит от Google, это "Святой Грааль" LOL. Я чесал голову, чтобы достичь 100, но остановился на 92 после прочтения этого комментария.
kiranking
44
Вам следует больше подчеркнуть тот факт, что Google не придерживается своих собственных предложений .
Мистер Смит
2
Дополнительные запросы станут меньше проблем с HTTP / 2 и SPDY из Википедии. «Дополнительные улучшения производительности в первом проекте HTTP / 2 (который был копией SPDY) происходят благодаря мультиплексированию запросов и ответов, чтобы избежать головной боли. проблема блокировки строк в HTTP 1 (даже при использовании HTTP-конвейеризации), сжатие заголовков и расстановка приоритетов запросов. "
RationalDev любит GoFundMonica
3
пытался поднять мою страницу с 72 мобильных и 80 настольных компьютеров, но имел ту же проблему. Я отказываюсь размещать свой CSS где-то ниже и, возможно, ухудшать пользовательский опыт, показывая FOUT!
publicknowledge
14

Как я получил 99/100 на Google Page Speed ​​(для мобильных устройств)

TLDR: сожмите и вставьте весь свой сценарий CSS между вашими <style></style>тегами.


Я преследовал этот неуловимый счет 100/100 в течение недели. Как и вы, последним оставшимся элементом было устранение «блокирования рендеринга CSS для содержимого, превышающего фолд».

Конечно, есть легко решить ?? Нет. Я опробовал решение loadCSS группы Filament . Слишком много .js на мой вкус.

Как насчет asyncатрибутов для CSS (например, JS)? Их не существует

Я был готов сдаться. Затем меня осенило. Если связывание скрипта блокировало рендеринг, что если я вместо этого вложил весь CSS в голову. Таким образом, было нечего блокировать.

Казалось абсолютно НЕПРАВИЛЬНЫМ встраивать 1263 строки CSS в мой тег стиля. Но я обернулся. Я сжал его (и префикс) сначала с помощью:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Смотрите пакет NPM postcss .

Теперь это была всего лишь одна длинная линия без космического пространства. Я поместил CSS в <style>your;great-wall-of-china-long;css;here</style>теги на моей домашней странице. Затем я пересмотрел информацию о скорости страницы.

Я перешел с 90/100 на 99/100 на мобильном телефоне !!!

Это идет против всего во мне (и, вероятно, вы). Но это решило проблему. Я просто сейчас использую его на своей домашней странице и включаю сжатый css программно через PHP include.

YMMV (ваш пробег может отличаться) в зависимости от длины вашего css. Google может перебить вас за слишком большое содержание. Но не думай; тест!

Ноты

  1. Пока что я делаю это только на своей домашней странице, поэтому люди получают БЫСТРЫЙ рендер на моей самой важной странице.

  2. Ваш CSS не будет кэширован. Я не слишком беспокоюсь, хотя. Когда они попадут на другую страницу моего сайта, файл .css будет кэширован (см. Примечание 1).

elbowlobstercowstand
источник
4
Спасибо за вашу преданность делу и исследования, однако я лично не буду мечтать сделать это: D
Niet the Dark Absol
2
Так какой смысл, кроме попытки набрать очки, которые на самом деле ничего не помогут?
LarryBud
Хорошо, что ваш рейтинг выше, но теперь каждая страница на вашем сайте будет иметь больший вес. Тем не менее, хорошая находка.
EdwardM
@EdwardM Спасибо! Смотрите мою заметку 2 в посте. Как только они попадают на вторую страницу, css кэшируется, и проблема с весом исчезает.
elbowlobstercowstand
1
@LarryBud Точка с более высоким счетом? Больше денег для меня. Чем выше мой сайт в Google, тем больше вероятность, что кто-то нажмет на него и станет клиентом. Поскольку Google использует скорость страницы для определения рейтинга , я решил улучшить свой счет.
elbowlobstercowstand
9

Несколько советов, которые могут помочь:

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

  • Я видел следующую презентацию на jQueryUK о «скрытых секретах» в Googe Chrome (Canary) Dev Tools: DevTools Может это сделать . Проверьте разделы на время до первой краски , перекраски и дорогостоящего CSS.

  • Кроме того, если вы используете загрузчик, такой как requireJS, вы можете взглянуть на один из плагинов загрузчика CSS, называемый require-CSS , который использует CSSO - оптимизатор, который также выполняет структурную оптимизацию, например. объединение блоков с одинаковыми свойствами. Я использовал его несколько раз, и он может сохранить довольно много CSS от случая к случаю.

Вне вопроса: я второй @Enzino в создании спрайта для всех маленьких иконок, которые вы загружаете. Размеры файлов настолько малы, что на самом деле не требуется обходной сервер для каждого значка. Также имейте в виду общее количество одновременных запросов http, которые может выполнить браузер. Таким образом, запросы на большее количество маленьких значков также «блокируют рендеринг». Хотя пустая страница сравнивается с вашей, мне нравится, например, как duckduckgo загружается.

частый
источник
Кажется, duckduckgo также не заботится о своей странице, проверьте здесь
Chetabahana
6

Пожалуйста, посмотрите на следующую страницу https://varvy.com/pagespeed/render-blocking-css.html . Это помогло мне избавиться от «Render Blocking CSS» . Я использовал следующий код для удаления « Render Blocking CSS ». Теперь в Google Speed ​​Insight я не получаю проблемы, связанные с блокировкой рендеринга CSS.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>
Амук Саксена
источник
1
Когда я использую упомянутую функцию, она уменьшает оценку PageSpeed. Я написал следующую функцию: jsfiddle.net/kvfzbxxo Можете ли вы мне помочь?
Аршо
Я реализовал эту же функцию для следующего URL- адреса, и, пожалуйста, посмотрите на скорость здесь " whitecashback.in ". Вы можете посмотреть исходный URL-адрес и найти функцию "loadCSS" в нижнем колонтитуле. Это поможет вам понять, как я реализовал код. Скорость страницы должна увеличиться, поскольку css загружается после страницы.
Амук Саксена
Я использовал этот код: jsfiddle.net/sbpa1hun. Теперь CSS не загружается на веб-сайте.
Аршо
Я упомянул, что после добавления этого кода: jsfiddle.net/sbpa1hun, который используется на вашем сайте, мой сайт потерял все стили. Это увеличивает скорость страницы, но CSS больше не работает! Можете ли вы помочь мне, как? Я получаю около 40 в скорости страницы. Но, добавив ваш код, я получил около 70. Но не смог заставить работать CSS.
Аршо
1
Если вы пытаетесь сделать это в jsfiddle, то это не сработает, попробуйте этот код на своем веб-сайте, jsfiddle заблокирует загрузку CSS для внешних веб-сайтов. Потому что вы загружаете CSS из внешних источников, используя JavaScript. Поэтому, пожалуйста, попробуйте сделать это на вашем сайте. Также попробуйте включить файлы jquery, они отсутствуют в вашем скрипте. После включения файлов JS, это может работать. Также обратите внимание, что https-сайты могут работать в jsfiddle. Вы получаете эту ошибку: «Заблокирована загрузка смешанного активного контента». Вы должны решить это в первую очередь.
Амук Саксена
4

Я тоже боролся с этим новым показателем скорости страниц.

Хотя я не нашел практического способа вернуть мой счет до 100%, есть несколько вещей, которые я нашел полезными.

Объединение всех CSS в один файл очень помогло. Все мои сайты вернулись до% 95 -% 98.

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

Glipt
источник
2
Smashing журнал имеет 100% баллов PageSpeed тест developers.google.com/speed/pagespeed/insights/...
Мо
1

Оптимальным решением для этого в 2019 году является HTTP / 2 Server Push .

Вам не нужны какие-либо хакерские решения на JavaScript или встроенные стили. Однако вам нужен сервер, поддерживающий HTTP 2.0 (любая современная версия сервера), который сам требует, чтобы ваш сервер запускал SSL. Однако с Let's Encrypt нет никаких причин не использовать SSL в любом случае.

Мой сайт https://r.je/ имеет оценку 100/100 для мобильных и настольных компьютеров.

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

Вы можете использовать HTTP / 2 push, установив заголовок Link.

Пример Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Для NGINX вы можете добавить заголовок к вашему тегу местоположения в конфигурации сервера:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

С этим установленным заголовком браузер получает HTML и CSS одновременно, что мешает CSS блокировать рендеринг.

Вы захотите настроить его так, чтобы CSS отправлялся только при первом запросе, но заголовок Link является наиболее полным и наименее хакерским решением «Устранить блокировку рендеринга Javascript и CSS».

Для подробного обсуждения посмотрите мой пост здесь: Устраните блокировку рендеринга CSS с помощью HTTP / 2 Push

Том Б
источник
Возможно, я неправильно понял, но не заставит ли сервер Push Push отправлять CSS каждый раз при загрузке страницы, а не один раз до ее кэширования?
Niet the Dark Absol
Да, есть несколько методов, таких как куки, которые могут помочь избежать этого. Взгляните на раздел по выборочному толканию здесь: nginx.com/blog/nginx-1-13-9-http2-server-push
Том Б,
0

Подумайте об использовании пакета для автоматической генерации встроенных стилей из ваших CSS-файлов. Хорошим является Grunt Critical или Critical css для Laravel .

tsveti_iko
источник
-1

Привет для jQuery Вы можете использовать только так

Используйте только async и type = "text / javascript"

Раджив
источник