Google pagespeed insights: Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

Содержание

Стоит ли измерять скорость сайта в PageSpeed Insights?

Партнерский материал от хостинга Reddock.

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

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

Что такое PageSpeed Insights

PageSpeed Insights входит в набор сервисов Speed Tools от Google. Он анализирует веб-страницы, выявляет их слабые места и предлагает решение для ускорения загрузки страниц. Удобен и прост в применении. Система рассчитывает не скорость загрузки страницы сайта, а оценку показателей, которые могут влиять на нее.

Для проверки веб-страницы перейдите в PageSpeed Insights и введите в поле URL-адрес страницы для анализа. Инструмент анализирует не работу сайта в целом, а отдельной страницы на нем.

Вы получите 2 результата анализа — для мобильных устройств и десктопов. Максимальный балл — 100. Всего три уровня показателя:

низкий, до 49 баллов,

средний, от 50 до 89 баллов,

высокий, от 90 до 100 баллов.

Ранее баллы рассчитывались по-другому: после обновлений платформы пороговые значения показателей увеличились. Уже в этом году PageSpeed Insights перейдет с 5 на 6 версию Lighthouse. Lighthouse — это инструмент, который анализирует время загрузки, доступность и поисковую оптимизацию веб-страниц.

В шестой версии появятся новые показатели для измерений, а старые уменьшат влияние на общую оценку. Уже сейчас на сайте Loading.Express можно узнать показатели сайта на Lighthouse 6 версии.

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

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

В каких случаях PageSpeed Insights имеет значение

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

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

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

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

Анализ PSI — это имитация загрузки веб-страниц у пользователей. В основном замер показателей идет из Европы, а загрузка страниц зависит от местоположения сервера. Чем ближе сервер находится к основной аудитории, тем быстрее загружаются страницы у них.

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

Также исправление ошибок может не влиять на PSI, потому что:

Поэтому к выполнению всех рекомендаций инструмента следует подходить с осторожностью и проверять их совместимость с сайтом.

Заключение

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

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

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

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

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

PageSpeed Insights — Оптимизация (обновление)

Всем привет! Сегодня мы поговорим о сервисе PageSpeed Insights от Google. Это сервис, который позволяет провести анализ сайта и дает определенные рекомендации по его оптимизации. Когда сервис только появился, это вызвало немалый интерес со стороны разработчиков и SEO-оптимизаторов, ведь по-факту, сам Google дает рекомендации и указывает, что конкретно нужно изменить или на что стоит обратить внимание, чтобы сайт и работал и загружался быстрее, а соответственно, был более любим поисковыми системами. В свое время я даже делал выпуск по оптимизации верстки для того, чтобы ваш проект набирал наибольшее количество баллов в PageSpeed. Там мы творили очень странные вещи по нынешним меркам — от загрузки части CSS в тег style в начале страницы, до более диких вещей, вроде загрузки стилей и ресурсов через JavaScript. И это реально работало. Но работало тогда. Давайте посмотрим, как обстоят дела сейчас, стоит ли колдовать над кодом, или достаточно просто выполнять определенные несложные правила по оптимизации сайта. В этом уроке я дам базовые обязательные рекомендации для любого проекта, актуальные на сегодняшний день и в будущем. Все рекомендации из данного урока отлично реализованы в последнем стартере OptimizedHTML 5, к примеру которого я буду обращаться по-ходу дела.

Твитнуть

Класснуть

Запинить

Полезные материалы

Важное примечание! Google PageSpeed Insights дает лишь рекомендации по оптимизации страниц, это всего лишь цифры. Они ни в коем случае не должны быть строгим ориентиром и хоть как-то влиять на функционал сайта. Если для достижения лучшего результата PageSpeed Insights вам нужно менять всю структуру проекта, это может быть опасно и отрицательно повлиять на ранжирование сайта в поисковых системах и вот почему. Поисковики, в первую очередь, оценивают удобство сайта для пользователей, поменяв что-то кардинально, вы можете сделать только хуже. Это необходимо объяснять заказчикам, если вы работаете над клиентскими проектами. Результат таких манипуляций может быть непредсказуем, зачастую лучше обойтись базовыми правилами, которые я приведу далее и не стараться получить максимально высокую оценку сервиса, в ущерб пользовательского опыта. Были случаи, когда структура сайта менялась даже незначительно и поисковый трафик безвозвратно падал. Все рекомендации данного урока основаны на достаточно внушительном опыте работы автора с клиентскими проектами.
Оптимизируйте осторожно.

1. Стили и скрипты

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

Для оптимизации CSS я использую оптимайзер clean-css в реализации gulp-clean-css в проектах с использование Gulp.
Для оптимизации JS я использую модуль uglify-es, как наиболее эффективный, актуальный инструмент в реализации gulp-uglify-es.
Конкатенацию можно реализовать любыми доступными инструментами, я предпочитаю обычный gulp-concat.

Не смотря на то, что Google PageSpeed иногда рекомендует загружать и стили и скрипты в конце документа, я рекомендую стили все-же загружать классическим способом в тег <link>, размещенный в теге <head>, а скрипты в конце документа, перед закрывающим тегом </body>, см. OptimizedHTML 5 — app/index.html.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<link rel="stylesheet" href="path/to/styles.min.css">
</head>
<body>
	
	<script src="path/to/scripts.min.js"></script>
</body>
</html>

2. Шрифты

Все, что касается шрифтов я могу уместить в одной фразе — используйте один формат woff2. Он достаточно легковесный и поддерживается везде, где только можно в настоящее время. Тот-же Google Fonts использует этот формат шрифтов как единственный. Данный момент мы обсуждали в видео-презентации OptimizedHTML 5. Для конвертации и сжатия любого шрифта в woff2 рекомендую использовать сервис Font Squirrel. Это быстрый и эффективный способ получить шрифт в нужном формате.

3. Изображения

Не зависимо от того, какой формат или форматы изображений используются в проекте, самое главное правило — старайтесь не использовать изображения, по своей физической ширине значительно превышающие размер вьюпорта, в котором они находятся. Что это значит. Допустим, вы используете 100% ширину изображения в теге <img> или в другом контейнере, размер которого, например, 700 пикселей (это можно посмотреть в инструментах разработчика любого браузера), а само изображение, загружаемое в контейнер имеет ширину 1000 пикселей. В таком случае, не зависимо от того, насколько хорошо у вас сжато изображение, Google PageSpeed укажет вам на то, что изображение необходимо оптимизировать еще, хотя на практике это приведет только к значительной потере качества.

Данное правило действует и для устройств с HiDPI — дисплеями, но немного по-другому. Например, для Retina или для мониторов с масштабированием интерфейса более 100%. Если мы имеем вьюпорт 700 пикселей на ретине, изображение, загружаемое для таких экранов не должно иметь разрешение свыше 1400 пикселей по ширине, так как масштабирование экрана на ретине 200%. Однако создавать изображения для таких экранов отдельно не обязательно, можно просто проконтролировать, чтобы качество изображения после сжатия было приемлемым, а вьюпорт для предполагаемого 100%-го масштабирования содержал изображение не намного его превышающее.

Если при разработке вы учитываете HiDPI экраны, такие, как Retina и другие с масштабированием свыше 100%, можно использовать атрибут srcset для тегов <img>, чтобы для обычных экранов загружать обычные изображения, а для Retina — увеличенные в 2 раза. Однако на практике я использую это правило и адаптацию для Retina только в своих личных проектах, так как работа с такими изображениями требует технической подготовки. В клиентских проектах, где работают контент-менеджеры, соблюдать эти правила сложно, да и не обязательно. Поэтому я убрал из OptimizedHTML 5 возможность создания изображений @2x формата. В этом нет смысла. Достаточно просто обрезать и сжимать изображения на бэкенде средствами фреймворка или CMS, в пределах разумного, чтобы менеджер, загрузив изображение, весом, например, 8 Мб не затруднил отображение контента на странице.

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

Что касается Lazy Load, подгрузки изображений по мере их отображения, данную технику я рекомендую использовать только на тех сайтах, где изображений очень много. Например, в списках товаров или в длинных галереях. Если изображений не много, данная оптимизация хоть и может повлиять на оценку PageSpeed Insights, однако это как мертвому припарка. Поэтому в контентных, статейных проектах, коммерческих сайтах и визитках данное правило можно опустить и не выполнять отложенную загрузку. Однако если у вас очень много изображений на одной странице — Lazy Load обязателен.

4. Бэкенд

Данный раздел является, на мой взгляд, важнейшим. Вы можете сколько угодно оптимизировать стили, собирать скрипты в кучу, уменьшать изображения до 1 пикселя, однако если у вас тяжелый и неповоротливый бэкенд, который 5 секунд генерирует содержимое и 2 секунды соединяется с базой, это очень плохо. И плохо даже не столько для оценки PageSpeed, сколько для пользователей и поисковых систем. Это реальная проблема. Если я захожу на сайт и вижу белую страницу более 3-х секунд, просто закрываю вкладку и иду дальше. Зачастую, эта проблема — результат неграмотной разработки, использования множества тяжелых плагинов, перегруженного бэкенда. Последовательность работы такой городьбы сложно отследить и оптимизировать. Чтобы у вас не случилось таких проблем, разрабатывайте сайты с использованием какой-либо CMS по документации и следуйте рекомендованным разработчиками самой системы правилам.

Не хотел показывать пальцем, пример сам напрашивается. Из опыта, лидером по таким проблемам с бэкендом является WordPress. Ничего не хочу говорить про эту систему плохого, здесь проблема скорее в подавляющем большинстве криворуких разработчиков как плагинов, шаблонов, так и сайтов. При грамотном подходе, ориентируясь на Codex, можно сделать вполне нормальный оптимизированный проект. Однако, на практике, среди готовых проектов такое встречается крайне редко — реализация грамотного подхода при разработке с использованием данной CMS довольно сложная и затратная по времени задача для среднего разработчика, придется отказаться от множества плагинов сомнительного качества и писать все самому. Когда ваши задачи выходят за рамки скачивания и кастомизации готовых шаблонов и плагинов, приходит понимание правильной модели разработки, MVC здесь лидер. Я предпочитаю использовать другие системы, которые позволяют контролировать каждый этап разработки — от создания конкретных плагинов, до разработки всего функционала на более низком уровне. В настоящее время лидерами для меня являются Laravel, Opencart и Winter CMS (бывш. October CMS). Это очень прозрачный MVС у всех систем и возможность контролировать чистоту кода как бэкенда на уровне архитектуры, так и фронтенда, без танцев с бубном.

Однако, использование любой CMS или фреймворка — это сразу минус 5-10 баллов Google PageSpeed, особенно без кеширования, так как на генерацию бэкенда и обращения к базам данных уходит время. Поэтому в своих личных проектах и некоторых клиентских, где не нужен бэкенд, я использую генератор статики Jekyll. Сайт, созданный с использованием Jekyll представляет собой генерацию статических файлов, собранную единожды, например, при написании статьи, добавления другого контента или после внесения каких-либо правок. Лично для меня это по-прежнему самая лучшая, идеальная контентная система, которую я рекомендую всем, кому не нужен бэкенд и требуется молниеносная скорость и эффективность сайта. Сайт WebDesign Master сгенерирован с использованием Jekyll, можете оценить его реальную скорость работы.

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

5. Кеширование сервера

Для всех проектов рекомендую использовать директивы из файла ht.access, который вы найдете в стартере для верстки OptimizedHTML 5. Здесь прописаны, на мой взгляд, самые эффективные настройки сервера для кеширования изображений, стилей, скриптов, шрифтов и других ресурсов. Данный пункт реально добавит вам десятки баллов PageSpeed, без боли.

Если вы используете Winter CMS, править .htaccess вручную не обязательно — можно, например, использовать плагин Speedy, который сделает эту работу за вас.

6. Реальная эффективность сайта

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

Мракобесие

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

Использовать async для всех скриптов. Данный параметр может повлиять на оценку, но в реальности все ресурсы загружаются в любом случае. Используйте async только там, где асинхронная загрузка действительно необходима, например, при загрузке виджетов или ресурсов с другого сервера.
Боязнь больших библиотек и плагинов. Можете использовать абсолютно любые библиотеки, вроде jQuery или абсолютно любые плагины, вроде огромного Swiper на ванильном JS. Если все скрипты в одном файле и сжаты — можете быть спокойны. Намного хуже писать свой велосипед плагина из 10-ти строк кода, который работает кое-как и не везде. Это только ухудшит пользовательский опыт или вообще сломает экспириенс, если на данном функционале завязана значительная часть взаимодействия со страницей. Проще говоря: каруселька с товарами не работает, посетитель ушел, поисковик это отметил, сайт провалился. Нынешние скорости интернета позволяют загружать файлы библиотек и скрипты, содержащие библиотеки довольно быстро. Если бы это было не так, все изображения с сайтов у вас грузились бы по два часа. Ваша библиотека или минифицированный JS-файл — это лишь капля в море в общем потоке загружаемых ресурсов.
Загрузка стилей первого экрана в тег <style>. Знакомая практика для всех, кто занимался оптимизацией страниц. Данный костыль может повлиять на оценку PageSpeed, однако значительно усложнит разработку и поддержку сайта. Использовать или нет — решать вам. Я давно отказался от этого приема.
Использование WEBP формата изображений с фоллбеком на обычные или без него. Тоже спорный тренд для угоды цифрам PageSpeed. Формат неплох, имеет хорошее сжатие без заметного ущерба качеству. Его можно использовать, если есть желание. Я знаю некоторые студии, в которых практикуется подключение модуля PageSpeed для Nginx. Он отдает WEBP только тем браузерам, которые умеют с ним работать. На практике, это лишь усложняет разработку, требует написание фоллбеков и генерацию дополнительных изображений, а в случае работы с какой-либо CMS, вообще лишает все мероприятие смысла, ведь пользователь или контент-менеджер будет использовать тот формат, который подвернется. Если вы используете CMS или фреймворк, оптимизируйте и сжимайте популярные типы изображений средствами самой системы на бэкенде. PageSpeed, конечно, заметит возможность еще большего сжатия изображений, но в этом нет ничего страшного. Это просто рекомендация, выданная машиной на основе анализа, это ее работа. Все должно быть в пределах разумного.
Использование атрибута srcset или тега <picture> для загрузки различных форматов изображений, предназначенных для разных экранов. Данный пункт уже обсудили сегодня в разделе 3 — Изображения. Заморочиться можно, но смысла особого нет.
Спрайты. Довольно популярная методика из 2010-х, которая заключается в объединении изображений или иконок в спрайты с последующим выводом через координаты. Сейчас не имеет никакого смысла, сложна в реализации, далека от контент-менеджеров. Количество запросов к серверу, создаваемое 10-ю иконками или 1 запрос к спрайту ощутимой разницы в реальной оптимизации не дадут, а вот внесение правок, добавление иконок и любые другие изменения требуют дополнительных временных затрат.

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

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

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

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

PageSpeed Insights – сервис компании Google, позволяющий протестировать производительность и выбрать пути оптимизации сайта. Может использоваться со смартфонов, планшетов и компьютера. Тест скорости загрузки страницы производится на основе анализа эффективности и оперативности отрисовки контента в браузере посетителя. Учитываются следующие данные: используемые JS-скрипты, структура и чистота HTML+CSS, оптимизация мультимедийного контента и т.д.

В этой статье мы разберёмся, как проверить скорость загрузки сайта в Google PageSpeed Insights, разберём основные показатели на примере анализа русскоязычной версии сайта компании Apple и возможные пути решения проблем со скоростью.

Получайте до 18% от расходов на контекстную и таргетированную рекламу!

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.

Подключиться можно самому за 1 день.

Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.

Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.

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

Начать зарабатывать >>
Реклама

Читайте также: Где покупать ссылки для продвижения сайта

Проверка скорости загрузки сайта в PageSpeed Insights

Сайт Apple был взят по трем причинам:

Известный бренд.
Достаточно плохая оптимизация страницы по версии Google.
На днях презентовал iPhone 11.

Компания Apple – технологичный бренд, передовой. Но с сайтом явные проблемы, т.к. загрузку первоначального контента приходится ждать долгое время – порядка 4 секунд.

Анализ выполняется следующим образом:

Переходим по ссылке developers.google.com/speed/pagespeed/insights.
В строку для ввода вписываем адрес страницы.
Нажимаем на кнопку «Анализировать».
Дожидаемся завершения тестирования и обновления страницы.

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

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

Версия для мобильных:

Версия для компьютеров:

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

от 0 до 59 – низкая скорость загрузки;
от 60 до 79 – средняя;
от 80 до 100 – высокая.

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

Статья в тему: 10 сервисов для проверки скорости сайта

Далее идут подразделы с рекомендациями по устранению проблем при их наличии.

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

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

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

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

Оптимизация сайта по рекомендациям PageSpeed Insights

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

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

В случае с главной русскоязычной страницей сайта компании Apple можно увеличить скорость загрузки на 0,56 секунды. Также на скриншоте отмечена предполагаемая экономия на сжатии изображений (2 пункт).

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

Диагностика

В этом блоке представлена информация по производительности веб-ресурса и ряд рекомендаций. Элементы списка раскрываются.

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

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

Мифы и факты о PageSpeed Insights

Все чаще мы сталкиваемся с требованиями seo-шников устранять замечания, которые выдает автоматический инспектор PageSpeed Insights.

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

Итак, что же такое PageSpeed Insights?

Существует миф о том, что это официальный инспектор Google.

Этот ресурс является частью проекта Google developers, однако не является официальной оценкой.

Это четко описано в FAQ, который, к сожалению, не переведен на русский язык – потому, наверное, отечественные seo-специалисты о нем и не знают:

https://developers.google.com/speed/docs/insights/faq

PageSpeed Insights был разработан «на основании рекомендаций постов и статей веб-разработчиков сообщества» (“Many of the rules used by PageSpeed Insights came out of recommendations of blog posts and articles published by developers in the web community”).

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

“Since PageSpeed is a performance optimization tool, its recommendations are biased in favor of speed (…) our suggestions might be restrictive for an individual web site. You have to consider the tradeoffs for your own application (…)”

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

Инспектор PageSpeed Insights дает замечания, относящиеся к скорости работы сайта и к удобству просмотра на мобильных устройствах.

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

Если есть замечания в этом разделе, то это говорит о некачественной работе верстальщика или администратора сайта.

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

Что касается замечаний из раздела по скорости, то эти замечания я бы разбил на две группы:

Замечания, а вернее одно замечание: «Сократите время ответа сервера» крайне важно устранить.
Что такое время ответа сервера? Это время, за которое после команды пользователя открыть определенную страницу на сервере происходит выполнение всех команд программного кода, сбор информации из базы данных, формирование html страницы, которую отобразит браузер, и передача ее пользователю.
Этот параметр влияет на позиции в поисковой выдаче. На сайте https://moz.com/blog/how-website-speed-actually-impacts-search-ranking приведены результаты исследований, доказывающие это, а также опровержение гипотезы о влиянии на позиции времени загрузки изображений, стилей и других сопутствующих странице файлов.
Googleсчитает, что время ответа сервера должно составлять менее 200 мс. Если на загрузку вашего сайта требуется меньше времени, то сервис не покажет замечания и не покажет время загрузки Вашего сайта. Хотя, если ваши страницы загружаются за 150 мс, вы можете улучшить этот показатель до 30-50 мс.

Ко второй группе я отношу все остальные замечания. Эти замечания отображают не скорость, а использование технологий, которые в теории могут ускорить работу сайта. Т.е. замечания могут быть у очень быстро работающего сайта, и их может практически не быть у весьма неторопливого ресурса. Хочу отметить, что современный сайт не может обойтись без замечаний, поскольку система предъявит замечания ко всем подключенным скриптам, в том числе и google analytics, поскольку мы не можем влиять на настройки серверов Google и других сервисов.
Эти замечания также отражаются на общей скорости загрузки сайта (но, как указано выше, это не влияет на позиции сайта), но эта скорость уже важна для людей – то есть, как долго пользователь будет ждать открытия Вашего сайта?
Я рекомендую выполнять замечания по включению Gzip сжатия и использования кэша браузера.
Не рекомендую выполнять «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», поскольку выполнение этой рекомендации часто приводит к неправильной загрузке и функционированию сайта.
Остальные замечания следует оценивать по степени эффективности, если выполнение сократит Вам пару килобайт, то можно и пропустить такое замечание, а если у Вас, к примеру, очень объемные изображения, то подумайте о людях, которые будут ждать их загрузки на телефоне, через мобильный интернет и выполните рекомендации.

Какой мы можем сделать вывод?

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

Как Pagespeed Insights от Google помогает улучшить скорость загрузки сайта

Предположим у вас есть хорошо настроенный сервер, но производительность вашего сайта оставляет желать лучшего. Задержка ответа сайта занимает секунды и сервер не может обработать более 100 одновременных пользователей. Вы вложились в SEO, но до сих пор чувствуете, что поисковик Google ранжирует ваш сайт в выдаче ниже, чем предполагалось и, о боже, даже не в ТОП 10. Что делать? Как Google PageSpeed Insights может помочь вам? Давайте начнём с основных положений.

Очень популярный фреймворк для лёгкого создания оптимизированного веб дизайна — это фреймворк Bootstrap. И хотя Bootstrap легко использовать, он требует минимум 2 статических файла для работы. Это значит, что мы получаем удобство пользования за счет потери производительности. Но не переживайте, чуть позже в этой статье вы узнаете как можно компенсировать эти небольшие потери.

Вы можете использовать PageSpeed Insights бесплатно со страницы project или следуйте инструкции по установке расширения Google PageSpeed Insights Plesk в вашей панели Plesk

ПОЯСНЕНИЯ К РЕКОМЕНДАЦИЯМ PAGESPEED INSIGHTS

1. Избегайте переадресаций целевой страницы

Переадресации могут вызвать ощутимые задержки, если запрос переадресуется несколько раз на конечный адрес откуда в итоге отсылаются данные клиенту. Каждая переадресация инициирует свою процедуру HTTP запроса-ответа (с возможным поиском DNS и ТСP согласованием), которая может значительно снизить производительность сайта, особенно для мобильных устройств со слабым интернет соединением.

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

Также убедитесь, что настроен правильный редирект в один шаг с http://example.com на https://www.example.com. Люди привыкли набирать короткий адрес вашего домена в адресной строке браузера. Но ваш сайт должен работать только на https (для большей защиты и лучшего рейтинга) и возможно использовать www как субдомен.

Заметки SEO: 301 редирект с HTTP на HTTPS

HTTPS становится важным фактором в ранжировании Google. Поисковый движок отдает предпочтение сайтам, которые используют HTTPS протокол для обеспечения безопасных подключений между двумя конечными объектами — клиентом и сервером. Проверьте возможность активации 301 редиректа на ваших доменах как только вы установили SSL-сертификаты.

Пользователям Plesk поможет расширение Security Advisor для активации бесплатных SSL-сертификатов. И вы можете активировать 301 редирект через опцию «Настройки хостинга» в панели управления.

Говоря о редиректах, Plesk поддерживает из своей коробочной версии 301 редиректы, дружественные к SEO. Т.е. если вы устанавливаете бесплатный SSL сертификат Lets’Encrypt (о том, как его установить из панели Plesk, читайте в этой статье (прим. редакции Русоникс)), то Плеск поможет вам переключиться на безопасный протокол без потери в поисковом рейтинге.

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

Всегда отсылайте пользователям контент сжатым с помощью GZIP или Deflate. Эти способы сжатия проверяют может ли быть сжат запрошенный ресурс такой как HTML картинки или JS/CSS файлы. Сжатие уменьшает количество байтов, передаваемых через сеть, до 90%. Это сокращает общее время загрузки всех ресурсов, что приводит к ускорению времени загрузки и лучшему юзабилити. Для сжатия важным является то, что обе стороны (и клиент и сервер) понимают примененный алгоритм сжатия. В так называемых полях HTTP заголовков происходит обмен поддерживаемыми алгоритмами.

Большинство современных браузеров уже поддерживают сжатие по умолчанию. На серверной стороне вы можете использовать специальные модули такие как mod_deflate (в Apache) или ngx_http_gzip_module (в Nginx)

Plesk поддерживает сжатие из коробочной версии

Не переживайте, сервер Plesk уже имеет предустановленные необходимые модули сжатия. Вам лишь необходимо активировать эту опцию вручную для всех доменов где нужно использовать сжатие. Вы можете добавить необходимый код в .htaccess (apache) или web.config (nginx) в корневой директории вашего сайта или прямо в панели Plesk, что ещё проще.

Перейдите в закладку «Сайты и домены» и выберите «Настройки apache и nginx». Если вы используете веб-сервер apache, то вам нужно добавить следующий код в текстовом поле под опцией «Дополнительные директивы apache».

Выберите текстовое поле следующей опции «Дополнительные директивы для HTTPS» если вы используете HTTPS.

Для APACHE:

AddOutputFilterByType DEFLATE text/plain text/html text/xml;
AddOutputFilterByType DEFLATE text/css text/javascript;
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml;
AddOutputFilterByType DEFLATE application/rss+xml;
AddOutputFilterByType DEFLATE application/javascript application/x-javascript

Если вы используете nginx, добавьте следующий код в текстовом поле «Дополнительные директивы nginx»

Для NGINX

gzip on; gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_disable «msie6»;
gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;

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

3. Настройте кеширование браузером

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

Вы можете использовать два поля в заголовке ответа: cache-control и ETag. С помощью Cache-Control вы можете определить как долго браузер может кешировать индивидуальные ответы. ETag создаёт ревалидацию токенов с помощью которых браузер может легко определять изменения файлов.

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

4. Уменьшите время ответа сервера.

PageSpeed Insights выводит это сообщение, когда сервер не отвечает через определённое время (>200ms) . Время ответа обозначает время, которое нужно браузеру для загрузки HTML кода для вывода. На этот параметр может влиять множество причин.

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

Вопрос в том как найти эти «узкие места»? Вы можете использовать расширение New Relic для решения или с помощью тестирования ресурсом Webpagetest где можно увидеть как браузеры отображают страницы и какие файлы замедляют ваш сайт.

5.Уменьшите HTML, CSS&JS

Сервер может уменьшить объём таких ресурсов, как HTML код или JS и CCS файлы, перед отправкой их в браузер. Это сохранит много байтов данных, что увеличивает скорость загрузки ресурсов. Уменьшение объёма — это процесс оптимизации кода без потери нужной информации, чтобы сайт для посетителя отображался корректно.

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

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

6. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

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

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

Также есть смысл объединять все файлы в один файл (1 файл для CSS и JS) для уменьшения количества HTTP запросов. В общем, опредённо следует активировать HTTP/2 на вашем сервере. Новая версия протокола имеет очень положительное влияние на производительность сайта.

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

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

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

Content-Delivery-Networks (CDN) такие как CloudFlare, могут оптимизировать картинки для вас автоматически.

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

8.Оптимизация видимого контента

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

Также важно структурировать HTML код, который загружает «тяжёлый» контент первым. Например если рядом с вашей статьей есть боковая панель, то разместите ее после статьи в HTML коде так, чтобы браузер отображал статью перед боковой панелью.

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

Google PageSpeed Insights расширение в Плеск

Если вы ещё не делали этого установите расширение в Плеск «Google PageSpeed Insights Plesk » сегодня и улучшите производительность веб-сайта и позиции в поисковой выдаче.

Перевод: Сергей Гордеев (Русоникс)
Оригинал

как ускорить WordPress по данному показателю

Привет! Я уже говорил, но повторюсь: крайне важно, чтобы ваш блог/сайт загружался довольно быстро. Это понравится как пользователям вашего сайта, так и поисковым систем. Особенно Google обращает внимание на скорость загрузки сайтов. Напомню, скорость сайта я отмеряю с помощью инструмента Google PageSpeed Insights. На данный момент показатели моего блога такие:

И вот для компьютеров:

Как видите, удалось зайти в “зеленую зону”. То есть теперь со скоростью моего сайта все в порядке. А то до этого для мобильных было значение – 45, для компьютеров – 52. Там даже была красная зона.

Каких-то сложных вещей по ускорению сайта на WordPress делать не нужно, вам хватит потраченного 30-40 минут, чтобы также попасть в “зеленую зону”.

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

Как ускорить WordPress по мнению Google PageSpeed Insights

1. Файл .htaccess

Первое, что нужно сделать, это добавить вот этот код в конец файла .htaccess:

# сжатие text, html, javascript, css, xml:
&lt;ifModule mod_deflate.c&gt;
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
&lt;/ifModule&gt;

и этот:

# кеш браузера
&lt;ifModule mod_expires.c&gt;
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 5 seconds"
# Включаем кэширование изображений и флэш на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование css, javascript и текстовых файлоф на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кэширование html и htm файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
&lt;/ifModule&gt;

Нужно вставлять ПЕРЕД “# END WordPress”, напомню также, что файл .htaccess лежит в корне сайта, там где папки wp-admin, wp-content и другие:

Это позволит включить кэш браузера. После установки этого кода, поисковые системы вздохнули свободно: “Наконец-то Петя это сделал”: 🙂

Скриншот выше – это с Google Webmasters -> Сканирование -> Статистика сканирования.

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

Изначально, если не лень (а я это не делаю, так как мне лень 🙂 ), картинки можно пересохранять в Photoshop, используя кнопку “Сохранить для Web”.

Уже там сохраняете картинку в приемлемом для вас качестве. Вес картинки серьезно уменьшится. Повторюсь, я это не использую (исключение – миниатюры к постам).

Я использую дополнительно плагин WP-Smush.it. Он сжимает картинки без потери качества. Это не замена предыдущему инструменту, а дополнение к нему. Данный плагин может сжать даже те картинки, которые уже есть на блоге. Достаточно нажать на одну кнопку. Для подробностей просто перейдите по ссылке выше.

3. Оптимизация html и скриптов.

Следующее, что вам нужно сделать, это оптимизация html и скриптов, для этого просто установите и настройте плагин Autoptimize.

Правда я пока столкнулся со следующими проблемами:

перестало работать меню в мобильной версии сайта;
перестал работать поиск от Яндекса;
улетает счетчик Рамблера куда-то вниз.

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

4. Мобильная версия сайта

Дальше вам нужно создать мобильную версию сайта. Да, это необходимо. Почему? Потому что:

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

5. Удаление ненужных плагинов

Дальше обязательно деактивируйте и удалите те плагины, которые вам не нужны. Вот здесь вы можете найти самые необходимые плагины для WordPress, и то некоторые из них можно заменить на php код без использования плагинов.

10-20 плагинов – это максимум. При возможности я бы довел эту цифру до 5-7.

Вывод

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

Если вы выполнили все это, отпишитесь, пожалуйста, в комментариях: какие показатели были у вас и до каких удалось дойти? Может еще у кого-то какие-то есть секретики? 🙂 Тогда я с радостью дополню статью.

Как улучшить свой показатель Google PageSpeed Insights: передовой опыт 2021 года

Опубликовано: 2021-06-30

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

По данным Pingdom, 38 процентов пользователей веб-сайтов отказываются от загрузки, если загрузка сайта занимает более пяти секунд. Тем не менее, опрос Unbounce показал, что только 15% сайтов имеют приемлемую скорость загрузки страниц!

Источник

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

Источник

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

Отличный способ быть в курсе стандартной скорости страницы — использовать Google PageSpeed Insights. Этот инструмент позволяет вам измерить скорость вашей страницы, а оценка, которую он дает, помогает вам определить, нужно ли вам улучшать свои усилия или нет. Обычно приемлемой считается оценка 90+.

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

1. Сжимайте изображения

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

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

Например, для тех, у кого есть веб-сайт WordPress, плагин под названием WP Smush Image Compression and Optimization может быть удобным инструментом, особенно с учетом того, что этот плагин можно использовать бесплатно!

Кроме того, если ваш веб-сайт не создан на WordPress, вы можете использовать другие доступные плагины. Хотя Crush.pics — отличный инструмент для инструментов Shopify, Compress JPEG и Optimizilla — достойные варианты.

2. Устранение ненужных перенаправлений.

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

Оказывается, обе неприятности связаны! Чем больше переадресаций на ваших страницах, тем выше будет скорость загрузки страницы. Вы можете легко убить двух зайцев, удалив ненужные перенаправления со своей страницы.

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

Источник

Согласно Google, страницы с низким показателем PageSpeed Insights Score, как правило, имеют определенный шаблон перенаправления. Вот некоторые из моделей, которые могут быть выставлены:

xyz.com -> www.xyz.com -> m.xyz.com. Такие веб-сайты предлагают очень медленную работу на мобильных устройствах.
xyz.com -> m.xyz.com/home. Это значительно медленнее, чем адаптивный дизайн.

Вам интересно, как будет выглядеть адаптивный веб-дизайн? Что ж, его URL-адрес (в данном случае xyz.com) загрузит целевую страницу, независимо от того, на каком устройстве осуществляется доступ, без каких-либо перенаправлений. Это то, к чему вы должны стремиться.

3. Удалите все ресурсы, блокирующие рендеринг.

Еще один верный способ повысить показатель скорости страницы — удалить с вашего сайта все ресурсы, блокирующие рендеринг. Такие ресурсы также играют роль в снижении скорости страницы.

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

Источник

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

Размещение таких ресурсов в верхней части страницы может нанести вред сайту. Сам Google предлагает решение этой проблемы. Это включает в себя:

Использование плагинов, таких как Autoptimize (если ваш веб-сайт небольшой), для включения вашего CSS или JavaScript в файлы HTML. Этот метод подходит только для небольших веб-сайтов, так как на самом деле он будет контрпродуктивным для крупных веб-сайтов с множеством скриптов.
Отсрочка вашего JavaScript позволяет вашему файлу JavaScript быть загруженным во время процесса синтаксического анализа HTML и выполняться после завершения процесса синтаксического анализа. Это также позволяет скриптам загружаться в соответствии с порядком появления на данной странице.

Это довольно техническая область; следовательно, вам понадобится специальное руководство для борьбы с этим.

4. Улучшите вашу воспринимаемую производительность

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

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

Источник

Что такое воспринимаемая производительность?

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

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

5. Используйте кеширование браузера.

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

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

Источник

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

Это позволяет браузерам запоминать ранее загруженные страницы и ресурсы. Это означает, что не нужно все перезагружать с нуля.

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

Вопреки распространенному мнению, вам не нужно знать код, чтобы использовать эту тактику. Вместо этого для этого есть инструменты. Для WordPress вы можете использовать W3 Total Cache.

Итак, как вы это реализуете? К счастью, для этого есть плагин. Для этого не нужно быть экспертом по кодированию.

6. Используйте AMP.

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

Источник

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

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

Тематическое исследование, о котором сообщил Нил Патель, показывает, что Gizmodo увеличила скорость загрузки в три раза с помощью функции AMP. Вы можете легко реализовать это и получить от этого выгоду.

Заключительные замечания

Есть множество способов повысить свой рейтинг в Google PageSpeed Insight. Мы упомянули те, которые активно внедряются в 2021 году, с акцентом на те, за которыми легче следить как новичкам, так и экспертам.

Не позволяйте медленной скорости страницы разрушить ваш тяжелый труд и усилия. И не стоит недооценивать его влияние на показатель отказов вашего сайта. Используйте Google PageSpeed Insight, чтобы узнать, где сейчас находится ваш сайт. И если он нуждается в улучшении, теперь вы знаете, что делать!

Удачи!

О PageSpeed Insights | Разработчики Google

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

PSI предоставляет лабораторные и полевые данные о странице. Лабораторные данные полезны для отладки
проблемы с производительностью, так как он собирается в контролируемой среде. Однако это не может
выявить узкие места в реальном мире.Полевые данные полезны для фиксации реальных, реальных пользователей.
опыт, но имеет более ограниченный набор показателей. Смотрите, как думать
About Speed Tools для получения дополнительной информации о двух типах данных.

Данные реального пользовательского опыта

Данные реального пользовательского опыта в PSI основаны на пользовательском опыте Chrome.
Набор данных отчета (CrUX). PSI сообщает о реальных пользователях
Contentful Paint (FCP), задержка первого ввода (FID),
Самая большая содержательная краска (LCP) и совокупный макет
Сдвиг (CLS) за предыдущий 28-дневный период сбора.

Чтобы отображать данные о пользовательском опыте для данной страницы, для нее должно быть достаточно данных.
для включения в набор данных CrUX. На странице может не быть достаточно данных, если она была
недавно опубликованы или слишком мало образцов от реальных пользователей. Когда это произойдет, PSI упадет
вернуться к гранулярности на уровне источника, которая охватывает весь пользовательский опыт на всех страницах
Веб-сайт. Иногда у источника может быть недостаточно данных, и в этом случае PSI будет
невозможно показать какие-либо данные о реальном пользовательском опыте.

Оценка качества опыта

PSI классифицирует качество пользовательского опыта по трем категориям: хорошее, нуждается в улучшении,
или плохо. PSI устанавливает следующие пороги в соответствии с
Инициатива Web Vitals:

	Хорошо	Требует улучшения	Плохо
FCP	[0, 1800 мс]	(1800 мс, 3000 мс)	более 3000 мс
FID	[0, 100 мс]	(100 мс, 300 мс)	более 300 мс
LCP	[0, 2500 мс]	(2500 мс, 4000 мс)	более 4000 мс
CLS	[0, 0.1]	(0,1, 0,25)	более 0,25

Распределение и выбранные значения метрики

PSI представляет распределение этих показателей, чтобы разработчики могли понять диапазон
опыт для этой страницы или происхождения. Это распределение разделено на три категории:
Хорошо, Требует улучшения и Плохо, которые представлены зелеными, желтыми и красными полосами.
Например, если на желтой полосе LCP отображается 11%, это означает, что 11% всех наблюдаемых значений LCP
падают между 2500 мс и 4000 мс.

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

Core Web Vitals

Core Web Vitals — это общий набор сигналов производительности, критически важных для
весь веб-опыт.Метрики Core Web Vitals — это FID, LCP и CLS, и они могут быть
агрегированы на уровне страницы или источника. Для агрегатов с достаточным количеством данных по всем
три показателя, агрегирование проходит оценку Core Web Vitals, если 75-й процентиль
всех трех показателей хорошие. В противном случае агрегирование не проходит оценку. Если
агрегация не имеет достаточных данных для FID, то она пройдет оценку, если оба 75-го
процентили LCP и CLS хорошие.Если в LCP или CLS недостаточно данных, страница или
Агрегация на уровне источника не может быть оценена.

Различия между полевыми данными в PSI и CrUX

Разница между полевыми данными в PSI и
Набор данных CrUX на BigQuery заключается в том, что данные PSI обновляются ежедневно,
в то время как набор данных BigQuery обновляется ежемесячно и ограничивается данными на уровне источника.
Оба источника данных представляют собой завершающие 28-дневные периоды.

Диагностика производительности

PSI использует Lighthouse для анализа указанного URL-адреса, генерируя
оценка производительности, которая оценивает производительность страницы по различным показателям, в том числе:
Первая содержательная краска,
Самая большая содержательная краска,
Индекс скорости,
Совокупный сдвиг макета,
Время интерактивности,
и общее время блокировки.

Каждый показатель оценивается и обозначается значком:

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

Оценка производительности

В верхней части раздела PSI предоставляет оценку, которая суммирует смоделированные страницы
представление. Этот балл определяется запуском Lighthouse для сбора и анализа диагностических данных.
информация о странице.Оценка 90 или выше считается хорошей. От 50 до 90 — это оценка
который нуждается в улучшении, и ниже 50 считается плохим.

Аудит

Lighthouse делит свои проверки на три части:

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

Часто задаваемые вопросы (FAQ)

Какие устройства и условия сети использует Lighthouse для имитации загрузки страницы?

В настоящее время Lighthouse моделирует условия загрузки страницы устройства среднего уровня (Moto G4).
в мобильной сети для мобильных устройств и
emulated-desktop с проводным подключением для рабочего стола.PageSpeed также работает в Google
центр обработки данных, который может варьироваться в зависимости от условий сети, вы можете проверить местоположение,
было, посмотрев на блок окружения Lighthouse Report:

Примечание. PageSpeed сообщит о запуске в одном из следующих регионов: Северная Америка, Европа или Азия.

Почему полевые и лабораторные данные иногда противоречат друг другу?

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

Почему для всех показателей выбран 75-й процентиль?

Наша цель — убедиться, что страницы хорошо работают для большинства пользователей. Сосредоточив внимание на 75-м
значения процентилей для наших показателей, это гарантирует, что страницы обеспечивают хорошее взаимодействие с пользователем.
в самых сложных условиях устройства и сети.См. Раздел Определение пороговых значений показателей Core Web Vitals.
для получения дополнительной информации.

Почему FCP в v4 и v5 имеет разные значения?

FCP в версии 5 сообщает о 75-м процентиле (по состоянию на 4 ноября 2019 г.), ранее это был 90-й процентиль.
В версии 4 FCP сообщает медианное значение (50-й процентиль).

Почему у FID в v5 разные значения?

FID сообщает о 75-м процентиле (по состоянию на 27 мая 2020 г.), ранее это был 95-й процентиль.

Какова хорошая оценка лабораторных данных?

Любой зеленый балл (90+) считается хорошим, но учтите, что наличие хороших лабораторных данных не дает
обязательно означает, что реальный пользовательский опыт тоже будет хорош.

Почему оценка производительности меняется от запуска к запуску? Я на своей странице ничего не менял!

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

Почему данные CrUX реального пользователя недоступны для URL-адреса или источника?

В отчете об удобстве использования Chrome собраны реальные данные о скорости из
включенные пользователи и
требует, чтобы URL-адрес был общедоступным
(сканирование и индексирование)
и иметь достаточное количество отдельных образцов, обеспечивающих репрезентативное анонимное представление
производительности URL или происхождения.

Еще вопросы?

Если у вас есть конкретный и ответственный вопрос об использовании PageSpeed Insights,
задайте свой вопрос на английском в Stack Overflow.

Если у вас есть общие отзывы или вопросы о PageSpeed Insights, или вы хотите начать
общее обсуждение, начните тему в списке рассылки.

Если у вас есть общие вопросы о показателях Web Vitals, начните обсуждение в группе обсуждения web-vitals-feedback.

Обратная связь

Была ли эта страница полезной?

да

Большой! Спасибо за ваш отзыв!
Если у вас есть конкретный вопрос, на который можно ответить, об использовании PageSpeed Insights,
задать вопрос на английском в стеке
Переполнение.Чтобы задать общие вопросы, отзывы и обсуждения, начните обсуждение в
список рассылки.

Нет

Жаль это слышать.
Если у вас есть конкретный вопрос, на который можно ответить, об использовании PageSpeed Insights,
задать вопрос на английском в стеке
Переполнение. Чтобы задать общие вопросы, отзывы и обсуждения, начните обсуждение в
список рассылки.

Техническое руководство по отчетам Google PageSpeed Insights

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

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

Если вы хотите повысить скорость своей страницы как для пользователей, так и для рейтинга ключевых слов (и поверьте мне, вы это делаете), инструмент Google PageSpeed Insights (PSI) может помочь вам в этом.

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

Что такое скорость страницы?

Google определяет скорость страницы двумя способами:

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

Продолжить чтение ниже

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

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

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

Потратив время на оптимизацию своего контента для повышения скорости, Google показывает, что вы хотите создать высококачественный опыт для посетителей вашего сайта.

Что такое Google PageSpeed Insights (PSI)?

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

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

Инструмент также определяет возможности для оптимизации и дает конкретные рекомендации по улучшению.

Скриншот из PageSpeed Insights, октябрь 2021 г.

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

Продолжить чтение ниже

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

PageSpeed Insights и рейтинг

Оценка страницы в PSI предназначена для общего обзора производительности. Сама по себе оценка не является официальным фактором ранжирования.

Скриншот с сайта Twitter.com, октябрь 2021 г.

Но некоторые метрики, на которые опирается инструмент для расчета оценок PSI, например Core Web Vitals, являются частью алгоритма ранжирования Google.

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

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

Скорость страницы и пользовательский опыт

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

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

Скриншот с сайта Develeopers.google.com, октябрь 2021 г.

Задержка от 1 до 5 секунд увеличивает вероятность отскока посетителя на 90%. Хуже того, коэффициент конверсии падает в среднем на 4,42% с каждой дополнительной секундой загрузки.

Продолжить чтение ниже

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

Инструмент Google PSI — лучшее место, чтобы начать понимать скорость вашего сайта и способы ее улучшения.

Использование инструмента PageSpeed Insights

Чтобы использовать инструмент Google PSI, введите любой URL-адрес на панели инструментов, нажмите Analyze , и PSI приступит к работе.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

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

Продолжить чтение ниже

Во-первых, он собирает «полевые данные» страницы или данные о производительности, содержащиеся в отчете о пользовательском опыте Chrome (CrUX).

Во-вторых, он измеряет производительность вашей страницы с помощью Lighthouse API. Это называется «лабораторными данными», потому что они измеряют скорость веб-страницы в смоделированной контролируемой среде: в мобильных сетях и на устройстве среднего уровня.

Это помогает устранить некоторые переменные, которые могут повлиять на скорость и производительность веб-страницы.

Общие сведения о вашем отчете PSI

Инструмент Google PSI создаст подробный отчет, который включает полевые данные, лабораторные данные, возможности, диагностику и пройденные аудиты.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

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

Объявление

Продолжить чтение ниже

Зеленый = Хорошо.
Желтый = нуждается в доработке.
Красный = Плохо.

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

Полевые данные

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

Поле данных Google PageSpeed Insights включает следующее:

Снимок экрана с PageSpeed Insights, октябрь 2021 г.

First Contentful Paint (FCP) : время, необходимое для загрузки первого объекта текста или изображения.
Крупнейшая отрисовка содержимого (LCP) : время, необходимое для загрузки самого большого объекта текста или изображения.
Задержка первого ввода (FID) : время, необходимое браузеру для ответа на первое взаимодействие пользователя.
Совокупный сдвиг макета (CLS) : Измеряет любое перемещение страницы в области просмотра.

Каждая метрика производительности измеряется в секундах или миллисекундах, за исключением совокупного сдвига макета (CLS).

Объявление

Продолжить чтение ниже

CLS рассчитывается по специальной формуле. Оценка CLS ниже 0,1 считается хорошей, а оценка CLS выше 0,25 — плохой.

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

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

Например, в приведенном выше отчете страница соответствовала стандартам FCP в 69% случаев, но не соответствовала этим стандартам в 31% случаев.

Лабораторные данные

Лабораторные данные Google PageSpeed Insights включают синтетические данные из Lighthouse API. Lighthouse измеряет FCP, LCP, CLS и три дополнительных показателя.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

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

Объявление

Продолжить чтение ниже

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

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

Снимок экрана с Lighthouse 8, октябрь 2021 г.

Возможности и диагностика

В разделах «Возможности» и «Диагностика» представлены конкретные рекомендации по повышению скорости страницы.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

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

Продолжить чтение ниже

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

Инструмент предоставит подробные элементы действий и в некоторых случаях адаптирует эти инструкции к вашей системе управления контентом.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

Точно так же в разделе «Диагностика» отчета подробно описаны передовые методы, которым веб-страница не следует на основе анализа страницы.

Снимок экрана с PageSpeed Insights, октябрь 2021 г.

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

Снимок экрана из PageSpeed Insights, октябрь 2021 г.

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

Продолжить чтение ниже

Пройденные проверки

Этот раздел отчета в основном позволяет владельцам сайтов узнать, что страница делает правильно.

Снимок экрана с сайта PageSpeed Insights, октябрь 2021 г.

Длинный список пройденных аудитов — хороший знак и означает, что на вашей странице представлены лучшие практики скорости загрузки страницы.

После отчета PSI и 6 советов по повышению скорости страницы

Для тех, кто плохо знаком с SEO, отчет PSI может показаться исключительно техническим.

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

Продолжить чтение ниже

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

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

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

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

Правильно оптимизированные образы могут иметь большое значение для сокращения времени FCP и LCP и предотвращения проблем с CLS.

Некоторые передовые практики включают:

2. Встраивание видеоконтента

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

Продолжить чтение ниже

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

3. Избегайте чрезмерных перенаправлений

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

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

4. Выберите более быструю тему веб-сайта

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

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

5. Используйте асинхронную загрузку для JavaScript

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

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

Объявление

Продолжить чтение ниже

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

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

6. Включение кэширования браузера

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

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

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

Последние мысли о PageSpeed Insights

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

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

Продолжить чтение ниже

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

Дополнительные ресурсы:

Изображение: TarikVision / Shutterstock

Google Pagespeed Insights for Publishers

Скорость загрузки страницы является основным фактором, который Google учитывает при ранжировании результатов поиска. Google уделяет повышенное внимание общему впечатлению посетителей и создал Google Core Web Vitals для отслеживания скорости загрузки страницы, стабильности макета страницы и того, как быстро пользователь может начать взаимодействовать со страницей.

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

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

Оценка Google PageSpeed Insights и Core Web Vitals

Компания Google разработала инструмент PageSpeed Insights для анализа содержимого и скорости загрузки сайта, оценки производительности сайта и предоставления информации, которая поможет издателям повысить скорость загрузки сайта. Google использует инструмент скорости сайта под названием Lighthouse, чтобы оценить ваш сайт от 1 до 100 отдельно для настольной и мобильной версий, причем 90+ является хорошей оценкой.

Первоначально PageSpeed Insights в основном фокусировалась на факторах скорости загрузки, но недавно Google переключился на общий опыт работы с сайтом.Google заявляет: «Оптимизация качества взаимодействия с пользователем является ключом к долгосрочному успеху любого сайта в Интернете».

Изначально

PageSpeed Insights были основаны на лабораторных тестах веб-сайта, но недавно Google сместил акцент на более общий опыт работы с веб-сайтом и включил полевые данные об эффективности веб-сайта. Они создали Google Core Web Vitals (CWV), который фокусируется на трех показателях пользовательского опыта: стабильность страницы, скорость загрузки контента и скорость взаимодействия с страницей.

Специалисты

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

Хотите увидеть реальные цифры успеха от установок платного доступа?

Что такое показатели Google Core Web Vitals?

Google Core Web Vitals — это три показателя, которые оценивают стабильность страницы, скорость загрузки страницы и то, как быстро страница реагирует на взаимодействие с пользователем. Core Web Vitals измеряются и сообщаются как для настольных компьютеров, так и для мобильных устройств, и доступны из Google Search Console, а также на странице разработчика PageSpeed Insights.Любой, кто хочет измерить свой собственный сайт или любой другой сайт, может ввести URL-адрес страницы и просмотреть отчет.

Крупнейший Contentful Paint (LCP) — Этот рейтинг показывает, насколько быстро страница может загружать основное содержимое для страницы. LCP 2,5 секунды или меньше — хороший результат.
Задержка первого ввода (FID) — Этот рейтинг измеряет, сколько времени требуется веб-странице, чтобы отреагировать на действие, предпринимаемое пользователем. Таймер для этого измерения запускается, когда на странице появляется что-то визуальное, на что пользователь может отреагировать, и заканчивается, когда страница может отреагировать на это действие посетителей.Если страница не может ответить пользователю, потому что она отвечает на многие другие скрипты, которые она загружает первой, то пострадает оценка FID. Для успешной оценки FID 100 миллисекунд или меньше — хороший результат.
Совокупное смещение макета (CLS) — CLS измеряет визуальную стабильность страницы и макета. Если вы нажмете вкладку вниз, что-то изменится? У вас есть объявления, изображения или элементы страницы, которые загружаются позже и вызывают смещение макета страницы? Это приводит к плохой оценке CLS. Рейтинг CLS 0,1 или меньше — хороший результат.

Этот видео-пример группы разработчиков Google иллюстрирует проблему CLS. Пользователь пытается отклонить покупку, но при нажатии на него макет смещается, и он случайно нажимает кнопку «Купить», что приводит к очень неприятным впечатлениям.

Руководство Google для издателей, проводящих собственный аудит скорости страницы: «рассмотрите возможность прохождения страницы, если она соответствует рекомендуемым целям на 75-м процентиле для всех трех вышеперечисленных показателей.«

Скорость загрузки страницы и основные показатели Web Vitals были интегрированы в инструмент разработчика Chrome, доступный из браузера Chrome. Режим разработчика Chrome даже делает снимок страницы на протяжении всего процесса загрузки, чтобы точно определить, где возникают проблемы.

Обновление: последние данные исследования Тома Кэпера из Moz показывают, что рейтинг веб-сайтов в первую очередь ухудшается, если они не соответствуют всем трем пороговым значениям Core Web Vitals (LCP, FID, CLS), но отсутствие 1 или 2 не коррелировало с значительное влияние на рейтинг.

Как издатели могут улучшить скорость загрузки страниц и основные веб-показатели?

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

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

Внедрите отложенную загрузку, чтобы улучшить работу FID Web Vital

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

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

Использование сети доставки контента CDN

Воспользуйтесь CDN и убедитесь, что он правильно настроен для обеспечения производительности. Сеть доставки контента (CDN) может сократить полосу пропускания и время загрузки страницы, размещая копии ваших мультимедиа географически ближе к пользователям.Например, посетитель в Канаде может получить ваш контент с помощью сервера CDN в Торонто, в то время как одновременный посетитель в Индии может получить контент, доставленный из Ченнаи, и все это оптимально управляется CDN.

Сжатие изображений и видео для более быстрой загрузки страниц

Большие медиафайлы — одна из основных причин медленной загрузки страницы в комментариях и одна из самых простых для устранения. Вы должны ранжировать все изображения на своем сайте по размеру и сразу обращать внимание на те, которые составляют 100 тыс. Или больше.Вы можете сканировать свой сайт с помощью такого инструмента, как Screaming Frog, чтобы идентифицировать все большие изображения за считанные минуты. WordPress и современные системы CMS часто имеют встроенные инструменты сжатия изображений, но убедитесь сами. Иногда вы можете добиться большего с помощью сторонних инструментов, созданных специально для сжатия изображений, таких как tinypng или jpeg-optimizer.

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

Есть ли на вашей веб-странице раздутый JavaScript? Если JavaScript блокирует рендеринг, его необходимо вызвать, загрузить, проанализировать, оценить и выполнить, прежде чем страница сможет завершить рендеринг.У вас есть неиспользуемые файлы JavaScript? Файлы JavaScript могут накапливаться для таргетинга, систем CMS, настройки пикселей отслеживания, социальных тегов, загрузки шрифтов и многого другого. Вы можете детально определить, какая часть вашего JavaScript не используется, с помощью функции Coverage в Chrome DevTools.

При запуске инструмента Google Page Speed Tool он идентифицирует любой JavaScript с более чем 20 килобайтами неиспользуемого кода.

Комбинируйте или минимизируйте CSS и скрипты для повышения скорости страницы

Минификация этих скриптов сохраняет их машинно-читаемость, но значительно ускоряет их загрузку.Для минимизации скриптов доступно несколько инструментов; RankRed собрал хороший набор инструментов и описаний для минификации скриптов. Вы также можете сэкономить на поездках на сервер, если объедините файлы JavaScript или CSS.

Оптимизация кеша для Core Web Vitals

Стратегия кэширования должна быть пересмотрена для вашего типа сайта с использованием функций PI кэширования, таких как Cache-control и Last-Modified. Разработчики Google предоставляют некоторые рекомендации и контрольный список для параметров кеширования, а также параметры конфигурации для популярных серверов.Вы можете предварительно загрузить кеш, чтобы страница была оптимизирована еще до прибытия робота Google для оценки производительности.

WP Tool maker WP Rocket предполагает, что предварительная загрузка кеша может быть ключевым подспорьем для повышения скорости страницы, и создал это видео для объяснения.

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

Укажите атрибуты высоты и ширины изображения, чтобы браузер мог планировать их недвижимость, даже если позже они будут загружаться лениво.
Зарезервируйте место для рекламы, окон iframe и динамического содержания.Используйте контейнеры, чтобы избежать сдвигов макета во время рендеринга.
Рассмотрите возможность оптимизации отображения шрифтов с помощью ссылки rel = «preload» и font-display: optional.

Запустить аналитику

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

Вот несколько рекомендаций для более технических и подробных обсуждений оптимизации скорости страницы:

Есть ли в ваших планах на будущее платные подписки?

Как Admiral помогает повысить производительность издателей

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

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

Точечные решения умножают технический долг для издателей

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

Admiral проверен сторонним тестом скорости в более чем 100 сценариях клиентов

Admiral активно помогал издателям оптимизировать Core Web Vitals и заключил контракт с национально признанным цифровым агентством (Anvil Media) на тщательное тестирование решения Admiral one-tag на скорость и влияние на Core Web Vitals.Эксперты Anvil по скорости страницы протестировали тег Admiral на 15 сайтах клиентов, во всех модулях решения Admiral, настольных и мобильных, в течение пяти дней, до и после измерения и всех трех показателей CWV; Всего 100 сценариев. Команда тестирования Anvil подтвердила, что бирка Admiral не оказала существенного отрицательного влияния на оценки CWV для клиентов и модулей. Фактически, многомодульный тег Admiral — это мощный инструмент для издателей, позволяющий избавиться от ненужных тегов точечных решений и оптимизировать скорость загрузки страниц в долгосрочной перспективе.

Admiral заменяет многоточечные решения на интегрированную автоматизацию маркетинга

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

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

Расширение Google PageSpeed Insights — Plesk

Сделайте свой сайт более быстрым и удобным для мобильных устройств с помощью расширения Plesk Google PageSpeed Insights

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

Как работает расширение Google PageSpeed Insights:

Анализирует производительность веб-сайтов, размещенных на вашем сервере Plesk.
Присваивает каждому проанализированному веб-сайту оценку для настольных компьютеров и мобильных устройств, соответствующую его производительности.
Формирует отчет по результатам анализа.
Показывает предложения по оптимизации работы ваших веб-сайтов.
Предоставляет ссылки в пользовательском интерфейсе расширения на предлагаемые инструменты, направленные на повышение производительности веб-сайтов (например, модуль mod_pagespeed Apache).
Предоставляет уже сжатые файлы для уменьшения размера статических файлов (требуется бесплатный ключ API).
Устанавливает модуль mod_pagespeed Apache и позволяет вам настроить его в соответствии с вашими потребностями.

Перейти на версию Pro!

С Google PageSpeed Insights Pro вы получаете дополнительные расширенные функции для профессионального использования PageSpeed Insights в Plesk!

Дополнительные функции расширенного добавочного номера:

Пользовательская конфигурация по домену для модуля PageSpeed Apache (не только конфигурация на уровне сервера).
Ежедневное обновление просканированных доменов для актуализации всех результатов.
Массовая операция для запуска сканирования для каждого домена одним щелчком мыши (домены ставятся в очередь и анализируются последовательно).
Подробная страница результатов для мобильных устройств со всеми предложениями и проблемами.

Нужна дополнительная информация?

Узнайте больше о Google PageSpeed Insights и расширении Plesk.

Узнайте, как повысить производительность своего веб-сайта с помощью Google PageSpeed Insights.

Google PageSpeed Insights vs.Расширение Core Web Vitals для повышения производительности

Сообщение обновлено 28 января 2021 года

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

Однако Google ясно дает понять, что скорость является важным фактором при определении рейтинга.Этот вывод был впервые отмечен в отношении скорости страниц для настольных компьютеров еще в 2010 году и подтвержден в 2018 году, поскольку он связан со скоростью мобильных страниц. Главный вывод: страница, которая загружается быстрее, обязательно получит более высокий рейтинг.

Скорость выставления оценок с помощью Google PageSpeed Insights

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

Со временем Google начал включать дополнительный контекст об оценке и сообщать о проблемах, которые повлияли на вашу оценку. Прозрачность помогла разработчикам и маркетологам узнать, где можно улучшить свой сайт; в разделе «Диагностика» инструмента можно было бы анализировать такие вещи, как запросы, ресурсы, блокирующие рендеринг, сведения о том, были ли минимизированы CSS и JavaScript, и многое другое.Это была памятка, которая поможет вам быстро выявить и исправить проблемы с производительностью на сайте.

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

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

Чтобы решить эту проблему, Google недавно выпустил Core Web Vitals — инструмент, который предоставляет подробную информацию о реальной скорости и удобстве использования вашего сайта. Мы выступаем за использование CWV в качестве дорожной карты для улучшения вашего рейтинга, и он может пролить свет на то, что вам нужно обновить, чтобы сделать небольшой, но важный скачок с 89 до 95.

Об измерениях в Google Core Web Vitals

Мы собираемся изучить факторы, влияющие на Core Web Vitals Google, и объяснить, как использовать эти измерения для эффективного тестирования вашего веб-сайта. Хотя мы подробно рассмотрим, что может затруднить взаимодействие с пользователем, оценку и рейтинг, помните, что сообщение не является исчерпывающим и может пропускать некоторые элементы, которые мы считаем заданными. за каждую новую сборку. Тем не менее, не стесняйтесь обращаться к нам с любыми вопросами о вашей конкретной ситуации.

Web Vitals — это четыре новых показателя, которые Google использует для оценки скорости определенного URL. Прежде чем углубляться в сами измерения, важно отметить, что на каждое из них будут влиять реальные обстоятельства, в которых тестируется веб-сайт. Например, сайт, протестированный на быстром ноутбуке с широкополосным доступом в Интернет, получит другие оценки, чем сайт, протестированный на старом сотовом телефоне с 3G-Интернетом. При этом очень важно учитывать тот факт, что любые данные формируются как производительностью сайта, так и возможностями устройства.

Переходим к хорошему. Для начала познакомимся с четырьмя измерениями, составляющими показатель Web Vitals Score:

FCP — Первая полноценная краска
LCP — Краска с наибольшим содержанием
FID — Задержка первого входа
CLS — Кумулятивная смена компоновки

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

Также стоит отметить, что вся эта запись игнорирует производительность на стороне сервера. Считается само собой разумеющимся, что ваш веб-сервер быстро предоставит HTML-ответ на запрос URL. Это самое первое, что ДОЛЖНО происходить при каждом просмотре страницы, и если оно не будет быстрым, каждое выполненное измерение будет плохим.

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

Первая полноценная краска

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

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

В общем, этот результат может поддерживаться вещами, блокирующими рендеринг, включая таблицы стилей и скрипты.Каждый раз, когда ссылка на таблицу стилей добавляется в HTML, отрисовка блокируется до тех пор, пока этот ресурс не будет полностью загружен и проанализирован. То же самое обычно и со сценариями, хотя они могут быть добавлены с атрибутами defer или async. Эти параметры по умолчанию недоступны для стилей, хотя есть такие приемы, как использование атрибута media в сочетании с событием onload.

Оценка

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

Краска с наибольшим содержанием

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

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

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

Задержка первого входа

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

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

Отрисовка сложных стилей
Разбор активов
Отображение видео / графики
Запуск кучи javascript
Наиболее частой причиной FID является чрезмерно сложный JS от третьих лиц, таких как трекеры и рекламодатели. Но это также может быть вызвано скриптами и библиотеками, используемыми на самом сайте.

Чтобы уменьшить количество FID, лучше всего уменьшить количество JS, выполняемых на данной странице.Затем, в отношении оставшегося JS, отложите любой JS, который не критичен для взаимодействия с пользователем. Если можете, подождите, чтобы загрузить этот некритический Javascript, пока не произойдет событие window.load. На многих сайтах это имеет смысл даже для аналитики!

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

Важно понимать, в какой степени FID влияет на производительность устройства. Это восходит к нашему сравнению быстрого ноутбука и старого сотового телефона. Измерение оценки FID — это время, а не «количество скриптов». Современный компьютер может обрабатывать БОЛЬШОЙ объем вычислений за очень короткий период времени, а старый телефон — нет. Таким образом, даже если вы видите отличную оценку FID на ноутбуке, это может не иметь большого значения в реальном мире, когда ваш сайт посещают различные устройства.Еще хуже то, что когда сайт работает медленно, он имеет тенденцию к снежному кому.

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

Совокупный сдвиг макета

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

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

Теперь, когда измеряется CLS, выяснилось, что это своего рода «ловушка» даже для сайтов, которые пытаются поступать правильно. Как? Многие разработчики используют инструмент PageSpeed Insights для проверки производительности сайта. Это нормально, но дает оценку моментального снимка только во время первоначального рендеринга. Это означает, что ленивая загрузка изображений — которые невидимы для инструмента, потому что они загружаются позже — не позволяет разработчикам осознавать, что смещение макета произойдет при полной загрузке изображений.

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

Использование показателей Web Vitals для создания более быстрых веб-сайтов

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

Фактические данные поля, которые Google имеет для данной страницы.
Лабораторные данные из Google PageSpeed Insights
Лабораторные данные из расширения Web Vitals

Различия, выделенные курсивом, заслуживают внимания. Полевые данные — это реальные измерения реальных пользователей. Он основан на реальном опыте пользователя и определяет эффективность SEO для данного URL. Лабораторные данные состоят из измерений, выполненных в определенное время при определенных обстоятельствах, которые могут не соответствовать реальным условиям.Тот факт, что для данного URL-адреса можно получить хорошие лабораторные данные, не обязательно означает, что фактические полевые данные улучшатся. И если вы выполнили работу, которая отображается в лабораторных данных, может потребоваться некоторое время, чтобы достаточное количество реальных измерений отобразилось в полевых данных.

Ниже мы подробнее рассмотрим каждый из трех источников данных.

Полевые данные

Есть несколько способов получить доступ к полевым данным Google, которые подробно описаны в этом сообщении в блоге.Однако самый простой способ — это поискать в консоли поиска Google в разделе «Улучшения»> «Основные веб-ресурсы» или в отчете PageSpeed Insights в разделе «Полевые данные». PageSpeed Insights обычно показывает агрегированные данные полей для проверяемого домена, и, если проверяемый URL достаточно популярен, также отображаются данные полей для определенного URL.

Полевые данные обычно представляют собой скользящее среднее значение производительности за предыдущие 30 дней. Однако, если на сайте были внесены большие улучшения, он может появиться быстрее, особенно если запрос сделан через консоль поиска Google.

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

Лабораторные данные из инструмента PageSpeed Insights

PSI — замечательный инструмент, который позволяет быстро проверить производительность заданного URL-адреса на имитируемом мобильном или настольном устройстве. На момент написания смоделированным мобильным устройством был очень старый Motorola G4 с медленным соединением. Если на вашей странице есть проблема, PageSpeed Insights почти наверняка ее покажет.

Помимо оценок, он также показывает предложения.Теперь он даже показывает предложения, привязанные к определенным показателям Web Vital. Например, если есть большое неоптимизированное изображение, которое появляется над сгибом при загрузке страницы, оно, скорее всего, укажет это изображение как проблему в разделе «Первая отрисовка содержимого».

При анализе предложений следует помнить, что любой «пройденный» аудит по умолчанию скрыт. Хотя это помогает уменьшить беспорядок, иногда при этом скрывается важная информация. Нередко определенный URL-адрес имеет плохой FID при прохождении всех аудитов.В таком случае стоит покопаться, чтобы узнать, сколько из них едва прошло. Все может начать складываться.

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

Лабораторные данные из расширения Web Vitals

Также можно быстро проверить результаты Web Vitals для любой страницы, которую вы посещаете, с помощью расширения Web Vitals для Chrome.Это может быть очень удобно, потому что расширение быстро показывает красный или зеленый свет для данной страницы, а также измеряет сдвиг макета при взаимодействии с ней. Так что, если бы вы прокрутили быструю страницу, на которой есть проблемы со сдвигом макета, вы могли бы буквально увидеть, как индикатор расширения изменился с зеленого на красный.

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

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

Заключение

Вся эта информация может показаться ошеломляющей, особенно если рассматривать каждую точку без должного контекста. Однако каждая деталь Core Web Vitals вытекает из очень простого принципа: Google хочет, чтобы быстрые сайты с хорошим пользовательским интерфейсом занимали более высокие позиции.И хотя показатели, представленные в этой публикации, сейчас актуальны, разумно ожидать, что Google продолжит переоценку и корректировку своих методов тестирования, чтобы лучше достичь этой цели.

Оптимизируйте свой Google PageSpeed Insights Оценка

Первое, что замечает пользователь о вашем веб-сайте, — это время его загрузки. Чем быстрее, тем они счастливее.

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

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

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

Для чего нужен инструмент Google Page Speed Insights?

Google PageSpeed Insights предоставляет маркетологам как лабораторные, так и полевые данные и работает на Lighthouse. Лабораторные данные собираются в контролируемой среде и помогают выявлять проблемы с производительностью вашего веб-сайта. С другой стороны, полевые данные собираются из фактической аналитики производительности в реальном времени, когда пользователи загружают веб-страницу.

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

Первая содержательная отрисовка — 3x
Первая значимая отрисовка — 2x
Время до интерактивности — 5x
Индекс скорости — 4x
Первый простой ЦП — 2x

После завершения теста Google PageSpeed Insights отображает производительность отчет.Этот отчет подразделяется на три группы и показывает общую производительность вашего веб-сайта.

Красный цвет указывает на плохой результат от 0 до 49

Оранжевый цвет обозначает средний балл от 50 до 89

Зеленый цвет указывает на хороший результат от 90 до 100

Почему скорость страницы имеет значение?

Современные пользователи Интернета ищут быстрые ответы и решения. Вот почему ожидается, что веб-сайты будут работать как можно быстрее.

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

Скорость — это не просто фактор ранжирования — существует прямая корреляция между более быстрым веб-сайтом и большим количеством конверсий. Связь между скоростью и более высоким коэффициентом конверсии была обнаружена в исследовании Portent в 2019 году. Исследование показало, что с каждой дополнительной секундой загрузки (от 0 до 5 секунд) коэффициент конверсии снижался в среднем на 4.42%. Исследование также показало, что первые 5 секунд скорости страницы больше всего влияют на коэффициент конверсии.

Все эти исследования демонстрируют важность скорости — даже незначительное улучшение Google PageSpeed вашего веб-сайта может оказать положительное влияние на ваш бизнес.

Является ли Google PageSpeed Insights точным?

Google PageSpeed Insights включает различные показатели, чтобы предложить точный обзор производительности вашего веб-сайта. Некоторые из последних изменений, внесенных в него за последние несколько лет, еще больше повысили его надежность и точность.

Предыдущая версия Google PageSpeed Insights была выпущена в ноябре 2018 года и называлась Google PageSpeed 5.0. называется. Он начал использовать базу данных Chrome User Experience Report и аудит Lighthouse.

Два года спустя, в мае 2020 года, была представлена Lighthouse 6.0 с новыми показателями. Эти показатели теперь можно увидеть в современном отчете PageSpeed Insights. Новый захват метрик повысил общую производительность инструмента и лучше отражает пользовательский опыт.

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

Google PageSpeed Vs. WebPageTest Vs. GTMetrix

Несмотря на то, что Google PageSpeed Insights является точным и надежным инструментом для проверки производительности вашего веб-сайта, это не единственный доступный инструмент для определения скорости страницы.Другие инструменты, такие как GTMetrix, WebPageTest и Pingdom, являются альтернативой Page Speed. Давайте рассмотрим некоторые варианты, чтобы понять основные различия между этими инструментами проверки скорости веб-сайта.

Google PageSpeed Insights

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

Инструмент PageSpeed является автономным, то есть вы не можете создать на нем учетную запись и отслеживать свои результаты с течением времени.Единственная возможность пользователям измерять свою производительность с течением времени — это постоянно запускать ручные тесты через определенные промежутки времени.

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

WebPageTest

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

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

WebPageTest позволяет создавать собственные показатели для оценки вашего веб-сайта в соответствии с вашими конкретными потребностями.Чтобы провести собственный тест, вы можете либо указать настраиваемую метрику во время теста, либо добавить файл JavaScript. Этот инструмент предлагает наибольший из трех вариантов настройки. Даже на вкладке простого тестирования вы можете ввести URL-адреса веб-сайтов, которые хотите протестировать с конфигурацией EST. Инструмент также предлагает возможность выполнить аудит Lighthouse.

Обзор производительности отображает полный контрольный список оптимизации веб-сайта. Этот инструмент составляет список своих ресурсов и сравнивает их с заданными параметрами, влияющими на производительность веб-сайта.Сайт разбит на несколько вкладок, и каждая вкладка отображает скорость работы сайта. Вкладка «Домен, обработка и разбивка контента» будет отображать распределение запросов и контента на веб-странице, а «Анализ изображений» и «Карты запросов» будут перенаправлять вас к другим службам.

GTMetrix

GTMetrix имеет несколько функций, которые позволяют тестировать производительность вашего веб-сайта.

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

Оптимизация изображений играет важную роль в рейтинге, поэтому видео и изображения должны быть оптимизированы для повышения рейтинга вашего сайта. Количество HTTP-запросов также влияет на вашу оценку в GTMetrix. Вкладка «Водопад», доступная при использовании инструмента «Проверка», может использоваться для анализа того, сколько времени было потрачено на каждый запрос при загрузке страницы.

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

Сравнение трех тестов

Эти три теста являются наиболее часто используемыми инструментами для определения скорости страницы разработчиками и командами SEO для проверки производительности веб-сайта, но как эти инструменты соотносятся друг с другом?

1. Выбор устройства и браузера

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

Google Pagespeed Insights: результатов отображаются на двух вкладках, одна для мобильных устройств и компьютеров, однако у вас не так много вариантов настройки, чтобы выбрать, на каком мобильном устройстве вы хотите запустить тест.
WebPageTest: вы можете указать браузер и комбинацию устройства. У них есть широкий выбор устройств.
GTMetrix: GTMetrix позволяет тестировать свой веб-сайт с помощью выбранной комбинации браузера и устройства.Однако пользователю потребуется создать учетную запись для настройки этих параметров.

2. Место проведения испытаний

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

Google PageSpeed Insights: вы не можете указать место проведения теста, поскольку оно в основном рассчитывается внутри компании на основе местоположения собственного сервера вашего веб-сайта.
GTMetrix: позволяет указать место проведения теста. У них есть множество вариантов местоположения, из которых вы можете выбрать, но вам нужно будет сначала зарегистрироваться, чтобы использовать эту функцию.
WebPageTest: также позволяет выбирать места при проведении теста. С помощью этого инструмента можно найти почти все важные места.

3. Анализ водопада

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

Инструменты WebPageTest и GTMetrix показывают вам каскадную диаграмму для тщательного анализа вашего веб-сайта и того, сколько времени требуется для загрузки каждого ресурса.
Google Pagespeed Insights не включает анализ водопада

Как набрать 100 баллов в Google PageSpeed Insights

Более высокая оценка этого инструмента означает быстрый и оптимизированный веб-сайт.Достичь 100 баллов на PageSpeed сложно, но возможно. Используя правильные методы и процессы, вы можете оптимизировать скорость и производительность своего веб-сайта, чтобы достичь 100 баллов. Вот несколько советов, которые можно использовать для получения отличной оценки в этом тесте:

Устранение ресурсов, блокирующих рендеринг

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

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

Если у вас ограниченное количество файлов JavaScript или CSS, вы можете встроить их. Этот процесс означает включение ваших CSS и JavaScript в ваш HTML-файл, что можно сделать с помощью плагинов.Однако этот метод применим только для небольших веб-сайтов.
Другой способ — отложить выполнение JavaScript. С этой опцией файл JavaScript загружается во время синтаксического анализа HTML, но он работает только после завершения синтаксического анализа.

Минимизировать JavaScript

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

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

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

Этот процесс аналогичен устранению CSS, блокирующего рендеринг.стили могут быть встроенными или отложенными в зависимости от ваших веб-страниц. Кроме того, для поиска и оптимизации неиспользуемого CSS можно использовать такие инструменты, как Chrome DevTools.

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

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

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

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

Изображения могут существенно повлиять на производительность веб-сайта, поэтому важно их оптимизировать.Самый простой способ оптимизировать изображения — это сжать их. Этот метод уменьшает размер файла и ускоряет их загрузку. Это один из наиболее часто рекомендуемых методов техническими специалистами по поисковой оптимизации и самим Google. Цель здесь — достичь минимально возможного размера файла без ущерба для качества изображения. Для достижения желаемых результатов можно использовать несколько плагинов, таких как Smush и Imagift. Некоторые другие методы оптимизации изображений включают:

Реализация отложенной загрузки (откладывание закадровых изображений до загрузки содержимого верхней части страницы)
Использование анимированных видеоформатов, таких как GIF, Предоставление изображений с точным размером

Преобразование в форматы Nextgen, оптимизированные для браузеров (WebP)

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

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

Отложенная или отложенная загрузка изображений вне экрана

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

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

Выполнение

JavaScript может быть наиболее важным фактором и фактором, влияющим на работу основного потока, и может повлиять на скорость и производительность вашего веб-сайта.Google PageSpeed Insights рекомендует отдельно сокращать время выполнения, чтобы предупредить, если это выполнение существенно влияет на производительность вашего сайта.

Уменьшить задержку TTFB

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

Использование легких плагинов и тем
Использование CDN (сеть доставки контента)
Выбор хорошего поставщика DNS (системы доменных имен)
Выбор высококачественного провайдера веб-хостинга, который может предложить улучшить скорость загрузки Google Page
Использование меньшего количества подключаемых модулей на вашем сайте
Реализация кеширования браузера

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

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

Вы также можете установить плагин с функцией сжатия GZIP. WP Rocket — хороший выбор, если вы не против использовать платный плагин.

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

Избегайте нескольких цепочек переадресации 301

301 редирект используется для перемещения пользователя с одного URL-адреса на другой, а также при удалении или перемещении страницы. Хотя использование перенаправления само по себе не является плохой практикой, они могут увеличить время загрузки страницы и замедлить загрузку страницы веб-сайта. Если на странице слишком много перенаправлений в последовательности, вам будет рекомендовано исправить это, чтобы улучшить показатель Google PageSpeed . Единственный способ исправить это — использовать перенаправления только в случае крайней необходимости.

Обслуживайте статические активы с помощью эффективной политики кэширования

Google PageSpeed Insights показывает эту рекомендацию как предупреждение браузера о кешировании. Вы можете реализовать кеширование через плагины WordPress. Однако некоторые хостинг-провайдеры также включают кеширование через свои серверы.

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

Google PageSpeed Insights and Perender

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

Как использовать Google PageSpeed Insights

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

Google PageSpeed Insights — Обзор

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

С помощью Google PageSpeed Insights вы можете понять, есть ли проблемы с производительностью вашего веб-сайта.

Как использовать Google PageSpeed Insights?

Получить информацию довольно просто. Перейдите на веб-сайт, введите URL-адрес, который вы хотите проанализировать, и нажмите кнопку «Анализировать».

Вы можете начать работу с Google PageSpeed Insights, введя URL-адрес, который хотите проанализировать.

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

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

Как интерпретировать данные поля Google PageSpeed Insights

Google PageSpeed Insights просматривает отчет о пользовательском опыте Chrome, чтобы предоставить вам подробный отчет о полевых данных. В отчете будут следующие метрики:

First Contentful Paint (FCP) — обозначает время, необходимое для первого рендеринга текста или изображения браузером
First Input Delay (FID) — количественно оценивает взаимодействие с пользователем при работе с неотзывчивой страницей
Крупнейшая отрисовка содержимого (LCP) — обозначает время, необходимое для загрузки основного содержимого на странице.
Совокупный сдвиг макета (CLS) — указывает на неожиданные изменения макета для пользователя.

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

Хорошо

Данные	Оценка
FCP	[0, 1800 мс]
FID	[0, 100 мс]
LCP	[0, 2500 мс]
CLS	[0, 0.1]

Хороший показатель PSI

Требуется улучшение

Данные	Оценка
FCP	[1800 мс, 3000 мс]
FID	[100 мс, 300 мс]
LCP	[2500 мс, 4000 мс]
CLS	[0,1, 0,25]

Показатель PSI, требующий улучшения

Плохо

Данные	Оценка
FCP	более 3000 мс
FID	более 300 мс
LCP	более 4000 мс
CLS	более 0.25

Оценка PSI, которая считается плохой

Как интерпретировать данные лаборатории Google PageSpeed Insights?

С помощью Lighthouse, автоматизированного инструмента, который помогает повысить качество веб-страниц, PageSpeed Insights предлагает определенные показатели, отнесенные к категории лабораторных данных на странице результатов. Это:

First Contentful Paint — время, необходимое для визуализации первого текста или изображения.
Largest Contentful Paint — время, необходимое для визуализации самого большого текста или изображения.
Speed Index — указывает, насколько быстро заполняется содержимое веб-страницы.
Совокупный сдвиг макета — указывает на неожиданное изменение макета для пользователя.
Время до интерактивности — время, необходимое для того, чтобы веб-страница стала полностью интерактивной.
Общее время блокировки — общий период времени между FCP и временем до взаимодействия.

Оценка производительности веб-страницы рассчитывается на основе этих данных.

Аудит

Данные аудита доступны в трех различных разделах — Возможности, Диагностика и Пройденные аудиты.

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

Эти предложения помогут улучшить скорость загрузки страницы.

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

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

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

Вы можете просмотреть пройденные аудиты.

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

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

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

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

Сжатие изображений — еще один важный фактор, который поможет вам улучшить оценку Google PageSpeed Insights. Если вы ищете инструменты для сжатия изображений, наша статья о лучших плагинах сжатия изображений WordPress для ускорения работы вашего сайта может помочь. Кроме того, использование форматов файлов, таких как WebP для изображений, может помочь повысить производительность сайта.

Уменьшить время отклика сервера

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

Минификация

Вы можете уменьшить размер файлов CSS, JavaScript и HTML, удалив ненужные символы, дубликаты и т. Д. Кроме того, если на сайте есть неиспользуемые файлы CSS, вы можете полностью удалить их.

AMP

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

Уменьшить перенаправления

Переадресация

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

Google pagespeed insights: Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

Стоит ли измерять скорость сайта в PageSpeed Insights?

Что такое PageSpeed Insights

В каких случаях PageSpeed Insights имеет значение

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

Заключение

PageSpeed Insights — Оптимизация (обновление)

Полезные материалы

1. Стили и скрипты

2. Шрифты

3. Изображения

4. Бэкенд

5. Кеширование сервера

6. Реальная эффективность сайта

Мракобесие

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

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

Проверка скорости загрузки сайта в PageSpeed Insights

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

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

Оптимизация сайта по рекомендациям PageSpeed Insights

Диагностика

Мифы и факты о PageSpeed Insights

Итак, что же такое PageSpeed Insights?

Как Pagespeed Insights от Google помогает улучшить скорость загрузки сайта

ПОЯСНЕНИЯ К РЕКОМЕНДАЦИЯМ PAGESPEED INSIGHTS

1. Избегайте переадресаций целевой страницы

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

3. Настройте кеширование браузером

4. Уменьшите время ответа сервера.

5.Уменьшите HTML, CSS&JS

6. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

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

8.Оптимизация видимого контента

как ускорить WordPress по данному показателю

Как ускорить WordPress по мнению Google PageSpeed Insights

1. Файл .htaccess

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

3. Оптимизация html и скриптов.

4. Мобильная версия сайта

5. Удаление ненужных плагинов

Вывод

Как улучшить свой показатель Google PageSpeed ​​Insights: передовой опыт 2021 года

1. Сжимайте изображения

2. Устранение ненужных перенаправлений.

3. Удалите все ресурсы, блокирующие рендеринг.

4. Улучшите вашу воспринимаемую производительность

5. Используйте кеширование браузера.

6. Используйте AMP.

Заключительные замечания

О PageSpeed ​​Insights | Разработчики Google

Данные реального пользовательского опыта

Оценка качества опыта

Распределение и выбранные значения метрики

Core Web Vitals

Различия между полевыми данными в PSI и CrUX

Диагностика производительности

Оценка производительности

Аудит

Часто задаваемые вопросы (FAQ)

Какие устройства и условия сети использует Lighthouse для имитации загрузки страницы?

Почему полевые и лабораторные данные иногда противоречат друг другу?

Почему для всех показателей выбран 75-й процентиль?

Почему FCP в v4 и v5 имеет разные значения?

Почему у FID в v5 разные значения?

Какова хорошая оценка лабораторных данных?

Почему оценка производительности меняется от запуска к запуску? Я на своей странице ничего не менял!

Почему данные CrUX реального пользователя недоступны для URL-адреса или источника?

Еще вопросы?

Обратная связь

Техническое руководство по отчетам Google PageSpeed ​​Insights

Что такое скорость страницы?

Что такое Google PageSpeed ​​Insights (PSI)?

PageSpeed ​​Insights и рейтинг

Скорость страницы и пользовательский опыт

Использование инструмента PageSpeed ​​Insights

Общие сведения о вашем отчете PSI

Полевые данные

Лабораторные данные

Как улучшить свой показатель Google PageSpeed Insights: передовой опыт 2021 года

О PageSpeed Insights | Разработчики Google

Техническое руководство по отчетам Google PageSpeed Insights

Что такое Google PageSpeed Insights (PSI)?

PageSpeed Insights и рейтинг

Использование инструмента PageSpeed Insights

Последние мысли о PageSpeed Insights

Оценка Google PageSpeed Insights и Core Web Vitals

Расширение Google PageSpeed Insights — Plesk

Сделайте свой сайт более быстрым и удобным для мобильных устройств с помощью расширения Plesk Google PageSpeed Insights

Google PageSpeed Insights vs.Расширение Core Web Vitals для повышения производительности

Скорость выставления оценок с помощью Google PageSpeed Insights

Оптимизируйте свой Google PageSpeed Insights Оценка

Для чего нужен инструмент Google Page Speed Insights?

Является ли Google PageSpeed Insights точным?

Как использовать Google PageSpeed Insights