Pagespeed insights новая версия: проверьте показатели вашего сайта — Сервисы на vc.ru

Новый PageSpeed Insights 2021 (июнь) — Сервисы на vc.ru

В Google обновили инструмент PageSpeed Insights на версию движка Lighthouse 8.0.

1394 просмотров

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

Выжимка из того, что изменилось в версии v8.0

Обновилась математическая калькуляция результата PageSpeed Insights. В Lighthouse v8.0, обновился расчет для FCP (первая отрисовка) и TBT (полная блокировка) — они стали более точные. CLS обновился на новый расчет. Кроме того, выросло его влияние на общую оценку. Выдан больший вес CLS и TBT. Уменьшился вес FCP, SI и TTI.

На основе анализа последних исследований HTTP Archive Гугл прогнозирует, что оценка производительности для большинства сайтов в Lighthouse 8.0 останется на прежнем уровне или улучшится.

~20% сайтов могут увидеть падение до 5 баллов или меньше

~20% сайтов не увидят заметных изменений

~30% сайтов увидят небольшое улучшение на несколько пунктов

~30% могут увидеть значительное улучшение на 5 и более баллов

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

Lighthouse v8.0 Performance FAQ GoogleChrome/lighthouse

Почему увеличена важность CLS

Впервые эта метрика была представлена в Lighthouse v6 в 2018. С тех пор метрика CLS претерпела множество улучшений и исправлений. Теперь, учитывая ее точность и устоявшееся место в Core Web Vitals, вес увеличился с 5% до 15%.

LCP, CLS и TBT — очень хорошие метрики. Именно поэтому они являются тремя метриками с наибольшим весом в рейтинге эффективности.

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

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

Как рассчитывается показатель Лайтхаус

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

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

Самое интересное обновление в LH v8

Гугл сообщает, что интерактивная карта, фильтрация аудитов по метрикам и новый аудит для политики безопасности контента, который был разработан совместно с командой Google Web Security — это самое интересное из обновления от 02 июня 2021.

Последние статьи автора

Лицемерие google.

PageSpeed Insights / Хабр Google Page Speed Insights — это сервис от гугла, который позволяет определить производительность сайта и дает рекомендации по его оптимизации. Очень важно понимать, что это всего лишь рекомендации! Некоторые воспринимают эти рекомендации настолько серьезно, что готовы реализовать все что там написано в ущерб функционалу своего сайта, что в итоге может даже навредить. Но это довольно сложная тема с множеством нюансов, а данная статься лишь мои мысли в слух и пара замечаний самому google.

Есть такая рекомендация:

Используйте современные форматы изображений:
Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика

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

На момент написания данной статьи, это всего 80%. Вполне не плохо, но еще слишком мало чтобы использовать повсеместно. И как вы думаете что делает с этой информацией сам PageSpeed Insights? Правильно, он использует PNG:

Ну ладно, не то что сами рекомендуют, но почему бы не SVG? Нужно же подать пример, но зачем? А давайте проверим на оптимизацию сам сайт developers.google.com на котором находится данный сервис:

Мобильная версия всего лишь 51, а вы видели эту страницу? Она практически пустая, несколько меню сверху и снизу, пара новостей и поиск:

Очевидно, что они клали на эту оптимизацию, ведь оно им не надо. Они даже не попытались показать пример… Хотя может это и есть пример? Пример того, что не нужно бездумно пытаться реализовать все рекомендации в ущерб функционалу и здравому смыслу?

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

Улучшаем скорость сайта с помощью Google PageSpeed Insights

Ускорение вашего сайта — непростая задача.

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

Google PageSpeed Insights (проверка скорости сайта гугл) — отличный инструмент, который анализирует веб-страницу и предлагает решения, позволяющие ускорить ее загрузку. Он очень полезен на начальной стадии, когда разработали сайт и нужно провести аудит быстродействия, подготовить чек-лист для оптимизатора. Мы рассмотрим, как использовать и работать с рекомендациями  по скоросит загрузки сайта Google Page Speed.

Интерфейс Google PageSpeed Insights

Чтобы начать работу, откройте инструмент PageSpeed Insights и введите URL вашего сайта в соответствующее поле, затем нажмите «Анализировать»:

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

Вот как выглядит мой отчет:
 

Вам будет показана общая оценка вашего сайта (оценка из 100), как для десктопного, так и для мобильного сайта, отдельно по скорости загрузки страницы (быстрая, средняя, медленная) и качеству оптимизации сайта:

• Low (красный) — свидетельствует о медленной загрузке страницы.
• Medium (оранжевый) — страница испытывает некоторые проблемы с быстрой загрузкой, но не критические.  
• High (зеленый) — страница загружается быстро.

Скорость загрузки страницы замеряется по Cобытию первой отрисовки контента (FCP) и DOM Content Loaded (DCL):

Отчет состоит из 3 разделов:

1. Информация о скорости загрузки страницы — показывает количество операций и обращений к серверу при загрузке страницы;
2. Предложения по оптимизации — чек-лист того, что нужно внедрить на странице для улучшения скорости;
3. Внедренные приемы оптимизации — показывает то, что уже оптимизировано на сайте.

Давайте пройдемся по всем рекомендациям Google PageSpeed, чтобы понять как их использовать. 

Читайте также: Оптимизация под голосовой поиск

Рекомендации Google PageSpeed Insights

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

Нормальным показателем будет 200-500 мс (0,2-0,5 с). Все что выше — Google уже отмечает. 

Многое зависит от хостинга, а именно конфигурации и настроек сервера. Если он недостаточно мощный — могут возникать задержки в ответе сервера. 

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

Как дополнительный вариант, можно отключить все ненужные службы, работающие на сервере, чтобы увеличить скорость.
Но самая большая разница, которую я заметил, чтобы уменьшить время отклика сервера, достаточно перейти на новую версию PHP, например PHP 7.  Разные отчеты в интернете показывают увеличение скорости на 20-50% с переходом на PHP 7. 

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

Итак, подытожим, что можно сделать для увеличения время ответа сервера:

• перейти на более современный и быстрый хостинг с поддержкой PHP 7
• изменить или обновить версию CMS сайта
• отключить или удалить все ненужные, устаревшие и “тяжелые” плагины на сайте, уменьшив таким образом количество обращений к базе данных и снизив нагрузку на CPU сервера
• очистить базу данных сайта от лишних записей, что также уменьшит использование CPU

Больше рекомендаций по оптимизации сервера в документации Google:
https://developers. google.com/speed/docs/insights/Server

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

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

К примеру, для ПС Google все, что превышает 100 Кб считается большим.

Как только я сжал все свои изображения на сайте — получил огромное прибавление в скорости.

Если вы используете WordPress, один из лучших способов сжать изображения, не потратив много времени, использовать плагин. Мой любимый плагин для использования — WP Smush Image Compression and Optimization:

Если ваш сайт страдает из-за большого количества больших изображений, то их просто нужно сжать. Например, при сохранении в Photoshop качество сжатия jpeg-файла должно быть не выше 85%. В большинстве случаев нет никакой потребности указывать столь высокое значение. Некоторые веб-дизайнеры часто упоминают магическое число «51» для сжатия jpeg, но вы можете сами оценить, насколько можете уменьшить качество.

Читайте также: A/B тест рассылки

Бесплатные сервисы для сжатия изображений:

Более детально об оптимизации изображений:
https://developers.google.com/speed/docs/insights/OptimizeImages

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

Некоторые скрипты и стили, расположенные в самом верху страницы в header, блокируют отображение страницы. 

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

Детальнее о блокирующих элементах кода в документации Google: 
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

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

Кэширование браузера или Leverage browser caching — еще один инструмент, который может оказать большое влияние на скорость страницы. Получение ресурсов для загрузки вашего сайта требует больших усилий. Он требует загрузки каждого элемента изображения и страницы, а затем имеет дело с тяжелым HTML и кодированием. Каждый раз, когда кто-то загружает ваш сайт, этот процесс должен происходить снова и снова. Ваш сайт будет слишком долго загружаться. И именно здесь может помочь кэширование. 

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

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

Читайте также: Как использовать og image

5. Сократите JavaScript и CSS

Сведение к минимуму пространства, которое занимает ваше кодирование в формате Java Script, является еще одним важным фактором получения идеального результата от Google. Минимизация — это процесс удаления или исправления ненужных или дублированных данных, не влияя на то, как браузер будет обрабатывать HTML. Он включает в себя исправление кода, форматирование, удаление неиспользуемого кода и сокращение кода, когда это возможно. И еще раз, благодаря потрясающим плагинам WordPress, вам не нужно быть гением программирования, чтобы исправить это.

Желательно начать с валидации всего HTML-кода сайта: https://validator.w3.org

Список сервисов для оптимизации JavaScript:

Список сервисов для оптимизации CSS:

Детальнее об оптимизации JavaScript и CSS файлов в документации Google:
https://developers. google.com/speed/docs/insights/MinifyResources

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

Существует большой объем данных, которые необходимо передавать между серверами и пользователями при доступе к сайту. К счастью, есть способ сжатия передаваемой информации. Он называется — gzip (от GNU Zip).

Пользователи WordPress могут включить gzip сжатие, установив плагин GZip Ninja Speed Compression.Читайте также: Советы для SEO по WordPress.

На многих хостингах gzip-сжаите уже включено по умолчанию, но вы можете проверить включено оно или нет на вашем сайте с помощью сервиса: https://checkgzipcompression.com/

Детальнее о сжатии в документации Google:
https://developers.google.com/speed/docs/insights/EnableCompression#-

7. Мобильная версия

Все рекомендации выше касались десктопной версии сайта. Для мобильной они мало чем отличаются, но связаны с работой сайта под смартфоны и планшеты. Думаю, не стоит рассказывать вам, насколько важны обе, особенно с введением Mobile first Index в Google. Большую роль тут играет адаптивность и наличие AMP-страниц (Accelerated Mobile Pages). Что выбрать — мобильную версию или качественную адаптивную верстку — читайте в статье: Мобильный поиск в современном SEO

Выводы

В целом, Google PageSpeed Insights — полезный инструмент, но нужно понимать, что он не является “мерилом” скорости сайта, а средством SEO аудита с точки зрения быстродействия сайта. Если нужно проверить реальную скорость — для этого существуют такие сервисы как GTMetrix, Pingdom или WebPageTest. PageSpeed же соберет для вас полезную информацию по проблемным зонам, тормозящие сайт и предоставит чек-лист для оптимизатора.

Так же, на мой взгляд, не стоит гнаться за 100/100 оценками в PageSpeed Insights. В некоторых ситуациях это практически невозможно. Чтобы их достичь, иногда нужно пойти в ущерб функциональности сайта. Да и не все рекомендации могут быть безопасными. Например, если перенести CSS в нижнюю часть страницы, как рекомендует PageSpeed, веб-страница будет сперва подгружаться без стилей, что конечно же увеличит количество отказов.  

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

Читайте также: Поисковые подсказки Google

Google: обновление PageSpeed Insights

После 12 ноября Интернет уже не будет прежним — Google кардинально изменил принципы работы PageSpeed Insights (PSI). Главным критерием оценки стала скорость.

Было/стало

В старой версии PageSpeed Insights баллы присуждались сайту за выполнение определенных правил. 95-98 из 100 считались серьезной заявкой на лидерство и получить их можно было за сжатие изображений, оптимизацию CSS, JacaScript и видимого контента и пр.

В обновленном PSI упор делается исключительно на временные характеристики работы сайта, изменилась шкала оценки. Если до ноября 2018 г. нижняя граница зеленой зоны начиналась с 80 баллов, то сейчас поднялась до 90. Для середнячков нижняя граница, наоборот, опустилась с 60 до 50, а несоответствующими требованиям считаются ресурсы в диапазоне 0-49 против старых 0-59 балов. Для наглядности мы сделали таблицу, но сравнивать старую и новую оценки, на самом деле, некорректно — они определяются по разным параметрам.

Оценочная шкала	Зеленая зона	Желтая зона	Красная зона
Старая (качественная/балльная)	Good, 80-100	Medium, 60-79	Low, 0-59
Новая (скоростная)	Fast, 90-100	Average, 50-89	Slow, 0-49

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

Метрики нового PageSpeed Insights

Вернемся к показателям скорости. Их 6:

1. Время загрузки первого контента. Период до появления на странице первых изображений или текста.
2. Индекс скорости загрузки. Промежуток, когда страница перестает визуально меняться. Модуль Speedline определяет этот промежуток, проводя покадровую съемку и сравнение данных.
3. Время загрузки для взаимодействия. По сути это time to interactive — период времени, который требуется для того, чтобы сайт начал отзываться на действия пользователя.
4. Время загрузки достаточной части контента. Секунды, за которые на странице подгружаются шрифты и появляются основные элементы.
5. Время окончания работы ЦП. К моменту окончания работы ЦП подгружаются и готовы отвечать на действия пользователя пусть не все, но базовые интерактивные элементы.
6. Приблизительное время задержки при вводе. Время, за которое страница реагирует на действия посетителя в течение 5 с после загрузки.

У показателей разная значимость. Time to Interactive — ключевой. Estimated Input Latency — наименее важный.

Как теперь оптимизировать сайт под Google

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

Хрусталева Екатерина, Специалист отдела маркетинга Nowmedia

Сервис работает не очень стабильно — идет отладка и обкатка, но первые опыты показали, что на основные параметры скорости негативно влияют:

• всплывающие окна;
• интеративные карты, автоматом подгружающиеся при открытии страницы;
• виджеты ВКонтакте, Facebook, Одноклассников;
• чаты онлайн-консультантов;
• подгружающиеся на всей странице, а не на видимой ее части, картинки.

PSI дает рекомендации по улучшению скорости загрузки. Удобно, что сразу прогнозирует экономию времени в секундах.

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

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

Запросить коммерческое предложение
на техническую поддержку сайта

Заявка на расчет

Как улучшить позиции сайта с помощью Google Pagespeed Insights (инструкция)

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

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

PageSpeed ​​Insights теперь работает на Lighthouse. Как сделать новый аудит?

Недавно Google выпустил v5 своего API-интерфейса PageSpeed ​​Insights, который теперь реализует технологию Lighthouse и интегрирует полевые данные, представленные в отчете Chrome User Experience Report (CrUX).

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

Мы считаем, что надежный показатель оптимизации веб-производительности не должен зависеть только от PageSpeed Insights.

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

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

 

Знакомство с Google Lighthouse

До сих пор Google использовал несколько инструментов для оценки производительности веб-сайтов, таких как PageSpeed Insights, WebPageTest, Test My Site, Chrome Developer Tools и Lighthouse.

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

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

Теперь, когда Lighthouse поддерживает PageSpeed Insights, вы должны получить тот же результат, независимо от того, выбираете ли вы свои рекомендации по производительности из Интернета, командной строки или Chrome DevTools.

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

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

От Альберто Медины (Адвокат разработчиков в Google) :

Мы рассматриваем разработку проекта, называемого WordPress – локализованными пакетами рекомендаций для Lighthouse, с целью предоставления ориентированного на WordPress руководства с использованием Lighthouse. С его помощью разработчики и владельцы сайтов WordPress получат результаты аудита Lighthouse с учетом реалий платформы WordPress.

Теперь, прежде чем углубляться в детали нового API PageSpeed Insight, давайте выясним, что такое Google Lighthouse.

 

Что такое Google Lighthouse?

Lighthouse – технология, лежащая в основе этого обновления PSI v5. Согласно определению Google :

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

Код Lighthouse доступен в общедоступном репозитории Google Chrome GitHub.

 

Почему PageSpeed Insights обновляет игру?

Отныне новая PageSpeed ​​Insights требует от всех нас корректировать способ чтения показателей производительности и интерпретировать аудиты оптимизации веб-производительности.

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

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

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

Лабораторные данные по PSI основаны на различных показателях:

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to Interactive
• Estimated Input Latency

 

Каждая из этих метрик получает оценку и (в) известный значок PSI: зеленая отметка, когда оценка хорошая (90+), оранжевый кружок для средней оценки и красный треугольник для самой низкой оценки.

 

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

Эти данные хранятся в наборе данных Chrome User Experience Report и отображаются в пользовательском интерфейсе в качестве классификации скорости: зеленая полоса для быстрых страниц, оранжевая полоса для средних страниц и красная полоса для медленных страниц.

 

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

 

Почему вы должны читать оценки PSI по-другому

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

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

Это настоящая революция новой версии PageSpeed ​​Insight!

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

 

3 ключевых момента, которые следует помнить при запуске теста PageSpeed

Теперь, когда вы знаете, что для Google приоритет отдан мобильному устройству и его инструменту Lighthouse, давайте рассмотрим три ключевых момента, которые следует учитывать при запуске теста PageSpeed ​​Insight с новым API:

 

1. Тесты PSI проводятся с использованием дросселированного соединения 3G

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

 

2. Местоположение сервера тестирования, используемого отчетами PSI, неизвестно

Это важный момент!

Предположим, ваш сервер находится в Атланте, ближайшей к вашей целевой аудитории, а тестовый сервер, используемый PageSpeed ​​Insights, скажем, в Лос-Анджелесе.

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

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

 

3. Мобильное устройство (или эмулятор мобильного устройства), используемое PSI, представляет собой Moto G4 среднего уровня.

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

 

Как справиться с новыми рекомендациями PageSpeed?

Наряду с упомянутым обновлением технологии, лежащим в основе алгоритма PageSpeed, стоит упомянуть несколько новых рекомендаций:

Давайте посмотрим их вместе:

 

Отложить неиспользованный CSS

Уведомление PageSpeed ​​описывает эту рекомендацию следующим образом:

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

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

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

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

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

 

Минимизировать работу основного потока

Хорошее объяснение этой рекомендации можно найти в этом руководстве Адди Османи, инженер-инженера из Google: оптимизация запуска JavaScript.

Что говорит PageSpeed, когда показывает примечание о минимизации работы основного потока, так это то, что ваш сайт сильно зависит от JavaScript.

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

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

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

 

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

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

PageSpeed ​​еще раз напоминает вам, что ваш сайт должен использовать меньше JavaScript, чтобы улучшить время выполнения страниц. Каждый раз, когда вы видите эту заметку, спрашивайте себя: « Неужели я посылаю слишком много JavaScript?».
Вероятно, ответ будет «Да!»

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

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

 

Завершение

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

Если вы один из них, помните, что для понимания новых результатов PageSpeed ​​Insights вы должны рассмотреть различную природу Lighthouse.

Использование управляемого по умолчанию 3G-соединения, мобильного устройства среднего уровня и тот факт, что местоположение сервера не указано, являются слепыми пятнами нового инструмента PageSpeed ​​Insight: лучше всего учитывать его результаты с учетом этого дополнительного контекста. максимально использовать его предложения.

Дополните отчеты отчетами других инструментов измерения производительности, таких как Pingdom и GTMetrix, и вы получите наиболее точную и реалистичную картину эффективности вашего веб-сайта!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как улучшить мобильную версию сайта — опыт «Хорошопа» — RetailersUA

15 апреля 2021 года платформа для создания интернет-магазинов «Хорошоп» презентовала обновленную мобильную версию клиентских сайтов. Специалисты платформы более детально расскажут о результатах своей работы и о том, как обновление повлияло на интернет-магазины клиентов.

---

Зачем мы обновляли мобильную версию

Первая мобильная версия «Хорошопа» была разработана в 2016 году. У нее был актуальный дизайн и технологии, которые даже спустя пять лет оставались на достойном уровне, но e-commerce изменился. Трафик с мобильных устройств вырос в два раза, а доля покупок — в четыре. Мобильная версия сайта стала едва ли не важнее десктопной, поэтому мы решили сделать ее еще лучше. Нужно было:

• обновить дизайн;

• улучшить пользовательский опыт;

• ускорить загрузку страниц.

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

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

Подавляющее большинство мобильных сайтов, даже у крупных интернет-магазинов, получают оценку на уровне 30-40 баллов, а все, что ниже 50 — слабый результат по мнению PageSpeed Insights. Эти магазины могут повысить оценку путем оптимизации мобильной версии, но это дорогостоящий вариант, который могут себе позволить не все. «Хорошоп» поставил перед собой цель повысить оценку сразу для всех клиентских сайтов.

Некоторые разработчики считают, что у оценки Google PageSpeed Insights нет прямой связи с удобством и скоростью сайта. Хотя сервис заявляет обратное. Мы взяли на себя роль разрушителей мифов и углубились в эту тему, чтобы понять от чего на практике зависит оценка. Опытным путем установлено, что улучшение скорости и юзабилити сайта приводит к улучшению оценки. А если внедрять рекомендации сервиса для повышения оценки, то улучшается скорость и удобство. Вывод был однозначным — с сервисами Google лучше не спорить.

Новый дизайн мобильной версии

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

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

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

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

Оценка скорости загрузки страниц

Для оценки скорости сайта мы брали страницы, на которые идет основная доля трафика. Прежде всего, это страницы каталога и товара, а уже после — главная страница. Обновленная мобильная версия демо-сайта получила 99 баллов от Google PageSpeed Insights. После добавления элементов, которые используют большинство интернет-магазинов, например Facebook Pixel и кастомных шрифтов, — оценка составила 80 баллов.

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

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

Рост продаж после обновления

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

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

Обновление мобильной версии получили 2500 клиентов «Хорошопа», независимо от своего тарифа. Ознакомиться со всеми изменениями в новой версии вы можете посмотрев нашу презентацию на YouTube. А наши слова можно всегда проверить на практике — для этого у вас есть 14 дней бесплатного теста нашего продукта.

Читайте свежие новости и аналитику о ритейле и интернет-торговле в Украине на нашей странице в Facebook, на нашем канале в Telegram, а также подписывайтесь на нашу еженедельную e-mail рассылку.

Инструмент Google PageSpeed ​​Insights получил серьезное обновление с дополнительными данными из Lighthouse

Google незаметно выпустила новое обновление для своего инструмента PageSpeed ​​Insights, первое крупное обновление с января 2018 года, когда Google начал использовать реальные пользовательские данные из браузера Chrome для измерения скорости страницы сайта. Новое обновление сегодня использует Lighthouse, инструмент скорости от Google, в качестве механизма анализа, а также включает в инструмент полевые данные, предоставленные отчетом Chrome User Experience Report (CrUX).

Маяк и CRUX. Версия 5 примечаний к выпуску гласит: «v5 API PageSpeed ​​Insights был выпущен в ноябре 2018 года. Теперь он использует Lighthouse в качестве механизма анализа, а также включает полевые данные, предоставленные отчетом Chrome User Experience Report (CrUX). v5 API теперь будет предоставлять данные CrUX и все аудиты Lighthouse. Предыдущие версии PSI API будут прекращены через шесть месяцев ».

Взгляд до и после. Так выглядела панель управления PageSpeed ​​Insights в начале этого года:

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

Какие данные есть в обновленном инструменте? Новый набор инструментов разбивает отчет на несколько категорий, включая:

• Field Data: использует отчет Chrome User Experience и показывает первую отрисовку содержимого (FCP) и задержку первого ввода (FID).
Лабораторные данные
• : Lighthouse анализ текущей страницы на эмулируемом мобильном устройстве и отображение показателей этого инструмента, включая первую полнофункциональную отрисовку, индекс скорости, время до взаимодействия, первую значимую отрисовку, первый простой ЦП, предполагаемую задержку ввода, а затем показывает снимки экрана, показывающие, как это просматривается.
• Возможности: показывает способы повышения производительности этой конкретной страницы, включая области проблем и то, насколько они замедляют работу вашей страницы.
• Диагностика: это дает вам отчет о производительности вашего приложения для таких вещей, как кеширование, размер DOM, полезные нагрузки, JavaScript и многое другое.
Аудит
• : затем отчет покажет вам, насколько хорошо вы справились с различными аудитами, включая минимизацию JavaScript, CSS, перенаправления и многое другое.

Почему это важно? Ускорение вашего сайта важно не только для обеспечения высокого рейтинга вашего сайта в Google Search Speed ​​Update. Это может улучшить пользовательский интерфейс и повысить коэффициент конверсии на вашем веб-сайте. Это обновление инструмента PageSpeed ​​Insights значительно улучшило данные и показатели, касающиеся того, как измерить скорость вашей страницы. Это дает вам множество областей, в которых вы можете улучшить свои страницы и, таким образом, увеличить их скорость.

Возможно, стоит попросить вашу команду разработчиков изучить этот отчет и найти быстрые методы повышения скорости загрузки страниц вашего сайта. API инструмента PageSpeed ​​Insights также был обновлен до версии 5.Google заявил, что версия 4 API будет устаревать в мае 2019 года, поэтому вам нужно будет в ближайшее время перейти на версию 5.

Постскриптум : Через несколько часов после этой истории Google объявил об изменениях в своем собственном блоге.

---

Об авторе

Барри Шварц, редактор-исполнитель Search Engine Land и член команды программистов SMX-мероприятий. Ему принадлежит RustyBrick, консалтинговая компания из Нью-Йорка. Он также ведет Search Engine Roundtable, популярный поисковый блог по очень продвинутым темам SEM.Личный блог Барри называется Cartoon Barry, за ним можно следить в Twitter. Примечания к выпуску

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

Заметки о выпуске для PageSpeed ​​Insights API и PageSpeed ​​Insights UI

Примечание. Версия API — v5, однако версия Lighthouse независима и регулярно обновляется.

10 июня 2021 г.

Данные поля PageSpeed ​​Insights теперь предоставляются для страниц и источников, которых может быть недостаточно. данные для метрики, но достаточно данных для других метрик.Раньше полевые данные были только появляется, если все показатели для страницы или источника соответствуют пороговому значению данных. Теперь любая метрика, которая соответствует будет предоставлен порог данных. Это отражено в loadingExperience и originLoadingExperience объектов в API, а также во внешнем интерфейсе. Увидеть документы о том, как это соотносится с оценкой Core Web Vitals.

1 июня 2021 г.

PageSpeed ​​Insights использует Lighthouse 8.0.0. Смотрите полную версию 8.0.0 и прочтите заметные изменения. Если вы используете API, обратите внимание на критические изменения для пользователей с алгоритмической продажей.

API CrUX (который лежит в основе раздела полевых данных PSI) был обновлен, см. Примечания к их выпуску.

24 мая 2021 г.

Базовый экземпляр Chrome Pagespeed был обновлен с Chrome 88 до Chrome 90. Это было бы не очень заметно, за исключением возможного влияния нескольких улучшений CLS, которые были частью 89 и 90.

1 апреля 2021 г.

Lighthouse 7.3.0 был развернут на PageSpeed ​​Insights 1 апреля 2021 г. См. Полные примечания к выпуску 7.3.0.

3 марта 2021 г.

По состоянию на 3 марта 2021 г. PageSpeed ​​Insights использует http / 2 для выполнения сетевых запросов, если сервер поддерживает его. Раньше все запросы выполнялись с помощью http / 1.1 из-за ограничений в инфраструктуре подключения. Благодаря этому усовершенствованию вы можете ожидать большего сходства между результатами Lighthouse от PSI, Lighthouse CLI и DevTools (которые всегда делали запросы с h3).Однако важно помнить, что разные среды (оборудование и возможности подключения) будут влиять на измерения, поэтому согласованность между средами практически невозможна.

С этим изменением сетевые соединения часто устанавливаются быстрее. Учитывая, что ваши запросы обслуживаются в h3, вы, вероятно, можете ожидать улучшения показателей и оценки производительности. В целом показатели производительности по всем запускам PageSpeed ​​Insights выросли на несколько пунктов.

Если ваша страница не поддерживает h3, в отчете теперь будет отображаться аудит, оценивающий улучшение производительности, если бы страница поддерживала h3.

2 марта 2021 г.

Со 2 марта 2021 г. максимальный тайм-аут PSI API был увеличен с 60 до 120 с. Сложные и тяжелые веб-страницы могут занять больше времени для анализа, и многие из них будут отключены. Мы уменьшили время ожидания, чтобы дать этим тяжелым страницам больше шансов на получение результатов.

19 февраля 2021 г.

С 19 февраля 2021 г. PageSpeed ​​Insights использует Lighthouse 7.1.0. См. Полные примечания к выпуску 7.0.0 и ознакомьтесь с заметными изменениями .Если вы используете API, обратите внимание на критические изменения для пользователей с алгоритмической продажей. Поскольку это обновление с версии 6.3.0, оно включает в себя основной выпуск v7, а также выпуски 6.4.0, 6.5.0 и 7.1.0. Вы можете заметить, что для тяжелых страниц выполняется немного больше времени. Не следует ожидать значительных различий в показателях производительности, хотя небольшие корректировки показателей связаны с исправлением ошибок в анализе и реализациях показателей.

3 декабря 2020

По состоянию на 3 декабря 2020 года PageSpeed ​​Insights использует API Chrome User Experience Report (CrUX) для получения полевых данных.В API это влияет на объекты loadingExperience и originLoadingExperience . Более подробную информацию об изменении можно найти здесь.

8 сен.2020 г.

Lighthouse 6.3.0 был развернут на PageSpeed ​​Insights 8 сентября 2020 г.

27 мая 2020

Lighthouse 6.0.0 был развернут на PageSpeed ​​Insights 27 мая 2020 г.

мая 2020

v1, v2, v3beta1 и v4 API PageSpeed ​​Insights были удалены в мае 2020 года. Вот некоторые из них, которые устарели в ноябре 2018 г. См. Здесь предложения по миграции.

7 мая 2019 г.

Lighthouse выпустила 5.0 7 мая 2019 г. Информацию об изменениях можно найти здесь: Lighthouse 5.0 + PSI Release Notes

31 января 2019

Lighthouse (на котором работает PageSpeed ​​Insights) выпущен 31 января 2019 г. v4.1. Информацию об изменениях можно найти здесь: Примечания к выпуску Lighthouse 4.1

Ноябрь 2018

v5 API PageSpeed ​​Insights был выпущен в ноябре 2018 года.Теперь он использует Lighthouse в качестве механизма анализа, а также включает полевые данные, предоставленные Chrome User Experience Report (CrUX). v5 API теперь будет предоставлять данные CrUX и все аудиты Lighthouse. Предыдущие версии PSI API будут прекращены через шесть месяцев.

Исторические версии API

Версия 4

v4 API PageSpeed ​​Insights был выпущен в январе 2018 года. Он добавляет оценку скорости, основанную на отчете о пользовательском опыте Chrome, и уточняет исходную оценку PSI как новую оценку оптимизации, которая в основном фокусируется на относительном запасе прочности для улучшения.

Версия 2

v2 API PageSpeed ​​Insights был выпущен в январе 2015 года. Он добавляет поддержку групп правил, таких как SPEED или USABILITY.

Обновления после выпуска:

• Категория результатов была добавлена ​​12 мая 2017 года.
2 февраля 2017 года движок рендеринга
• был переведен с Webkit на Blink. Библиотека оптимизации изображений
• была переведена на использование библиотеки mod_pagespeed 12 декабря 2016 года.
• Правило межстраничного объявления, устанавливаемого приложением, было удалено из расчета оценок в обеих версиях API 23 августа 2016 г.Правило было полностью удалено 1 ноября 2016 года.

Устарело. Закроется в июне 2018 г.

Версия 1

Начальная версия API. Этот выпуск включает поддержку локализации на 40 языков.

29 октября 2013 г. поле ruleScore , которое было объявлено устаревшим в PageSpeed ​​Insights более года, было удалено из API. Мы рекомендуем клиентам использовать вместо этого поле ruleImpact .

Закрыто.

Обновления Google. Оценки PageSpeed ​​Insights

Показатели PageSpeed ​​Insights (PSI) в последнее время улучшились по всем направлениям. Но улучшения не имеют ничего общего с какими-либо изменениями, внесенными на веб-сайты, получившие более высокие оценки. Улучшения произошли на стороне Google.

PageSpeed ​​Insights

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

PSI предоставляет два вида отчетов: лабораторные данные и полевые данные .

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

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

Объявление

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

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

Лабораторные данные — это способ проверить веб-страницу и определить области, которые нуждаются в улучшении.

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

Полевые данные — это информация, собранная фактическими пользователями, просматривающими сайт с помощью Chrome, и заархивированная в отчете об опыте пользователей Chrome (CrUX).

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

Результаты Core Web Vitals получены из полевых данных, заархивированных в CrUX.

Эти показатели состоят из Largest Contentful Paint , First Input Delay и Cumulative Layout Shift .

Объявление

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

Данные поля, отображаемые в инструменте PageSpeed ​​Insights, относятся к предыдущему 28-дневному циклу. Последние изменения на веб-сайте могут не отражаться в разделе отчета с полевыми данными.

Вот почему целевые улучшения веб-сайта не будут отражены в полевых данных, особенно в оценках Core Web Vitals, до тех пор, пока не будет опубликован отчет о следующем 28-дневном цикле.

Google обновил способ сбора данных в PageSpeed ​​Insights

Google объявил о важном изменении способа сбора информации инструментами PageSpeed ​​Insights. Изменение заключается в переключении на использование протокола http / 2 для подключения к веб-странице.

PageSpeed ​​Insights Использование HTTP / 2

HTTP / 2 — это усовершенствованный протокол сетевого подключения, который обеспечивает более быструю передачу данных. В предыдущем протоколе HTTP / 1.x были ограничения на объем передаваемых данных, что приводило к различным обходным путям.

Протокол HTTP / 2 не имеет этих ограничений.

Согласно объяснению HTTP / 2, опубликованному Google:

«HTTP / 2 изменяет форматирование данных (обрамление) и их передачу между клиентом и сервером, оба из которых управляют всем процессом, и скрывают все сложность наших приложений в новом слое кадрирования.

В результате все существующие приложения могут быть доставлены без изменений ».

Объявление

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

HTTP / 2 обеспечивает более быструю передачу данных.Это, в свою очередь, улучшило показатели PageSpeed ​​Insights по всем показателям. Единственное зависание — если ваш сервер не поддерживает HTTP / 2.

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

Существует множество инструментов, которые проверяют веб-сайты на совместимость с HTTP / 2. Инструмент Google Lighthouse идет дальше, сообщая, если сторонние ресурсы загружены сайтом, не поддерживающим HTTP / 2.

HTTP / 2 обеспечивает повышение производительности для клиентов (браузеров и поисковых роботов), поддерживающих HTTP / 2.

Объявление

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

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

Объявление об обновлении PageSpeed ​​Insights от Google

Согласно сообщению Google:

«По состоянию на 3 марта 2021 года PageSpeed ​​Insights использует http / 2 для выполнения сетевых запросов, если сервер поддерживает его.

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

В целом показатели производительности по всем запускам PageSpeed ​​Insights выросли на несколько пунктов ».

Показатели PageSpeed ​​Insights теперь выше

Если вы были приятно удивлены, увидев более высокие результаты PageSpeed ​​Insights, начиная с 3 марта, это причина. Так что не забивай об этом.

Реклама

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

KeyCDN HTTP / 2 Testing Tool

Официальное объявление PSI, теперь использующего HTTP / 2

Отчет об опыте пользователя Chrome (CrUX)

Ознакомьтесь с обновлением инструмента Google PageSpeed ​​Insights

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

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

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

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

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

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

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

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

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

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

Диагностика

Раздел «Диагностика» — это набор тестов, которые оценивают производительность веб-страницы.Здесь вы также можете просмотреть аудит вашей страницы, что позволит вам увидеть лучшие способы оптимизации скорости загрузки. Этот раздел очень похож на раздел аудита страницы, который вы можете увидеть в расширении Google Lighthouse Chrome, поскольку он дает вам решения проблем с производительностью вашей страницы.

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

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

Ключевые вынос

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

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

Выпущено новое обновление Google PageSpeed ​​Insights

Инструмент Google PageSpeed ​​Insights получил несколько интересных обновлений на этой неделе!

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

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

Когда изначально было выпущено The Speed ​​Update, Google сообщил нам об этом;

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

• Отчет о пользовательском опыте Chrome, общедоступный набор данных ключевых показателей взаимодействия с пользователем для популярных направлений в Интернете, с которыми сталкиваются пользователи Chrome в реальных условиях
• Lighthouse, автоматизированный инструмент и часть инструментов разработчика Chrome для аудита качества (производительности, доступности и т. Д.) Веб-страниц
• PageSpeed ​​Insights, инструмент, который показывает, насколько хорошо страница работает в отчете Chrome UX, и предлагает оптимизацию производительности

— Менеджер по продукту Google Page Speed ​​Доантам Фан и инженер по продукту мобильного веб-поиска Чжихэн Ван

Мы не только увидим новый инструмент PageSpeed ​​Insights Tool, но и Google запустил бета-версию для Интернета.разработчик!

Web.dev — это новая библиотека ресурсов для веб-мастеров и специалистов по поисковой оптимизации, состоящая из двух половин; Измерять и учиться. Ниже мы можем увидеть результаты аудита, полученные от Web Dev Measure для www.google.co.uk. В этом отчете мы видим обычную информацию, которую можно ожидать от инструмента Google PageSpeed. Однако вместо получения агрегированной оценки скорости страницы мы можем видеть разбивку по каждой метрике оценки, а также список улучшений. Эта информация извлекается из комбинации ресурсов, таких как инструмент Google PageSpeed ​​Insights, Lighthouse и отчет о пользовательском опыте Chrome.Это самый полный отчет, который мы когда-либо видели от Google.

По сравнению с предыдущим инструментом PageSpeed ​​Insights Tool это огромное улучшение! Как вы можете видеть на скриншоте ниже, часто было необычно получить точную оценку скорости. Это привело к тому, что нам пришлось использовать ряд отдельных инструментов для определения скорости страницы, что часто приводило к различным и несколько противоречивым результатам. Новый инструмент Web Dev Measure позволяет нам получить более детальный обзор производительности сайта и дает нам оценку «воздействия» для каждой выявленной проблемы, чтобы мы могли более правильно определять приоритеты исправлений, а также удобное «Руководство» по каждой проблеме, которое предоставляет с пошаговыми инструкциями по решению проблемы, экономя время и ресурсы.

Это подводит нас к следующему пункту и второй половине Web.Dev, Learn!

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

Темы на Web.Dev Learn:

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

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

Устойчивость сети — этот модуль научит вас, как обеспечить неизменно надежную работу, независимо от того, как они имеют доступ к Интернету, и охватывает следующее;

• Как измерить устойчивость сети
• Опции кеширования
• Как работают стратегии кэширования

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

• Понимание безопасности
• Как браузеры защищаются от атак

Легко обнаруживаемый — этот модуль учит вас, как сделать ваш сайт видимым для людей, выполняющих поиск с помощью Google, и охватывает следующее;

• Как работает поиск
• Как измерить SEO с помощью Lighthouse
• Написание описательных заголовков, описаний и текста ссылок
• Признание эквивалента переведенных поисковыми системами страниц
• Указание поисковым системам, какую версию страницы сканировать
• Удаление кода, блокирующего индексацию
• Исправление неудачных кодов состояния HTTP
• Избегать страниц, которые полагаются на плагины браузера
• Ремонтник роботов.txt ошибки
• Фиксация мелкого шрифта
• Использование метатега области просмотра

Installable — Этот модуль обучает вас методам поощрения взаимодействия с клиентами и обеспечения легкого доступа к вашему приложению и охватывает следующее;

• Узнайте, что нужно для установки
• Добавление манифеста веб-приложения

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

У вас есть сайт на WordPress, который загружается медленнее, чем хотелось бы вашим клиентам? Связаться!

PageSpeed ​​Insights прошли обновление по состоянию на 27 мая 2020 г.

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

https://web.dev/performance-scoring/?utm_source=lighthouse&utm_medium=wpt

Значительное смещение оценок связано с изменением весов

Маяк v6

• Первая насыщенная краска 15%
• Индекс скорости 15%
• Краска с наибольшим содержанием 25%
• Время до взаимодействия 15%
• Общее время блокировки 25%
• Совокупный сдвиг макета 5%

Маяк v5

• Первая насыщенная краска 20%
• Индекс скорости 27%
• Первая значимая краска 7%
• Время до взаимодействия 33%

Как вы можете видеть, наблюдается значительный сдвиг в сторону общего времени блокировки (TBT) (в основном, времени выполнения JavaScript) и времени, когда происходит самая большая отрисовка содержимого (LCP) (предположительно, поскольку это указывает на большие сдвиги в макете страницы / видимом содержимом). это может отвлекать / является хорошим индикатором того, когда содержимое вышеупомянутого сгиба полностью загружено (в отличие от показа «прядильщика»)).

Они также добавили третью новую метрику совокупного сдвига макета (CLS), метрику, которая определяет, насколько «перемещается» макет страницы. На данный момент это имеет низкий вес, но я полагаю, что это часть более крупного плана по обеспечению захвата всех объектов с поздней загрузкой, которые влияют на содержимое « верхней части страницы » и могут вызвать разочарование (попытка щелкнуть ссылку, чтобы найти рекламу загрузил и переместил например).

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

Я могу подтвердить, что мой сайт, который раньше набирал 99 или 100 баллов, теперь набирает только 87, так что это действительно большой сдвиг в их оценке. Они также теперь, похоже, принимают во внимание рендеринг SVG, поскольку мой сайт на 100% основан на SVG, но имеет низкие оценки на LCP, это то, что они изначально не принимали во внимание при статистике LCP.

А пока сфокусируйтесь на двух статьях, которые я связал, о TBT и LCP, так как это новые показатели, которые они выбирают, чтобы подчеркнуть, что они составляют 50% вашей оценки.

Обновление

Как OP указал в комментариях, основные изменения для нового PSI v6 находятся здесь

Правда о подсчете очков 100/100

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

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

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

Приступим!

Знакомство с Google PageSpeed ​​Insights

Если вы еще не знакомы с Google PageSpeed ​​Insights, это инструмент, используемый для тестирования производительности веб-сайтов. Вы можете ввести любой URL-адрес и проанализировать его:

Google PageSpeed ​​Insights

Затем Google дает тестируемому веб-сайту общую оценку из 100 на основе нескольких рекомендаций по оптимизации производительности:

Оценка Google PageSpeed ​​Insights

Наряду с этим результатом вы также увидите несколько рекомендаций от Google о том, как улучшить вашу производительность (и, следовательно, ваш рейтинг PageSpeed ​​Insights):

Рекомендации Google PageSpeed ​​Insights

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

Чтобы увидеть комплексную оценку вашего сайта Lighthouse, вы можете использовать инструмент Google Measure:

Инструмент аудита Google Webmasters Measure

В дополнение к проведению аудита производительности, подобному тому, который проводится в Google PageSpeed ​​Insights, вы получите оценку доступности, передовых методов и поисковой оптимизации (SEO).

Правда о рейтинге 100/100 в Google PageSpeed ​​Insights

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

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

В отличие от PageSpeed ​​Insights, Pingdom Tools позволяет вам тестировать производительность вашего сайта из разных мест:

Результаты теста скорости Pingdom Tools

Вы также можете запускать тесты на таких платформах, как GTmetrix (который объединяет ваши результаты из PageSpeed ​​Insights и YSlow) и WebPageTest.Скорее всего, ваши оценки по этим различным инструментам не будут точно совпадать, что показывает, насколько произвольными могут быть эти числа.

Что действительно важно, так это фактическая скорость вашего сайта . Для сравнения: мы видели сайты со средним временем загрузки менее 500 миллисекунд (что очень быстро!), У которых не было 100/100 баллов в PageSpeed ​​Insights.

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

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

Как Google использует PageSpeed ​​Insights

Помимо влияния на пользовательский опыт (UX) вашего сайта, производительность также играет роль в SEO.Учитывая, что PageSpeed ​​Insights управляется крупнейшей и самой популярной поисковой системой в мире, само собой разумеется, что ваш результат может некоторым образом повлиять на рейтинг вашей страницы результатов поисковой системы (SERP) (по крайней мере, в самом Google).

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

Однако Google принимает во внимание не только число в кружке вверху результатов PageSpeed.Получение 100/100 не гарантирует, что вы займете первое место в поисковой выдаче.

С учетом сказанного, вы все равно можете использовать результаты PageSpeed ​​Insights для улучшения вашего SEO. Например, с 2018 года скорость мобильной страницы была фактором ранжирования для Google. Вы заметите, что ваш тест производительности предоставляет данные как для настольной, так и для мобильной версии вашего сайта:

Вкладка для мобильных устройств в Google PageSpeed ​​Insights

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

Рекомендации Google PageSpeed ​​Insights (24 способа повышения производительности)

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

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

Есть также две диаграммы, которые показывают, где падают ваши средние значения First Contentful Paint (FCP) и First Input Delay (FID):

Данные поля Google PageSpeed ​​Insights

На изображении выше FCP нашего сайта примерно такой же, как 45 процентов сайтов в 75-м процентиле, а наш FID примерно такой же, как 9 процентов из 95-го процентиля.

Лабораторные данные показывают конкретные данные для моделируемой загрузки страницы:

Данные лаборатории Google PageSpeed ​​Insights

Вы заметите, что наши Field Data и Lab Data не совпадают в точности.Это совершенно нормально. Lab Data создается при фиксированных условиях, а Field Data использует фактические скорости загрузки, собранные с течением времени.

При совместном рассмотрении Field Data и Lab Data должны дать вам представление о фактическом времени загрузки вашего сайта. Как мы упоминали ранее, это даже более важно, чем ваш общий показатель PageSpeed, поэтому вам стоит обращать внимание на эти числа.

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

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

Одна из наиболее распространенных рекомендаций Google PageSpeed ​​Insights — устранить ресурсы, блокирующие рендеринг:

Рекомендация по устранению блокировки ресурсов рендеринга

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

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

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

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

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

2.Избегайте цепочки критических запросов

Концепция объединения критических запросов связана с критическим путем отрисовки (CRP) и тем, как браузеры загружают ваши страницы. Определенные элементы, такие как JavaScript и CSS, которые мы обсуждали выше, должны быть полностью загружены, прежде чем ваша страница станет видимой.

В рамках этого предложения Google PageSpeed ​​Insights покажет вам цепочки запросов на анализируемой странице:

Рекомендация избегать цепочки критических запросов

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

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

• Устранение ресурсов, блокирующих рендеринг
• Отсрочка закадрового изображения
• Минимизация CSS и JavaScript

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

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

3. Сохраняйте низкое количество запросов и малые размеры передачи

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

Как и рекомендация Избегайте цепочки критических запросов , эта рекомендация не приводит к «успешному выполнению» или «неудаче».Вместо этого вы просто увидите список с количеством сделанных запросов и их размерами:

Сохраняйте низкое количество запросов и рекомендуем небольшой объем переводов

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

• Максимальный размер изображения
• Количество используемых веб-шрифтов
• Сколько внешних ресурсов вы звоните на
• Размер скриптов и фреймворков

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

4. Сократите CSS

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

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

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

Мы рекомендуем использовать такой плагин, как Autoptimize или WP Rocket, для минимизации ваших файлов CSS.

5. Минимизируйте JavaScript

Так же, как вы можете уменьшить размер файла CSS с помощью минификации, то же самое относится и к вашим файлам JavaScript:

Минимизировать рекомендацию JavaScript

Autoptimize или WP Rocket также могут справиться с этой задачей для вашего сайта WordPress.

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Вот почему Google рекомендует удалить все неиспользуемые CSS:

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

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

7. Минимизация работы с основной резьбой

«Основной поток» — это основной элемент браузера пользователя, который отвечает за преобразование кода в веб-страницу, с которой посетители могут взаимодействовать. Он анализирует и выполняет HTML, CSS и JavaScript. Кроме того, он отвечает за взаимодействие с пользователем.

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

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

Рекомендация минимизировать работу основного потока

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

• Уменьшение кода
• Удаление неиспользуемого кода
• Реализация кэширования

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

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

8. Уменьшите время выполнения JavaScript

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

Рекомендация по сокращению времени выполнения JavaScript

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

9. Уменьшите время отклика сервера (TTFB)

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

Таким образом, сокращение времени ответа сервера входит в число рекомендаций Google PageSpeed ​​Insights. Если вам удается достичь низкого значения TTFB, вы увидите это сообщение под заголовком Пройденные проверки :

.

Время ответа сервера низкое сообщение

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

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

Наш пост о TTFB — отличный ресурс для более подробной информации по оптимизации в этой области.

10. Правильный размер изображений

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

Рекомендация правильного размера изображений

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

Чтобы исправить это, вы можете либо загружать изображения нужного размера, либо использовать «адаптивные изображения».Это предполагает создание изображений разного размера для разных устройств.

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

Например, предположим, что у вас есть изображение заголовка, и вы хотите сделать его адаптивным. Вы можете загрузить три его версии с шириной 800, 480 и 320 пикселей.Затем вы примените атрибут srcset , например:

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

11. Отложить закадровые изображения

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

Меньшая загрузка до того, как страница станет видимой, означает лучшую производительность, поэтому Google рекомендует этот метод:

Рекомендация отложить закадровые изображения

Существует несколько плагинов WordPress, созданных специально для отложенной загрузки, в том числе a3 Lazy Load и Lazy Load от WP Rocket.Различные плагины для оптимизации изображений и производительности, такие как Autoptimize, также имеют функции отложенной загрузки. Ознакомьтесь с нашим полным руководством по отложенной загрузке изображений и видео в WordPress.

12. Эффективное кодирование изображений

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

.

Рекомендации по эффективному кодированию изображений

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

Другие рекомендации, которые влияют на то, «пройдете» вы или «не пройдете» проверку Эффективное кодирование изображений , включают:

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

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

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

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

Рекомендация по показу изображений в форматах следующего поколения

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

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

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

К сожалению, за эти преимущества приходится платить. GIF-файлы требуют загрузки, поэтому PageSpeed ​​Insights рекомендует вместо этого использовать видеоконтент:

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

К сожалению, преобразование GIF в видеоформат — не самый простой процесс.Во-первых, вам нужно решить, какой тип видео вы хотите использовать:

• MP4: Создает файлы немного большего размера, но совместим с большинством основных браузеров.
• WebM: Наиболее оптимизированный видеоформат, хотя он имеет ограниченную совместимость с браузером.

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

Инструмент преобразования формата файлов FFmpeg для видео и аудио

Затем откройте интерфейс командной строки и выполните следующую команду:

  ffmpeg -i input.gif output.mp4  

Это преобразует GIF с именем файла input.gif в видео MP4 с именем файла output.mp4 . Однако изменение формата — это только начало. Теперь вам нужно встроить получившееся видео на свой сайт WordPress таким образом, чтобы оно выглядело как анимированный GIF.

Встраивание видеоконтента для анимации

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

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

  <цикл автовоспроизведения видео приглушен, воспроизведение в режиме онлайн>

  

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

15. Убедитесь, что текст остается видимым во время загрузки веб-шрифта

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

Убедитесь, что текст остается видимым во время загрузки веб-шрифта. Рекомендация

Google рекомендует решить эту проблему, применив директиву Font Display API swap в вашем стиле @ font-face .Для этого откройте свою таблицу стилей ( style.css ) и добавьте следующее после атрибута src в @ font-face :

font-display: поменять местами

Вы можете узнать больше об оптимизации веб-шрифтов в нашей публикации « Как изменить шрифты в WordPress » и в нашем подробном руководстве по размещению локальных шрифтов.

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

Google PageSpeed ​​Insights ‘ Включить сжатие текста Рекомендация относится к использованию сжатия GZIP:

Включить рекомендацию по сжатию текста

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

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

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

Большинство сайтов WordPress работают на серверах Apache. Код для включения сжатия GZIP выглядит так:

  
  # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов
  AddOutputFilterByType DEFLATE application / javascript
  AddOutputFilterByType DEFLATE application / rss + xml
  AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application / x-font
  AddOutputFilterByType DEFLATE application / x-font-opentype
  AddOutputFilterByType DEFLATE application / x-font-otf
  AddOutputFilterByType DEFLATE application / x-font-truetype
  AddOutputFilterByType DEFLATE application / x-font-ttf
  AddOutputFilterByType DEFLATE application / x-javascript
  AddOutputFilterByType DEFLATE application / xhtml + xml
  AddOutputFilterByType DEFLATE application / xml
  AddOutputFilterByType DEFLATE font / opentype
  AddOutputFilterByType DEFLATE font / otf
  AddOutputFilterByType DEFLATE font / ttf
  AddOutputFilterByType DEFLATE image / svg + xml
  AddOutputFilterByType DEFLATE изображение / значок x
  AddOutputFilterByType DEFLATE text / css
  AddOutputFilterByType DEFLATE text / html
  AddOutputFilterByType DEFLATE текст / javascript
  AddOutputFilterByType DEFLATE текст / простой
  AddOutputFilterByType DEFLATE текст / xml

  # Удалите ошибки браузера (требуется только для действительно старых браузеров)
  BrowserMatch ^ Mozilla / 4 gzip-only-text / html. Mozilla / 4 \.0 [678] без gzip
  BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html
  Добавление заголовка Варьируется User-Agent
  

Вы должны добавить его после #END в вашем файле .htaccess . Если у вас есть сайт WordPress на сервере Nginx, вам следует вместо этого добавить следующий код в файл nginx.conf :

  36 gzip на;
37 gzip_disable "MSIE [1-6] \. (?!. * SV1)";
38 gzip_vary on;
39 gzip_types текст / простой текст / текст css / приложение javascript / приложение javascript / x-javascript;  

Если вы хотите проверить сжатие текста на своем сайте, мы рекомендуем использовать такой инструмент, как GiftOfSpeed:

.

Проверка сжатия GiftOfSpeed ​​GZIP

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

17. Предварительное подключение к требуемым источникам

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

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

Если Google считает, что для вашей страницы может быть полезен этот метод, вы увидите Preconnect to required origin ():

Предварительное подключение к требуемому источнику, рекомендация

Есть несколько способов реализовать эту стратегию оптимизации. Если вам удобно редактировать файлы тем WordPress, вы можете добавить тег ссылки в файл header.php . Вот пример:

В этом случае тег сообщает браузерам, что им необходимо как можно быстрее установить соединение с example.com . Google PageSpeed ​​Insights перечислит все соответствующие ресурсы, для которых вы должны добавить теги ссылок с атрибутами preconnect.

Другой вариант — использовать плагин для достижения того же эффекта. Perfmatters включает функцию предварительного подключения (отказ от ответственности: я один из основателей Perfmatters). WP Rocket и Pre * Party Resource Hints обладают аналогичной функциональностью.

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

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

Рекомендация по запросам ключей предварительной загрузки

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

Вы также можете включить этот тег, используя Perfmatters, WP Rocket или Pre * Party Resource Hints.

19. Избегайте множественного перенаправления страниц

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

Если на вашем сайте слишком много перенаправлений, вы можете увидеть эту рекомендацию в Google PageSpeed ​​Insights:

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

Единственное, что вы можете сделать в ответ на эту рекомендацию, — это убедиться, что вы используете переадресацию только тогда, когда это абсолютно необходимо. Вы можете узнать больше о процессе их создания в нашем посте « WordPress Redirect — Best Practices for Better Performance ».

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

Если вы какое-то время использовали Google PageSpeed ​​Insights, возможно, вам лучше известна эта рекомендация как предупреждение браузера Leverage caching .В версии 5 он теперь обозначен как «Обслуживать статические активы с эффективной политикой кэширования» :

Статические ресурсы сервера с рекомендациями по эффективной политике кэширования

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

Чаще всего сайты WordPress реализуют кеширование с помощью плагинов. WP Rocket и W3 Total Cache — популярные варианты.Однако некоторые хостинг-провайдеры, в том числе мы здесь, в Kinsta, включают кеширование через свои серверы. Обязательно проверьте и посмотрите, так ли это на вашем хосте, прежде чем устанавливать плагин кеширования.

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

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

Добавление заголовков управления кешем

Используйте следующий код для добавления заголовков Cache-Control в Nginx:

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | svg | ico) $ {
 истекает 30 дней;
 add_header Cache-Control «общедоступный, без преобразования»;
}  

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

Те, у кого есть серверы Apache, должны вместо этого использовать этот фрагмент в своих файлах .htaccess :

  
Заголовочный набор Cache-Control "max-age = 84600, public"
  

Добавьте этот код перед #BEGIN WordPress или после #END WordPress . В этом примере период истечения срока действия кэша установлен на 84 600 секунд.

Добавление заголовков Expires

Cache-Control заголовки сейчас в значительной степени стали стандартом. Однако есть некоторые инструменты (включая GTMetrix), которые все еще проверяют заголовки Expires .

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

  расположение ~ * \. (Jpg | jpeg | gif | png | svg) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 2d;
    }  

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

  ## ИСКЛЮЧАЕТ КЭШЕР ЗАГОЛОВКИ ##

ExpiresActive On
ExpiresByType image / jpg «доступ на 1 год»
ExpiresByType image / jpeg "доступ на 1 год"
ExpiresByType image / gif "доступ на 1 год"
ExpiresByType image / png "доступ на 1 год"
ExpiresByType image / svg "доступ на 1 год"
ExpiresByType text / css "доступ на 1 месяц"
Приложение ExpiresByType / pdf "доступ на 1 месяц"
Приложение ExpiresByType / javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType изображение / значок x "доступ на 1 год"
ExpiresDefault «доступ 2 дня»

## СРОК КЭШИНГА ЗАГОЛОВКИ ##  

Еще раз, вы должны добавить этот код либо перед #BEGIN WordPress , либо после #END WordPress .

Эффективное кэширование Google Analytics

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

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

Если это единственный сценарий, указанный в данной рекомендации, вы все равно можете пройти аудит:

Пройден эффективный аудит политики кеширования

Однако, как мы отмечали в этом посте, ваша оценка PageSpeed ​​имеет меньшее значение, чем ваша фактическая и предполагаемая производительность. Чтобы эффективно обслуживать этот ресурс, вы можете рассмотреть возможность локального размещения Google Analytics.

Плагины

, такие как Complete Analytics Optimization Suite (CAOS) и Perfmatters, позволят вам сделать это. Вы можете узнать больше о процессе в нашем полном руководстве по этому предложению PageSpeed.

21. Снижение воздействия стороннего кода

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

Тем не менее, в некоторых случаях лучшим решением для потребностей вашего сайта является включение стороннего скрипта. Google Analytics — отличный пример. Другие включают:

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

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

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

• Отложить загрузку JavaScript
• Использовать теги ссылок с предварительно подключенными атрибутами
• Самостоятельное размещение сторонних скриптов (как мы описали выше с помощью Google Analytics)

Эти методы должны минимизировать влияние на производительность вашего сайта.

22. Избегайте огромных сетевых нагрузок

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

Избегайте огромной полезной нагрузки сети Рекомендация

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

• Отложить CSS, JavaScript и изображения в нижней части страницы
• Минимальный код
• Сжатие файлов изображений
• Использование формата WebP для изображений
• Реализация кэширования

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

23. Пользовательские временные метки и меры

Эта рекомендация актуальна только в том случае, если вы используете User Timing API. Этот инструмент создает временные метки, чтобы помочь вам оценить производительность вашего JavaScript. Если вы настроили API для своего сайта, вы увидите свои оценки и меры под этим заголовком в PageSpeed ​​Insights:

.

User Timing отмечает и рекомендации по измерениям

Как видите, это еще одно предложение от Google, которое не дает результатов «сдан» или «не пройден».PageSpeed ​​Insights просто делает эту информацию легко доступной, поэтому вы можете использовать ее для оценки областей, которые могут потребовать оптимизации.

Если вы заинтересованы во внедрении User Timing API в свой сайт WordPress, вы можете узнать больше в руководстве Mozilla по этой теме.

24. Избегайте чрезмерного размера объектной модели документа (DOM)

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

Если ваша страница превышает определенные стандарты в отношении размера DOM, будет рекомендовано уменьшить количество узлов, а также сложность стиля CSS:

Избегайте чрезмерных рекомендаций по размеру DOM

Распространенным виновником, если вы «не прошли» аудит в PageSpeed ​​Insights, является ваша тема WordPress. Тяжелые темы часто добавляют в DOM большие объемы элементов, а также могут включать запутанный стиль, замедляющий работу вашего сайта.В этом случае вам может потребоваться переключить тему.

Вам сложно набрать 100 из 100 баллов на #Google PageSpeed? Совет: не зацикливайтесь на своем счете и сосредоточьтесь на том, что действительно влияет на загрузку вашей страницы! 🚀📊Нажмите, чтобы написать твит

Сводка

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

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

У вас есть вопросы о Google PageSpeed ​​Insights или оптимизации производительности вашего сайта? Спросите в разделе комментариев ниже!

---

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

.