100 из 100 в Google PageSpeed Insights (Баг или фича)?

Многие из Вас наверное пользовались замечательным сервисом от Google: PageSpeed Insights? Хотите получить заветные 100 из 100?

image
Картинка для привлечения внимания

А дело-то за маленьким.

Итак, результаты моего теста.


Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):
  • скорость для мобильных — 79/100;
  • скорость для компьютера — 93/100;

Неплохо да?

Жалуется на:
Исправьте обязательно:
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 3. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Делаем небольшие махинации. Переносим стили из файла в код:
Было:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <title></title>  
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

Стало:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
    /* и другие стили */
  </style>
  <title></title>  
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

И — ура! — у нас результаты выше (ссылка на сайт):
  • скорость для мобильных — 99/100;
  • скорость для компьютера — 99/100;

И жалуется только на:
Исправьте по возможности:
Сократите HTML
Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.
Но это проблему можно решить сжатием кода. К данной теме не относиться.
А также мы не забываем, что все-таки мы не решили проблему описанную выше:
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Сколько они весили в файле, столько же весят и в коде!

А теперь самый главный вопрос: Баг или фича?
Спасибо!

UPD 07.09.2015 16:55: Раздул стили на сайте (+сжал css) до 5 мегабайт, а результат тот же даже из-за сжатия лучше 100 из 100.
Share post

Similar posts

Comments 30

    +2
    Не вижу бага.
    Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов.
    Вы сделали точно по совету гугла, избавились от файла и встроили в код, теперь загружать отдельный файл (делать http запрос) не нужно.
    Для скриптов есть ещё атрибут async.
      +2
      Да, но я тестировал и с большим файлом CSS, размером большим, разница одна результат лучше, анализатор считает что все хорошо…
      А на самом деле то отображаться контент начнет только лишь после загрузки всех стилей и время загрузки сократили на время http запроса, а для медленного интернета (мобильника все станет появляться позже).
      Данная рекомендация говорит лишь о том, что поместите в самый верх лишь часть стилей, которые нужны для визуального отображения первоначальной стадии сайта (аналогично методу прогрессивного jpg), а все остальное вниз
        0
        Если внешние ресурсы CSS имеют малый объем, их можно вставить непосредственно в документ HTML. Подобное встраивание позволяет браузеру продолжать загрузку страницы. Обратите внимание: если файл CSS слишком велик, после его встраивания PageSpeed Insights может вас предупредить, что верхняя часть страницы имеет слишком большой объем (правило приоритета видимого контента). Если файл CSS слишком велик, вам необходимо найти код CSS, отвечающий за контент в верхней части страницы и встроить его в HTML, отложив загрузку остальных стилей.

        developers.google.com/speed/docs/insights/OptimizeCSSDelivery — вот отсюда
          0
          Да я это видел, но игнорирование и вставка всего кода говорит о том, что анализатор не проверяет css в коде, к какому контенту он принадлежит… правильно комментарий ниже — в топе только стили страницы, которые на первом экране пользователя.
          0
          Скорее багофича, по идее в топе должны быть только стили страницы, которая видна до того, как пользователь начнет скроллить.
            0
            Да, для генерации этого css есть уже много разных средств — github.com/addyosmani/critical-path-css-tools
            Вчера только оптимизировал сайт для pagespeed, получил 100/100.
              0
              за ссылочку спасибо
        +1
        А также мы не забываем, что все-таки мы не решили проблему описанную выше:
        колько они весили в файле, столько же весят и в коде!

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

        Так что это не баг и не фича, а самое обычное правильное поведение анализатора.
          0
          Про решение данной проблемы описал выше
          Про сократить размер, я имел ввиду сделать стили одной строчкой (я просто в во втором файле вставил скопированный несжатый код следобвало сжать, т.е. убрать пробелы, табуляции, переносы и т.п.), что не является целью данной статьи.
          +1
          Имхо, баг. Сам же Гугл продвигает SPDY и HTTP/2, которые позволяют не напрягаться по поводу лишних запросов. При это вставлять стиль в header просто больший напряг при поддержке.
            +1
            Напряг, только если не использовать CMS. При использовании любой CMS это уже не напряг, а вопрос целесообразности. Если css большой и используется в куче файлов, то лучше уж один раз его загрузить и дальше он будет браться из кэша, чем каждый раз по новой бОльший html файл скачивать. Так что тут надо смотреть по ситуации. Ну и по возможностям CMS.
            А если верстать вручную, то тут однозначно отдельный файл. Или однозначно inline, если страниц одна-две. Всё ОЧЕНЬ однозначно.)
              0
              Хорошо было в 2004 — верстанул табличкой, вставил стили inline, добавил однопиксельных гифок… Какой там css.
                +4
                Внукам будем рассказывать, что в стародавние времена читать новости в интернетах можно было на слабеньких четырёх-ядерных компьютерах с 8 гигабайтами оперативки и одной дискретной видеокартой и практически без тормозов, а они будут улыбаться и считать нас старыми пердунами, которые опять выдумывают какие-то небылицы.
            0
            Извините, но что это здесь делает? При вставке стилей непосредственно в код у вас быстрее начинается рендеринг страницы. Это рекомендация, и вообще хороший тон для фронтендера — выделить CriticalPath-стили (по-крайней мере первый viewport и mobile) и вставить их непосредственно на страницу. Анализатор детектит, что страница рендерится быстрее — отсюда и подкинул баллов.
              0
              http://alex.ru.net/sitebigfile.html (Файл 5 Мегабайт, стили продублированы 700 раз, которые занимают большую часть веса страницы, + сжал его)
              А тест как всегда 100 из 100:
              https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Falex.ru.net%2Fsitebigfile.html

              Норма?
              Баг?
              Фича?
                0
                Ну на момент моего коммента не было теста с большим файлом. Но давайте не забывать, что у вас на сайте сжатие — а текст ой как неплохо жмется. Так что нагрузили Вы лишь браузер — что тоже нехорошо, и анализатор обязан бы это подмечать.
                  0
                  Значит баг? анализатор же показывает каждую мелочь для мобильного, что кнопки близко, почему бы ему не показывать что у Вас много стилей в head'ере?
                    0
                    Да, я же написал, что на это нужно бы ругаться. Но в принципе, даже мой слабый телефон быстро проглотил Вашу страницу, а я до теста имел опасения. Реально-то передается всего порядка 40Кб, запросов на другие ресурсы нет — все очень быстро. Так что как баг зарепортить можно, но его врядли примут.
                      0
                      Подозреваю, браузер легко понимает что стили одни и те же и просто их игнорирует. Насколько помню если браузер встречает стиль с тем же названием, он имеет право просто взять последний, забивая на остальные, поэтому особых тормозов и не будет, парсинг стилей вещь достаточно быстрая.
              0
              Лично мне больше греет душу показатель «Удобство для пользователей 100/100»
                +3
                Эх.
                image
                  +2
                  У меня не выходит достигнуть 100/100 банально потому, что PageSpeed ругается на те файлы, до которых у меня нет возможности получить доступ: всякие расшаривалки, агент newrelic, счетчики mailru и liverinternet и, что самое забавное, гугл ругается на то, что файл ga.js с их же домена (google-analytics.com) является недостаточно сжатым)

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

                  Итого, результат одного из моих самых важных сайтов — 73/100, по всем этим причинам.
                    0
                    Есть у вас доступ.
                    Всякие расшаривалки можно убрать, а код для них загружать только по запросу пользователя.
                    С остальным, думаю, аналогично.

                    Все привыкли говнокодить, а потом на смартфоне не дождёшься загрузки сайта.
                      0
                      Пользователь, а вы хотите, чтобы я вам показал метрику и посчитал вас? А рекламу? А ссылочку на приложение? А вам может тогда вообще не показывать мой сайт? Не надо? Жаль…
                        0
                        Счётчик по запросу пользователя? Это как?
                        0
                        Используйте Google TAG Manager, чтобы все счетчики засунуть в один гугловый скрипт.
                          0
                          У меня 99 из 100 только потому, что:
                          Используйте кеш браузера для следующих ресурсов:
                          www.google-analytics.com/analytics.js (2 часа)

                          Google TAG Manager исправит эту ситуацию? Или так же кэшируется только на 2 часа?
                            0
                            Нет, он не кешируется вообще.

                            Он просто позволяет собрать весь сторонний ява-скрипт (счетчики) в один файл. Туда можно еще кучу всяких отслеживаний событий для аналитикса засунуть, код для A/B тестирования и прочее.

                            Обычно всякие SEO агентства просят его установить, чтобы потом спокойно добавлять/убирать ява-скрипт, не прибегая к разработчикам.
                              0
                              Ну по факту он слегка кешируется, по мнению того PageSpeed. Но проблему с внешними скриптами никуда не убирает:
                              image
                          0
                          На момент запуска новой версии инструмента был опрос, какие внешние скрипты надо убрать (аналитика, метрика и т.д.), и что собрали, было убрано. Сейчас наверное что-то заглючило, что снова эти скрипты всплыли в проверке PSI и SearchPanel. Не стоит обращать внимания.

                          Only users with full accounts can post comments. Log in, please.