Немного о PageSpeed Insights

У этой статьи сложная судьба. Она началась писаться уже недели две назад (как раз, как только вышло обновление), а закончилась только что. Заложником прокрастинации или просто рабочей занятости была она — вопрос интересный.

Когда Google обновляет свой сервис — это уже вызывает интерес. А когда вопрос встает о таком сервисе пузомерке, как PageSpeed Insights — это интересно вдвойне.

Ну я и проверил. И получил оценку для главной страницы — 91 и 100 баллов (для мобильных устройств и ПК соответственно), что оценивается самим сервисом, как высокая скорость загрузки. Хочу отметить сразу, что эта оценка справедлива не для всех страниц — в зависимости от того, сколько скриптов, медиафайлов etc содержится на вашей странице и тормозит загрузку, тем меньше будет оценка.

Я проверил несколько страниц, и на некоторых оценка производительности была ниже 60 баллов, что, конечно, несколько опечаливает взор моего внутреннего оптимизатора. Но об этом чуть ниже.

Кстати, не обязательно использовать онлайн-сервис, на хромных браузерах этот инструмент внедрён: открываем инструменты разработчика и там переключаемся на вкладку Audits:

Там есть несколько параметров — что мы хотим замерять, а кроме того, можно почистить кэши, чтобы замерить скорость, будто мы оказываемся на странице впервые.

Что снижает скорость и отнимает баллы

Итак, первое, что предложил мне PageSpeed Insights — это оптимизировать изображения, заменив на более новые форматы. Да, на моем блоге используются только старые форматы изображений — png и jpg. Чуяло мое сердце — надо было использовать svg.

Вместо старых добрых форматов Google предложил мне современные форматы изображений, которые используют «более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика». В этом качестве предлагаются форматы JPEG 2000, JPEG XR и WebP.

Не мудрствуя лукаво, я немедленно открыл caniuse и посмотрел. Результаты отличные: JPEG 2000 и JPEG XR показали соответственно 13% и ~5% процентов поддержки браузерами, и только WebP показал более-менее приемлемые 72% поддержки. В общем, если ваша аудитория состоит из прогрессивной общественности, пользующейся Edge или Safari, то форматы, конечно, можно использовать.

Учитывая, что Microsoft решился пилить новый браузер под Chromium’ом, то мы сужаемся только до Safari. Но это не точно.

Если вы, равно как и я, используете jQuery или  WordPress (даже последней на момент написания статьи, пятой версии), то вы скорее всего получите сообщение о том, что его использование вредит скорости загрузки сайта. И вообще, в двубортном уже давно никто не воюет.

Я слышал много различных мнений относительно библиотеки jQuery — и конструктивной критики, и заслуженной похвалы — однако с трудом могу согласиться, что скрипт весом в 30 килобайт ну прямо-таки критично загружает сайт. Хотя, с помощью него можно навесить столько спецэффектов, что даже Майкл Бей перекрестится, а браузер вылетит с ошибкой из-за нехватки оперативной памяти.

Не могу не упомянуть, что окончательную оценку влияют также:

• iframe с других сайтов, поскольку они увеличивают количество узлов DOM (рекомендуется не более 1500);
• шрифты, отличные от системных (с уважением, ваш Капитан) — если используем шрифты, то нужно особым способом настроить 
  отображение шрифтов CSS (подробнее о способе написано здесь);
• метрики от Яндекса.

Влияют ли метрики самого Google на скорость и баллы проверить не смог, ибо не пользуюсь. Но почему-то мне кажется, что можно получить интересные результаты.

Тест других сайтов

Как можно отказать в сатисфакции удовольствии интересе посмотреть, что покажет тест для других сайтов. Я подобрал несколько популярных сайтов и просто приведу список, баллы буду приводить для мобильных / компьютеров:

• Google — 95 и 100, хотя кто бы сомневался;
• Gmail — у меня показал 72 и 100, хотя в одном посте на Хабре ажно только 8 баллов получил сей сервис;
• Хабр — 74 и 60 баллов (и единственный случай в моей подборке, когда мобильная версия получает больший результат);
• ВКонтакте — 56 и 96 баллов (при этом имеем ввиду то, что это стартовая страница, которая предлагает залогиниться);
• Facebook — 72 и 98 баллов (также страница входа/регистрации);
• Госуслуги — 92 и 100 баллов, хотя контента там подгружается намного больше, чем в тех же ВКонтакте и Facebook;
• Яндекс — 90 и 99 баллов.

Некоторым сайтам Google выдавал оценку на основе результатов последних 30 дней — не один я тестировал сайты.

После чего можно с уверенностью утверждать, что мой сайт ещё быстро работает. И вообще жизнь отлична. Но на самом деле сравнивать такие разные сайты — крайне неразумно. Не делайте так.

В заключении

Выше я упоминал, что некоторые мои страницы в блоге получили оценки 60 и ниже (для мобильных устройств, что немаловажно). Т.е. инструмент Google считает, что страница работает со средней скоростью, хотя я несколько раз пробовал загружать страницы с разных устройств — грузится достаточно быстро, не заставляя утомительно долго ждать. Налицо расхождения в показаниях. 

В заключении хочу сказать, что сервис может дать более-менее объективную оценку качества оптимизации качества. Потому как 
JPEG 2000 и WebP — это конечно прогрессивно и модно, но не всегда подойдёт для конечного пользователя.

Вот случай из жизни — искал я референсы и поиск по картинкам выдал мне WebP. Хорошо, что есть инструменты под рукой и понимание того, что это за формат и почему на другом устройстве он не откроется. А вот если этого не знаешь, а картинка очень нужна, но ничего не работает — проклянешь все на свете.

Для того, чтобы приложить к отчёту для заказчика/проект-менеджера как независимую экспертизу, что всё отлажено и оптимизированно, PageSpeed Insights несомненно является хорошим инструментом.

Спасибо за внимание и до встречи на Веб-островах.