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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как я получил 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).

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

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

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

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

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

Пожалуйста, посмотрите на следующую страницу 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>

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

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

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

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

Оптимальным решением для этого в 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

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

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

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