Статья написана с целью помощи в спорах о зеленой зоне PageSpeed между клиентами и разработчиками, которые порождаются как минимум некорректной трактовкой результатов сервиса. Я постарался кратко и наглядно изложить суть.
Для начала развею миф о том, что оценка сервиса — это скорость загрузки.
Нет, это не скорость загрузки, это итоговый результат исходя из многих параметров, одним из которых является скорость.
Результаты продемонстрирую на примере анализа сайта midapro.shop
В ходе проверок сайта обратил внимание на очень интересный момент.
Сервис выдает все время разные результаты. Посмотрим на скриншоты ниже.
Через полминуты, запустил тест снова, ничего не меняя на сайте.
Согласно шкале, мобильный результат во втором случае почти догнал среднюю зону, чего совсем не скажешь о первом тесте.
Проведем тест еще раз.
Если компьютерная версия примерно стоит на месте, то результаты мобильной версии расходятся до неприличного. Уже после таких данных, лично у меня появились очень большие сомнения по поводу достоверности данных.
Но пойдем дальше, проверим, что скажет сам браузер о скорости загрузки.
Согласно данным в “Инспекторе разработчика” в браузере,
сайт прогрузился за 2.3 секунды, за 3.3 секунды завершилась загрузка всей страницы:
При том, что на странице 4 слайдера, крупные баннера и легкая анимация.
Посмотрим подробные данные от pagespeed.
Гуглу подошла наша скорость загрузки, даже не смотря на итоговую оценку, время загрузки отмечена зеленым цветом.
Однако для мобильной версии, он насчитал 8.7 секунд.
Откуда он берет эти данные, вопрос хороший, т.к. засекая реально скорость загрузки,
с телефона 8 секунд не удалось достичь никогда.
Далее перейдем к рекомендациям. Что советует сделать гугл, чтоб уменьшить скорость загрузки?
Мы видим перечисление шрифтов, файлов, отвечающих за внешний вид и за работу слайдеров и программной логики для взаимодействия пользователя с сайтом.
Попробуем выполнить рекомендацию.
Скриншоты сайта до изменений и после.
Думаю комментировать не нужно, что гугл рекомендует удалить жизненно важные файлы для сайта. Да, действительно они влияют на скорость загрузки, но по такой логике можно вообще сайт удалить, оставив лишь логотип и номер телефона.
Посмотрим как изменился результат после выполнения рекомендаций.
Стало конечно лучше, грузиться то теперь нечему, кроме картинок.
Но есть рекомендации и по ним.
Гугл рекомендует отказаться от формата jpg, но давайте рассмотрим его предложение. В этот раз не будем мучать сайт, а просто посмотрим на поддержку браузерами форматов, которые предлагаются. Воспользуемся сервисом caniuse.com
Как видно первый формат, не поддерживает ни один браузер, кроме Safari.
Второй формат не поддерживает вообще никто.
Третий формат не поддерживается в Safari.
О выводах судить только вам, лично у меня цензурных слов на эту рекомендацию вряд-ли хватит.
Далее гугл рекомендует снова что-то удалить..
… при этом еще ниже в разделе “Успешные аудиты” он говорит, что код CSS и JS оптимален и все лишнее удалено.
Это уже противоречие самому себе в открытом виде.
Под конец я вернул сайт в изначальное состояние и провел тест в четвертый раз:
На что похожи эти результаты снова сказать сложно… что-то между 2 и 3 тестом.
По тестированию скорости загрузки используя секундомер, через 3G, скорость загрузки сайта составляла 3 секунды.
Вывод
Тестировать через этот сервис можно, некоторые рекомендации могут быть полезными.
Ориентироваться на результат и уж тем более гнаться за зеленой зоной бесполезно.
Зеленая зона возможна при отказе от использования cms(движка/админки сайта), при отказе от использования видео, особенно youtube, и использования множества больших изображений.
Ну и напоследок, протестируем сайт компании Google.
nin-jin
Основная проблема вашего сайта описана тут:
wladislaw353 Автор
Это что-то меняет?)
ainu
Да. Выполняем это, выполняем рекомендации, но с умом (отдаём webp всем крома сафари и IE), избавляемся от moment (или хотя бы сжимаем), убираем анимацию при появлении — если не сейчас, то завтра гугл будет снимать свои фантики за это.
Новый Pagespeed не про скорость загрузки, как было раньше, а про скорость вообще. Не поверите, но выполнение яваскрипта (тупо компиляция без полезной нагрузки) занимает время. Особенно такого монстра, как moment. В вашем случае это 50%. Ну, и вёрстку попроще (по возможности).
Ну и библиотеки почистить. Вот зачем на списке туфель нужен bootstrap date time picker? (это риторический вопрос).
Alexufo
webp тоже не обязателен. Покрутил я его, повертел. Так себе формат, разве что как прозрачный jpg годится, а нормально сделанный jpg ему не уступает (pagespeed на такой не ругается) уж на градиентах так еще и выигрывает.
Особо бесит, что легче всего подсовывать webp через вебсервер по юзер-агенту, а если без этого, нативно, то если через picture можно задать браузеру на выбор файл, то, млять, для свойства background-image почему-то забыли сделать аналогично. Выходит толку от полумер нет никаких.
ExposedCat
У вас правда все фото на сайтах содержат по 3 формата фотографий, как рекомендует гугл?