Картинка для привлечения внимания
А дело-то за маленьким.
Итак, результаты моего теста.
Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):
- скорость для мобильных — 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.
Комментарии (28)
vedenin1980
07.09.2015 15:32+1А также мы не забываем, что все-таки мы не решили проблему описанную выше:
колько они весили в файле, столько же весят и в коде!
Именно её вы и решили, был совет убрать загрузку 3-х ресурсов css и встроить их прямо в HTML, вы это сделали и получили оценку выше. Про сократить размер это вы уже сами придумали.
Так что это не баг и не фича, а самое обычное правильное поведение анализатора.
AlekseyGulyaev
07.09.2015 16:00Про решение данной проблемы описал выше
Про сократить размер, я имел ввиду сделать стили одной строчкой (я просто в во втором файле вставил скопированный несжатый код следобвало сжать, т.е. убрать пробелы, табуляции, переносы и т.п.), что не является целью данной статьи.
stardust_kid
07.09.2015 15:48+1Имхо, баг. Сам же Гугл продвигает SPDY и HTTP/2, которые позволяют не напрягаться по поводу лишних запросов. При это вставлять стиль в header просто больший напряг при поддержке.
maaGames
07.09.2015 16:16+1Напряг, только если не использовать CMS. При использовании любой CMS это уже не напряг, а вопрос целесообразности. Если css большой и используется в куче файлов, то лучше уж один раз его загрузить и дальше он будет браться из кэша, чем каждый раз по новой бОльший html файл скачивать. Так что тут надо смотреть по ситуации. Ну и по возможностям CMS.
А если верстать вручную, то тут однозначно отдельный файл. Или однозначно inline, если страниц одна-две. Всё ОЧЕНЬ однозначно.)stardust_kid
07.09.2015 16:35Хорошо было в 2004 — верстанул табличкой, вставил стили inline, добавил однопиксельных гифок… Какой там css.
maaGames
07.09.2015 16:41+4Внукам будем рассказывать, что в стародавние времена читать новости в интернетах можно было на слабеньких четырёх-ядерных компьютерах с 8 гигабайтами оперативки и одной дискретной видеокартой и практически без тормозов, а они будут улыбаться и считать нас старыми пердунами, которые опять выдумывают какие-то небылицы.
michaelmashay
07.09.2015 16:30Извините, но что это здесь делает? При вставке стилей непосредственно в код у вас быстрее начинается рендеринг страницы. Это рекомендация, и вообще хороший тон для фронтендера — выделить CriticalPath-стили (по-крайней мере первый viewport и mobile) и вставить их непосредственно на страницу. Анализатор детектит, что страница рендерится быстрее — отсюда и подкинул баллов.
AlekseyGulyaev
07.09.2015 16:47http://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
Норма?
Баг?
Фича?michaelmashay
07.09.2015 17:10Ну на момент моего коммента не было теста с большим файлом. Но давайте не забывать, что у вас на сайте сжатие — а текст ой как неплохо жмется. Так что нагрузили Вы лишь браузер — что тоже нехорошо, и анализатор обязан бы это подмечать.
AlekseyGulyaev
07.09.2015 17:20Значит баг? анализатор же показывает каждую мелочь для мобильного, что кнопки близко, почему бы ему не показывать что у Вас много стилей в head'ере?
michaelmashay
07.09.2015 18:15Да, я же написал, что на это нужно бы ругаться. Но в принципе, даже мой слабый телефон быстро проглотил Вашу страницу, а я до теста имел опасения. Реально-то передается всего порядка 40Кб, запросов на другие ресурсы нет — все очень быстро. Так что как баг зарепортить можно, но его врядли примут.
vedenin1980
07.09.2015 18:21Подозреваю, браузер легко понимает что стили одни и те же и просто их игнорирует. Насколько помню если браузер встречает стиль с тем же названием, он имеет право просто взять последний, забивая на остальные, поэтому особых тормозов и не будет, парсинг стилей вещь достаточно быстрая.
saggid
07.09.2015 17:58+2У меня не выходит достигнуть 100/100 банально потому, что PageSpeed ругается на те файлы, до которых у меня нет возможности получить доступ: всякие расшаривалки, агент newrelic, счетчики mailru и liverinternet и, что самое забавное, гугл ругается на то, что файл ga.js с их же домена (google-analytics.com) является недостаточно сжатым)
Плюс, я не могу убрать из шапки страницы некоторый JS-код, так как он необходим для того, чтобы в контенте страницы могли успешно выполниться некоторые небольшие скрипты. Просто привык писать сайт таким образом, не вижу здесь чего-то нереально страшного… Ну гугл меня за это не очень любит.
Итого, результат одного из моих самых важных сайтов — 73/100, по всем этим причинам.
Goodkat
07.09.2015 18:59Есть у вас доступ.
Всякие расшаривалки можно убрать, а код для них загружать только по запросу пользователя.
С остальным, думаю, аналогично.
Все привыкли говнокодить, а потом на смартфоне не дождёшься загрузки сайта.
DenimTornado
07.09.2015 19:14Пользователь, а вы хотите, чтобы я вам показал метрику и посчитал вас? А рекламу? А ссылочку на приложение? А вам может тогда вообще не показывать мой сайт? Не надо? Жаль…
nod
09.09.2015 11:41Используйте Google TAG Manager, чтобы все счетчики засунуть в один гугловый скрипт.
DeXPeriX
09.09.2015 14:43У меня 99 из 100 только потому, что:
Используйте кеш браузера для следующих ресурсов:
www.google-analytics.com/analytics.js (2 часа)
Google TAG Manager исправит эту ситуацию? Или так же кэшируется только на 2 часа?nod
09.09.2015 16:14Нет, он не кешируется вообще.
Он просто позволяет собрать весь сторонний ява-скрипт (счетчики) в один файл. Туда можно еще кучу всяких отслеживаний событий для аналитикса засунуть, код для A/B тестирования и прочее.
Обычно всякие SEO агентства просят его установить, чтобы потом спокойно добавлять/убирать ява-скрипт, не прибегая к разработчикам.
evkin
15.09.2015 21:16Ну по факту он слегка кешируется, по мнению того PageSpeed. Но проблему с внешними скриптами никуда не убирает:
Andchir
Не вижу бага.
Вы сделали точно по совету гугла, избавились от файла и встроили в код, теперь загружать отдельный файл (делать http запрос) не нужно.Для скриптов есть ещё атрибут async.
AlekseyGulyaev
Да, но я тестировал и с большим файлом CSS, размером большим, разница одна результат лучше, анализатор считает что все хорошо…
А на самом деле то отображаться контент начнет только лишь после загрузки всех стилей и время загрузки сократили на время http запроса, а для медленного интернета (мобильника все станет появляться позже).
Данная рекомендация говорит лишь о том, что поместите в самый верх лишь часть стилей, которые нужны для визуального отображения первоначальной стадии сайта (аналогично методу прогрессивного jpg), а все остальное вниз
Reposlav
developers.google.com/speed/docs/insights/OptimizeCSSDelivery — вот отсюда
AlekseyGulyaev
Да я это видел, но игнорирование и вставка всего кода говорит о том, что анализатор не проверяет css в коде, к какому контенту он принадлежит… правильно комментарий ниже — в топе только стили страницы, которые на первом экране пользователя.
AlexGx
Скорее багофича, по идее в топе должны быть только стили страницы, которая видна до того, как пользователь начнет скроллить.
sHinE
Да, для генерации этого css есть уже много разных средств — github.com/addyosmani/critical-path-css-tools
Вчера только оптимизировал сайт для pagespeed, получил 100/100.