Скорость страниц гугл. Почему не нужно беспокоиться о показателе Google PageSpeed Insights. Показатель Google PageSpeed не имеет значения

Модуль Google PageSpeed для сайта: что умеет и как пользоваться

Решили поэкспериментировать и добавить на три проекта ускоритель от Гугла. Что из этого получилось — выясняем.

Сайты должны грузиться мгновенно. Ах, нет, сайты ничего никому не должны? Зайдите в троллейбус и сядьте рядом со студентом, который сидит с айфоном. Посмотрите, готов ли он ждать, пока загрузится какой-то интернет-магазин. Скажем так: три секунды — и вкладка закрывается. В ход идет следующий результат из поисковой выдачи.

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

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

— Мэтт Каттс, Google

Гугл потрудился и выпустил свой инструмент для проверки скорости — PageSpeed. Найти тормозящие загрузку элементы просто — заходим сюда и в единственном поле указываем адрес, который хочется протестировать. За минуту будет готов подробный отчет о производительности. Результат будет показан в попугаях. В идеале их сто, но попробуй-ка добейся! Даже самому Гуглу это не под силу: проверьте его сервисы:)

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

Оптимизировать сайт можно двумя способами.

Ручная оптимизация

1. Сжимаем картинки Фотошопом или прогоняем через Optimizilla , например

Чем меньше весят картинки, тем больше шакалов тем быстрее загружается сайт. Делаем сжатие, многомегапиксельные фотки прячем под кат. Хватит превьюшки 640×480. Меньше картинка — шустрее сайт.

Даже на стартовой странице Google Developers графику можно сжать на 71%.

2. Выполняем подключение шрифтов с самого сайта, а не тянем их с гуглофонтов

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

3. Используем кэш браузера по максимуму

Когда сайт частично уже сохранен у клиента — загрузка пойдет намного быстрее.

4. Сокращаем JavaScript и CSS

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

5. Сокращаем HTML

На практике — удаление лишних пробелов, табов, переносов строк.

6. Удаляем неиспользуемый код

Можно встроенным в «Хром» аудитом. Нажимаем F12 и переходим на вкладку Audits. Внизу есть единственная кнопка Run. Занимается в целом тем же самым, что и PageSpeed. Только в реальном времени.

Автоматическая оптимизация

Любой сайт состоит из динамических и статических элементов. Динамические элементы — сам HTML-код, полученный из работы php и запросов к базе данных. А остальное — статика. Это картинки, JavaScript и CSS.

Автоматически оптимизировать сайт можно крутой штукой от Гугла — PageSpeed Insights. Этот модуль устанавливается на сервер nginx и после настроек сжимает в реальном времени дофига инфы , в том числе, графической.

PageSpeed Insights умеет анализировать HTML и оптимизировать ресурсы. Пережимать, короче. В исходном коде ресурсы будут находиться по другому пути, не по тому, что задан сжать фоточку разработчиком. Это стоит учитывать. Но отображение ресурсов не изменится. Уменьшится вес. А значит, возрастет скорость загрузки страницы и посетители станут довольнее:)

Однако у PageSpeed Insights имеются ограничения. Его можно поставить только на nginx, запущенный на или виртуальном сервере. Нет, арендованный где-то в Германии shared-сервер не подойдет.

Второе ограничение связано с вечной войной браузеров. Картинки, пережатые PageSpeed-ом, конвертируются в формат.webp, который понимает только «Хром» (на всенародно любимом Internet Explorer 6 такая штука не пройдет). В последних версиях отображению таких картинок научилась и «Опера». Потому что движок поменяла.

Примеры использования PageSpeed Insights

Мы установили модуль PageSpeed Insights на трех проектах — на своем новом сайте и на двух клиентских. Модуль видит, с какого браузера приходит запрос, смотрит, обучен ли он отображать webp-формат и отдает либо оптимизированную картинку, либо обычный jpeg.

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

Сейчас обе версии стоят в зеленой зоне. Значит, проблем со скоростью не возникнет. Если скорость подключения хорошая, не EDGE какой-нибудь:)

В рамках технической поддержки интернет-магазина фабрики «Витра» мы решили поэкспериментировать и установить модуль PageSpeed 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, который лежит в корневой папке сайта.

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

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

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

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

Или Apple.com

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

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

Тем не менее:

The New Yorker

Meduza

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

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

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

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

Сергей Арсентьев

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

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

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

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

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

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

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

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

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

Чем ближе результат к 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, который лежит в корневой папке сайта ().

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Многие из Вас наверное пользовались замечательным сервисом от Google: PageSpeed Insights ? Хотите получить заветные 100 из 100?

Картинка для привлечения внимания

А дело-то за маленьким.

Итак, результаты моего теста. Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):

скорость для мобильных - 79/100;
скорость для компьютера - 93/100;

Неплохо да?

Жалуется на:

Исправьте обязательно:
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 3. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Делаем небольшие махинации. Переносим стили из файла в код:
Было:

Стало:

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; } /* и другие стили */
И - ура! - у нас результаты выше (ссылка на сайт):

скорость для мобильных - 99/100;
скорость для компьютера - 99/100;

И жалуется только на:Исправьте по возможности:
Сократите HTML
Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку. Но это проблему можно решить сжатием кода. К данной теме не относиться.
А также мы не забываем, что все-таки мы не решили проблему описанную выше:
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML. Сколько они весили в файле, столько же весят и в коде!

А теперь самый главный вопрос: Баг или фича?
Спасибо!