Почему я забил на Google page speed Insights. Что измеряет Google PageSpeed Insights и стоит ли слепо ему верить Данной проблемы существует инструмент pagespeed
Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования . Действительно, современный пользователь, который кликнул по ссылке, не ждет загрузку страницы более 5 секунд. Поэтому, чем дольше грузится ваш сайт, тем больше вы теряете потенциальных клиентов.
Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта - 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.
Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в
снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".Шаг № 5: Включение сжатия
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
Вывод
В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.
Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:
- Использование CDN.
- Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
- Оптимизация размеров и сжатие изображений.
Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.
Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.
Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.
Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!
12 ноября Google по тихому обновил PageSpeed Insights , изменив в нем практически все. Это станет большой переменой для всей индустрии сайтостроения. Похоже, сейчас настанет некоторая волна паники и хайпа вокруг этого события. В статье - анализ перемен и что они нам принесут.
Что такое PageSpeed Insights
Буквально пару слов для тех, кто не в курсе. Вот уже 8 лет PageSpeed Insights является главной пузомеркой скорости сайтов, в нее можно ввести адрес страницы и узнать ее оценку по шкале от 0 до 100 вкупе с рекомендациями по улучшению.Конечно, есть много других хороших инструментов для проверки скорости. Но так как этот - от Google, и они заявляли, что скорость сайта влияет на рейтинг в выдаче, для большинства эта оценка кажется самой важной. Особенно для заказчиков и начальников, и как результат - практически все пытаются поднять PageSpeed Score своих проектов, а метрика стала практически самой важной в индустрии.
Что изменилось?
Если коротко - все. Старый PageSpeed отставили в сторону, заменив его оценками и аналитикой Lighthouse , open-source инструмента для аудита сайтов, который помимо прочего встроен в Google Chrome.Кардинальное отличие подхода - очки теперь присуждаются не за выполнение правил, а за скорость . Загрузка страницы оценивается по нескольким временным характеристикам - через сколько времени после начала загрузки уже что-то видно, когда уже можно кликать, насколько все тормозит, пока прогружается, и когда загрузится все. Эти характеристики сравниваются с показателями лучших сайтов и превращаются в баллы. Ниже мы разберем это подетальней, сейчас важен сам принцип.
Рекомендации есть, как и раньше - но теперь они несут совсем другую нагрузку. Рекомендации никак напрямую не связаны с баллами , и абсолютно не факт, что их воплощение улучшит ситуацию (но запросто может ухудшить при бездумной реализации).
Паника неминуема
Сейчас ночь 13го, и все относительно тихо. Только пару профильных ресурсов выложило короткие заметки об обновлении, только пару клиентов написали взволнованные письма о странном поведении PageSpeed Insights. Кажется, это затишье перед бурей.Прямо сейчас видно, что инструмент ведет себя нестабильно - оценки для одной и той же страницы колеблются в пределах 20 пунктов, иногда выходят жалобы о невозможности получить страницу оцениваемого сайта. Некоторые сайты вообще, по его мнению, недоступны - хотя на самом отлично себя чувствуют.
Очевидно, что скоро очень много людей бросятся смотреть оценки своих проектов, накрывая сервис международным хабра-эффектом. Все будет работать через пень-колоду, глючить и пугать прыгающими оценками.
Это непросто, но постарайтесь расслабиться и сохранять спокойствие. Первое, что надо помнить - обновление PageSpeed Insights никак не влияет на принципы ранжирования в поисковой выдаче. Второе - понадобится не меньше двух недель, чтобы обновление обкатали, поправили и оно начало стабильно работать. Не делайте резких движений , возможно их потом придется откатывать.
Размышления и прогнозы
В этих изменениях много позитива. Господство старого PageSpeed Insights с его принудительными рекомендациями наделало немало бед. Во первых, любая рекомендация может быть близка к бесполезной в вашей конкретной ситуации. Во вторых, ее можно реализовать в ущерб более важным вещам, например времени генерации страницы. Но выбора не было - приходилось все это делать, чтобы получить красивую оценку.Например, чего стоит рекомендация о минификации html кода страницы? В среднем эта операция занимает около 100 мс, и эта задержка в десятки раз перекрывает любую возможную выгоду от уменьшения размера страницы. Единственный вариант, когда это может быть выгодно - если вы выдаете готовые заранее минифицированые страницы из кеша.
В любом проекте последних лет немало усилий уходило на оптимизацию изображений, минификацию и группировку ресурсов, отложенный запуск JavaScript, который бы ничего не сломал. Чаще всего это уводило фокус внимания от сути - скорости работы сайта для посетителей. Интернет был полон как примерами тормозных сайтов с отличными оценками, так и быстрых сайтов, которые оценивались плохо.
Теперь эта мишура будет понемногу отваливаться. На первых тестах оценки с минификацией-группировкой ресурсов и без практически не отличаются. Значимыми становятся реально важные вещи - как быстро сервер отвечает и сколько тяжелого материала на странице. Все свистелки - виджеты социальных сетей, интерактивные карты, чаты и роскошные попапы будут неумолимо бить по оценке, как их не заворачивай.
Вполне вероятно, что это все приведет к действительно быстрым сайтам и пониманию, как их делать. По крайней мере, очень хочется в это верить.
Новые метрики
А для самых стойких - подробный разбор новых метрик, которые влияют на оценку. Всего их 6, и они имеют разный вес в формировании финальной оценки. Пройдемся по ним в порядке уменьшения значимости.1. Время загрузки для взаимодействия
Это самая важная характеристика - и самая тяжелая. Отметка времени, когда страница становится полностью готова к взаимодействию с пользователем. Этот момент наступает, когда:- отобразилась страница
- зарегистрировались обработчики событий для большинства видимых елементов
2. Индекс скорости загрузки
Показывает, насколько быстро контент страницы становится доступен для просмотра. Для оценки используется модуль Speedline .Это время, когда страница в браузере перестает изменяться визуально. Для определения используется покадровое сравнение вида страницы.
3. Время загрузки первого контента
Показатель, который определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста.4. Время окончания работы ЦП
Этот параметр показывает время, в которое основной поток страницы становится достаточно свободен для обработки ручного ввода. Этот момент наступает, когда:- большинство элементов на странице уже интерактивны
- страница реагирует на действия пользователя за разумное время
- отклик на действия пользователя составляет менее 50 мс
5. Время загрузки достаточной части контента
Этот параметр показывает время, по истечении которого становится виден основной контент страницы. Этот момент наступает, когда:- случилось наибольшее изменение вида страницы
- прогрузились шрифты
6. Приблизительное время задержки при вводе
Это наименее значимая характеристика. Показывает время в миллисекундах, которое занимает реакция страницы на действия пользователя в течение самых занятых 5 с загрузки страницы. Если это время превышает 50 мс, пользователям может показаться, что ваш сайт притормаживает.Каждая метрика сравнивается с показателями всех оцененных сайтов. Если у вас она лучше, чем у 98% сайтов, вы получаете 100 баллов. Если лучше, чем у 75% сайтов - вы получаете 50 баллов.
На первый взгляд, эти метрики весьма жизненные и обмануть их грязными манипуляциями, которые на самом деле не ускоряют сайт, будет практически невозможно.
Пока что остается загадкой принцип оценки мобильной версии сайта. Вернее, принцип тот же, но часто баллы ощутимо ниже. Непонятно, на какой виртуальной конфигурации мобильного устройства они прогоняются.
Добрый день, дорогие читатели. Когда я занимался , в своей работе пользовался ресурсом Google pagespeed insights для определения проблемных мест в коде страницы. В тот период моей целью было достичь 100 баллов из 100 возможных. Но на самом деле нужно гнаться за максимальным баллом и что реально измеряет сервис? В этом мы сегодня постараемся разобраться.
История появления
Самым первым средством тестирования скорости был сервис YSlow. Он учитывал множество метрик, которые сказывались на скорости загрузки. По каждой из них выставлялся балл. Количество этих показателей было большое, и в итоги выставлялась оценка по пятибалльной системе (американской) A – отлично, F – неудовлетворительно. Он и был прародителем Google PageSpeed Insights.
Позже появилась система от Гугл, которая упрощала пользователю понимания оценки показателей. Количество метрик сократилось и за каждую начислялось определенное количество баллов. Была выбрана 100 балльная система. Если набираете 100 баллов по ПейджСпид, то многие считают, что их сайт грузится очень быстро. Но это не так. Сейчас узнаем почему.
Что измеряет PageSpeed
Этот сервис учитывает:
- Время отклика сервера
- Скорость отображения страницы. К этому относится скорость прорисовки «первого» экрана, загрузка подключенных скриптов, файлов стилей, картинок, шрифтов
- Размеры и возможности , CSS-файлов, HTML
- Наличие перенаправлений на другие станицы (редирект), блокирующих элементов
- Адаптивность верстки к мобильным устройствам
Как видите, только один показатель отвечает за реальную скорость загрузки – это скорость отклика сервера. Все остальное – это относительные величины, которые влияют лишь на удобство пользователей.
Например. Если следовать рекомендации «Удалить блокирующие ресурсы» и вставить CSS-файл в шапку страницы, то ее размер может значительно увеличиться, а это тоже не хорошо. Перенести CSS и скрипты вниз кода страницы, то это значит, что какое-то время пользователь будет видеть при загрузке содержимого страничку без стилей, то есть, сложится впечатление сломанной верстки. Это ухудшение поведенческих факторов, посетитель может просто закрыть ее и покинуть сайт. Перенос скриптов в футер – потеря их функционала, некоторые могут перестать работать корректно.
То же самое касается и скорости отклика сервера. ПейджСпид измеряет скорость, используя серверы, расположенные в Европе, а для сайтов, на территории России и стран СНГ – это географическая задержка, время увеличивается. То есть, и эта метрика не идеальна.
Вот еще пример того, что Google PageSpeed Insights не сервис замера скорости загрузки . Ниже приведены скрины сайтов с одинаковой скоростью, но совершенно разными баллами:
А вот еще пример одного сайта, который по показателям PageSpeed очень плохой, а реальное время загрузки выше, даже чем на выше приведенных примерах:
Ну а теперь задайте себе вопрос, а стоит ли гнаться за 100 баллами в этом сервисе? На своем примере хочу сказать, что не стоит. Добившись 97 баллов, я получил не рабочий скрипт для мобильных устройств. Поэтому вы можете потерять часть функционала своего сайта .
Так зачем нужен Google PageSpeed
Его можно использовать только в качестве рекомендательного инструмента. Который поможет найти проблемные места, указать на недочеты. Для реального измерения скорости загрузки сайта, нужно пользоваться профессиональными инструментами: GTmatrix и PingDom, о которых писал в обзоре . В GTMetrix есть временная шкала, к которой привязана загрузка каждого элемента страницы. Вот именно по ней и можно ориентироваться, какой из элементов страницы тормозит ее загрузку. Кроме этого, здесь указаны коды ответов сервера, размеры загружаемых файлов:
PageSpeed пригодится в первую очередь для нахождения возможных проблем. Укажет, если ваш сервер не использует сжатие для файлов, или не указаны корректно сроки кэширования, а может, вы используете полноразмерные картинки без их предварительного сжатия, и так далее.
Вывод
Стремится получить максимальные баллы – это пустая трата времени. Кроме этого, такой подход может убить часть функционала страницы, перестанут работать плагины и скрипты, может поломаться верстка сайта (страница будет выглядеть коряво). Поэтому использовать Google PageSpeed нужно без фанатизма . Для определения реальной скорости загрузки следует пользоваться профессиональными инструментами и следовать их рекомендациям.
Бесплатный онлайн-сервис Google Page Speed Insights – это комплексный инструмент для определения фактической производительности и выбора эффективных путей оптимизации сайта. Удобен для использования как на компьютере, так и на мобильном устройстве. Не показывает абсолютную скорость страницы, а анализирует эффективность динамики загрузки и отрисовки в браузере клиента. При этом учитываются только не зависящие от типа интернет-соединения факторы: JavaScript, CSS, структура HTML, конфигурация сервера, размер изображений и т. д.
Начало работы
Чтобы получить подробный отчет о производительности, необходимо перейти на официальный сайт Page Speed Insights и вставить ссылку на исследуемый ресурс в строку «Ведите URL веб-страницы». После этого нужно нажать кнопку «Анализировать».
Время подготовки и выдачи результата занимает меньше минуты. Пользователь сразу же может оценить необходимость в SEO-оптимизации или убедиться в эффективности используемого алгоритма поискового продвижения web-сайта.
Особенности Google Page Speed Insights
Отчет по скорости загрузки сайта имеет графическую и цифровую составляющую, отдельно для ПК и мобильных устройств.
Показатель Page Speed (скорость страницы) демонстрирует динамику в секундах с начала первой отрисовки контента (FCP) до момента загрузки HTML и постройки DOM-дерева (DCL), т. е. полной инициализации интерфейса для работы пользователя. Чем меньше это время, тем быстрее произойдет отображение сайта в браузере. Чтобы все ресурсы были в равных условиях, сервис Google Page Speed Insights использует в качестве отправной точки усредненный показатель скорости загрузки по сети, выставляя одну из оценок:
- Slow – медленная (красный цвет);
- Average – нормальная (оранжевый);
- Fast – быстрая (зеленый).
Наличие графика распределения скорости позволяет легко выявить проблемные области по темпу загрузки и принять необходимые меры. Цветная графическая маркировка также имеет четкую смысловую нагрузку.
Также онлайн-сервис Page Speed Insights использует 100-балльную шкалу для оценки веб-ресурсов по времени выдачи результатов на поисковый запрос и полной загрузке страницы. Всего предусмотрено три интервала скорости:
- Low (низкая) – 0–59 баллов;
- Medium (средняя) – 60–79;
- Good (хорошая) – 80–100.
Низкая оценка веб-ресурса практически всегда указывает на большие недочеты в организации процесса рендеринга, которые требуют обязательного устранения.
Оценка Page Speed Insights и SEO-продвижение
Google использует около 200 факторов для определения рейтинга сайта, среди которых наиболее важным является ключевое слово в начале тега title, объем и релевантность контента поисковым запросам, плотность и расположение ключевых слов, абсолютная скорость загрузки. Показатель Google Page Speed Insights непосредственно влияет на выдачу 1–3 результатов из 100. В то же время в официальных требованиях системы указано, что «сайт должен работать максимально быстро». Этот фактор благоприятно влияет на поведенческую историю веб-ресурса и значительно повышает его рейтинг. Именно поэтому эффективное СЕО-продвижение сайта требует нормальных показателей Page Speed Insights, но не обязательно со значением Good и Fast. Ярким подтверждением этому факту является мегапопулярный ресурс Amazon.com со средним уровнем оптимизации и высоким рангом.
Разработчики уделили огромное внимание функциональности и внешнему виду сайта в ущерб минимизации времени на полную загрузку картинок и стилей.
Кроме подробного отчета о производительности веб-ресурса, сервис предлагает и различные варианты для ее улучшения. Например, сайт Amazon.com получил следующие предложения по оптимизации.
Использование кеша браузера. Практичный и полезный совет по применению заголовков кеширования для хранения копий статических файлов (не меняются от одного поискового запроса к другому) в браузере пользователя.
Возможна ситуация, когда в списке ссылок присутствует ресурс, веб-хостинг которого реализован на стороннем сайте, что делает невозможным выполнение данной рекомендации.
Удаление JavaScript, блокирующего рендеринг. По возможности организуйте выполнение интерактивных сценариев веб-страниц в футере сайта (footer – нижняя часть) или сделайте асинхронную загрузку шапки и JavaScript. Также часть кода можно перенести в основную HTML-разметку. Здесь важно участие профессионала, чтобы не нарушить корректную работу функционала сайта. Эта рекомендация не подходит для ресурсов, использующих готовый шаблон WordPress.
Оптимизация Cascading Style Sheet. Существует возможность разделения CSS-кода для приоритетной выгрузки стилей оформления первого экрана в шапку сайта и добавления остальных каскадных таблиц в футер. Здесь также нужно участие верстальщика, чтобы избежать будущих проблем в работе сайта.
Сжатие изображений. Эффективным способом увеличения скорости загрузки сайта является оптимизация размера картинок и фотографий. Для этого можно использовать редактор Adobe Photoshop или специализированные онлайн-сервисы: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Рекомендуемая ширина изображения в формате jpeg, gif или png – 400–600 пикселей при весе 35–75 Кб.
Бесплатный инструмент Google Page Speed Insights отличается быстродействием, простотой применения, детальным анализом производительности сайта и практичными рекомендациями по повышению скорости загрузки. Используя этот сервис, вы сможете улучшить конверсию своего веб-ресурса и избежать ситуации с уходом пользователя по причине затянутого рендеринга или длительной выгрузки изображений.
Время загрузки сайта — один из важнейших показателей, влияющий на поведение пользователей сайта. Google Pagespeed Insights сделал дополнительные обновления и теперь может сказать, насколько быстро работает весь ваш сайт в целом, потому что теперь он позволяет Вам видеть агрегированные данные о скорости страницы по всему доменному имени. Они обновляют алгоритмы каждую неделю, чтобы обеспечить решение для улучшения.
PageSpeed Insights – полезный инструмент для выявления серьезных проблем со скоростью загрузки, но это вовсе не бенчмарк, высокий бал в котором гарантирует улучшение позиций сайта в поисковой выдаче.
Тем не менее, нововведений у гугла много.
Google объявил, что скорость загрузки страниц сайта станет фактором ранжирования в мобильном поиске, начиная с июля 2018 года. Нововведение назвали Speed Update , и оно повлияет на «небольшой процент запросов», заверили в Google. Санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Апдейт вступит в силу в июле 2018 года, поэтому у вебмастеров есть время подготовиться. Google советует воспользоваться инструментом PageSpeed Insights , а также Lighthouse .
Помимо этого, Google представил ответы на самые популярные вопросы, касающиеся Speed Update :
Google по-прежнему будет использовать десктопный показатель скорости для десктопного индекса?
Да, здесь все останется без изменений.
Учитывая запуск mobile-first индекса, не будет ли при ранжировании на десктопах учитываться только скорость мобильного сайта?
Нет, изменение касается только мобильного поиска.
А что насчет сайтов, получивших результат «Unavailable» в Page Speed Insights? Как им подготовиться к нововведению?
Владельцам сайтов нужно задуматься о производительности своих ресурсов. Для улучшения показателей сайтов они могут использовать любые привычные инструменты.
PageSpeed Insights использует данные из отчета о пользовательском опыте юзеров Chrome. Для сайтов, не вошедших в выборку отчета, рекомендуется использовать Lighthouse.
Можете назвать процент запросов, которые будут затронуты нововведением?
Оно коснется очень небольшого числа запросов.
Насколько сильно сайт потеряет в позициях в случае попадания по санкции?
Скорость – это один из многих факторов ранжирования. Не забывайте, что смысл – это «сильный» фактор, и медленная страница с релевантным контентом все равно может ранжироваться довольно высоко.
Будут ли какие-либо уведомления в Search console, или нововведение абсолютно алгоритмическое?
Оно алгоритмическое. Нет такого инструмента, который смог бы показать, что на страницу наложили санкции из-за низкой скорости.
Speed Update использует те же данные, что и PageSpeed Insights – опыт пользователей Google Chrome?
Google не может раскрыть эту информацию.
Многие SEO-специалисты уделят PageSpeed Insights чересчур много внимания. Часто ссылки на него занимают первые места в технических заданиях специалистов по поисковой оптимизации. Многие расценивают рекомендации сервиса как руководство к действию, тратят кучу времени и сил на то, чтобы получить высокий балл в PageSpeed Insights и часто даже не задумываются, а так ли это все нужно.
Для начала отметим, что PageSpeed Insights имеет только косвенное отношение к Google. Этот сервис поддерживается и развивается независимым комьюнити web-мастеров и разработчиков и прямого отношения к поисковому гиганту он не имеет. То есть его рекомендации основаны на мнении сторонних людей, а не исходят напрямую от Google.
Еще один факт на который не все обращают внимание. PageSpeed Insights вовсе не показывает реальную скорость загрузки сайта. Балл, который он выдает – это внутренняя метрика сервиса, а не действительная скорость загрузки страницы.
Существуют другие инструменты, которые показывают реальную скорость загрузки. Например webpagetest.org или tools.pingdom.com. Но даже их советам слепо следовать не стоит, потому что предназначение таких сервисов в том, чтобы помочь найти баланс между скоростью загрузки сайта и его функциональностью. Именно так, найти баланс, а не сделать сайт молниеносно быстрым в ущерб всему остальному.
При ранжировании поисковой выдачи, Google учитывает более чем 200 факторов и скорость загрузки сайта – далеко не основной из них. Поисковик сам об этом говорит. Вот выдержка из официального блога компании:
Скорость загрузки сайта не так важна, как его релевантность. На данный момент, показатель скорости загрузки влияет на выдачу менее чем 1% результатов поиска.
Так стоит ли вообще прислушиваться к советам PageSpeed Insights? Да. Но с умом.
Например, если сервис говорит, что картинки на сайте очень большие и их стоит уменьшить на 80% – то это нужно сделать. Но если вы получили рекомендацию «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», то слепо следовать ей не стоит, ведь зачастую такие действия приводят к ошибкам в нормальной работе сайта.
Выводы напрашиваются очевидные. Прежде всего, нужно четко понимать, что показатели PageSpeed Insights носят рекомендательный характер. Полученные в ходе анализа метрики ни в коем случае нельзя использовать как прямое руководство к действию.
И уже тем более не стоит гнаться за заветным показателем в 100 баллов – практически недостижимым идеалом “скорости загрузки” сайта, который даже Google.com не всегда набирает. Стремясь повысить скорость загрузки сайта, нужно сопоставлять затраты на оптимизацию и итоговый результат. Во многих случаях, повышение рейтинга на 3-5 баллов не стоит затраченных сил, времени и денег.
- Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактирования кода этот пункт лучше оставить на потом.
- Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
- Сократите время ответа сервера. Зависит от серверов вашего хостера, их загруженности и прожорливости вашего проекта.
- Если не хотите ставить плагины, то можете модифицировать данные прямо в файле.htaccess, который лежит в корневой папке сайта.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете заполнить заявку на бесплатный анализ и оценку стоимости работ.
