Как получить 100/100 в Google Page Speed Test Tool?

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

Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта «Monitor Backlinks».

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

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

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

Стартовые показатели подопытного сайта — 87/100.

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

О том, как удалось достичь таких показателей, читайте далее.

Как ускорить загрузку страниц?

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

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

Итак, приступим:

Шаг № 1: Оптимизация изображений

Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:

• Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
• Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с javascript и CSS.

Шаг № 2: Минимизация javascript, CSS и HTML

В примере, Google предлагает сократить объемы javascript и CSS файлов.

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

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

Дополнительно уменьшить размеры javascript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.

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

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание».

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

В случае использования WordPress, рекомендуется устанавливать плагин Autoptimize.

Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.

Вот результаты, полученные после минимизации javascript и CSS:

Шаг № 3: Использование кэш браузера

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

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

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

Вот визуализация того, как работает CDN:

На подопытном сайте все изображения, файлы javascript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.

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

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

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

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

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

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

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

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

Шаг № 4: Удаление блокирующих кодов

Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода javascript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.

Более детально смотрите по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force javascript» и установите ее на «Inline all CSS».

Шаг № 5: Включение сжатия

Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-

Шаг № 6: Оптимизация мобильного формата

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:

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

Вывод

В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта «Monitor Backlinks». В итоге была оптимизирована не только главная страница, но и все внутренние страницы.

Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:

1. Использование CDN.
2. Устранение блокирующих кодов. (Избегайте javascript в теле кодирования, лучше переместите его в низ файлов.)
3. Оптимизация размеров и сжатие изображений.

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

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

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

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

Оценок: 2 103 (средняя 5 из 5)

Как получить 100/100 в Google Page Speed Test Tool? {descr}

1. Главная
2. Как получить 100/100 в Google Page Speed Test Tool?

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

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

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

Интерфейс 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, но вы можете сами оценить, насколько можете уменьшить качество.

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

• TinyPNG
• Compressor.io
• Optimizilla

Более детально об оптимизации изображений:
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:

• JavaScript Minifier
• JsCompress
• Minify JavaScript

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

• СSS Compressor
• CSS Minifier
• Minify 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

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

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

Смотреть урок на YouTube

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

• OptimizedHTML 5 — легкий оптимизированный стартер для верстки сайтов.

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

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

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

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

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

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

2. Шрифты

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

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

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

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

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

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

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

4. Бэкенд

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

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

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

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

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

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

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

6.

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

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

Мракобесие

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

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

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

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

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

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

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

• Настройка VS Code для верстки
• Simple Starter — простой стартер для верстки | Материалы урока
• Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
• Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
• Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
• Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)

Page Speed Test of 50 Websites – Plerdy

What can be worse than a slow website? Sometimes waiting seems endless, which adversely affects both users and website owners. In the digital era, you need to take care of your company’s online presence. Otherwise, the chances for effective development significantly reduce. Regardless of what you do – sell something, offer services, or want to share interesting information with everyone – a website can become a great platform for your growth. At the same time, it must be effective. In this respect, page speed is one of the decisive factors.

Why Is Page Speed So Important?

Page speed can increase or reduce traffic. Everything depends on the load time. It will impact the number of visitors, page views, conversions, sales, and the overall reputation of a web resource. If all configurations are correct and the speed is good, the business will also develop thanks to the traffic growth.

According to research, around 47% of online users expect loading time to be two seconds maximum. Moreover, if it takes over three seconds to load a website, 40% of people will immediately leave it. That’s why page speed is critical for website promotion. Hence, launching a web resource, make sure to achieve an optimum load speed. If you don’t do this, you won’t be able to compete with other companies.

Remember that you get excellent conversion rates and page views by accelerating your website and making the resource more convenient for your regular visitors. However, you must understand one thing. Even if a website meets all the latest requirements but takes forever to load, the majority of visitors won’t wait to see all its perfection. Therefore, without a good page speed, other indicators lose their importance.

Why Is Page Speed Critical For SEO?

Page speed attracts or repels not only users but also search engines. Therefore, you need to understand that the faster a web resource is, the better its search ranking. The thing is that in SEO, it’s important to achieve the highest ranking in search results. Everyone knows that Google prefers fast websites and displays them closer to the TOP. Of course, speed is not the only factor that influences your position. Still, it’s very important. Thus, by reducing the page load time, you improve your SEO rating.

Besides, low page speed means that search engines will scan fewer pages using a certain crawl budget. This will also adversely affect the indexation.

What Is Website Performance Testing?

Website performance tests are used to measure page speed and response speed. It’s a must for all sites without any exception. Such testing allows you to evaluate whether your brand can effectively promote and sell your products online. As we have already mentioned, a web resource is a powerful tool to develop any modern business. It’s a great way to attract users and turn them into potential customers. You will understand whether the website meets your business goals and can reach the necessary target audience thanks to performance testing.

What Are the Benefits Of Performance Testing?

It’s not that difficult to conduct a detailed website analysis using modern tools. Nevertheless, the advantages you gain are numerous. Performance testing allows you to identify several website problems at once, starting from the content that increases page load time to CSS files that affect the display on different types of devices.

There are three primary components of website performance test:

• Planning
• Testing
• Analysis with summary

First of all, you have to choose specific pages for analysis. Then, using such tools as Google Analytics, you can easily determine the most popular website pages. Then, analyze the pages with both the lowest and highest conversion and compare the results. Only such a comparison will allow you to get a clearer picture.

With the help of website performance tests, you will define several factors related to website speed and page load time. This information is critical to see how the resource works. Again, without high-speed rates, you won’t be able to work effectively. Here are the factors you can measure with the performance tests:

• Page load time (The time it takes to display certain page elements after the request).
• Time to first byte
• Time to the end of the document

The analysis of results and optimization are the most important stages in testing. Create a troubleshooting plan and stick to it to make your website more effective and significantly increase income. The majority of tools for performance analysis generate detailed reports on the elements that harm page speed. Some of them even offer ways to solve the problem. You don’t only have to view these reports but also need to start fixing problems and optimizing your website. Don’t get intimidated. You don’t necessarily have to make difficult changes in code. Sometimes, you need to substitute several keywords to begin improving in the right direction.

A website is an important part of any business, regardless of your field. To achieve the maximum efficiency of the web resource, you have to keep it in shape continuously. Make sure to monitor the necessary indicators, traffic, and an increase in potential customers. Performance testing is one of the tools that will help you with that. Yet you have to check your page regularly. Such tests will show all the weaknesses of the website and allow you to implement quality changes.

You can see how to do website speed analysis based on 50 world-renowned web resources. These examples show the most important indicators and can perfectly guide your testing efforts.

1. Walmart Page Speed Test

Walmart is a chain of stores with over 11,000 supermarkets in 27 countries and e-commerce websites in 10 countries. The company provides around 2.2 million workplaces (1.5 million in the US) and has won the hearts of millions of buyers around the world.

2. Exxon Mobil Page Speed Test

ExxonMobil is one of the world’s largest energy suppliers and manufacturers of chemical products. They develop and apply the next-generation technologies that help to safely and responsively meet the growing global demand in energy and high-quality chemicals.

3. Berkshire Hathaway Page Speed Test

American holding Berkshire Hathaway is engaged in investment and insurance. Since its launch, it has expanded to over 40 financial services, confectionery, publishing, jewelry, furniture, carpets, building materials production, and more.

4.Apple Page Speed Test

Originating from the US,  Apple is one of the most world-renowned technological companies. They design home appliances, software, and online services. iPhone smartphones, iPad tablets, iPod players, Mac personal computers, and Apple Watch smartwatches are among the most famous devices created by this company. Speaking of software, Apple is known for OS X and iOS operating systems, iTunes media player, Safari browser, and iLife and iWork applications. They also provide such online services as iTunes Store, iOS App Store, Mac App Store и iCloud.

5. UnitedHealth Group Page Speed Test

UnitedHealth Group provides healthcare and welfare services across the US and worldwide. It was launched to teach people how to lead a healthier lifestyle and take healthcare to the next level. They continuously implement innovative approaches, products and services that help to improve the health level in local communities.

6. McKesson Page Speed Test

A large pharmaceutical company, McKesson is a medicinal product distributor and pharmacy chain operator. It provides products, technologies, and resources necessary to optimize the work and expenditures of healthcare services and improve the wellbeing of patients.

7. CVS Health Page Speed Test

CVS Health is a unique medical company that helps patients to get the necessary help through the most convenient channel. Every day they support millions of people in their effort to become healthier. It’s the goal of the company, which they strive to achieve with continuous development.

8. Amazon Page Speed Test

Here is one of the first services for selling consumer goods. Today, Amazon has the highest turnover in the world among the companies that sell goods online. However, they don’t plan to stop and expand to numerous e-commerce markets around the globe. Amazon has websites in the US, England, Ireland, France, Canada, Spain, Germany, Italy, Australia, China, India, and many other countries. In 2018, Amazon was named the most expensive brand in the world.

9. AT&T Page Speed Test

AT&T is one of the world’s largest telecommunication companies and a media conglomerate. It’s the second-largest mobile operator in the US that takes a significant share of the market. They also provide direct satellite broadcast through DirecTV in the US. Their subscribers have already exceeded 135 million, bringing the company to the most expensive brands.

10. General Motors Page Speed Test

This is one of the most world-renowned automotive corporations that was founded in the United States. Their goal is to contribute to the future without accidents, harmful emissions, and traffic jams. The company supplies 6 continents with 180 thousand employees who speak 70 languages. It’s almost impossible to meet someone who hasn’t heard about General Motors.

11. Ford Motor Page Speed Test

Ford Motor is a large US automobile manufacturer founded back in 1903. You can see cars produced by this giant almost in any part of the world. It’s the fourth largest automobile manufacturer by the scale of manufacturing worldwide.

12.AmerisourceBergen Page Speed Test

This US pharmaceutical company has already established partnerships around the globe by providing pharmaceutical products and business solutions that facilitate access to healthcare. In addition, they support the market launch of medical innovations and state that their key goal is a healthy future for everyone.

13. Chevron Page Speed Test

It’s a multinational energy corporation from the US. It is one of the biggest world companies that produce oil in numerous places worldwide. They attribute their success to a team of employees who do their best for top results. As a result, Chevron can boast innovative technologies and many opportunities for continuous development.

14. Cardinal Health Page Speed Test

Cardinal Health is a globally integrated enterprise providing medical products, services, and customized solutions for hospitals, pharmacies, ambulatory care clinics, clinical laboratories, and healthcare systems. They are committed to providing cost-effective pharmaceuticals and integrating improved patient care. Cardinal Health has offices in 46 countries and was ranked 25th on the Fortune 500 list.

15. Costco Page Speed Test

Costco Wholesale Corporation is one of the largest chains of warehouse clubs providing its services on a membership-only basis. It takes fifth place among US retailers by the sales volume.

16. Verizon Page Speed Test

Verizon has the largest number of subscribers among the US mobile phone operators. Back in 2006, their client base already included more than 56 million subscribers with the most extensive coverage in the US mobile communications market. Today, the company continues to develop and regularly implements innovative technologies.

17.Kroger Page Speed Test

The Kroger Co, a large US supermarket chain, has become the third-largest US retailer giving its way to Walmart and The Home Depot. Grocery stores comprise 94% of their business. Yet they also have jewelry stores and manufacturing facilities that contribute to the total sales volume.

18. General Electric Page Speed Test

General Electric is a US corporation operating in many fields. They have grown into a major manufacturer of various types of equipment, including electrical installations, nuclear reactors, locomotives, gas turbines, medical equipment, engines, plastics, sealants and more. Therefore, General Electric deserves to be considered one of the largest world’s public companies.

19. Walgreens Boots Alliance Page Speed Test

This comparatively young pharmacy chain surprises with its rapid growth. During its existence, Walgreens Boots Alliance has expanded to over 13 thousand pharmacies, cosmetics and perfume stores in 11 countries. Besides, it’s the largest pharmaceutical distributor with 400 distribution centers that supply products to more than 200 thousand pharmacies and medical centers in 25 countries.

20. JPMorgan Chase Page Speed Test

JPMorgan Chase is a bank holding company with the largest volume of assets in the US. It belongs to The Big Four of US Banking and provides financial, investment, capital management, and other services. Many banks from different countries open correspondent accounts in JPMorgan Chase.

21. Fannie Mae Page Speed Test

Fannie Mae is one of the largest mortgage agencies in the US. The corporation calls the expansion of the secondary mortgage market its main goal. To achieve it, they buy bank loans, consolidate them into pools, and issue mortgage securities sold on the open market. Currently, they finance around 20% of all mortgage loans in the United States.

22. Alphabet Page Speed Test

Alphabet Inc. is an international conglomerate of companies formed in 2015 by US entrepreneurs and programmers. It includes Google and other companies owned by the entrepreneurs either directly or through Google. They state that the merger has simplified the management process. Now it’s easier to run the companies regardless of their field and connection.

23. Home Depot Page Speed Test

It’s the world’s largest retail chain specializing in tools, building materials, and everything for home remodeling and decoration. Home Depot has over two thousand stores in the US, Mexico, Canada, and China with about 355 thousand employees. Its goods are popular around the globe.

24. Bank of America Corp Page Speed Test

Bank of America is a banking giant in the US. Their slogan “Life’s better when we’re connected” promises to improve financial well-being with joint efforts. The company focuses on environmental, social, and managerial leadership. Providing services to more than 67 million customers, Bank of America is the world’s leader in asset management, corporate and investment banking, and asset trading. They cooperate with corporations, governments, institutions, and individuals worldwide.

25. Express Scripts Holding Page Speed Test

The US holding Express Scripts is the 25th-largest US company by total revenue and one of the largest US pharmacy benefit managers. They provide pharmacy benefit management and pharmacy claim processing through a subsidiary company Accredo. Besides, Express Scripts offers formulary management, benefit-design consultation, review of drug utilization, drug and medical data analysis for drug plan management.

26. Wells Fargo Page Speed Test

Wells Fargo is a US multinational banking and financial holding company. It’s proud to be one of the banks belonging to the Big Four of US banking. In particular, Wells Fargo is the 4th largest US bank by total assets and market capitalization. This company is operating in 35 countries and has more than 70 million customers worldwide.

27. Boeing Page Speed Test

The Boeing Company is the leading aerospace and defense corporation. They are among the largest global plane manufacturers by the number of contracts, supply, and revenue. Also, Boeing is the largest US exporter by dollar value.

28. Phillips 66 Page Speed Test

It’s a diversified energy company with 140 years of experience. They have capabilities to satisfy global energy needs. Phillips 66 specializes in the production of natural gas, petrochemicals, fuels, and lubricants. In addition to that, it provides logistics and storage services.

29. Anthem Page Speed Test

Anthem is an American company that provides health insurance services. From the 1940s until 2014, it was known as WellPoint, Inc. It’s one of the largest commercial companies in the segment of medical services management. Anthem is a member of the Blue Cross Blue Shield Association.

30. Microsoft Page Speed Test

Is there anyone who still doesn’t know about Microsoft or, at least, their products? Most likely, no. With 124 thousand employees in 102 countries, this multinational technology corporation has become the largest software producer globally. Their headquarters are located in Redmond (Washington, US).

31. Valero Energy Page Speed Test

Now let’s check the website of a vertically integrated oil and gas company from the US. So far, Valero energy owns 18 oil refineries with a total capacity of 3.3 million barrels per day. Besides, the company has a retail gas station network with over 5000 stations.

32. Citigroup Page Speed Test

Here’s a US transnational banking and financial corporation with headquarters in New York. It has been operating since 1998 when two giants Citicorp and Travelers Group, merged. Citibank , one of the largest US banks, has become the foundation of this group. It also has subsidiary banks and representative offices in 36 countries, making Citigroup one of its largest banks.

33. Comcast Page Speed Test

Comcast Corporation is a global telecommunications corporation. They have the largest cable TV network in the United States and take the lead among the US Internet service providers.

34. IBM Page Speed Test

International Business Machines Corporation is the full name of the US technology company better known as IBM . It’s the world’s largest manufacturer of various types of computers and software. Additionally, IBM is one of the largest global information network providers. Therefore, the company rightfully takes sixth place in the rating of the largest companies in the world. Their staff has already exceeded 330 000 people in 170 countries.

35. Dell Technologies Page Speed Test

If you have ever bought a laptop, you probably know something about this company. Dell Technologies Inc. is a US transnational corporation working in the field of information technology. It was formed as a result of the Dell and EMC Corporation merger. They supply computers, servers, smartphones, TVs, software, computer and network security systems, and information security services.

36. State Farm Insurance Cos Page Speed Test

State Farm Insurance is a group of American companies that provides financial and insurance services. It was called the largest property and casualty insurer in the United States since 1942. State Farm also has a representative office in Canada.

37. Johnson & Johnson Page Speed Test

The world-renowned company Johnson & Johnson is the largest manufacturer of cosmetic and sanitary products. They also produce medical devices and pharmaceutical goods. The corporation has more than 230 subsidiaries in 50 countries and sells its products in over 175 countries.

38. Freddie Mac Page Speed Test

Freddie Mac is a mortgage giant. It was founded in 1970 to support and expand the secondary mortgage market in the United States. The company purchases mortgage loans on the secondary market, unites them into pools, and sells as mortgage security on the open market.

39. Target Page Speed Test

Target is a large US retail chain working under two trade names – Target and SuperTarget. It’s the sixth largest retailer in the United States. Also, this company takes third place among the largest US music sellers.

40. Marathon Petroleum Page Speed Test

Marathon Petroleum Corporation is a petroleum refining company that also provides marketing and transportation services. They were a subsidiary of Marathon Oil until 2011. Today, this company is the largest US petroleum refinery operator with 16 refineries. Their capacities refine 3 million barrels/day.

41. Procter & Gamble Page Speed Test

Here is a US transnational corporation with representative offices in over 80 countries around the world. Besides, it has production facilities in 45 countries and manages 300 trademarks sold in 145 countries. Currently, they provide about 150 thousand jobs and have more than a million shareholders.

42. MetLife Page Speed Test

MetLife is a large international insurance company that provides different life, health, and pension insurance programs. It has an extensive network of subsidiaries, branches, partner banks. MetLife also users numerous direct marketing channels. Apart from the US market, they also take the lead in Japan, Latin America, Europe, the Middle East, and other regions.

43. UPS Page Speed Test

United Parcel Service , Inc. or UPS provides express delivery and logistics services. Every day its employees deliver about 17 million goods to 9.5 million customers in more than 220 countries. They specialize in the express delivery of cargo, packages, and documents. United Parcel Service comprises an airline company with 237 jets and takes first place by the fleet size.

44. PepsiCo Page Speed Test

Pepsico is one of the world’s leaders in food and beverage production. Currently, it supplies over 200 countries and territories around the world. Over the years of its existence, the company has rapidly turned from a snack and soda producer into a large collection of renowned brands (Pepsi and Quaker, Gatorade and Tropicana, Frito-Lay and more).

45. Intel Page Speed Test

You have probably heard about Intel’s central processing units. Nevertheless, this company succeeds in many other fields. They design solutions that unite different technologies to create more opportunities for businesses and every individual.

46. DowDuPont Page Speed Test

DowDuPont is a leader in agriculture and chemicals. It unites the resources and capabilities of Dow and DuPont. It has become the largest world’s company by the sales volume.

47. Archer Daniels Midland Page Speed Test

Archer Daniels Midland is an international agro-industrial corporation that produces, stores, transports, processes, and sells agricultural products. They mainly specialize in corn production, vegetable oil, and commodities.

48. Aetna Page Speed Test

Aetna Inc. is a large insurance company specializing in healthcare insurance. They also provide a range of services in two other directions – employee and annuity insurance. Aetna Inc. has over 47 million customers.

49. FedEx Page Speed Test

FedEx Corporation is well-known in almost every country. This American company provides mailing, courier, and other logistics services around the globe. They hire over 400 thousand employees that do their best to deliver all freight to the necessary recipients within the shortest time.

50. United Technologies Page Speed Test

It’s a global tech group founded by the top world’s innovators. It focuses on solving some of the most serious problems of humanity. United Technologies comprises many leading companies related to industry and finances.

Conclusions

As you have already understood, website speed is crucial for your business’s success. Users have grown so used to high-quality web resources that they expect any website to work with lightning speed. If you don’t meet their expectations, they will leave. As a result, you lose website traffic and, consequently, income. That’s why you have to regularly test performance and ensure continuous work to increase page speed and stand out among competitors.

We have described the problems found on Top 50 World Companies’ websites to show you how to increase website speed. Although some issues may seem minor, they may be the reason why you have a slow website and lose traffic.

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

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

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

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

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

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

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

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

	Хорошо	Требуется улучшение	Бедный
ФКП	[0, 1800 мс]	(1800 мс, 3000 мс]	более 3000 мс
ПИД	[0, 100 мс]	(100 мс, 300 мс]	более 300 мс
ЛКП	[0, 2500 мс]	(2500 мс, 4000 мс]	более 4000 мс
CLS	[0, 0,1]	(0,1, 0,25]	свыше 0,25
ИЯФ (экспериментальный)	[0, 200 мс]	(200 мс, 500 мс]	более 500 мс
ТТФБ (экспериментальный)	[0, 800 мс]	(800 мс, 1800 мс]	более 1800 мс

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

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

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

Основные веб-показатели

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

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

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

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

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

Каждая метрика оценивается и помечается значком:

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

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

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

Аудиты

Lighthouse разделяет свои аудиты на три секции:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще вопросы?

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

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

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

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

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

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

Как использовать Google PageSpeed ​​Insights (правильный способ)

Что такое Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights — это бесплатный инструмент, помогающий находить и устранять проблемы, замедляющие работу вашего веб-приложения. Инструмент с открытым исходным кодом под названием Lighthouse собирает и анализирует лабораторные данные, которые объединяются с реальными данными из набора данных Chrome User Experience Report. Результатом является оценка, которая обобщает производительность и ряд рекомендаций.

Схема работы маяка – Источник: Google

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

Аудит	Описание	Вес
First Contentful Paint (FCP)	Первый момент времени, когда пользователь может видеть любое содержимое страницы на экране.	15%
Индекс скорости (СИ)	Визуальная последовательность загрузки страницы и скорость прорисовки содержимого.	15%
Краска с наибольшим содержанием (LCP)	Время до полного отображения на экране самого большого элемента содержимого.	25%
Время до начала взаимодействия (TTI)	Время, необходимое для того, чтобы страница стала полностью интерактивной.	15%
Общее время блокировки (TBT)	Серьезность неинтерактивности страницы до тех пор, пока она не станет достоверно интерактивной.	25%
Суммарное смещение макета (CLS)	Как часто пользователь сталкивается с неожиданным изменением макета.	5%

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

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

• Хорошо : 90-100 баллов
• Требуется улучшение : 50-89 баллов
• Плохо : Баллы от 1 до 49

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

Простота в использовании

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

При этом начать работу с Google PageSpeed ​​Insights легко:

1. Посетите страницу Google PageSpeed ​​Insights
2. Введите URL вашей веб-страницы
3. Щелкните Анализ

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

Пример результатов производительности для Yahoo.com – Источник: Google

Сгенерированный отчет разделен на несколько разделов:

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

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

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

Пример возможности для улучшения — Источник: Google

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

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

Вам все еще нужно нагрузочное тестирование

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

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

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

Подпишитесь на бесплатную пробную версию LoadNinja

Узнайте, как легко начать нагрузочное тестирование уже сегодня!

Начать бесплатную пробную версию

Практический результат: Тестируйте с умом

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

Google PageSpeed ​​Insights 💯 Правда о подсчете очков 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

практика и поисковая оптимизация (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) производительность также играет роль в поисковой оптимизации. Учитывая, что PageSpeed ​​Insights управляется крупнейшей и самой популярной поисковой системой в мире, само собой разумеется, что ваша оценка может иметь некоторое влияние на рейтинг вашей страницы результатов поисковой системы (SERP) (по крайней мере, в самом Google).

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

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

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

Вкладка Mobile в Google PageSpeed ​​Insights

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

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

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

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

Есть также две диаграммы, которые показывают, где среднее значение первой отрисовки контента (FCP) и задержки первого ввода (FID) падает:

Полевые данные Google PageSpeed ​​Insights

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

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

Лабораторные данные Google PageSpeed ​​Insights

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

При совместном рассмотрении Field 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

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

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

5. Минимизация JavaScript

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

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

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

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

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

Рекомендация Minify JavaScript

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

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

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

Вот почему 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  атрибут, например:

  jpg 320w"
размеры = "(максимальная ширина: 320 пикселей) 280 пикселей,
(макс. ширина: 480 пикселей) 440 пикселей,
800 пикселей"
src="header-image-800w.jpg"> 

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

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 рекомендует вместо этого использовать видеоконтент:

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

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

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

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

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

 ffmpeg -i input.gif output.mp4 

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

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

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

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

 <цикл автовоспроизведения видео без звука playsinline>

 

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

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

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

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

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

font-display: swap

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

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

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

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

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

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

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

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

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

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

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

 36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary включен;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript; 

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

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

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

17. Предварительное подключение к Required Origins

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление заголовков Cache-Control

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

 location ~* \.(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 .

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

 location ~* \.(jpg|jpeg|gif|png|svg)$ {
        истекает через 365 дней;
    }

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

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

 ## EXPIRES HEADER CACHING ##

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 application/pdf "доступ 1 месяц"
Приложение ExpiresByType/javascript "доступ 1 месяц"
ExpiresByType application/x-javascript "доступ 1 месяц"
ExpiresByType application/x-shockwave-flash "доступ 1 месяц"
ExpiresByType image/x-icon "доступ 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 — отличный пример. Другие включают:

• Кнопки обмена в социальных сетях и каналы
• встроенных видео YouTube
• iFrame для рекламы и другого контента
• Библиотеки для JavaScript, шрифтов и других элементов

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

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

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

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

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

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

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

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

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

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

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

23. Метки и меры измерения времени пользователя

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

Рекомендация User Timing Marks and Measures

Как видите, это еще одно предложение от 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 или оптимизации производительности вашего сайта? Спросите в разделе комментариев ниже!

---

Экономьте время, деньги и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
• Интеграция с Cloudflare Enterprise.
• Глобальный охват аудитории благодаря 35 центрам обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Как использовать Google PageSpeed ​​Insights (лучший способ)

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

Что такое Google PageSpeed ​​Insights?

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

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

Показатели Google Page Speed ​​Test – статистика и рейтинг 

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

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

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

1. Чтобы выполнить тест скорости страницы Google, введите нужный URL-адрес на веб-сайте PageSpeed ​​Insights.

2. Нажмите «Анализ» и дайте PSI выполнить анализ.

3. Во время создания отчета инструмент делает две вещи:

• • Во-первых, он собирает «полевые данные» веб-страницы в CrUX, т. е. отчет Chrome User Experience.
  • Затем он измеряет производительность страницы с помощью Lighthouse API. Он вычисляет скорость загрузки в контролируемой и смоделированной среде: устройства среднего уровня и мобильные сети. Следовательно, это называется «Лабораторные данные».

4. После проверки отчета уберите переменные, которые мешают скорости и снижают рейтинг.

Разбивка отчета о тестировании Google PageSpeed ​​Insight 

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

1. Красный указывает на низкую производительность
2. Зеленый означает хорошую/приемлемую производительность
3. Желтый показывает, насколько он нуждается в доработке 

Отчет из Google Page Speed ​​Test Report 

Данные поля

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

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

1. FCP: First Contentful Paint — это время, необходимое для загрузки первого изображения или текста.
2. LCP: самая большая отрисовка содержимого — это время, необходимое для загрузки самого большого изображения или текста.
3. FID: задержка первого ввода — это время, необходимое браузеру для ответа на первое взаимодействие пользователя.
4. CLS: Любое перемещение страницы в окне просмотра измеряется кумулятивным смещением макета; Показатель CLS ниже 0,1 — хорошо, выше 0,25 — плохо.

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

Он включает данные и информацию от Lighthouse API, который измеряет FCP, CLS, LCP, время до взаимодействия, индекс скорости и общее время блокировки. Индекс скорости — это время, в течение которого изображение/текст отображается визуально во время загрузки страницы. Общее время блокировки — это общее время между полной интерактивностью и FCP. Время до интерактивности — это время, когда страница становится полностью интерактивной.

 

Отчет о лабораторных данных

Лабораторные данные Google PageSpeed ​​Insights не имеют индикатора выполнения. Он просто имеет временные метки и сгенерированные отчеты лабораторных испытаний. Вес этих показателей приведен ниже в таблице.

Аудит	Вес
ФКП	10%
Индекс скорости	10%
ЛКП	25%
Время до начала взаимодействия	10%
Общее время блокировки	30%
CLS	15%

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

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

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

Пройдено аудитов

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

100/100 в Google Page Speed ​​Test

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

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

1. Оптимизируйте изображения, изменяя их размер/сжимая. Вставьте для него определенную высоту и ширину. Для доставки изображений используйте сеть доставки контента.
2. Встраивайте видео, а не загружайте их непосредственно на веб-сайт, что обычно замедляет работу.
3. Перенаправления могут увеличить время загрузки первого байта; избегайте их использования.
4. Выберите более быструю и легкую тему веб-сайта. Используйте GZIP, быстрый дизайн, чтобы улучшить показатели PSI.
5. Не забудьте включить кеширование браузера. Это ускорит загрузку веб-страниц при следующем посещении сайта пользователем.

Рейтинг Google PageSpeed ​​Insight

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

20 рекомендаций Google PageSpeed ​​Insights

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

1. Удалить все ресурсы, блокирующие рендеринг. Это относится к сценариям JavaScript и CSS, которые замедляют время загрузки вашей страницы.
2. Не объединять критические запросы. Объединение критических запросов связано с тем, как браузеры загружают ваши страницы, и критическим путем рендеринга (CRP). Например, некоторые элементы, такие как JavaScript и CSS, которые мы обсуждали ранее, должны быть полностью загружены, прежде чем ваша страница станет видимой.
3. Поддерживайте небольшое количество запросов и небольшие объемы передачи. Чем больше запросов браузеры должны сделать для загрузки ваших страниц и чем больше ресурсов возвращает ваш сервер в ответ, тем больше времени требуется для загрузки вашего веб-сайта.
4. Минимизация CSS. Процесс сжатия файлов путем удаления ненужных символов, пробелов и дубликатов называется минимизацией CSS.
5. Сократите JavaScript. Так же, как вы можете уменьшить размер файлов CSS, минимизировав их, вы можете сделать то же самое с файлами JavaScript.
6. Отменить неиспользуемый CSS. Любой код в вашей таблице стилей является содержимым, которое необходимо загрузить, прежде чем пользователи смогут просматривать вашу страницу. Если на вашем сайте есть бесполезный CSS, это приводит к падению производительности.
7. Сокращение работы основного потока. Основной поток не может обрабатывать запросы пользователей при обработке кода вашего сайта. Если работа основного потока вашего сайта занимает больше времени, это может привести к ухудшению пользовательского опыта.
8. Минимизируйте время выполнения JavaScript. У Insights есть отдельная рекомендация, которая уведомит вас, если выполнение JavaScript оказывает значительное влияние на производительность вашего сайта.
9. Сокращение времени отклика сервера (TTFB). Время до первого байта (TTFB) — это показатель, который измеряет, сколько времени требуется браузеру для получения первого байта данных с сервера вашего сайта после выполнения запроса. В результате одна из рекомендаций Google PageSpeed ​​Insights — сократить время отклика сервера.
10. Размеры изображения. Медиафайлы, такие как изображения, могут иметь правильный размер для сокращения времени загрузки.
11. Отложить закадровые изображения — вместо того, чтобы загружать каждое изображение на странице перед отображением содержимого верхней части страницы, браузер загружает только те, которые видны сразу.
12. Эффективность кодирования изображений. Одним из наиболее важных передовых методов оптимизации является сжатие, которое может помочь уменьшить размер файлов и ускорить их загрузку.
13. Отображение изображений в форматах следующего поколения. Некоторые форматы файлов изображений загружаются быстрее, чем другие. К сожалению, они не представлены в распространенных форматах PNG или JPEG.
14. Используйте видеоформаты для анимированного контента. В различных ситуациях GIF-файлы могут быть эффективной формой визуального контента. Пошаговые руководства, обзоры функций и юмористические анимации могут поднять ваши публикации на новый уровень и сделать их более приятными и ценными для читателей.
15. Сохранять видимость текста во время загрузки веб-шрифта. Шрифты, как и изображения, обычно представляют собой большие файлы, загрузка которых занимает много времени. В некоторых случаях браузеры скрывают ваш текст до тех пор, пока используемый вами шрифт не загрузится полностью.
16. Сжатие текста должно быть включено. Рекомендация «Включить сжатие текста» от Google PageSpeed ​​Insights относится к использованию сжатия GZIP.
17. Заранее подключитесь к требуемым источникам. Использование атрибутов предварительного подключения сразу предупреждает браузеры о необходимости загрузки сторонних сценариев на вашей странице.
18. Запросы на ключи предварительной загрузки. Следуя этой рекомендации, вы сможете сократить количество запросов, которые браузеры должны отправлять на сервер вашего сайта.
19. Избегайте использования перенаправлений на несколько страниц. Хотя использование перенаправлений в целом не является неправильным, они увеличивают время загрузки.
20. Избегайте больших нагрузок на сеть. Эта рекомендация особенно актуальна для ваших мобильных посетителей. Большие полезные нагрузки могут потребовать использования большего количества сотовых данных, что будет стоить вашим пользователям денег.

Анализ Lighthouse и Pagespeed

Google PageSpeed ​​использует как реальные, так и лабораторные данные из отчета Chrome User Experience. Google PageSpeed ​​— это инструмент, который анализирует производительность ваших веб-страниц и создает отчет об общей скорости вашего веб-сайта.

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

Функция	Google PageSpeed ​​	Google Маяк
Данные	Использует «комбинацию» лабораторных и реальных данных	Используются только лабораторные данные
Функция	Измеряет только показатели производительности	• Изучает другие аспекты веб-сайта (SEO, прогрессивное веб-приложение, доступность и т. д.)
Когда использовать	• Вам необходимо поделиться ссылкой на отчет об аудите вашего веб-сайта  • Вы хотите проверить только скорость загрузки страницы вашего сайта  • Вам нужен точный отчет о времени загрузки посетителей вашего веб-сайта	• Если вы хотите запускать аудит программно • Когда вам нужно оценить аспекты вашего веб-сайта, кроме времени загрузки • Если вы хотите интегрировать Lighthouse API в свои собственные системы

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

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

1. Насколько точны данные Google PageSpeed ​​Insights?

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

2. Каков хороший результат теста скорости страницы Google?

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

3. Надежна ли Google PageSpeed ​​Insights?

Несмотря на то, что Google PageSpeed ​​Insights предоставляет подробный проанализированный отчет о производительности веб-страницы; однако он не так надежен, как другие существующие инструменты. Несколько других инструментов: Sematext, Pingdom Speed ​​Test, Uptrends, GTmetrix и многие другие.

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

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

Тестирование производительности с использованием Google PageSpeed ​​Insights — ThemeFusion

Перейти к содержимому

Как мы можем вам помочь?

Поиск:

31/05/2022

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

PageSpeed ​​Insights

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

Чтобы использовать PageSpeed ​​Insights, просто введите URL-адрес своего веб-сайта и нажмите «Анализ».

Overview

• Core Web Vitals Assessment

• Diagnose Performance Issues

• Metrics

• Opportunities

• Diagnostics

• Passed Audits

• Общие вопросы

• Заключение

Core Web Vitals Assessment

Когда PageSpeed ​​Insights проанализирует ваш сайт, результаты будут загружены на страницу. Это начинается с оценки Core Web Vitals, набора показателей, которые Google считает наиболее важными для реальных пользователей. Это самая большая содержательная отрисовка (LCP), первая задержка ввода (FID) и кумулятивный сдвиг макета (CLS).

В рамках этих других важных показателей также сообщается, например, первая отрисовка содержимого (FCP), взаимодействие до следующей отрисовки (INP) и время до первого байта (TTFB). Вы можете увидеть эти результаты как для мобильных устройств, так и для настольных компьютеров. Вы заметите, что в отчете по умолчанию используются результаты для мобильных устройств в соответствии с Google Mobile First Indexing. Просмотрите результаты рабочего стола, щелкнув ссылку «Рабочий стол».

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

Просто чтобы уточнить, как читать эти цифры. Если мы посмотрим на изображение ниже, то увидим, что 76 % загрузок страниц дали хороший результат при самой большой отрисовке содержимого, полные 99 % при первой задержке ввода и 89 %.% для кумулятивного смещения макета. Чтобы пройти тест Core Web Vitals Assessment, вам нужно, чтобы процент загрузок страниц в разделе «Хорошо» был на уровне 75-го процентиля или выше.

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

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

Затем PageSpeed ​​Insights предоставляет оценку, которая обобщает производительность страницы. Эта оценка определяется запуском Lighthouse для сбора и анализа лабораторных данных о странице. Оценка 90 или выше считается быстрым , а от 50 до 89 считается средним . Ниже 50 считается медленным .

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

Метрики

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

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

PSI разделяет свои аудиты на три раздела:

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

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

• Пройдено аудитов  указывает аудиты, которые были пройдены страницей.

Возможности

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

Диагностика

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

Пройденные аудиты

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

Распространенные проблемы

• Изображения — изображения являются типичной проблемой для многих сайтов. PageSpeed ​​Insights может порекомендовать вам Отложить закадровые изображения ,  Обслуживать изображения в форматах следующего поколения или Правильно размер изображений . Эти проблемы необходимо решать независимо друг от друга, но чтобы начать разбираться в проблемах, ознакомьтесь со статьей «Всеобъемлющее руководство по оптимизации изображений WordPress».

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

• Устранение ресурсов, блокирующих рендеринг . Блокировка рендеринга, как и многие другие технические термины, может быть сложной темой. Это полностью зависит от конкретного сайта и даже настройки страницы, какие ресурсы будут блокироваться, поэтому дать общий совет очень сложно. В большинстве случаев это будут нативные библиотеки WP jQuery и таблица стилей Avada (которая является основной статической таблицей стилей и, если используется файловый компилятор, динамической таблицей стилей), и это не те ресурсы, от которых вы хотите избавиться. Для других ресурсов и сложных настроек сайта могут помочь плагины кэширования, которые объединяют ресурсы, откладывают загрузку JS и т. д., поэтому, пожалуйста, ознакомьтесь с нашими документами по кэшированию, ссылка на которые приведена ниже.

Заключение

Google PageSpeed ​​Insights — ценный инструмент, помогающий обнаруживать и устранять проблемы, которые могут влиять на время загрузки ваших веб-сайтов. Однако это требует времени, терпения и опыта. Существуют и другие подобные сервисы, такие как GTMetrix, Pingdom и WebPagetest.

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

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

834,342 предприятия Trust Avada

Get Avada

834,342 FUSCENSES TRUST AVADA

GET AVADA

834,342 FUSTES TRUST AVADA

GET AVADA

44444. Представьте себе AVADA

GET AVADA 9000 3 44444444444444444444444.

Ссылка для загрузки страницы

Перейти к началу

Как набрать 100% баллов в Google Page Speed ​​Test: WordPress Edition

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

Что ж, в этом посте я покажу вам точные шаги, предпринятые Tribe SEO, чтобы перейти от 37% Google PageSpeed ​​для мобильных устройств к идеальным 100%.

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

Я разделю все препятствия, которые были преодолены, на пять ключевых вех, благодаря которым мы набрали 100% баллов Google Page Speed ​​для мобильных устройств:

1. Обеспечьте чистый код.
2. Установите плагин Page Speed.
3. Обновление веб-хоста.
4. Улучшить самую большую содержательную отрисовку.
5. Увеличьте время до интерактивности.

Теперь, прежде чем мы перейдем к делу, небольшая оговорка. На момент публикации этого поста домашняя страница Tribe SEO примерно в половине случаев получает 100% оценку Google PageSpeed ​​для мобильных устройств. Это довольно типично, так как вы часто будете видеть некоторые различия при выполнении тестов скорости страницы.

Итак, приступим.

Веха № 1: Обеспечение чистоты Код

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

Для простейших сайтов WordPress сценарии PHP и MySQL запускаются всякий раз, когда пользователь запрашивает веб-страницу с сервера.

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

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

Чтобы проиллюстрировать это, вот некоторые статистические данные, предоставленные Oxygen4fun.

Если мы посмотрим на установки по умолчанию для трех популярных компоновщиков страниц, мы увидим, что общий размер файлов JavaScript и CSS для Brizy Pro, Divi Builder и Elementor Pro составляет 1624 КБ, 1243 КБ и 966 КБ соответственно.

Итак, из трех Elementor Pro имеет наименьший размер файла, поэтому самый компактный код.

Но это ни в коем случае не самый компактный из всех компоновщиков страниц, потому что WP Bakery, Beaver Builder и Oxygen Builder имеют меньшие размеры файлов — 494 КБ, 59 КБ и 34 КБ соответственно.

Очевидно, что в Oxygen Builder самый компактный код CSS и JavaScript. Это около 4% от общего размера по сравнению с Elementor Pro и 2% по сравнению с Brizy Pro.

Это потому, что Oxygen Builder построен на предпосылке загрузки только того, что необходимо и когда это необходимо.

Oxygen Builder также создает очень чистый HTML-код. Другие конструкторы создают большое количество вложенных элементов div для простых элементов контента, таких как заголовки h2, что увеличивает объем кода.

В отличие от этого, Oxygen не создает ненужных элементов div.

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

Из-за простого кода и поддержки сообщества Facebook Tribe SEO выбрала Oxygen Builder для помощи в разработке нашего нового сайта.

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

Веха № 2: установка плагина скорости страницы

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

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

Однако наибольшее влияние оказали функции WP Rocket «Оптимизация файлов».

Но сначала давайте посмотрим, как работает домашняя страница Tribe SEO без установленного WP Rocket.

Показатель Google Page Speed ​​для мобильных устройств был заниженным — 37%. Google выделил «красные треугольники» для параметра «Максимальная содержательная отрисовка», «Время до интерактивности» и «Общее время блокировки». Итак, я знал, что эти области нуждаются в улучшении.

Мобильная оценка PageSpeed ​​Insights нуждается в улучшении

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

• Отложить закадровые изображения
• Устранить блокирующие ресурсы рендеринга (о которых позаботится WP Rocket)
• Удалить неиспользуемый JavaScript.

Список возможностей – PageSpeed ​​Insights

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

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

Удалить неиспользуемый JavaScript – PageSpeed ​​Insights

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

Spotlight использовался для девяти видеороликов, все из которых содержали закадровые изображения в виде эскизов видео.

Итак, что было исправлено?

Исправление заключалось в том, чтобы отложить JavaScript трех файлов.

Это легко сделать в WP Rocket, но от меня требуется небольшое усилие.

Итак, вот что я сделал:

В WP Rocket я перешел на вкладку «Оптимизация файлов», а затем прокрутил вниз до раздела JavaScript. У меня была включена функция «Отложенная загрузка JavaScript», но настоящее волшебство происходит при включении «отложенного выполнения JavaScript».

WP Rocket добавляет некоторые файлы JavaScript по умолчанию, а также позволяет добавлять собственные сценарии. Как видите, я добавил в список, среди прочего, Chatra, Convertbox и Spotlight.

Функция задержки выполнения JavaScript — WP Rocket

Но насколько помог WP Rocket?

Ну, это намного больше, чем просто отложенный JavaScript. Это повысило рейтинг домашней страницы Tribe SEO с 37% для мобильных устройств Google PageSpeed ​​до 97%. Что еще лучше, настройка конфигурации WP Rocket заняла всего около пяти минут.

WP Rocket – результаты до и после

Я хочу подчеркнуть, насколько важным было откладывать или откладывать JavaScript в нашем случае. Если я отключу функцию задержки JavaScript, наша оценка скорости страницы Google упадет до 50%.

Веха № 3: Обновление веб-хоста

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

Однако пару месяцев спустя Cloudways, еще одна уважаемая веб-хостинговая компания, предложила мне провести вебинар по Page Experience.

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

Сначала казалось, что производительность ниже, чем у Kinsta. Наш показатель Google PageSpeed ​​для мобильных устройств упал с 97% до 94%.

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

Итак, после некоторых колебаний, я вернулся в раздел «Оптимизация файлов» WP Rocket и поэкспериментировал, отключив «Оптимизировать доставку CSS».

Быстрая очистка кеша позже, проблема с CLS была устранена, а наш показатель скорости страницы Google для мобильных устройств подскочил с 97% с Kinsta до удовлетворительных 99% с Cloudways.

Я был удивлен, увидев, что смена веб-хостинга также улучшила наш показатель «Самая большая отрисовка содержимого» с 2,4 до 2,1 секунды.

Если вам интересно, какой пакет мы выбрали с Cloudways, это был Vultr High Frequency 2 ГБ оперативной памяти, который стоил 26 долларов в месяц, что было немного дешевле, чем то, что мы платили с Kinsta.

Теперь, чтобы понять, как повысить мобильную оценку с 99% до 100%, я перешел на страницу калькулятора подсчета очков Lighthouse и поиграл с их шкалами подсчета очков.

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

Веха № 4. Улучшение крупнейшего элемента содержимого

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

Итак, мы уже видели хороший прогресс LCP за счет задержки JavaScript и обновления нашего веб-хостинга, но что еще мы могли сделать?

Итак, элемент LCP для нашей домашней страницы — это изображение. Это SVG-изображение для нашей «SEO-горы».

Если ваш элемент LCP представляет собой изображение, вот некоторые вещи, которые нам помогли:

1. Предварительная загрузка изображения LCP

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

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

У меня уже был установлен бесплатный плагин Code Snippets на нашем сайте, и это позволило мне создать пользовательское правило домашней страницы для предварительной загрузки изображения горы SEO, используя атрибут ‘link rel=»preload»:

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

2. Обеспечьте сжатие на стороне сервера

Для домашней страницы Tribe SEO формат изображения нашего элемента LCP уже подходит, поскольку файлы SVG обычно имеют очень маленький размер для векторной графики. Размер его файла составляет 13 КБ.

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

Водопадная диаграмма GTmetrix

Однако размер файла изображения, загруженного с сервера, по-прежнему составляет 13 КБ, что указывает на то, что веб-сервер не сжимал его.

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

Я отправил запрос в службу поддержки веб-хостинга компании Cloudways, которая подтвердила, что сжатие SVG не включено на их серверах по умолчанию, но с тех пор они включили его для меня.

Конечным результатом стало то, что файл размером 13 КБ был уменьшен до 3,9КБ.

Это также помогло сжать все другие изображения SVG на нашем сайте. Например, наше изображение Learn SEO Fast весит 205 КБ без сжатия на стороне сервера и 42,7 КБ с ним.

3. Отключите отложенную загрузку для элемента LCP

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

Но замедляет ли отложенная загрузка ваш рейтинг «Самая большая содержательная отрисовка» для изображений?

Я не могу сказать наверняка, но есть достаточно теории по этому вопросу, чтобы предположить, что это возможно. Итак, на всякий случай я отключил SEO Mountain SVG от ленивой загрузки в WP Rocket.

Функция отложенной загрузки — WP Rocket

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

Итак, помогла ли предварительная загрузка нашего образа LCP, сжатие на стороне сервера и отключение отложенной загрузки для образа LCP улучшить наш показатель «Самая большая отрисовка содержимого»?

Да, получилось!

Мы улучшили LCP с 2,1 секунды до 1,8 секунды. И после тестирования выяснилось, что предварительная загрузка нашего LCP-изображения оказала наибольшее влияние на наш показатель «Самое большое содержание отрисовки».

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

Веха № 5: Сокращение времени до интерактивности

Время до интерактивности (TTI) не является важным фактором для Интернета, но влияет на общий балл Google Page Speed ​​Insights. Он измеряет, сколько времени требуется странице, чтобы стать полностью интерактивной.

Не следует путать с задержкой первого ввода (FID), которая является ключевым элементом Web Vital. FID также измеряет интерактивность, но он фокусируется на первом взаимодействии пользователя со страницей, в то время как TTI фокусируется на том, когда вся веб-страница становится полностью интерактивной.

Теперь я проделал небольшую детективную работу, используя калькулятор оценки Lighthouse, и понял, что мне нужно улучшить наш показатель TTI с 2,5 до менее 2 секунд, чтобы иметь шанс получить 100-процентную оценку скорости мобильной страницы.

Но как я мог это сделать?

Что ж, с моей стороны было много проб и ошибок.

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

100% Мобильный рейтинг PageSpeed ​​Insights

Это привело к неуловимому показателю 100% Google Page Speed ​​для мобильных устройств! Время TTI также улучшилось с 2,5 до 1,7 секунды.

Но был ли причиной проблемы верхний или нижний колонтитул?

Восстановил шапку, а 100% оценка осталась.

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

Итак, я восстановил нижний колонтитул, но без изображения, и страница сохранила неуловимую 100%-ю оценку Google Page Speed ​​для мобильных устройств.

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

Я не веб-разработчик, и я изо всех сил пытался получить правильный формат фонового изображения. Итак, чтобы облегчить жизнь, я просто добавил его обратно в качестве стандартного изображения, и вуаля, WP Rocket смог проделать свою магию ленивой загрузки, и показатель скорости мобильной страницы Tribe SEO 100% сохранился.

Если вам интересно, вот видео, показывающее все шаги, упомянутые выше:

Обновление WP Rocket версии 3.9

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

Lighthouse v8

Но не бойтесь, без внесения изменений самостоятельно, простое обновление до WP Rocket v 3.9 восстановило мой идеальный 100% мобильный результат И без каких-либо действий с моей стороны. Улучшения были просто невероятными. На приведенной ниже диаграмме видно, что LCP улучшился на 22%, а TTI — на 29% .

WP Rocket v3.8 по сравнению с v3.9: Удивительные улучшения производительности

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

Подведение итогов

Я очень благодарен за то, как Oxygen Builder, WP Rocket и Cloudways помогли Tribe SEO добиться 100% скорости страницы.

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

1) Обратите особое внимание на оптимизацию как серверных, так и браузерных скриптов .