Google рассказал о значимости поддержания скорости загрузки сайта

Содержание материала:

Проверка скорости загрузки сайта в Google Page Speed

Чем он может быть полезен? Давайте разберёмся.

Скорость загрузки страниц принято мерять в миллисекундах. В процессе проведения исследований специалисты Amazon посчитали, что продажи снижаются на 1% вследствие падения скорости загрузки страниц на 100 мс.

Многие пользуются мобильными устройствами для выхода в Интернет. Покупки, серфинг и всё остальное. Смартфоны работают медленнее ПК, особенно с мобильным соединением. Получается, что для шустрого отображения контента на мобильных девайсах нужно работать более кропотливо.

Медленные сайты задействуют больше ресурсов сервера, пиковые нагрузки выше. Такие сайты обходятся дороже, им нужен более мощный хостинг. При этом, эффективность их ниже во всех смыслах. Люди, ожидающие загрузки страницы более 3-х секунд, обычно уходят ко следующему результату выдачи.

В свое время Google представил сервис Page Speed – официальный инструмент для измерения скорости сайтов. Подобных сервисов немало, но по понятной причине веб-мастера предпочитают ориентироваться на рекомендации поисковика, в котором им предстоит продвигать свои проекты.

Как пользоваться Page Speed?

Для получения сводки и рекомендаций по оптимизации любого сайта достаточно перейти на страницу Page Speed Insights (PSI) и ввести в единственное поле интересующий домен. Запуск процесса, минута ожидания, и вы получаете целую гору полезной информации.

Результат тестирования делится на 2 группы показателей – для обычной и мобильной версии. Для каждой из них система покажет набранное количество баллов, исходя из всех задержек и обнаруженных проблем. Максимум можно набрать 100 попугаев. Отличным результатом считается показатель от 80. Свыше 90 – шикарным.

Мобильная и десктопная версии почти всегда набирают разное количество баллов, хотя эти показатели могут и совпасть, вероятность есть. Но роли это не играет. Что же высчитывает сервис? Множество показателей: время загрузки первого контента и достаточной его части, максимальные задержки, время окончания работы ЦП, индекс скорости загрузки, время загрузки до взаимодействия и прочие.

Общий смысл таков: PSI считает по этапам время, которое потребуется странице, чтобы стать полностью готовой для взаимодействия с пользователем. То есть плавного скроллинга, просмотра изображений, ввода данных и т. д. Использования всего, что находится в поле зрения.

Полученные результаты система под капотом сравнивает с другими сайтами, которые находятся в базе. Если ваши пузомерки окажутся выше 98% других сайтов, но вы получите 100 баллов. Если лучше 75% — то всего лишь 50. То есть характеристика относительная, конкурирующая. Чем больше быстрых сайтов в системе, тем ниже по отношению к ним будут показатели какого-то условного ресурса, если его не оптимизировать постоянно.

Другими словами, на показатели PSI можно и нужно ориентироваться. Они дают представление о скоростных параметрах, влияющих на отношение и самого поисковика, и пользователей к ресурсу. Игнорировать их нельзя. Но и расстраиваться не стоит, увидев результат ниже 100 баллов, — всё представлено в сравнении, а не натуральной величиной в вакууме.

Самое ценное, что даёт Page Speed – это рекомендации по увеличению производительности. Статистика даёт советы с короткой расшифровкой в действиях и показывает приблизительную экономию времени загрузки в миллисекундах. Список рекомендаций может быть очень длинным. Говоря по-честному, понимать это всё может только опытный веб-мастер. Но и для новичков есть понятные советы – сжать картинки (напр. TinyPNG), изменить формат чего-то, снизить количество переадресаций, убрать избыточные виджеты и т. д.

Суть такова, что PSI способен приносить пользу всем администраторам сайтов. Кто-то сможет использовать его с большим профитом, кто-то – с меньшим ввиду недостатка опыта, понимания происходящего. Но сервис будет полезен всем. Потому что отражает более-менее точную картину и даёт дельные рекомендации в большинстве случаев.

Для проверки скорости загрузки страниц сайта можно использовать дополнительные инструменты:

Выводы и рекомендации

Google Page Speed – крайне полезный инструмент веб-мастера. Своего рода бенчмарк скорости работы сайтов от главной поисковой системы мира. На него ориентируются все в большей или меньшей степени.

Сервис выдаёт довольно точные показатели производительности и кучу рекомендаций различной степени сложности воплощения. Не все из них полезны, встречаются и вредные, противоречивые в отдельно взятой ситуации. Поэтому детально и эффективно работать с инструментом могут лишь действительно опытные веб-мастера, понимающие суть происходящего.

Имитация загрузки страниц в PSI происходит с помощью Lighthouse – опенсорсного программного комплекса для оценки качества сайтов. Всё вышеописанное бесплатно.

Узнав оценку своего сайта, не спешите расстраиваться, если она окажется недостаточно высокой. При выдаче попугаев сервис учитывает результаты сотен тысяч других сайтов, их сравнительная средняя производительность влияет на балл вашего. Расслабьтесь, выдохните и выполните неспеша, качественно наиболее очевидные, важные рекомендации PSI. Этого окажется достаточно в большинстве случаев для поднятия скорости до комфортного уровня. Для всех — и людей, и поисковых систем.

Google рассказал о значимости поддержания скорости загрузки сайта

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

Время загрузки — что такое?

Неправильное понимание термина “время загрузки” влечет за собой массу проблем, а вместе с этим и низкие показатели активности пользователей и невысокую популярность страницы. Поэтому для начала нужно просто разобраться с тем, что это такое.

Полное время загрузки страницы — это суммарное время, которое было потрачено на загрузку всех элементов страницы. Это начинается с запроса к серверу: время подключения к DNS, протокол по которому передаются данные в сети, перенаправление, загрузка визуального контента и так далее.

Полное время загрузки сайта делится на несколько компонентов:

Время ответа сервера. Данный элемент показывает насколько быстро сеть и сервер вернули ответ на запрос к сайту. Сюда относятся DNS (система, которая позволяет преобразовывать символьные имена доменов в адреса IP) и TCP (процесс передачи данных интернета). Соответственно: чем больше время, тем медленнее прогружается сайт, а пользователь все это время видит только белый монитор.

Time To First Byte или TTFB. Один из главных показателей. Демонстрирует время, необходимое серверу для того, чтобы обработать запрос и выслать ответный сигнал браузеру. К примеру, запрашивая php-страницу, ответ будет получен только после обработки сигнала специальной программой, которая соединяет запрос с базой данных. На это оказывает существенное влияние настройки сервера, оптимизация кода, а также расстояние пользователя от сервера. Это значит, что чем удаленнее пользователь от сервера — тем дольше ответ будет до него идти. К примеру, месторасположение клиента в Санкт-Петербурге, а сервера с сайтом в Австралии или в Новой Зеландии. Ответ будет идти дольше, чем, если бы сервер располагался в Санкт-Петербурге.

Отметим, Time To First Byte отвечает также за сортировку страниц в поисковой выдаче, но об этом подробнее будет рассказано далее в статье.

Обработка HTML, загрузка содержания. Это время, которое браузер потратил на обработку HTML, загрузку стилей сайта, изображений и скриптов. В этом показателе все строится на правильно написанном оптимизированном коде, а также на размерах содержания рабочих файлов сайта.

Время до рендиренга страницы. Отвечает за загрузку на странице визуальной части контента. Данный фактор зависит от скорости сервера, а также от качества и количества медиа-файлов (фото, видео). Для пользователя именно этот показатель отождествляется со скоростью загрузки страницы.

Факторы, влияющие на позиции сайта в Google и Яндексе

Казалось бы, какая связь между скоростью загрузки и ранжированием сайтов? По словам сотрудников компании Google, этот показатель является ключевым и оказывает прямое влияние на выдачу страницы в поисковых системах. В компании Яндекс не делали заявлений по этому поводу, однако, читая справку для вебмастеров, можно наткнуться на замечание, в котором написано, что при выборе хостинга нужно принимать во внимание скорость доступа, и лучше использовать хостинг, который обеспечивает высокую скорость загрузки сайта.

Изучая влияние этого фактора на выдачу в поисковиках, был проведен ряд исследований, которые анализировали влияние времени загрузки на ранжирование. Так, специалисты MOZ пришли к следующим выводам:

1. Существует четкая взаимосвязь между Time To First Byte и позицией сайта: меньшее количество времени получения первого байта лучше сказывается на выдаче.

2. Исследователи не обнаружили соотношения между полным временем загрузки страницы и ее местом в Google.

Это позволяет сделать вывод: время ожидания первого байта позволяет оказать влияние на ранжирование. При этом полная загрузка сайта не сказывается на позициях сайта. Хотя ни для кого не секрет, что при соотношении позиций в поисковых системах влияние оказывает поведенческий фактор, а длительное время загрузки негативно отражается на этом показателе.

Получается, что эти факторы не принимают участие напрямую в ранжировании, но оказывают влияние на другие факторы, которые, как раз оказывают влияние на позиции сайта в поисковой выдаче.

Представители Яндекса ранее заявляли о том, что почти 40% пользователей уходят со страницы, если время загрузки составляет более 10 секунд. Кроме того, 74% пользователей уходят с сайта, если время загрузки на мобильном устройстве превышает 5 секунд.

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

Влияние поведенческих факторов на время загрузки

Приведем пример, как уменьшая время загрузки можно улучшить данные поведенческих факторов:

Для одного нашего клиента мы провели работы по сокращению времени загрузки. Так, были оптимизированы изображения, скрипты и стили; подключен хостинг, оптимизирующий доставку контента; подключены технологии композитной загрузки данных и облачного подхвата медиа-файлов.

время загрузки большинства страниц сократилось с 10 до 2,8 секунд;

время ответа сервера сократилось с 3,5 до 0,5 секунд.

Влияние на показатель отказов:

Влияние среднего времени загрузки и показателя отказов. Уменьшая время загрузки, показатели отказов также сократились на 8-10%.

Взаимосвязь среднего времени загрузки и количества страниц за сеанс. Сокращение времени загрузки увеличило количество страниц за сеанс с 3 до 5. Кроме того, конверсия зависит от скорости загрузки. Несколько исследований обнародовали данные, согласно которым увеличение времени на 100 мс делаем выше конверсию на 1%.

Оптимальные факторы времени загрузки страницы

Перед анализом времени загрузки, укажем показатели. После изучения вопроса уже можно выделить следующие требования:

время до Time To First Byte: до 300 мс. Google советует 200 мс, однако на практике даже 300 иногда достаточно сложно достичь;

время загрузки страницы: 3-5 секунд;

время получения изображения: до 1,5 секунд.

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

Google рассказал о значимости поддержания скорости загрузки сайта

Вы хотя бы представляете, как работают сервера, что такое балансированная система, что пользователи с разных стран и скорость загрузки у всех разная, что для гугл бота моментально, то для из Москвы тормоза и т.д.

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

Это, что касается ботов.

Теперь переходим к рендингу страницу в браузере клиента. Тут надо смотреть на общую массу скриптов и картинок, чтобы пользователь не охренел грузить 100 мегабайт и просто ушёл со страницы, это уже поведенческие факторы.

Сказали спасибо 4 пользователей:

Вы хотя бы представляете, как работают сервера, что такое балансированная система, что пользователи с разных стран и скорость загрузки у всех разная, что для гугл бота моментально, то для из Москвы тормоза и т.д.

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

Это, что касается ботов.

Теперь переходим к рендингу страницу в браузере клиента. Тут надо смотреть на общую массу скриптов и картинок, чтобы пользователь не охренел грузить 100 мегабайт и просто ушёл со страницы, это уже поведенческие факторы.

Сразу хочу заметить я не спорю , я хочу сделать для себя выводы.
Я вижу это так .
Я понимаю , что мой следующий пример не реален но все же представим. Что есть два одинаковых сайта, с одинаковым контентом, который отвечает запросу пользователя. Разница только в том что первый сайт грузиться 30 секунд, а второй 0,1.
Соответственно сайт который грузиться быстрей получит более лучшие показатели поведенческих и будет тем самым ранжироваться выше.

Новый алгоритм Google – Speed Update: оптимизируем скорость загрузки сайта

Еще в январе 2020 Google анонсировал новый алгоритм ранжирования, созданный специально для мобильного поиска – Speed Update. Запуск произойдет буквально через несколько дней, в июле этого года.

Алгоритм станет учитывать скорость загрузки страниц для мобильных устройств в мобильном поиске Google. До этого поисковик учитывал только скорость загрузки для компьютеров.

На последней встрече с вебмастерами специалисты Google поделились очень интересной информацией. Новый алгоритм будет учитывать всю шкалу от 0 до 100, а не только понятие быстрый и медленный сайт. Поэтому даже небольшое повышение скорости загрузки сайта может положительно сказаться на его позициях.

Важно: Не стоит всеми силами стремиться увеличить скорость до 100 пунктов. Сайт должен работать корректно и не доставлять проблем пользователям. Достаточно вывести сайт в зеленую зону.

Оригинал выступления со встречи можно увидеть на этом видео:

Проверить скорость загрузки сайта можно с помощью официального инструмента Google PageSpeed.

Особое внимание обратите на эти проблемы:

  • Оптимизация изображений. Используйте сжатие изображений перед загрузкой на сайт.
  • JavaScript и CSS код, блокирующий отображение верхней части страницы. Если это технически возможно, все скрипты рекомендуем размещать в подвале страницы. Так они не будут мешать загрузке.

Но важно помнить: скорость загрузки сайта – лишь один из факторов ранжирования в мобильном поиске. В первую очередь, нужно проверить, правильно ли адаптирован сайт под мобильные устройства. Если сайт не адаптирован, пишите нам, обязательно поможем.

Оптимизация скорости загрузки сайта по Google PageSpeed Insights

Краткое содержание статьи:

PageSpeed Insights — инструмент от Google, анализирующий производительность страницы на мобильных и десктопных устройствах с предоставлением рекомендаций по их улучшению. Зачем его использовать? В лидирующих поисковых системах скорость сайта является важным критерием ранжирования. От того, насколько быстро произошла загрузка страницы, зависят не только трафик и позиции сайта, но и конверсия, глубина просмотров, лояльность пользователей и прочие важные параметры интернет-маркетинга.

Кратко об изменениях в работе инструмента

Раньше при оценке сайта Google основывался на своих метриках и правилах. Из недостатков: инструмент мог показывать оптимизированные страницы с быстрой загрузкой, но по факту страница могла грузиться долго, и при этом оценка отображаться высокой. Была и обратная ситуация: страницы загружались быстро, а оценка была низкой. 12 ноября 2020 года инструмент был обновлен. Формулы подсчета показателей полностью сменились, а также добавились новые.

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

На странице инструмента необходимо ввести интересующую вас страницу в поле и нажать кнопку «Анализировать». Проверка происходит достаточно быстро. Домены в зоне .рф проверяются несколько дольше. Проверка осуществляется как для мобильной, так и для десктопной версии. Их значения могут отличаться друг от друга.

Первое, что вы увидите — это оценка эффективности страницы. Она определяется с помощью Lighthouse, о котором мы писали выше. Эффективность загрузки страницы измеряется по шкале:

  • 90 или выше – быстрая;
  • от 50 до 89 – средняя;
  • ниже 49 – медленная.

Данные наблюдений и Origin Summary

Далее располагаются данные наблюдений и Origin Summary, которые отображаются в том случае, если хватает данных для статистики. В целом они показывают сводную информацию о скорости проверяемой страницы в сравнении с другими страницами, по которым были собраны данные за последние 30 дней. Origin Summary отличается от «Данных наблюдений» тем, что оценивает скорость всех страниц вашего сайта.

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

  • Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
  • Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

Имитация загрузки страницы

Имитация загрузки страницы оценивается по 6 показателям:

  • Время загрузки первого контента (FCP).
  • Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
  • Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
  • Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
  • Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
  • Максимальная потенциальная задержка (FID).

«Оптимизация», «Диагностика» и «Успешные аудиты»

В разделе «Оптимизация» указывается то, что поможет ускорить загрузку проверяемой страницы. Раздел «Диагностика» – это дополнительная информация о соответствии страницы рекомендациям по производительности. В целом он также содержит информацию по оптимизации тех или иных показателей, поэтому уделить внимание необходимо обоим разделам.

Достоинствами «Оптимизации» и «Диагностики» является то, что они определяют конкретные места вашего сайта, которые необходимо доработать, например CSS, изображения, шрифты и пр.

Раздел «Успешные аудиты» показывает параметры, которым соответствует ваша страница. Здесь остаётся только облегченно вздохнуть и порадоваться, что это дорабатывать не нужно.

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

  • Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
  • Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
  • Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

  • Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
  • Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media=»print» в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:

  • На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.
  • С самописными сайтами будет более-менее понятно, что и куда переносить, но на сайтах с готовыми CMS это будет сделать сложнее. В этом случает помогут следующие плагины:

    • Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
    • Для Joomla плагины JCH Optimize.
    • Для Drupal плагины JCH Optimize.
    • В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
    • Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

    Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

    Используйте современные форматы изображений

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

    Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

    Исходя из приведенных таблиц наиболее лучшим оказывается формат WebP (но всё еще не универсальным), который можно получить следующим образом:

    • Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
    • Плагин AdobeWebM для Adobe Photoshop CC.
    • Плагины для CMS:
      1. для WordPress плагин WebP Express.
      2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта — оптимизация css, js и картинок» и Ammina Optimizer.
      3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
      4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
      5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

    Настройте эффективную кодировку изображений

    Без внедрения современных форматов изображений, описанных выше, привычные нам всем изображения также желательно оптимизировать, следуя принципу «хорошее качество при небольшом весе».

    Перед сжатием, убедитесь, что вы выбрали подходящий тип файлов. Существует несколько типов файлов изображений:

    • PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
    • JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
    • GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

    Оптимизация изображений может происходить следующим образом:

    • Вручную с помощью Adobe Photoshop и с использованием экшенов.
    • Пакетное преобразование с помощью FastStone Image Viewer.
    • Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
    • С помощью доработки кода, например в Bitrix.
    • С помощью плагинов:
      1. для WordPress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
      2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
      3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
      4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
      5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

    Удалите неиспользуемый код CSS

    Чем больше на сайте неиспользуемого кода CSS, тем больше времени необходимо браузеру для их подгрузки. В целом этот пункт связан с разделом «Устраните ресурсы, блокирующие отображение» о котором говорилось выше.

    Если вы знаете, что на вашем сайте есть неиспользуемые стили, то следует удалить их. Сюда же относится перенос стилей вниз (в пределы тега body), которые не нужны для отображения важного контента на первом экране.

    Сократите время ответа сервера (время до получения первого байта)

    Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

    Медленная загрузка может быть связана с проблемами на хостинге, например внутренними неполадками у хостера или блокировкой сайта за нагрузку с превышением лимитов. Рекомендуем писать в техническую поддержку. В случае, если проблема не на стороне хостера, нужно обратить внимание на ваш сайт:

    • Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
    • Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
    • Оптимизируйте таблицы базы данных MySQL.
    • Если используете старую версию CMS, лучше обновите её до последней версии.
    • Включите кеширование сайта браузером.
    • Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
    • Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
    • Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
    • Выполните рекомендации из разделов Google PageSpeed Insights, описанных выше.

    Дополнительные варианты плагинов для популярных CMS, которые помогут в сокращении ответа сервера:

    1. Для WordPress плагины WP Super Cache, PHP Speedy WP, Optimize DB.
    2. Для Bitrix предлагаем варианты, в которых можно ознакомиться, как ускорить сайт.
    3. Для Joomla уже упоминаемый плагин JCH Optimize, а также включение кеширования в админ-панели.
    4. Для Drupal модули «Authenticated User Page Caching (Authcache)», «CSS GZIP», «JavaScript Aggregator», «eAccelerator».
    5. Для Opencart модули Smart Optimizer, Turbo OpenCart.

    Уменьшите размер кода JavaScript

    Все, что поможет справиться с этой проблемой, ищите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте показ всего текста во время загрузки веб-шрифтов

    Данный раздел сообщает о том, что пользователи сайта не увидят ваш контент до тех пор, пока шрифты не будут подгружены. Добавьте в тег link параметр display=swap, таким образом браузер будет отображать дополнительный шрифт, пока основной шрифт не будет загружен полностью.

    Далее в стилях к основному шрифту необходимо подключить дополнительный шрифт в font-family. Например:

    Если же вы отдаёте предпочтение локальным шрифтам, то в @font-face добавьте свойство «font-display: swap;»:

    Минимизируйте работу в основном потоке

    В этом разделе подразумевается оптимизация кода JS: удалите неиспользуемый JS, первым загружайте только необходимый, сожмите данные JS. Более подробно смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите размер структуры DOM

    DOM (от англ. Document Object Model – «объектная модель документа») может нанести ущерб производительности страницы, если оно имеет большое дерево. Дерево DOM состоит из объектов, которые называются узлами, например это элементы HTML, текстовое содержимое, закомментированный код и пр. Оптимальное количество узлов в DOM 1500, глубина – 32 узла, количество дочерних и родительских элементов – менее 60.

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

    Задайте правила эффективного использования кеша для статических объектов

    При повторных посещениях HTTP-кэширование поможет ускорить загрузку страниц. Это означает, что при следующем посещении браузер будет использовать то, что уже получил ранее. Для оптимизации необходимо настроить сервер, чтобы происходило кеширование статических файлов, например на 1 год. Опять же, можно использовать плагины, о которых мы говорили выше в разделе «Сократите время ответа сервера».

    Сократите время выполнения кода JavaScript

    Здесь снова говорится об улучшении кода JS – необходимо уменьшить размер фрагментов кода JS: использовать только тот, который нужен для правильной работы сайта; сократить, сжать данные кода и кешировать. Более подробно о том, что может помочь смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите глубину вложенности критических запросов

    В этом разделе говорится о цепочке критических запросов, которые позволяют браузеру загружать страницу как можно быстрее, с определением приоритетов загружаемых ресурсов и порядком их загрузки. Например, браузер обрабатывает HTML, к нему подключены CSS ресурсы, он начинает обрабатывать их, а далее обнаруживается, что к HTML подключены и шрифты, для обработки которых ему снова нужно отправить запросы. Решить проблему можно добавлением в тег link значение rel=preload. Более подробно смотрите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте подходящий размер изображений

    Помимо рекомендации сжатия всех изображения без потери качества, есть еще несколько вариантов исправления данной ошибки в PageSpeed Insights:

    • Внедрение адаптивных изображений, у которых есть несколько версий размеров.
    • Использование SVG – векторный формат изображений.
    • Адаптивные изображения на основе клиентских подсказок, которые сообщают браузерам информацию о ширине области просмотра, ширине изображения и пр.

    Отложите загрузку скрытых изображений

    При заходе на сайт, посетителю отображается первый экран. Если на странице большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет. Чтобы пользователь не закрыл страницу, необходимо сделать, чтобы загрузка происходила максимально быстро, для этого рекомендуется использовать lazy loading или «ленивая загрузка» при которой изображения будут подгружаться асинхронно. Lazy loading можно реализовать несколькими способами:

    • Использование Intersection Observer API.
    • Скрипты Lazy loading (David Walsh), BLazy, Lazy Load XT jQuery, Yall, Lazysizes.
    • Для WordPress плагины Lazy Load, a3 Lazy Load, Rocket Lazy Load.
    • Для Bitrix решение «Ленивая загрузка изображений».
    • Для Joomla плагин LLFJ Lazy Load.
    • Для MODX плагины Lazy load, Lazy image.
    • Для Opencart плагин Lazy Load Images.

    Уменьшите размер кода CSS

    Сокращение CSS может улучшить загрузку страниц вашего сайта. Для сжатия CSS вы можете использовать различные сервисы, например: cssresizer.com, csscompressor.com, css-minifier.com, а также плагины.

    Подходящие для этого решения мы перечислили в разделе «Устраните ресурсы, блокирующие отображение» выше.

    Включите сжатие текста

    Для текстового содержимого рекомендуем использовать алгоритмы сжатия GZIP, Deflate или Brotli на вашем сервере. GZIP является наиболее распространенным, так как поддерживается большинством браузеров. На некоторых хостингах по умолчанию включено сжатие. Также можно воспользоваться плагинами по сжатию текста, которые мы перечислили в ранее упоминаемых разделах.

    Используйте предварительное подключение к необходимым доменам

    Для быстрого соединения с внешними ресурсами, указанными в коде вашего сайта (напр. Google Fonts) рекомендуется добавлять подсказки preconnect или dns-prefetch, чтобы сообщить браузеру, что загрузка должна быть установлена как можно быстрее. Примеры:

    Избегайте большого количества переадресаций

    При цепочках редиректов возникает замедление скорости загрузки страницы, так как браузеру приходится несколько раз запрашивать ресурс. В данном разделе инструмент укажет ресурсы, которые перенаправляются, также их можно найти с помощью программы Netpeak Spider, redirectdetective.com, redirect-checker.org и пр. онлайн-сервисами. Чтобы найти, где задана цепочка редиректов проверьте: .htaccess, nginx.config, PHP, HTML и JavaScript.

    Настройте предварительную загрузку ключевых запросов

    Предварительная загрузка позволяет быстрее отобразить страницу. Реализовать её можно путём добавления в тег link значение rel=»preload». Более подробно было рассмотрено выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Используйте видеоформаты для анимированного контента

    Для повышения производительности вашего сайта не рекомендуется использовать большие GIF-файлы с анимацией, лучше – использовать форматы MPEG4, WebM. Для конвертации можно воспользоваться сервисами: convertio.co, ezgif.com, onlineconvertfree.com и пр.

    Предотвратите чрезмерную нагрузку на сеть

    Чрезмерная нагрузка на сеть происходит из-за неоптимизированных ресурсов вашего сайта. Это могут быть: изображения, стили, скрипты, текст и пр. Чтобы исправить эту ошибку, рекомендуем ознакомиться с вышеописанными разделами. В целом здесь поможет сжатие и сокращение текста, HTML, JS, CSS, смена формата изображений на WebP и включение кеширования.

    Итоги. Многие рекомендации инструмента по оценке скорости загрузки сайта Google PageSpeed Insights перекликаются между собой. Исправив наиболее серьезные ошибки, которые включают в себя не один вид доработок, вы исправите и ряд других, которые в последствии будут отображаться в успешных аудитах инструмента. Важно помнить, что достижение 100 балов не должно наносить ущерб ни функционалу, ни дизайну сайта. Стремление к высокому баллу может быть не оправданным. И помните, что PageSpeed Insights содержит лишь рекомендации по улучшению вашего сайта, однако и без внедрения некоторых из них, ваш сайт может отлично функционировать и приносить доход.

    Увеличить скорость загрузки сайта в Google Page Speed своими руками

    Для достижения высоких позиций в поиске нужно, чтобы сервис Google Page Speed оценил скорость вашего сайта как высокую

    Я замечал, что именно скорость сайта в Гугл имеет решающее значение при прочих равных основных факторах, типа внешних ссылок, внутренней оптимизации и возраста домена.

    Поэтому для нормального SEO это очень важный этап, который нужно сделать после создания сайта.

    Ну а начинаем мы с проверки текущих значений.

    Проверяем скорость загрузки сайта в Google Page Speed

    На ваш личный взгляд ваш сайт может летать, но это еще ни о чем не говорит для Гугла.

    У него свои критерии проверки скорости сайта, поэтому идем сюда https://developers.google.com/speed/pagespeed/insights/

    Вводим адрес сайта и жмем проверить.

    Адрес вводите с http или https и при этом убедитесь, что сайт включен в нормальном режиме (не в режиме обслуживания), а robots.txt разрешает индексацию всех важных элементов сайта.

    Чем ближе результат к 100 баллам тем лучше

    Нормой считается 80 баллов и выше.
    Если у вас больше — отлично.
    То есть если ваш результат 90 баллов, то дергаться и пытаться любыми способами сделать 100 — не слишком благодарное занятие.

    Так что если у вас 80 баллов и выше, то не переживайте, а радуйтесь: большинство проектов имеет 40-50 баллов до оптимизации скорости загрузки.

    Я лично считаю, что для проектов с большим функционалом даже 70 баллов по Google Page Speed — вполне приемлемо.

    Ну а если у вас меньше 70 баллов, а тем более 20-30, то стоит серьезно задуматься об оптимизации скорости сайта под Гугл.

    Я начну с самых простых способов и закончу сложными, которые подойдут для самых дотошных владельцев сайтов, которым нужно 100 из 100

    Включить сжатие

    Самый простой способ ускорения загрузки сайта для Гугла — это включить GZIP сжатие. Это специальный механизм архивирования данных «на лету», который поддерживается 99,99% хостеров.

    Если ваш хостер не поддерживает его, то меняйте хостера (кого могу рекомендовать).

    Включить GZIP сжатие в WordPress можно с помощью плагина кэширования WP Fastest Cache.
    В Opencart с помощью плагина NitroPack

    Если не хотите ставить плагины, то можете модифицировать данные прямо в файле .htaccess, который лежит в корневой папке сайта (как попасть туда по FTP).

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

    Должно быть так:

    Сократите время ответа сервера

    Зависит от серверов вашего хостера, их загруженности и прожорливости вашего проекта.

    Иногда только один этот показатель может свести на нет все ваши усилия по SEO оптимизации проекта.

    Важно проверить этот параметр скорости сайта по Google Page Speed в разное время дня или ночи — вполне возможно в данный момент сервер хостера просто перегружен запросами.

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

    Если этот показатель стабильно плохой, то имеет смысл:

    • поставить модули кэширования (я их рекомендую ставить каждому проекту в любом случае!), чтобы снизить нагрузку на слабый хостинг и время формирования страниц сайта.
    • задуматься о смене хостера на того, у которого максимально быстрый хостинг или просто переходите на VPS-сервер. Этого обычно хватает в большинстве случаев для развивающихся проектов.
    • если есть лишняя копеечка, то закажите услугу CDN сервера вот тут (скидка 20% по промокоду «moytop»). Это даст весьма стабильную и быструю работу сайта.
    • самый сложный путь — это внутренняя оптимизация скриптов сайта (вплоть до полной переделке всего сайта). Это рекомендую делать в последнюю очередь, так как очень непросто и нормального специалиста за вменяемые деньги найти почти невозможно.

    Используйте кеш браузера

    Тоже несложный способ быстро повысить показатель в Google Page Speed.

    Также как и в случае с GZIP сжатием решается через добавление кода в htaccess. Вы можете добавить его вручную или с помощью все тех же плагинов кэширования.

    В конце статьи я приведу весь код целиком, сможете скопировать и попробовать добавить к себе в файл вручную через FTP.

    А лучше пользуйтесь проверенными плагинами, которые я уже предлагал выше.

    Оптимизируйте изображения

    Самый выгодный способ оптимизации, который легко может сделать каждый своими руками.

    Задача — уменьшить качество картинок на сайте, чтобы они занимали меньше места и быстрее грузились.

    Сделать это разумнее всего через сам Гугл Пейдж Спид.
    Но придется делать это вручную, то есть придется повозиться!

    Я больше года ищу нормальную программу, которая может автоматически ужимать по алгоритму Гугла картинки и сохранять структуру папок.

    Увы, такой программы я не нашел. Пересмотрел всякие просмотрщики типа XnView, Infran, программы типа Caesium, FileOptimizer, Imbatch, ImageOptim, сервисы вроде TinyPng и т.п. — автоматизации нет.

    Если кто знает такую программу — напишите в комментах.

    Основные требования:

    • сжатие по алгоритму Google (чтобы после загрузки готовых картинок они соответствовали требованиям Гугла по скорости загрузки)
    • минимальные потери качества
    • работа с сохранением структуры папок
    • удаление метаданных и т.п. мусора.
    • автоматическое определение входного и выходного формата

    Ну а пока программы нет, то придется делать это «ручками».

    Сам Google Page Speed внизу дает ссылку на скачивание уже оптимизированных файлов.

    Качаем и распаковываем.

    А затем долго и муторно меняем файлы через FTP на сайте, заменяя старую версию на новую.

    Увы, но качество картинок JPG теряется значительно.
    PNG — качество остается весьма хорошее, почти как в оригинале, а размер уменьшается в 2-3 раза. Так что если у вас много PNG файлов, то будет очень большая экономия.

    Выхода нет, чтобы получить высокую скорость сайта в Гугл придется пожертвовать качеством некоторых картинок.

    Обновление!
    Выход есть для сайтов на WordPress — читайте про формат Webp как его использовать на сайте в пару кликов и получить высокую скорость по картинкам.

    Сократите CSS + HTML + JS

    В данном случае Google Page Speed по аналогии с картинками просит вас выкинуть из файлов верстки, скриптов и кода страниц все лишнее — пробелы, комментарии и т.п.

    Чтобы сами файл стали меньше «весить» и быстрее стала скорость загрузки сайта.

    При использовании плагинов кэширования — это всё делается автоматически «на лету». Это наиболее удобный способ, так как не меняет ваш код, а создаёт отдельные — минифицированные файлы CSS и HTML, которые и подсовывает Гуглу и все счастливы.

    Если минифицировать файлы в каком-то сервисе, то имейте ввиду, что потом какие-то изменения в таких урезанных файлах будет сделать проблематично.

    Код до оптимизации (читабельный)

    Код после оптимизации (уже изменения делать сложно)

    Скачать уменьшенные файлы «от Гугла» можно там же где и картинки — они в одном архиве будут.

    А вот перезаливать ими оригинальные файлы — сами решайте, в любом случае сохраните бекап старых файлов.

    Оптимизируйте загрузку видимого контента

    В большинстве случаев вы ничего с этим сделать не сможете, разве что переделать сайт заново.

    Поэтому я бы постарался тут особенно не заморачиваться и заняться другими факторами скорости сайта в Гугл.

    Удалите код JavaScript и CSS

    Гугл рекомендует удалять «лишний» по его мнению код скриптов, блокирующий отображение верхней части страницы.

    Сложный пункт, который требует знаний и практики.

    Вы, конечно, можете добавить возле загрузки каждого JS файла тег async или же поставить скрипт от Гугл для extsrc=, но по моим наблюдениям в 90% это или ничего не дает, или ломает сайт!

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

    А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

    И ваши сделанные изменения банально затрутся.

    Так что тут я могу рекомендовать:

    1. не тратить время на самостоятельный разбор этого хлама и сразу нанять специалиста на бирже фриланса, дешевле всего на Kwork , ну а если проект посложнее, то на других биржах можете поискать.
    2. по возможности просто отключить/удалить уже ненужные или неиспользуемые плагины. Например в своем блоге, когда я писал эту статью, то обнаружил в скриптах плагин, которым не пользуюсь уже несколько лет, просто забыл про него — а он висит и снижает скорость загрузки сайта в Гугл.

    Посмотрите, может и вы что-то забыли? Или чем-то не пользуетесь? Тогда отключайте.

    Код для htaccess

    Как и обещал, вот код, который формируется плагинами кэширования, но который можно добавить самому в файл .htaccess, который находится в корне сайта.

    Какой-то из этих двух вариантов наверняка подойдет.

    На всякий случай оставляю файл с кодом в формате txt, чтобы символы не затерлись, а то мало ли что может быть.

    Нужно взять один из кодов и добавить в самое начало вашего файла .htaccess.

    Обновить страницу и отправить на повторную проверку скорости загрузки сайта Google Page Speed.

    Выводы и итоги

    Итак, чтобы увеличить скорость сайта в Гугл проще всего:

    • установить и настроить плагины кэширования для WordPress и Opencart (включить в них все сжатия, сокращения и т.п.)
    • выбрать наиболее быстрого хостера или заплатить за CDN сервис
    • оптимизировать изображения
    • отключить неиспользуемые плагины и скрипты
    • заказать эту услугу на Кворке всего за 500 росс. рублей

    Позиции заметно укрепляются, по крайней мере вы исключите этот фактор из тех, которые тормозят рост сайта в поиске.

    Плюс высокая скорость сайта в целом даёт дополнительный прирост конверсии, ведь посетители быстрее получают нужную информацию.

    Полезные цитаты: Сегодня я богат именно благодаря тому, что я сделал в свободное время (Р.Кийосаки)

    Правда и мифы о Google PageSpeed Insights

    Мы обратили внимание, что многие SEO-специалисты уделят этому сервису чересчур много внимания. Часто ссылки на него занимают первые места в технических заданиях специалистов по поисковой оптимизации. И в большинстве случаев плохие показатели сайта в этом сервисе, являются обоснованием сеошника, что мол вот, поэтому у вас все плохо с ранжированием. Многие расценивают рекомендации сервиса как руководство к действию, тратят кучу времени и сил на то, чтобы получить высокий балл в PageSpeed Insights и часто даже не задумываются, а так ли это все нужно.

    Для начала отметим, что PageSpeed Insights имеет только косвенное отношение к Google. Этот сервис поддерживается и развивается независимым комьюнити web-мастеров и разработчиков и прямого отношения к поисковому гиганту он не имеет. То есть его рекомендации основаны на мнении сторонних людей, а не исходят напрямую от Google.

    Еще один факт на который не все обращают внимание. PageSpeed Insights вовсе не показывает реальную скорость загрузки сайта. Балл, который он выдает – это внутренняя метрика сервиса, а не действительная скорость загрузки страницы.

    Существуют другие инструменты, которые показывают реальную скорость загрузки. Например webpagetest.org или tools.pingdom.com. Но даже их советам слепо следовать не стоит, потому что предназначение таких сервисов в том, чтобы помочь найти баланс между скоростью загрузки сайта и его функциональностью. Именно так, найти баланс, а не сделать сайт молниеносно быстрым в ущерб всему остальному.

    При ранжировании поисковой выдачи, Google учитывает более чем 200 факторов и скорость загрузки сайта – далеко не основной из них. Поисковик сам об этом говорит. Вот выдержка из официального блога компании:

    Скорость загрузки сайта не так важна, как его релевантность. На данный момент, показатель скорости загрузки влияет на выдачу менее чем 1% результатов поиска.

    Иначе говоря, не нужно сильно беспокоиться, если только ваш сайт находится в “красной зоне” сервиса PageSpeed Insights. И это понимают во многих компаниях, включая лидеров рынка.

    Давайте посмотрим какими показателями PageSpeed Insights награждает тот же Amazon.com

    Или Apple.com

    Как видно, показатели далеко не рекордные.

    А как обстоят дела с информационными ресурсами, которые полагаются на большую долю поискового трафика. Уж они-то должны оптимизировать сайты для хорошей выдачи в Google, верно?

    The New Yorker

    Meduza

    Картина рисуется понятная. Многие крупные компании и информационные ресурсы проваливают тесты в PageSpeed Insights. И ничего страшного в этом нет.

    Так стоит ли вообще прислушиваться к советам PageSpeed Insights? Да. Но с умом.

    Например, если сервис говорит, что картинки на сайте очень большие и их стоит уменьшить на 80% – то это нужно сделать. Но если вы получили рекомендацию «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», то слепо следовать ей не стоит, ведь зачастую такие действия приводят к ошибкам в нормальной работе сайта.

    Выводы напрашиваются очевидные. Прежде всего, нужно четко понимать, что показатели PageSpeed Insights носят рекомендательный характер. Полученные в ходе анализа метрики ни в коем случае нельзя использовать как прямое руководство к действию.

    И уже тем более не стоит гнаться за заветным показателем в 100 баллов – практически недостижимым идеалом “скорости загрузки” сайта, который даже Google.com не всегда набирает. Стремясь повысить скорость загрузки сайта, нужно сопоставлять затраты на оптимизацию и итоговый результат. Во многих случаях, повышение рейтинга на 3-5 баллов не стоит затраченных сил, времени и денег.

    PageSpeed Insights – полезный инструмент для выявления серьезных проблем со скоростью загрузки, но это вовсе не бенчмарк, высокий бал в котором гарантирует улучшение позиций сайта в поисковой выдаче.

    P.S. Если вы не согласны с вышесказанным или есть что добавить или посоветовать, то пожалуйста, поделитесь своим опытом в комментариях. Расскажите, как все обстоит на самом деле!

    Sense Production e-commerce agency. Создаем и улучшаем системы продаж в Интернете.

    Как ускорить сайт с Google PageSpeed Insights

    Реальная скорость загрузки и рейтинг PageSpeed

    Важность скорости загрузки

    Google Pagespeed Insights — инструмент для оценки качества оптимизации страниц в интернете. Основной показатель, которым оперирует предлагаемый в нём анализ — скорость загрузки страницы. Данная метрика является одной из ключевых, будучи важным поведенческим фактором, о которых у нас есть хорошая информативная статья .

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

    В Google провели исследование , обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.

    В январе 2020 было объявлено , что с июля данного года Google вводит page speed в качестве фактора ранжирования для мобильного поиска. Это связано с упомянутым исследованием, в котором ясно показано: скорость имеет значение. Здесь Google рекомендует разработчикам заняться оптимизацией своих сайтов и предлагает для анализа их эффективности использовать инструменты:

    • Chrome User Experience Report . Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
    • Lighthouse . Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
    • PageSpeed Insights . Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.

    Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.

    О чём говорит Google Pagespeed Insights

    Всё говорит о том, что скорость загрузки сайта — важнейший показатель, влияющий и на лояльность пользователей, и на позиции в выдаче. Как в улучшении данной метрики помогут Google Insights?

    Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.

    • Данный инструмент не измеряет скорость загрузки страниц.
    • Показатель Page Insights не влияет на ранжирование.
    • Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.

    Можно привести огромное множество примеров, когда топ выдачи занимают сайты с вопиюще низким показателем, а под 100 баллов получают сайты на одном HTML без каких-либо удобств и функций.

    Проверим верность утверждения на запросе авиабилеты .

    Два топовых сайта показывают удручающие, с точки зрения сервиса, показатели.

    А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.

    Разработчикам, которых интересует скорость загрузки сайта, будут полезны сервисы:

    • Pingdom Tools . Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
    • WebPageTest . Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
    • GTmetrix . Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.

    Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье .

    Сквозная аналитика

    • Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
    • Получайте данные из CRM и рекламных площадок
    • Стройте воронку от показов рекламы до сделок
    • Более 30 показателей эффективности в отчетах

    Как ускорить загрузку своего сайта на любых устройствах

    Тем не менее, с помощью Google Pagespeed Insights вы можете определить недостатки страницы, чтобы исправить их и оптимизировать загрузку.

    Оптимизация изображений

    Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:

    При загрузке изображений откуда-либо и последующей их вставке на сайт позаботьтесь о том, что их размер минимально возможный. Речь идёт не о весе в килобайтах, а именно о пикселях.

    Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.

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

    В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

    Сложно сказать, правы ли здесь авторы, так как PNG входит в перечень наиболее оптимизированных для веб форматов. У него, в отличие от JPEG, имеется возможность загрузки изображений неправильной формы без необходимости дорисовки до прямоугольника. Если нужна круглая кнопка, JPEG добавит к кругу непрозрачные уголки, чтобы изображение вышло квадратным. Загружая PNG, вы оставляете только ту графику, которую хотели, а остальное пространство между вашим изображением и прямоугольным контейнером остаётся прозрачным.

    Старайтесь прибегать к JPEG для размещения фотографий. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.

    Вот сейчас самое время сжать картинки и по весу. В интернете есть несколько бесплатных или частично платных сервисов, уменьшающих размер картинок без потери качества:

    Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

    • Используйте атрибуты с правильным размером

    Если разработчик загружает большое изображение и ограничивает его до меньшего атрибутами w > и height , ему кажется, что он оптимизировал своё время. Но он на самом деле отнял время у пользователя, который загрузит файл целиком, а увидит его в уменьшенном размере.

    Для облегчения задачи пакетного сжатия Google предлагает загрузить сжатые в ходе диагностики картинки в архиве. Вы можете распаковать их прямо в директорию соответствующей страницы и обновить старые изображения. Пакетное сжатие лучше провести в PunyPNG.

    Оптимизация JavaScript и CSS

    Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

    Разумеется, JavaScript, загружаемый внизу страницы или асинхронно, ускоряет загрузку. Но разработчики редко прибегают к этому действию, так как перенос скриптов в футер систематически нарушает функционирование сайта. Тем более, это касается готовых шаблонов для CMS, в которых страницы редактируются через интерфейс, а в отдельных вставка кода существенно ограничена.

    Аналогично и со стилями. В случае, когда пользователь загружает страницу, где CSS находятся внизу, он с большой вероятностью загрузит каркас страницы без стилей. Это выглядит неприглядно — посетитель сочтёт такое отображение ошибкой и, скорее всего, покинет сайт.

    Впрочем, есть несколько действенных мер, которые могут облегчить код и ускорить работу страниц ресурса.

    Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor . В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.

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

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

    Для такой задачи подойдёт инструмент Online YUI Compressor . Его можно использовать и для облегчения CSS.

    Просто вставьте код в окно и запустите сжатие. После процедуры замените код в своих файлах на сайте и проверьте его производительность.

    • Загрузка контента из Google CDN

    Интернет представляется единым пространством без расстояний, но это не так. На самом деле удалённость серверов играет большую роль. CDN реализует функционал перемещения контента сайта — скриптов, стилей или изображений в специальную сеть.

    Пользователь не должен ждать, если он находится в одной точке мира, и его обслуживает один сервер, а сервер вашего сайта располагается в нескольких тысячах километров. CDN делает так, что посетитель подгружает контент с сервера, ближе всего расположенного к нему. Файлы ранее оказались там благодаря особому кешированию в данной сети.

    GZIP сжатие

    GZIP — это тип сжатия, концептуально схожий с обычным сжатием файлов на компьютере, но в вебе. Файлы, обеспечивающие отображение страницы, загружаются с сервера в сжатом виде. Существует целый перечень алгоритмов сжатия, но gzip наиболее применим и популярен в интернете. Его поддерживают любые современные браузеры.

    Существует 2 типа сжатия gzip: динамическое и статическое.

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

    Метод реализуется с помощью редактирования файла .htaccess, находящегося в корневом каталоге ресурса, расположенного на сервере Apache. Если сайт работает на Nginx, то подход не сработает. Вам необходимо будет включить в файл соответствующие модули или связаться с администрацией, если ваши возможности в этом вопросе ограничены.

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

    Суть подхода состоит в ручном архивировании файлов методом gzip и последующем размещении сжатых копий на сервере. Таким образом, пользователь при загрузке сайта будет сразу обращаться к сжатым файлам без затрат мощностей сервера.

    Использование кеша

    Как и при сжатии, для внедрения кеширования существует небольшой нюанс — сервер должен работать под Apache. В противном случае вам так или иначе придётся связываться с администрацией хостинга.

    Суть кеширования заключается в том, что файлы, за счёт которых работает сайт, уже не подгружаются пользователем с сервера ни в каком виде. Вместо этого он хранит файлы у себя на компьютере, вследствие чего кратно вырастает скорость загрузки страниц.

    Для реализации функционала кеширования вам опять предстоит работать с .htaccess. Найдите этот файл в корне и откройте для редактирования. Если он не отображается, в настройках FTP-клиента используйте функции отображения скрытого содержимого. Найдя .htaccess и открыв его, внесите в него директивы для кеширования статических элементов в браузере пользователя.

    С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control .

    Чаще всего хранятся на пользовательской машине файлы изображений, стилей и скриптов.

    Стоит ли пользоваться Google Pagespeed Insights

    Ответ на этот вопрос положительный, с тем условием, что вы не придаёте данному инструменту чрезмерного значения. Он удобен для проверки конкретной страницы на предмет оптимизации её составляющих, но не годится в качестве инструмента сравнения page speed разных страниц. Для больших проектов имеет смысл пользоваться более глубокими инструментами аналитики.

    Сквозная аналитика

    • Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
    • Получайте данные из CRM и рекламных площадок
    • Стройте воронку от показов рекламы до сделок
    • Более 30 показателей эффективности в отчетах

    Следуя рекомендациям Pagespeed Insights, уделяйте внимание главным методам оптимизации:

    • Оптимизация JavaScript и CSS;
    • Оптимизация изображений;
    • Сжатие gzip;
    • Кеширование в браузере.

    PageSpeed Insights: как получить 100/100 и зачем это нужно?

    Есть один древнегреческий миф – про Дедала и его сына Икара. Наверняка большинство из вас с ним знакомо, но для тех, кто в мифологии греков – полный профан, вкратце его перескажу. Дедал смастерил для Икара крылья из воска, чтобы тот мог летать, но строго-настрого запретил ему подниматься на высоту – ведь тогда солнце просто растопит крылья. Икар, которому был по душе вольный полет, разумеется, отца не послушал – его крылья расплавились, он упал с большой высоты и разбился.

    Этот миф – замечательная иллюстрация того, что стремление к совершенству может быть самоубийственным. Увы, многие SEO-оптимизаторы страдают «синдромом Икара» – 4-5 строчки их не устраивают, ТОП-3 подавай. А если по Google Page Speed красная зона – то это вообще позор на несколько поколений вперед. Нужно выбраться по крайней мере в жёлтую – и плевать, сколько это будет стоить и какие позиции по запросам сейчас. Однако PageSpeed Insights (его еще называют Page Speed Ins >

    Что за PageSpeed такой?

    Один мой знакомый SEO-шник настолько верил в «силу» аналитических способностей PageSpeed, что отказывался вести работу над сайтом дальше, пока программисты не довели бы его до желтой зоны. Настолько его впечатлил анонс нового фактора ранжирования Google под названием «Speed Update» – скорости загрузки сайта на мобильных устройствах. Он считал, что с плохим баллом по PageSpeed чуда однозначно не случится, и доводил программистов до исступления изнуряющими ТЗ. Те же доводили владельца бизнеса до обморока кошмарными счетами за работы. В итоге этого парня уволили. Это к слову об Икаре и совершенстве.

    Но что же за капризный инструмент, которому никак не угодишь? На самом деле крайне примитивный сервис, который доступен по ссылке https://developers.google.com/speed/pagespeed/insights/. Пользоваться им просто – вставляешь URL страницы в поле и нажимаешь «Анализировать».

    Ждешь 2-3 минуты – и готово! Speed Test завершен, ты убеждаешься, что твой сайт, по мнению Google – «улитка».

    Проверить на Page Speed можно любой сайт – и это бесплатно!

    Какие рекомендации дает сервис от Гугл?

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

    Каждый из пунктов можно еще развернуть, чтобы получить точные данные – например, о том, какие картинки замедляют загрузку.

    Залипнуть можно не на один час! Я же вкратце перечислю типичные рекомендации:

      Отложить загрузку скрытых изображений. Здесь речь о технологии Lazy Loading. Использовать современные форматы изображений. Сервис советует отказаться от PNG и JPG в пользу экзотических форматов – вроде WebP. Устранить ресурсы, блокирующие отображение страницы. Речь об излишних JS и CSS. Настроить эффективную кодировку изображений. Если перевести на русский – сжать картинки. Сократить время хранения кэша. Если кэш хранится долго, то при повторном посещении страница будет загружаться медленно. Уменьшить влияние стороннего кода. То есть по максимуму выбросить различные счетчики, оставить только Analytics, который (опять же по данным PageSpeed, который в некоторых вопросам может быть – хм, хм – необъективен) почти не замедляет сайт, в отличие от «Метрики».

    PageSpeed Insights измеряет отдельно версии сайтов для мобильных и для компьютеров. И если десктопные довести хотя бы до жёлтой зоны реально, то с мобильными версиями у большинства – катастрофа.

    Оптимизация сайта по PageSpeed: что нужно делать?

    Согласитесь, задача по оптимизации кода JavaScript способна поставить в тупик как простого сайтовладельца, так и SEO-шника. Везунчиками можно считать тех, чьи сайты собраны на CMS WordPress – для этой платформы есть плагины на все случаи жизни.

    Я как раз из числа таких везунчиков, поэтому знаю плагины, с помощью которых можно массово пожать картинки и настроить Lazy-Loading. Однако их я не использую, поскольку нашёл более красивое решение – плагин Autoptimize.

    Autoptimize – настоящий бальзам на раны тех, кто устал видеть сайт в красной зоне PageSpeed. Один-единственный плагин позволяет настроить Lazy-Loading, оптимизировать JS, CSS и код HTML, конвертировать картинки в WebP и включает в себя еще много полезных «плюшек» – например, Try-Catch обертывание для исправления ошибок JS. Optimizer настраивается действительно гибко – можно, например, некоторые скрипты добавить в список исключений, чтобы программа их не жала и не объединяла с другими.

    Autoptimize эффективен. Я могу это подтвердить результатами замеров до и после активации плагина.

    ДО

    ПОСЛЕ

    Однако плагин я ставил не только ради самоуспокоения и красивой картинки. Я также хотел докопаться до истины, стоит ли обращать внимание на PageSpeed или это пузомерка-«пустышка». Поэтому я поставил простой эксперимент.

    Влияет ли скорость по PageSpeed на позиции?

    Суть эксперимента заключалась в том, чтобы замерить позиции по группе ключевых слов и трафик сайта до и после оптимизации по рекомендациям Google PageSpeed. Конечно, я понимаю, что такая проверка не является идеальной, поскольку рост позиций (и, как следствие, трафика) может быть вызван апдейтом поисковой системы либо, скажем, обновлением информации о поведенческих факторах. Но это все же лучше, чем заявлять о бесполезности RageSpeed Insights совершенно голословно, как делается на большинстве тематических порталов.

    Активировал плагин Autoptimize 04.10.2020 года. Снял позиции спустя неделю – 11.10.2020 года. Посчитал, что недели достаточно, чтобы ПС заметили «ускорение» моего сайта. Позиции снимал бесплатным инструментом BE1, трафик смотрел в «Метрике».

    Ниже полный список запросов с динамикой их позиций (в раскрывающемся списке), а также статистическая сводка.

    25.06.2020, 15:55 #6
    Страница 1 11.окт 04.окт Динамика
    оценка сайта 16 17 1
    оценить сайт 14 14
    оценка сайта онлайн 15 19 4
    оценить стоимость сайта 13 13
    оценить сайт онлайн 18 17 -1
    узнать стоимость сайта онлайн 13 14 1
    узнать стоимость сайта 11 12 1
    стоимость сайта оценить онлайн 13 12 -1
    Страница 2
    сеоспринт отзывы 22 25 3
    seosprint отзывы развод или нет 12 15 3
    сеоспринт отзывы о заработке 20 20
    seo sprint ru заработок отзывы 20 23 3
    seosprint net отзывы развод или нет 14 15 1
    seosprint net отзывы 20 19 -1
    seosprint отзывы развод или нет 2020 15 10 -5
    seo sprint ru заработок отзывы 2020 14 10 -4
    сеоспринт отзывы о заработке 2020 15 14 -1
    Страница 3
    режим инкогнито в хроме 6 10 4
    режим инкогнито в гугл хром 7 10 3
    режим инкогнито chrome 5 10 5
    google chrome режим инкогнито 9 18 9
    режим инкогнито в хроме горячие клавиши 2 4 2
    как в хроме включить режим инкогнито 4 7 3
    режим инкогнито в гугл хром как включить 5 8 3
    режим инкогнито гугл 12 16 4
    Страница 4
    режим инкогнито в яндекс браузере 23 22 -1
    как отключить режим инкогнито в яндексе 20 20
    режим инкогнито в яндекс на телефоне 28 48 20
    режим инкогнито в яндекс на телефоне андроид 36 32 -4
    режим инкогнито в яндекс браузере на мобильном 44 25 -19
    режим инкогнито в яндекс 19 20 1
    как включить режим инкогнито в яндекс 20 20
    как сделать режим инкогнито в яндекс 16 23 7
    как открыть режим инкогнито в яндекс браузере 19 16 -3
    как перейти в режим инкогнито в яндексе 17 19 2
    режим инкогнито в яндекс браузере клавиши 9 16 7
    Всего запросов 36
    Общий рост позиций 47
    Сколько запросов выросло 21
    Сколько запросов упало 10
    Запросов вошло в Топ-10 2
    Запросов выпало из Топ-10
    Запросов вошло в Топ-5 3
    Запросов выпало из Топ-5

    Если коротко – чуда не произошло. Из сводки видно, что в целом позиции улучшились, «подросших» запросов вдвое больше, чем «упавших».

    Здесь бы и возликовать, но есть два «но»: во-первых, рост позиций неоправданно мал, во-вторых, если посмотреть на детализированный отчет, то можно увидеть – позиции выросли, по сути, только у одного из 4-х кластеров, а у остальных +/-1. Если бы рост позиций был обусловлен увеличением скорости работы сайта по PageSpeed, он был бы общим для всех запросов, а не избирательным.

    Давайте посмотрим, как изменился органический трафик в разрезе двух поисковых систем. В «Яндексе» резко полетел наверх. До оптимизации трафик по будням был в районе 160-180 посетителей. После оптимизации держался строго выше 200, а в среду и четверг превзошел отметку 250.

    А вот с Google все куда хуже. Можно даже говорить, что трафик по Гуглу немного просел:

    Мне показалось по меньшей мере странным, что после оптимизации по рекомендациям инструмента Google у меня вырос трафик из «Яндекс», а сам Google на все мои потуги смотрел, равнодушно лузгая семечки.

    Так для чего действительно нужен PageSpeed?

    Результаты – а точнее, отсутствие их – оказались для меня большим разочарованием. Рассчитывал, что после оптимизации все запросы мигом залетят в Топ-5, но подобным и не пахнет. Хорошо еще, что обошелся бесплатным плагином – представляю досаду тех, кто за «зеленую зону» PageSpeed платит «зеленые» программистам.

    Но что тогда толку от этого Пэйдж Спид?

    Кокшаров (aka Девака), Трудов и другие известные SEO-шники сходятся во мнении:

    Гнаться за «соткой» по PageSpeed – бессмысленная затея!

    Дело в специфике работы сервиса, которую, как считают перечисленные специалисты, большинство оптимизаторов неправильно понимает. PageSpeed не годится для сравнительного анализа страниц разных сайтов. Страница с оценкой 3 по «Пейдж Спид» может фактически загружаться быстрее, чем страница с оценкой 80. И ПС будет смотреть именно на фактическое время, а не на оценку сервиса.

    PageSpeed сравнивает страницу с её идеальной версией. И выявляет резервы.

    Страница с оценками по PageSpeed 3 (мобильная) / 30 (десктопная) совершенно спокойно может находиться в Топ-3 по высокочастотным запросам – я убедился в этом на личном опыте. Вы тоже можете поэкспериментировать и проверить страницы сайтов в Топе – наверняка увидите, что у лидеров с PageSpeed все отнюдь не гладко.

    Подводим итоги

    Вместо криков ликования – сплошное разочарование! Оптимизация по PageSpeed не дала существенных результатов для моего сайта. Как я эти результаты замерил:

      Снял изначальные позиции по запросам из небольшого семантического ядра. Установил и активировал бесплатный плагин Autoptimize, который значительно повысил показатели сайта по Page Speed. Снял позиции спустя 7 дней после оптимизации скорости и сравнил с изначальными. Проанализировал динамику трафика через «Яндекс.Метрику» в разрезе 2-х ПС.

    Позиции в «Яндекс» и трафик из этой ПС выросли, что, впрочем, можно списать на апдейт. Я то рассчитывал улучшить трафик из Google, но ему, похоже, абсолютно индифферентно на все потуги оптимизаторов. Приятно, конечно, при анализе страниц в Пэйдж Спид видеть зеленый цвет, но цель подобной оптимизации – не в том, чтобы доставить сайтовладельцу эстетическое наслаждение.

    А ты заморачиваешься с Google PageSpeed? Или смотришь на его рекомендации сквозь пальцы? Расскажи, что думаешь об этом инструменте!

    Проверка скорости загрузки сайта в Google Page Speed

    Чем он может быть полезен? Давайте разберёмся.

    Скорость загрузки страниц принято мерять в миллисекундах. В процессе проведения исследований специалисты Amazon посчитали, что продажи снижаются на 1% вследствие падения скорости загрузки страниц на 100 мс.

    Многие пользуются мобильными устройствами для выхода в Интернет. Покупки, серфинг и всё остальное. Смартфоны работают медленнее ПК, особенно с мобильным соединением. Получается, что для шустрого отображения контента на мобильных девайсах нужно работать более кропотливо.

    Медленные сайты задействуют больше ресурсов сервера, пиковые нагрузки выше. Такие сайты обходятся дороже, им нужен более мощный хостинг. При этом, эффективность их ниже во всех смыслах. Люди, ожидающие загрузки страницы более 3-х секунд, обычно уходят ко следующему результату выдачи.

    В свое время Google представил сервис Page Speed – официальный инструмент для измерения скорости сайтов. Подобных сервисов немало, но по понятной причине веб-мастера предпочитают ориентироваться на рекомендации поисковика, в котором им предстоит продвигать свои проекты.

    Как пользоваться Page Speed?

    Для получения сводки и рекомендаций по оптимизации любого сайта достаточно перейти на страницу Page Speed Insights (PSI) и ввести в единственное поле интересующий домен. Запуск процесса, минута ожидания, и вы получаете целую гору полезной информации.

    Результат тестирования делится на 2 группы показателей – для обычной и мобильной версии. Для каждой из них система покажет набранное количество баллов, исходя из всех задержек и обнаруженных проблем. Максимум можно набрать 100 попугаев. Отличным результатом считается показатель от 80. Свыше 90 – шикарным.

    Мобильная и десктопная версии почти всегда набирают разное количество баллов, хотя эти показатели могут и совпасть, вероятность есть. Но роли это не играет. Что же высчитывает сервис? Множество показателей: время загрузки первого контента и достаточной его части, максимальные задержки, время окончания работы ЦП, индекс скорости загрузки, время загрузки до взаимодействия и прочие.

    Общий смысл таков: PSI считает по этапам время, которое потребуется странице, чтобы стать полностью готовой для взаимодействия с пользователем. То есть плавного скроллинга, просмотра изображений, ввода данных и т. д. Использования всего, что находится в поле зрения.

    Полученные результаты система под капотом сравнивает с другими сайтами, которые находятся в базе. Если ваши пузомерки окажутся выше 98% других сайтов, но вы получите 100 баллов. Если лучше 75% — то всего лишь 50. То есть характеристика относительная, конкурирующая. Чем больше быстрых сайтов в системе, тем ниже по отношению к ним будут показатели какого-то условного ресурса, если его не оптимизировать постоянно.

    Другими словами, на показатели PSI можно и нужно ориентироваться. Они дают представление о скоростных параметрах, влияющих на отношение и самого поисковика, и пользователей к ресурсу. Игнорировать их нельзя. Но и расстраиваться не стоит, увидев результат ниже 100 баллов, — всё представлено в сравнении, а не натуральной величиной в вакууме.

    Самое ценное, что даёт Page Speed – это рекомендации по увеличению производительности. Статистика даёт советы с короткой расшифровкой в действиях и показывает приблизительную экономию времени загрузки в миллисекундах. Список рекомендаций может быть очень длинным. Говоря по-честному, понимать это всё может только опытный веб-мастер. Но и для новичков есть понятные советы – сжать картинки (напр. TinyPNG), изменить формат чего-то, снизить количество переадресаций, убрать избыточные виджеты и т. д.

    Суть такова, что PSI способен приносить пользу всем администраторам сайтов. Кто-то сможет использовать его с большим профитом, кто-то – с меньшим ввиду недостатка опыта, понимания происходящего. Но сервис будет полезен всем. Потому что отражает более-менее точную картину и даёт дельные рекомендации в большинстве случаев.

    Для проверки скорости загрузки страниц сайта можно использовать дополнительные инструменты:

    Выводы и рекомендации

    Google Page Speed – крайне полезный инструмент веб-мастера. Своего рода бенчмарк скорости работы сайтов от главной поисковой системы мира. На него ориентируются все в большей или меньшей степени.

    Сервис выдаёт довольно точные показатели производительности и кучу рекомендаций различной степени сложности воплощения. Не все из них полезны, встречаются и вредные, противоречивые в отдельно взятой ситуации. Поэтому детально и эффективно работать с инструментом могут лишь действительно опытные веб-мастера, понимающие суть происходящего.

    Имитация загрузки страниц в PSI происходит с помощью Lighthouse – опенсорсного программного комплекса для оценки качества сайтов. Всё вышеописанное бесплатно.

    Узнав оценку своего сайта, не спешите расстраиваться, если она окажется недостаточно высокой. При выдаче попугаев сервис учитывает результаты сотен тысяч других сайтов, их сравнительная средняя производительность влияет на балл вашего. Расслабьтесь, выдохните и выполните неспеша, качественно наиболее очевидные, важные рекомендации PSI. Этого окажется достаточно в большинстве случаев для поднятия скорости до комфортного уровня. Для всех — и людей, и поисковых систем.

    Топ-пост этого месяца:  Как начать понимать термины, которые используют SEO-шники
    Добавить комментарий