Pull to refresh

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

Reading time 2 min
Views 66K
Многие из Вас наверное пользовались замечательным сервисом от 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.
Tags:
Hubs:
+1
Comments 30
Comments Comments 30

Articles