В списке проектов Google появился новый ресурс, предназначенный для владельцев сайтов и для разработчиков — https://testmysite.thinkwithgoogle.com. С его помощью можно будет определить, насколько мобильная версия сайта пригодна для использования с точки зрения трёх параметров, которые выставляет Google:
- Mobile-friendliness
- Mobile speed — скорость загрузки сайта на мобильных устройствах
- Desktop speed — скорость загрузки сайт на десктопе
Каждая оценка ранжирована в баллах от 0 до 100, а результат проверки Google предлагает отослать веб-мастеру с тем, чтобы он мог принять какие-то меры, если потребуется.
Результаты проверки мобильной версии Хабрахабра можно посмотреть на скриншоте:
В мобильной версии Geektimes дела со скоростью загрузки обстоят также далеко не лучшим образом:
После небольшого изучения сайта становится ясно, что поисковый гигант просто организовал удобный интерфейс к одному из своих API — PageSpeed Insights. Именно к нему дважды отправляется GET-запрос с двумя разными идентификаторами платформы: mobile и desktop. В связи с этим можно легко выяснить те критерии, по которым Google оценивает скорость загрузки сайта и его пригодность для мобильных устройств. Наибольшее внимание Google уделяет двум показателям.
- время загрузки верхней части страницы: общее время с момента запроса страницы до момента отображения ее верхней части в браузере
- время полной загрузки страницы: общее время с момента запроса страницы до ее полного отображения в браузере.
После клика на прямоугольник с результатами конкретного теста, можно посмотреть на те рекомендации, которые выдает Google для этого сайта. Судя по всему, у мобильной версии Geektimes проблемы с оптимизацией изображений и слишком много JavaScript, загрузки которого приходится дожидаться для рендеринга элементов. Правда, дела у m.google.com по версии самой Google тоже весьма далеки от совершенства:
Как сообщалось ранее, Netflix запустил крайне минималистичный инструмент для проверки скорости соединения с Интернетом fast.com.
Комментарии (23)
ExConfessor
02.06.2016 23:13>>Правда, дела у m.google.com по версии самой Google тоже весьма далеки от совершенства
Странно, а у google.com всё по 100.Utopia
03.06.2016 00:15интересно как это на ранг в SEO влияет. Смотрел по некоторым запросам в топе googlу сайты — у которых все очень плохо… что то вроде — 47-50-55. При этом в первой 10-ке выдачи по высокочастотным запросам.
ilyaplot
03.06.2016 09:49Не уверен, что сильно влияет, но пользователю гораздо комфортнее пользоваться быстрым сайтом, который нормально отображается на всех устройствах, что может существенно повысить конверсию.
Vit_Am
05.06.2016 19:26Те, которые в топе, заслужили его ещё задолго до всего этого мобильного ажиотажа. Не выкидывать же их теперь из-за кривой, либо вовсе отсутствующей мобильной версии.
Думаю, молодым сайтам может немного помочь быть чуть повыше в выдаче. Помнится google в конце 2015 года кичился тем, что сайты с адаптированным дизайном под мобилки ранжируются выше.
asmrnv777
05.06.2016 19:26Судя по скриншоту на m.google, на этот лендинг давненько забили (больно уж старый там андроид).
sumanai
03.06.2016 02:36+3> поисковый гигант просто организовал удобный интерфейс к одному из своих API — PageSpeed Insights
Чем он удобнее https://developers.google.com/speed/pagespeed/insights/? Видео на заднем фоне? Кучей анимации? Убитым строллом? Отсутствием перевода? Отсутствием подробных советов, как исправить найденные проблемы, и их собственно перечислением?
monah_tuk
03.06.2016 06:05Отсутствием подробных советов, как исправить найденные проблемы, и их собственно перечислением?
ну компрессию я у себя таки включил. В результате 99/68/76. Первый параметр, понятно, не поменялся, а вторые два выросли из района 50+. В рекомендациях теперь осталось:
Leverage browser caching
тут я слабо представляю что делать, да и открывается сайт достаточно шустро. Больше тупит после загрузки и отображения странички кнопочка… G+
Eliminate render-blocking JavaScript and CSS in above-the-fold content
это я даже понимаю куда копать нужно. Но, скорее всего, дольше разбираться придётся. Не веб-девелопер всё таки
и:
Optimize images
изображения скалируются встроенными средствами. Я даже не разбирался какими и как. Но они сохраняются в кеше, после чего отдаются от туда, пока не вытеснятся. Возможно не нравятся размеры… Переживу.
ilyaplot
03.06.2016 09:44+1Eliminate render-blocking JavaScript and CSS in above-the-fold content
Я пытался следовать этому совету. Сначала переместил абсолютно все js и css вниз html. Гуглу понравилось, но я совершенно был не готов видеть поплывшую страницу без css до полной загрузки. Кстати, вся страница резко меняется после загрузки основного css так, что за эпилептиков страшно становится. После переноса jquery и css в head у меня осталось пара легких скриптов и css внизу, что на скорость практически никак не влияло, но учитывая .ready вызовы, некоторый функционал сайта начинал работать несколько позже. Вообщем, совет полезный, но я не думаю, что ему можно следовать хотя бы в 50% случаев. Без него удавалось добиться около 95 очков из 100
Leverage browser caching
Здесь можно решить с помощью подключения Pagespeed к Nginx и соответствующе настроить. Дает неплохой эффект, но есть нюансы.monah_tuk
03.06.2016 10:22Ага, если бы ещё посещаемость бложика была такой, что эти изменения кто-то смог заметить :)
ilyaplot
03.06.2016 14:33У меня было около 10к забугорных хомячков в сутки. Никакой монетизации, кроме adsence там не было, но google после оптимизации стал дороже оценивать рекламу, доход подрос. При чем я делал оптимизацию непосредственно перед изменением порядка выдачи в поиске с учетом оптимизации для мобильных устройств. Это дало еще больше уникальных хомяков.
dmitriy_novikov
03.06.2016 10:58+1на самом деле эти рекомендации разбирались не один десяток раз, тема-то достаточно старая.
Demogor
05.06.2016 11:16В теории, вместо переноса вниз можно воткнуть async/defer — http://www.w3schools.com/tags/att_script_defer.asp, http://www.w3schools.com/tags/att_script_async.asp для js. Для css немного сложнее, но можно воспользоваться решениями типа https://github.com/filamentgroup/loadCSS. Это если совсем уж за рекомендациями PageSpeed гоняться.
bitver
03.06.2016 10:16Кто может объяснить? Есть сайт SPA (одностраничник на JavaScript), он проходит эти тесты как 100/100, 99/100, 99/100, а на картинках сбоку сам сайт не рендерится. Так вот вопрос: он реально мерил мой сайт или измерял лишь пустую страницу, которую он не понял?
dmitriy_novikov
03.06.2016 10:55всего скорее измерял пустую страницу.
упомянутый в «новости» сервис — всего лишь обертка к https://developers.google.com/speed/pagespeed/insights/, он если встречает, например, белый экран из-за php-ошибки — тоже выдает сайту 100/100.
MonsterGod
03.06.2016 12:40У google.ru результаты везде по 100 баллов, а вот у google.com — нет. Странно.
Utopia
PageSpeed — теперь и в новой упаковке! ©
ilyaplot
Совершенно верно, при чем я еще в прошлом году пользовался этим инструментом для оценки принадлежности сайта для мобильных устройств.
dmitriy_novikov
На самом деле там есть целых два разных инструмента — pagespeed и проверка удобства просмотра на мобильниках.
Но! Я об этом писал на хабре почти год назад!
Ждем новостей «гугл запустил google analytics», «гугл запустил сервис почты» и «гугл запустил поиск!».
facepalm.