Ответ 1

Ранее задавался связанный с этим вопрос: Что такое "надводный контент" в Google Pagespeed?

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

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

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

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

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

То, о чем нужно всегда заботиться, это:

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

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

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

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

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

Ответ 2

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

TL;DR: сжимайте и вставляйте весь css script между тегами <style></style>.

Я преследовал эту неуловимую оценку 100/100 в течение примерно недели. Как и вы, последним оставшимся элементом было исключение "render-blocking css для выше содержимого складки".

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

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

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

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

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

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

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

Это противоречит всему во мне (и, вероятно, вам). Но он РЕШИЛ проблему. Я просто использую его на своей домашней странице, и в том числе сжатый css программно с помощью PHP.

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

Примечания

• Я делаю это только на своей домашней странице, поэтому люди получают визуализацию FAST на моей самой важной странице.

• Ваш css не будет кэшироваться. Я не слишком волнуюсь. Во-вторых, они нажимают другую страницу на моем сайте,.css будут кэшироваться (см. Примечание 1).

Ответ 3

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

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

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

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

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

Ответ 4

Пожалуйста, смотрите на следующей странице https://varvy.com/pagespeed/render-blocking-css.html. Это помогло мне избавиться от "Render Blocking CSS" . Я использовал следующий код, чтобы удалить " Render Blocking CSS". Теперь в представлении скорости страницы google я не получаю проблему, связанную с блокировкой рендеринга 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 not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Ответ 5

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

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

Сочетание всех css в один файл помогло много. Все мои сайты вернулись к% 95 -% 98.

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

Ответ 6

Рассмотрите возможность использования пакета для автоматического создания встроенных стилей из ваших файлов css. Хороший Grunt Critical или Критический css для Laravel.