Многие из Вас наверное пользовались замечательным сервисом от Google: PageSpeed Insights? Хотите получить заветные 100 из 100?
Картинка для привлечения внимания
А дело-то за маленьким.
Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):
Неплохо да?
Жалуется на:
Было:
Стало:
И — ура! — у нас результаты выше (ссылка на сайт):
И жалуется только на:
А также мы не забываем, что все-таки мы не решили проблему описанную выше:
А теперь самый главный вопрос: Баг или фича?
Спасибо!
UPD 07.09.2015 16:55: Раздул стили на сайте (+сжал css) до 5 мегабайт, а результат тот же даже из-за сжатия лучше 100 из 100.
Картинка для привлечения внимания
А дело-то за маленьким.
Итак, результаты моего теста.
Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):
- скорость для мобильных — 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.
