Google PageSpeed Insights ужесточает требования
Почему о поисковой оптимизации стоит задумываться уже на этапе дизайна и какой онлайн-чат теперь хуже всего подходит для установки — исследование
Мы уже писали об оптимизации сайта и мобильном UX, а тут в начале апреля Гугл опять ужесточил свои требования к сайтам на мобилках — теперь вашему SEO-специалисту придётся за локоть себя укусить, чтобы получить заветные высокие баллы в Google PageSpeed Insights.
Если вы ни сном, ни духом, что за это сервис Гугла и почему по этому поводу вообще стоит заморачиваться — читайте далее. Расскажем, какие маркетинговые штуки и строчки в коде роняют ваш интернет-проект в глазах Гугла и что с этим можно сделать. Ради любопытства потестим всеми «любимые» онлайн-чаты и их влияние на скорость загрузки сайтов — сейчас такие онлайн-помощники есть почти в каждом проекте. Выберете себе наименее увесистый.
Если вы ни сном, ни духом, что за это сервис Гугла и почему по этому поводу вообще стоит заморачиваться — читайте далее. Расскажем, какие маркетинговые штуки и строчки в коде роняют ваш интернет-проект в глазах Гугла и что с этим можно сделать. Ради любопытства потестим всеми «любимые» онлайн-чаты и их влияние на скорость загрузки сайтов — сейчас такие онлайн-помощники есть почти в каждом проекте. Выберете себе наименее увесистый.
Что такое Google PageSpeed Insights (и почему его все боятся)
PageSpeed Insights (GPSI) — сервис Гугла для оценки скорости сайтов. Оценивает интернет-проекты по шкале от 0 до 100 и выдаёт рекомендации по улучшению там, где проседают какие-то параметры.
 |
 |
Метрик в GPSI всего шесть
За что отвечает каждая метрика:
Сайтоделы относятся к GPSI по-разному (можно десять раз проверить проект и получить разный результат с разбегом в ± 15 баллов). Но Гуглу как-то всё равно — скорость сайта согласно сервису влияет на рейтинг в поисковой выдаче, поэтому для большинства владельцев интернет-проектов и SEO-специалистов эта оценка становится чуть ли не самой важной.
Что влияет на скорость в PageSpeed Insights
Общий объём скриптов JavaScript
Даже если на десктопе у вас всё хорошо, для сайта на мобилках совсем другие правила: 1 секунда ожидания работы скриптов на ПК там превращается во все 5. Самое грустное — какой именно скрипт тормозит загрузку страницы, сразу непонятно: приходится копаться.
Различные счётчики поведения пользователей на сайте (даже Яндекс.Метрика из-за её вебвизора), которые очень любят SEO-специалисты и маркетологи, подтягивают за собой множество скриптов — из-за этого страница утяжеляется и общая оценка сайта в GPSI падает (уходит в жёлтую или красную зону).
Добавление видео Ютуба через <iframe>
Даже если само видео не проигрывается при загрузке страницы, оно всё равно её утяжеляет. А если таких видео несколько, то можно сразу отнимать 30−40 баллов от общего показателя скорости загрузки.
Даже если на десктопе у вас всё хорошо, для сайта на мобилках совсем другие правила: 1 секунда ожидания работы скриптов на ПК там превращается во все 5. Самое грустное — какой именно скрипт тормозит загрузку страницы, сразу непонятно: приходится копаться.
Различные счётчики поведения пользователей на сайте (даже Яндекс.Метрика из-за её вебвизора), которые очень любят SEO-специалисты и маркетологи, подтягивают за собой множество скриптов — из-за этого страница утяжеляется и общая оценка сайта в GPSI падает (уходит в жёлтую или красную зону).
Добавление видео Ютуба через <iframe>
Даже если само видео не проигрывается при загрузке страницы, оно всё равно её утяжеляет. А если таких видео несколько, то можно сразу отнимать 30−40 баллов от общего показателя скорости загрузки.
К слову, у самого Ютуба показатели тоже очень средненькие
Плагины и анимации
Многие плагины могут заметно замедлить работу сайта и занизить показатели GPSI. Например — слайдеры, которые так любят дизайнеры. Если их на странице больше двух, вы почти гарантированно попадёте в желтую зону. Ещё хуже дела обстоят, если по дизайн-концепции у каждого из 20 товаров на странице каталога есть свой слайдер с тремя картинками внутри, сменяющимися по ховеру. Если один такой слайдер требует, скажем, 0,3 секунды на прогрузку, то время загрузки всей страницы каталога смело можно умножать на 20.
Многие плагины могут заметно замедлить работу сайта и занизить показатели GPSI. Например — слайдеры, которые так любят дизайнеры. Если их на странице больше двух, вы почти гарантированно попадёте в желтую зону. Ещё хуже дела обстоят, если по дизайн-концепции у каждого из 20 товаров на странице каталога есть свой слайдер с тремя картинками внутри, сменяющимися по ховеру. Если один такой слайдер требует, скажем, 0,3 секунды на прогрузку, то время загрузки всей страницы каталога смело можно умножать на 20.
Тренды трендами, но из-за всё более жестких требований к оптимизации сайтов всё раньше приходится задумываться о том, насколько быстро это будет работать — и лучше начинать думать уже на этапе дизайна. Нужен баланс красоты и оптимальности, потому что никакой вау-эффект не оправдает долгую загрузку интернет-проекта. Пользователь тупо не дождётся и уйдёт туда, где с первых секунд всё «летает».
Иван
Технический директор
Использование Google Tag Manager
Google Tag Manager — гугловская система управления тегами JavaScript и HTML, которые используются для отслеживания и анализа на веб-сайтах. Например, колл-бэки, метрики, чаты и всё прочее, что очень любят маркетологи. Может агрегировать кучу сторонних скриптов, и чем их больше, тем ниже ваш показатель в GPSI. Поэтому лучше сто раз подумать, прежде чем устанавливать сразу 10 подобных «следилок» на один проект.
Онлайн-чаты
Ведут себя неодинаково, но все в какой-то мере роняют скорость загрузки страницы, поскольку подгружают свои скрипты, а ещё картинки и смайлики. Одно из решений: сначала грузить страницу, а только после полной её загрузки загружать скрипт чата (хотя тут тоже не всё гладко).
Мы нашли в интернетах свеженький обзор онлайн-чатов и решили проверить, какой из участников этого рейтинга — наименьшее зло. Эксперимент проводили у себя на тестовом сервере. При одних и тех же условиях лучше остальных оказались чаты Битрикс24, Jivosite и WebConsult.
Google Tag Manager — гугловская система управления тегами JavaScript и HTML, которые используются для отслеживания и анализа на веб-сайтах. Например, колл-бэки, метрики, чаты и всё прочее, что очень любят маркетологи. Может агрегировать кучу сторонних скриптов, и чем их больше, тем ниже ваш показатель в GPSI. Поэтому лучше сто раз подумать, прежде чем устанавливать сразу 10 подобных «следилок» на один проект.
Онлайн-чаты
Ведут себя неодинаково, но все в какой-то мере роняют скорость загрузки страницы, поскольку подгружают свои скрипты, а ещё картинки и смайлики. Одно из решений: сначала грузить страницу, а только после полной её загрузки загружать скрипт чата (хотя тут тоже не всё гладко).
Мы нашли в интернетах свеженький обзор онлайн-чатов и решили проверить, какой из участников этого рейтинга — наименьшее зло. Эксперимент проводили у себя на тестовом сервере. При одних и тех же условиях лучше остальных оказались чаты Битрикс24, Jivosite и WebConsult.
Скорость загрузки на десктопе с использованием разных чатов
Скорость загрузки на мобильных с использованием разных чатов
Как ускорить загрузку сайта и попасть в «зелёную зону»
Использовать CDN
Поможет избежать задержек загрузки для пользователей, которые находятся слишком далеко от вашего сервера. Хотя панацеей эту технологию назвать нельзя.
Использовать AMP и Турбо-страницы Яндекса
Есть мнение, что Гугл специально сделал ставку на скорость загрузки, чтобы продвигать своё детище Accelerated Mobile Pages (AMP) (где может крутить только гугловскую рекламу). Но это неточно :) Российский аналог — Яндекс.Турбо (Яндекс тоже учитывает скорость загрузки при ранжировании).
Сжимать изображения
Базовое правило контент-менеджеров, но многие им всё равно пренебрегают. Сжатие без потери качества уменьшает вес изображений — для этого можно использовать сервисы TinyPNG или Optimizilla.
Использовать изображения в формате WebP
Это современный формат, разработанный Гугл — он легче, чем PNG и JPEG. Конвертировать в него можно с помощью сервиса Online-Convert.
Поможет избежать задержек загрузки для пользователей, которые находятся слишком далеко от вашего сервера. Хотя панацеей эту технологию назвать нельзя.
Использовать AMP и Турбо-страницы Яндекса
Есть мнение, что Гугл специально сделал ставку на скорость загрузки, чтобы продвигать своё детище Accelerated Mobile Pages (AMP) (где может крутить только гугловскую рекламу). Но это неточно :) Российский аналог — Яндекс.Турбо (Яндекс тоже учитывает скорость загрузки при ранжировании).
Сжимать изображения
Базовое правило контент-менеджеров, но многие им всё равно пренебрегают. Сжатие без потери качества уменьшает вес изображений — для этого можно использовать сервисы TinyPNG или Optimizilla.
Использовать изображения в формате WebP
Это современный формат, разработанный Гугл — он легче, чем PNG и JPEG. Конвертировать в него можно с помощью сервиса Online-Convert.
Современный формат — это круто, конечно, но только браузеры вроде IE и Safari его не поддерживают. Поэтому «в лоб» его применить нельзя, надо настраивать автоматическую конвертацию в зависимости от поддержки этого формата. Старичкам отдавать JPG/PNG, а поддерживающим этот формат, соответственно, отдавать WebP.
Иван
Технический директор
Установить модуль ngx_pagespeed
Чтобы не сжимать изображения и конвертировать их в нужный формат каждый раз вручную, можно установить этот модуль Гугла. Он ускоряет сайт и сокращает время загрузки страниц, автоматически применяя передовые методы веб-производительности к страницам и связанным ресурсам (CSS, JavaScript, изображениям). При этом не требует менять существующий контент или рабочий процесс.
Помимо оптимизации изображений, модуль может переписывать HTML, отсрочить загрузку JavaScript и изображений, продлить «живучесть» кэша и кое-что ещё. Инструкции по установке здесь (скорее всего, без кодера не обойтись).
Использовать кэширующие заголовки у статичных ресурсов
Такие заголовки у картинок, скриптов и стилей указывают браузеру, что эти ресурсы ещё столько-то времени не будут меняться, и можно их не скачивать каждый раз.
Чтобы не сжимать изображения и конвертировать их в нужный формат каждый раз вручную, можно установить этот модуль Гугла. Он ускоряет сайт и сокращает время загрузки страниц, автоматически применяя передовые методы веб-производительности к страницам и связанным ресурсам (CSS, JavaScript, изображениям). При этом не требует менять существующий контент или рабочий процесс.
Помимо оптимизации изображений, модуль может переписывать HTML, отсрочить загрузку JavaScript и изображений, продлить «живучесть» кэша и кое-что ещё. Инструкции по установке здесь (скорее всего, без кодера не обойтись).
Использовать кэширующие заголовки у статичных ресурсов
Такие заголовки у картинок, скриптов и стилей указывают браузеру, что эти ресурсы ещё столько-то времени не будут меняться, и можно их не скачивать каждый раз.
Можно также использовать серверное кэширование — это когда HTML страницы не генерируются каждый раз полностью, и хранится уже подготовленными частями. Это ускоряет такой показатель, как TTFB — Time to first byte, т. е. время между вводом адреса сайта в браузер и началом ответа сервера.
Иван
Технический директор
Выделить Critical CSS
Оставить в шапке сайта (то есть, подгружать сразу) только те стили, которые нужны для отрисовки первого экрана, а все остальные унести в футер и загружать позже.
Оставить в шапке сайта (то есть, подгружать сразу) только те стили, которые нужны для отрисовки первого экрана, а все остальные унести в футер и загружать позже.
Одно из решений — предусмотреть в коде отключение всех лишних скриптов, когда Гугл заходит на сайт. При этом, если ресурс посетит обычный пользователь, скрипты продолжают работать. На паре сайтов мы даже специально прописывали возможность отключать метрики, чтобы SEO-специалист мог посмотреть, чего он там наприкручивал и как это повлияло на показатели GPSI.
Иван
Технический директор
Зелёная зона — пора радоваться?!
Представитель Google Джон Мюллер как-то сказал, что концентрация на технической стороне (например, высокая скорость загрузки) не гарантирует высоких позиций в выдаче. Нужно смотреть на сайт в целом: контент также нужно совершенствовать, чтобы тот был релевантным и полезным для людей. Среди других рекомендаций от бывалых SEO-шников: улучшение юзабилити, отказ от всплывающих окон и навязчивой рекламы и внедрение голосового поиска.
Чем раньше обнаружится проблема, тем проще её решить. Грамотные разработчики проверяют работоспособность проектов в Google PageSpeed Insights не на этапе сдачи финального кода, а по ходу разработки, когда найти и исправить проблему проще :) Делать это постфактум, когда команда уже не на проекте — себе дороже.