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

номер: сжать и вставить весь скрипт в CSS между <style></style> теги.

---

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

конечно, есть легко решить?? Нет. Я попробовал loadCSS группы нити накала решение. Слишком.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 без пробела. Я плюхнул css в <style>your;great-wall-of-china-long;css;here</style> теги на моей домашней странице. Затем я повторно проанализировал с помощью Page speed insights.

я пошел от 90/100 до 99/100 на мобильный!!!

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

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". Я использовал следующий код, чтобы удалить " рендер блокирует CSS". Теперь в google Page 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>

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

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

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

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

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