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.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.