Быстродействие сайта google: Sorry, this page can’t be found.

Содержание

Скорость загрузки сайта – как ее проверить и увеличить

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

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

В статье мы расскажем:

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

Клиенты уходят к конкурентам — им проще вернуться в поисковик и выбрать следующий сайт.
Задержка загрузки на 0,1 секунду уменьшает конверсию на 7% (согласно исследованию Akamai).
Снижается вероятность, что пользователи вернутся на сайт. Google говорит, что из-за негативного пользовательского опыта вероятность повторной покупки снижается на 60%. Правда, речь про мобильные версии.
Скорость загрузки влияет на ранжирование сайта в поисковиках. Если сайт долго грузится, робот поисковой системы может не успеть его полностью проиндексировать.

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

Как проверить скорость своего сайта

Есть много онлайн-сервисов, которые позволяют проверить быстроту загрузки страниц — достаточно ввести нужный URL. Рассмотрим три самых интересных, на наш взгляд. Для примера будем использовать сайт https://shop.googlemerchandisestore.com/.

1. PageSpeed Insights

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

Если страница показывает не самые лучшие результаты (как в нашем примере), сервис дает конкретные советы, как ее оптимизировать.

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

Кстати, рекомендации PageSpeed Insights можно увидеть в отчете Google Analytics «Ускорение загрузки», если кликнуть на ссылку в соответствующем столбце:

Вообще, группа отчетов «Скорость загрузки сайта» (Site Speed reports) в GA — полезная штука. Если раньше вы не уделяли должного внимания этим отчетам, рекомендуем периодически их просматривать, чтобы отслеживать показатели в динамике и вовремя реагировать на проблемы.

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

Допустим, ваша целевая аудитория находится в Германии. Если вы посмотрите на отчет выше, то увидите, что одна из важных страниц вашего сайта в этой стране грузится очень медленно (19,24 сек.), при этом у нее 140 просмотров. Чтобы ускорить загрузку, нужно оптимизировать страницу. Если же в этом регионе или у этого провайдера скорость интернет-соединения слишком мала для вашего сайта, можно создать альтернативные страницы, адаптированные для низкой пропускной способности.

2. Pingdom Tools

Это один из самых информативных и популярных сервисов для проверки скорости. У него есть бесплатная и платная десктоп-версии, а также мобильное приложение с 14-дневным trial.

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

Кроме того, в бесплатной версии Pingdom Tools вы можете:

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

3. GTmetrix

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

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

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

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

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

1. Страницы большого размера

Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

2. «Тяжелые» изображения

Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т.д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

3. Много запросов от браузера

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

Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.

4. Перегруженный код JavaScript и CSS

Если код JavaScript и CSS слишком длинный, содержит много лишних элементов (пробелы, комментарии и т.п.), то страница может загружаться с задержками. Чтобы оптимизировать код, вы можете:

Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

5. Большое расстояние между сервером и пользователем

Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

6. Медленный хостинг

Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

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

Как регулярно мониторить скорость сайта

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

Если вы собираете данные в Google BigQuery с помощью

OWOX BI Pipeline

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

Получить шаблон дашборда

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

Количество пользователей.
Количество сеансов.
Количество просмотров страниц.
Ошибки JavaScript.
Ошибки 404.
Среднее время загрузки страниц.
Среднее время соединения с сервером.

На втором листе можно узнать подробную информацию по ошибкам JavaScript:

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

На третьей странице представлена подробная информация об ошибках 404:

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

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

На четвертой странице информация по десктопу:

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

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

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

Чем проверить скорость загрузки сайта — 8 лучших инструментов

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

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

Короткий перечень сервисов без подробностей:

Дальше — разбираем особенности каждого из этих инструментов.

Google PageSpeed Insights

Google PageSpeed Insights — официальный инструмент от Гугл для проверки скорости загрузки сайта. Один из самых используемых среди веб-мастеров и SEO-оптимизаторов.

В 2018 году этот сервис глобально обновился. Новый интерфейс выглядит так:

Возможности и функции сервиса также изменились.

Повысились планки метрик: быстрой веб-площадкой теперь может считаться та, которая получает показатель от 90 до 100 баллов. Раньше для максимальной оценки достаточно было 80.

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

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

Новый раздел «Имитация загрузки страницы»: сервис имитирует загрузку страницы в условиях 3G и оценивает ряд параметров. Эти параметры принципиально меняют оценку сайта:
- время загрузки первого контента — когда браузер начал отображать первый элемент на странице;
- индекс скорости загрузки — время, по истечении которого весь контент страницы становится доступен для просмотра;
- время загрузки для взаимодействия — за какое время страница полностью прогружается для взаимодействия пользователя;
- время загрузки достаточной части контента — когда становится виден основное содержимое сайта;
- время окончания работы ЦП (центрального процессора) — показатель серверных настроек: время, за которое основной поток страницы разгружен, чтобы обрабатывать пользовательские команды ручного ввода;
- максимальная потенциальная задержка FID — период в миллисекундах, который занимает ответ страницы на действия пользователя.

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

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

Сложно не прислушиваться к тому,

кто определяет положение твоего сайта в поисковой выдаче.

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

Pingdom Tools

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

Сервис оценивает скорость загрузки в миллисекундах и дает общие рекомендации.

С помощью Pingdom можно анализировать время работы веб-ресурса, производительность и взаимодействие с пользователями.

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

Проверять ресурс можно, имитируя обращения к серверу из разных стран (Япония, Германия, Великобритания, США, Австралия и Бразилия).

Gtmetrix.com

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

Тестовый запрос производится из канадского Ванкувера.

Фишки сервиса: хранит историю (можно сравнить, что стало лучше или хуже) и включает в себя анализ Google PageSpeed Insights и YSlow. Предлагает соответствующие рекомендации по разным типам ошибок (редиректы, оптимизация изображений, использование JavaScript и HTML и другие).

Есть платная версия с бо́льшим количеством функций и расширений.

Uptrends.com

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

Так же, как и Gtmetrix, показывает в том числе оценку от Google PageSpeed Insights:

Анализирует содержимое веб-ресурса и отображает сведения в виде графиков и таблиц:

PR-CY

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

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

В платных версиях в инструменте можно задавать до 60 адресов для сравнительного анализа и проверки внутренних страниц (коды ответов сервера, скорость загрузки каждой страницы, метатеги).

Web Page Test

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

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

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

Sitespeed

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

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

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

Load Impact

Завершает хит-парад хардкорный Load Impact — один из самых требовательных сервисов проверки скорости загрузки веб-ресурса. Тест этого сервиса по сути проводится по принципу DDOS-атаки. На сайт производится симуляция больше сотни активных соединений и несколько десятков обращений от пользователей.

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

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

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

как проверить и увеличить скорость загрузки страницы – полезные инструменты и онлайн-сервисы

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

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

Содержание

Зачем увеличивать скорость загрузки сайта

Согласно данным исследовательской группы DoubleClick, более 53% пользователей уходят с сайта, если он загружается более 3 секунд. Притом каждая следующая секунда увеличивает количество отказов на 5–7%. То есть, если ваш сайт загружается 7–8 секунд, процент отказов может превышать 80%. Особенно это характерно для мобильной версии. Это критические цифры, которые говорят, что сайт нужно срочно оптимизировать и ускорять.

Обратите внимание! Начиная с 2021 года Google внедряет новые факторы оценки качества сайта — Core Web Vitals. Один из этих факторов — скорость отрисовки контента на сайте. Плюс — время ожидания до первого взаимодействия с контентом и его стабильность.

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

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

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

Индексация сайта с плохой скоростью

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

Ранжирование и позиции сайта

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

Взаимосвязь скорости работы сайта и конверсионности

Низкая скорость загрузки страниц действительно способна снизить конверсию. Пользователи не всегда готовы ждать полной отрисовки страниц 5–10 секунд, чтобы совершить целевое действие. В некоторых случаях задержка даже в 1 секунду способна снизить лояльность пользователей на 15–16%. И когда конверсия снижается до критической отметки, ресурс просто перестает приносить какую-либо прибыль и становится убыточным.

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

Какая должна быть скорость загрузки сайта

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

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

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

К примеру, сайт интернет-магазина Eldorado не отвечает всем актуальным требованиям PageSpeed Insight от Google, но это не мешает ему быть в топе поисковой выдачи.

Кстати, у нас есть несколько кейсов, в которых увеличение скорости загрузки сайта было одной из приоритетных задач:

Кейс по продвижению компании KRONAS.
Кейс по продвижению интернет-магазина Dybok.ua.

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

Порядок загрузки сайта

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

Браузер, который отрисовывает контент.
Сервер, с которого и выгружаются данные.

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

Сам же процесс загрузки сайта состоит из пяти этапов:

Загрузка HTML-кода. Фактически это «тело», структура страницы.
Загрузка CSS-стилей. Они отвечают за визуальную составляющую — от цвета и размера шрифтов до расположения блоков, анимаций и прочего.
Запрос к JavaScript-файлам. Они отчасти отвечают за логику работы сайта и интерактивность, добавляют более сложные анимации и прочее.
Подключение шрифтов. Если они не подключаются или не заданы, браузер будет использовать дефолтные шрифты.
Загрузка изображений. Нередко этот этап самый продолжительный.

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

Какими инструментами просто проверить скорость сайта

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

PageSpeed Insights

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

Pingdom Tools

Сервис позволяет мониторить скорость сайта, показывая среднее время отрисовки всех элементов. Но самое главное — он дает исчерпывающую информацию по скорости загрузки изображений, отработки CSS-стилей, скриптов и прочего. Таким образом можно сразу увидеть наиболее проблемные элементы и принять необходимые меры. Но есть нюанс — тест скорости проводится из довольно отдаленных серверов, из-за чего результаты для стран СНГ не совсем объективные. К примеру, сайт Wezom из лондонского сервера загружается более 10 секунд.

GTmetrix

Также позволяет анализировать скорость загрузки и предоставляет множество полезной информации. Одна из полезных функций GTmetrix — «История». Можно просматривать результаты тестов за предыдущие периоды, сравнивать их и анализировать, как сильно они меняются в ходе оптимизации.

Серверы GTmetrix находятся в Ванкувере (Канада), поэтому скорость загрузки сайтов RU и UA сегмента не самая объективная.

Loading.express

В отличие от двух предыдущих сервисов, Loading.express позволяет провести проверку скорости загрузки страницы из серверов в Москве, Санкт-Петербурге, Минске, Киеве и т. д. То есть — дать более объективную оценку. Сайт сразу же оценивает скорость загрузки по десятибалльной шкале, предоставляет данные Core Web Vitals, которые мы упоминали в начале статьи, и здесь же предлагает проверить конкурентов — это удобно.

WebPageTest

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

Be1.ru

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

SeoLik

Очень удобный ресурс для SEO-специалистов. Позволяет проверить скорость работы сайта, оценивает его по 100-балльной шкале и указывает на проблемные моменты, требующие исправления. Помимо прочего, у SeoLik множество дополнительных полезных SEO-инструментов, есть проверка АГС «Яндекс», генератор .htpasswd, проверка SSL и многое другое.

Как увеличить скорость загрузки сайта

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

Техническая оптимизация серверной части

Улучшение хостинга, настройка сервера Nginx и Apache, CDN для загрузки распространенных JS-библиотек, кэширование в браузере и прочее. То есть все те действия, которые затрагивают серверную часть, а не относятся напрямую к сайту.

Оптимизация базы данных, TCP, TLS, HTTP/2

Серверы с большими объемами трафика и крупные проекты нуждаются в тонкой настройке TCP (Transmission Control Protocol). Плюс необходимо внедрять новую версию HTTP — HTTP/2, который сегодня использует каждый 5-й сайт. Напомним также, что сетевые подсистемы обновляются регулярно — с каждым выходом обновленного ядра Linux.

Уменьшение редиректов

Редиректы полезны, когда необходимо сообщить серверу об изменении адреса страницы и избежать ошибок 404. Но в то же время каждый редирект замедляет page speed. И если поначалу разница незаметна, то с накоплением редиректов скорость загрузки сайта падает. Особенно заметно это на мобильных устройствах. Для быстрого поиска редиректов на сайте можно использовать утилиту Screaming Frog.

Настройка асинхронной загрузки

В классическом варианте все HTML-элементы загружаются поочередно. И ранее строки кода с тяжелым Java Script сильно замедляли загрузку следующих строк. Но появление HTML5 позволило использовать асинхронную загрузку. Стало возможным запускать скрипты последними — уже после отрисовки основного контента.

Удаление лишних плагинов

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

Оптимизация размера страницы

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

КОМПЛЕКСНЫЙ АУДИТ САЙТА

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

ЗАКАЗАТЬ АУДИТ САЙТА

Сжатие изображений

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

Рекомендуемые размеры изображений:

для каталога — около 7 килобайт;
для товарных карточек — до 18 килобайт;
для увеличенного просмотра — 900–950 килобайт.

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

Оптимизация JavaScript и CSS

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

Оптимизация веб-шрифтов

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

Один из вариантов увеличить скорость загрузки страниц — использовать форматы WOFF и WOFF2, исключая все наборы символов, кроме кириллицы и латиницы. Еще есть несколько способов оптимизации:

Спецификация link rel=»preload» — моментально указывает браузеру, что нужно загрузить файл шрифта.
CSS-свойство font-display — управляет поведением веб-обозревателя в случае задержки загрузки.

Настройка кэширования на стороне браузера

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

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

Expires — указывает, сколько времени кэш будет актуален (от недели до года).
Cache-Control: max-age — по сути, аналог Expires с идентичными функциями.
Last-Modified и ETag — подключают в кэше уникальный ID для каждого URL-адреса.

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

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

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

Если ваш сайт загружается более 3–5 секунд, это повод задуматься о его оптимизации. Если более 7–10 секунд — нужно срочно принимать меры. Для начала проверьте скорость загрузки страниц при помощи сервисов, которые мы упомянули. Изучите рекомендации, которые они предоставят, и следуйте им.

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

У ВАС ОСТАЛИСЬ ВОПРОСЫ?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ

Наш менеджер свяжется с Вами в ближайшее время

Отправить заявку

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

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

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

Рассмотрим основные аспекты оптимизации скорости загрузки сайта

Оптимизация базы данных (связи, индексы)

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

Оптимизация SQL запросов

Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)

Кеширование результатов SQL запросов

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

Пример кеширования результатов SQL запросов в PHP

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

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

Все изображения на сайте сжать, используя онлайн инструменты Compressor.io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

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

Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.

В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено

Пример отложенного вызова CSS файла через JavaScript

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

Пример на CSS

Обязательно загружайте все изображения с помощью отложенной загрузки lazyload

При этом обязательно нужно подключить lazyload.min.js

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

Минимизация (сжатие) JavaScript, CSS и HTML

Минимизация (сжатие) JavaScript, CSS, HTML позволяет сократить вес файлов, устраняя пробелы, переносы строк, ненужные символы и комментарии. Разработчики при разработке сайта оставляют много места на отступы и комментарии, что существенно удваивает объем JavaScript и CSS.

Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

Включение сжатия gzip

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

Включить gzip сжатие файлов вы можете в настройках вашего хостинга.

Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression

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

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

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

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

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

Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно. Это связано с спецификой программной организации бесплатной CMS и использованием шаблонных решений, которые оптимизировать не всегда удается или удается на небольшой процент(: Плюс не каждый специалист сможет это сделать так как данный процесс требует определенные знания и опыт, и нужно будет вносить коррективы в ядро системы.

Помогла ли вам статья?

350
раз уже помогла

Комментарии: (1)

Написать комментарий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

Ускорение загрузки сайта в Google Analytics

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

Чтобы помочь владельцам сайтов улучшать производительность сайтов,
команда Google Analytics запустила новый отчет «Предложения по ускорению загрузки» (Speed Suggestions).

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

1. В отчете «Ускорение загрузки» вы найдете среднее время загрузки для самых посещаемых страниц вашего сайта.
Чтобы просмотреть «Предложения по увеличению скорости загрузки» сайта перейдите во вкладку Поведение > Скорость загрузки сайта > Ускорение загрузки.

Ускорение загрузки сайта в Google Analytics

2. Нажмите на название интересующей вас страницы в столбце Предложения Page Speed. Вам откроется страница Page Speed Insights.

Ускорение загрузки сайта в Google Analytics

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

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

Ускорение загрузки сайта в Google Analytics

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

Google хочет ускорить загрузку сайтов в Chrome чужими руками

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

Google Chrome станет быстрее за счёт разработчиков сайтов

Android за деньги, или Что будет, если Google заставят продать Chrome

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

Скорость загрузки сайтов в Chrome

В Chrome появится встроенный измеритель быстродействия сайтов

Механизм, о котором идёт речь, называется Performance HUD. Он уже доступен разработчикам в виде самостоятельного инструмента Core Web Vital для замера скорости работы веб-сайтов, однако не встроен непосредственно в сам браузер. Интегрировав его в Chrome, Google хочет, чтобы создатели и разработчики сайтов сами могли видеть, как меняется частота смена кадров на их порталах, при обработке каких фрагментов они замедляются или, наоборот, ускоряются, и имели возможность всё это исправить.

Google рассказала, что нового будет в следующем обновлении Chrome

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

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

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

Включить метрику можно в экспериментальном меню Chrome Canary

Найдите параметр Show performance metrics in HUD;
Включите его и перезагрузите браузер.

Вышла новая версия Google Chrome с быстрой сменой паролей и улучшенной ночной темой

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

5 способов оптимизации вашего сайта по критериям скорости загрузки страниц Google

В мае 2018 года Google выпустила Lighthouse 3.0, обновленную версию своего инструмента с открытым исходным кодом для аудита качества и скорости веб-страниц. Lighthouse 3.0 предлагает новые параметры вывода для отчетов, а также ряд изменений в способе измерения скорости и производительности сайта, таких как введение First Contentful Paint в качестве показателя производительности и скорости, а также новые весовые коэффициенты для аудита производительности.

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

Приступим.

Зачем оптимизировать скорость вашего сайта сейчас?

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

Итак, если вы, например, используете Angular JavaScript с WordPress, вам повезло, но другие варианты пакетов платформы уже находятся в стадии разработки с помощью сообщества GitHub.

Источник изображения

Google постепенно повышает важность скорости сайта как критерия ранжирования в поисковой сети с момента первого внедрения индекса Mobile-first в 2016 году, поэтому разумно обратить внимание на эти показатели и тенденции. Google выпустил около 62 обновлений настроек алгоритма в течение в среднем недель в 2018 году, поэтому обеспечение хорошего ранжирования становится все более динамичной практикой. А учитывая относительную новизну индекса, ориентированного на мобильные устройства, а также его непропорциональное влияние на посещаемость веб-сайта, имеет смысл, что большая часть усовершенствований алгоритма будет сосредоточена на мобильных устройствах.

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

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

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

1. Реализовать отложенную загрузку

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

Источник изображения

При отложенной загрузке одновременно загружается только часть веб-страницы — раздел, на который зритель смотрит в эту секунду, поэтому вы откладываете загрузку следующей части, пока посетитель не прокрутит до нее. Это сокращает время, необходимое для достижения таких показателей, как First Meaningful Paint и First Content Paint, которые являются двумя метриками, которые Lighthouse использует для измерения скорости и производительности сайта.

Ленивая загрузка необходима, если вы реализовали «бесконечную прокрутку», которая популярна на сайтах с большим количеством контента, но может помочь на всех типах веб-сайтов. Фактически, платформа веб-дизайна Duda обнаружила, что после реализации отложенной загрузки на сайтах, поддерживаемых Duda, эти объекты в среднем набирали 10 баллов в рейтинге Lighthouse — ничего страшного —

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

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

Форматы следующего поколения включают JPEG 2000, JPEG XR и WebP. Эти форматы сжимают и конвертируют изображения, чтобы сделать их намного меньше, чем традиционные PNG и JPG, но они не оказывают отрицательного влияния на качество изображения. Используя форматы следующего поколения, вы можете значительно ускорить загрузку страницы даже для визуальных элементов с большими размерами пикселей, не жертвуя качеством изображения.Посмотрите данные Insane Lab, которые показали, насколько файлы WebP меньше, чем файлы PNG:

Google особенно поощряет веб-мастеров использовать собственное новое форматирование WebP, которое поддерживается браузерами Chrome и Opera. WebP создает изображения, которые на 26% меньше, чем PNG, и на 25-35% меньше, чем форматы JPG.

3. Используйте сеть доставки контента

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

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

Источник изображения

Сети CDN

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

4. Избавьтесь от ненужных плагинов

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

Некоторые плагины могут быть жизненно важными для вашего сайта, например, ваша платежная система, но другие могут больше не служить большой цели. Многие плагины запрашивают информацию у сторонних серверов, что может еще больше замедлить работу. В недавнем опросе DigWP более 900 профессионалов WordPress указали количество плагинов, которое они обычно считают порогом «слишком много», при этом 75% респондентов согласились с тем, что 25 — это предел. Более трети респондентов рекомендовали 10 в качестве лимита.

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

5. Удалите правила CSS, которые вы не используете.

CSS-правила вашего сайта определены в файле main.css. Ее также называют внешней таблицей стилей, поскольку она хранится отдельно от HTML-кода сайта. Чтобы ваш сайт загрузил First Contentful Paint, которая имеет большое влияние на производительность в соответствии с новой версией Lighthouse, браузер должен сначала получить, проанализировать и обработать каждую таблицу стилей CSS, чтобы определить, как будет отображаться контент.

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

Источник изображения

Сокращение ваших файлов CSS с помощью такого плагина, как Fast Velocity Minify, может очень помочь с вашими оценками Lighthouse, но вы можете сделать больше, чтобы время загрузки CSS не мешало вам. Удаление всех неиспользуемых определений CSS еще больше ускоряет работу и оптимизирует производительность вашего веб-сайта для повышения рейтинга Google.

Следование критериям скорости Google повышает производительность

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

Об авторе

Консультант, специалист по социальным сетям и блогер из Тель-Авива, Габриэль Садех помогает брендам делиться своим мнением и расширять свой бизнес с помощью эффективных стратегий цифрового маркетинга.Лучший способ связаться с ней — через ее профиль в LinkedIn.

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

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

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

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

Приступим!

Введение в Google PageSpeed Insights

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

Google PageSpeed Insights

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

Оценка Google PageSpeed Insights

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9. Сократите время ответа сервера (TTFB)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  ffmpeg -i input.gif output.mp4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  
Заголовочный набор Cache-Control "max-age = 84600, общедоступный"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины

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

21. Уменьшите влияние кода третьей стороны

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

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

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

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

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

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

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

22. Избегайте огромной сетевой полезной нагрузки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сводка

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

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

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

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

Скорость сайта Google Analytics — как отслеживать и почему

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

Почему важна скорость загрузки сайта?

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

Медленный сайт настолько вреден для посетителей, что Google начал добавлять его в качестве функции в свой алгоритм ранжирования веб-поиска в 2010 году, а недавно они объявили, что в июле 2018 года они увеличат скорость мобильного поиска.

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

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

Как проверить скорость сайта в Google Analytics

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

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

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

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

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

Заключение

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

Как интерпретировать и улучшить свою оценку Google PageSpeed Insights

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

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

Исследование Google по скорости страницы

После просмотра 900 000 объявлений исследователи из Google обнаружили, что средняя мобильная целевая страница после клика загружается за 22 секунды.Это более чем в 7 раз дольше, чем большинство нетерпеливых интернет-пользователей будут ждать, прежде чем покинуть страницу, — 53%, если быть точным.

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

С помощью технологии машинного обучения от SOASTA исследователи обнаружили корреляцию между временем загрузки, весом страницы (размером данных) и коэффициентом конверсии.По сути, «тяжелее» означает медленнее. В частности, когда количество элементов (текст, изображения и т. Д.) На странице увеличивается с 400 до 6000, ваши шансы на конверсию посетителя снижаются на 95%.

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

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

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

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

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

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

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

Работает, по данным Google, так:

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

Но достаточно ли «хорошо», когда люди ожидают, что страница загрузится мгновенно? Не тогда, когда на счету каждая секунда. Чтобы набрать как можно больше очков, вам нужно сделать следующее…

Достижение высокого балла Google PageSpeed Insights

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

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

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

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

example.com использует адаптивный веб-дизайн, никаких перенаправлений не требуется — быстро и оптимально!
example.com → m.example.com/home — штраф за несколько поездок для мобильных пользователей.
example.com → www.example.com → m.example.com — очень медленная работа на мобильных устройствах.

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

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

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

Современные браузеры способны предоставлять пользователям Интернета меньшую альтернативную версию страницы. Если включен компрессор gzip, эти страницы могут уменьшиться в размере на 90%.

На своем веб-сайте Better Explained Халид Азад отлично описывает, как gzip оптимизирует процесс HTTP-запроса и ответа:

Однако, когда сжатие включено, процесс выглядит примерно так:

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

3. Минимизация CSS, HTML, JavaScript

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

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

Другой вариант, конечно же, — воспользоваться преимуществами AMP и AMP Google для рекламных платформ.Обе программы позволяют разработчикам создавать страницы с урезанными версиями HTML, CSS и JavaScript. В результате страницы и объявления загружаются за доли секунды.

4. Отдавайте предпочтение содержанию в верхней части страницы

Как ни странно это может показаться, время загрузки страницы зависит не только от ее скорости. Это также касается «воспринимаемой производительности». Брайан Джексон из KeyCDN объясняет:

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

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

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

5. Ускорение времени ответа сервера

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

Запросы к базе данных
Медленная маршрутизация
Каркасы
Библиотеки
Истощение ресурсов ЦП
Истощение памяти

Для веб-сайта Рэлен Мори плохой хостинг был главным убийцей скорости. Она предупреждает читателей:

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

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

6. Устраните JavaScript, блокирующий рендеринг.

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

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

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

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

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

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

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

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

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

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

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

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

К счастью, оптимизировать изображения очень просто. Замена PNG файлом изображения JPEG может легко сэкономить размер вашей страницы и время загрузки. То же самое и с компрессорами изображений, такими как Guetzli и Zopfli от Google.

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

Узнайте, где вы стоите, с помощью Google PageSpeed Insights

Какая у вас оценка в Google PageSpeed Insights? Вы достигли рекомендованного 85+?

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

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

Подпишитесь на демонстрацию Instapage Enterprise сегодня.

Руководство по инструментам проверки скорости веб-сайта Google

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

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

Давайте нырнем …

Влияние скорости веб-сайта на конверсию клиентов

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

47% людей ожидают, что ваш сайт загрузится менее чем за 2 секунды.
40% откажутся от него полностью, если это займет более 3 секунд.
85% интернет-пользователей ожидают, что мобильный сайт будет загружаться так же быстро или быстрее, чем на их настольных компьютерах.

Из Google:

Люди с негативным опытом использования мобильных устройств на 62% реже будут покупать у вас в будущем.
Задержка загрузки мобильных устройств в 1 секунду может повлиять на конверсии мобильных устройств до 20%.

От Nielson Norman Group:

Если сайт электронной коммерции зарабатывает 100 000 долларов в день, задержка страницы в 1 секунду может стоить вам 2,5 миллиона долларов потерянных продаж каждый год.

Вы уловили идею.

Если ваш сайт загружается дольше 2 секунд на рабочем столе и медленнее 3 секунд на мобильном устройстве (рекомендация Google для мобильных устройств с подключением 4G), вы можете потерять почти половину своих клиентов, прежде чем они даже начнут взаимодействовать с вашим сайтом.

Влияние скорости веб-сайта на поисковый рейтинг

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

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

За прошедшие годы Google сделал скорость сайта все более важной благодаря нескольким обновлениям алгоритмов, а в мае 2020 года команда Chrome объявила
Core Web Vitals, в котором рассматриваются различные аспекты скорости сайта (и показатели взаимодействия с пользователем), которые вскоре будут влиять на рейтинг в поиске Google.

Google разбивает Core Web Vitals на:

Крупнейшая отрисовка содержимого (LCP) — измеряет воспринимаемую скорость загрузки и отмечает точку на временной шкале загрузки страницы, когда основное содержимое страницы, вероятно, загрузилось.Это измерение скорости сайта.
Задержка первого ввода (FID) — измеряет скорость отклика и количественно оценивает впечатление, которое пользователи испытывают при попытке первого взаимодействия со страницей. Это измерение скорости сайта.
Накопительный сдвиг макета (CLS) — измеряет визуальную стабильность и количественно определяет величину неожиданного сдвига макета видимого содержимого страницы. Это не связано конкретно со скоростью сайта и не будет подробно рассматриваться в этом руководстве.

«Самая большая метрика Contentful Paint (LCP) сообщает время рендеринга самого большого
изображение или текстовый блок, видимый в области просмотра.Чтобы обеспечить удобство работы пользователей, сайты должны стремиться к тому, чтобы самая большая отрисовка контента происходила в течение первых 2,5 секунд после начала загрузки страницы », — поясняет Google.
web.dev.

First Input Delay (FID) «измеряет время с момента, когда пользователь впервые взаимодействует со страницей (т. Е. Когда он щелкает ссылку, нажимает кнопку или использует настраиваемый элемент управления на основе JavaScript) до момента, когда пользователь браузер действительно может начать обработку обработчиков событий в ответ на это взаимодействие », — говорит Google.

Подробнее о Core Web Vitals см.
Основы Google Core Web Vitals: все, что вам нужно знать, и наши
Центр ресурсов Core Web Vitals.

Объяснение инструментов проверки скорости веб-сайта Google

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

С момента выпуска Core Web Vitals, вот как Google рекомендует вам использовать эти инструменты для решения и улучшения других различных аспектов скорости сайта:

Используйте новый отчет Core Web Vitals Search Console для определения групп страниц, требующих внимания.
Затем используйте PageSpeed Insights для диагностики лабораторных и полевых проблем на странице.
Используйте Lighthouse и Chrome DevTools, чтобы получить практические рекомендации о том, что именно нужно исправить.
Получите настраиваемую панель управления Core Web Vitals с помощью обновленной панели инструментов CrUX или нового API отчетов Chrome UX для полевых данных или PageSpeed Insights API для лабораторных данных.
Смущены объемом данных и вам нужны прямые указания? Используйте web.dev/measure для измерения вашей страницы и отображения списка приоритетов для оптимизации.
Наконец, используйте Lighthouse CI перед развертыванием изменения в производственной среде.

Search Console

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

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

PageSpeed Insights

PageSpeed Insights — это один из простейших способов получения аналитики скорости сайта, который можно использовать для измерения Core Web Vitals, а также других ключевых данных. Он работает на Lighthouse и Chrome UX Report.

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

Когда вы вводите URL-адрес, PageSpeed Insights также оценивает набор данных Chrome User Experience Report (CrUX), чтобы получить представление о том, как реальные пользователи воспринимают страницу.

Он также сообщает о First Contentful Paint (FCP) , Метрические данные CLS, FID и LCP. Google рекомендует LCP не более 2,5 секунд и FID менее 100 миллисекунд.В обоих случаях Google стремится к 75-му процентилю среди мобильных и настольных устройств.

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

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

Маяк

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

Маяк можно использовать четырьмя различными способами; первые три являются более сложными и создаются разработчиками и для разработчиков:

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

Chrome DevTools

Chrome DevTools запускает Lighthouse и требует загрузки расширения Chrome. Затем вы просто переходите на вкладку «Аудит» и устанавливаете флажки для того, что вы хотите проверить. Его наибольшее применение в качестве средства проверки скорости сайта — это аудит страниц, требующих аутентификации, или идентификация страниц с помощью Cumulative Layout Shift, одного из трех Core Web Vitals. Он предоставляет отчеты в удобном для пользователя формате.Он также измеряет общее время блокировки (TBT), которое Google считает отличным прокси для FID.

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

Web.dev

Чтобы упростить просмотр данных, перейдите в Web.dev и нажмите «Проверить мой сайт», затем нажмите «Измерение». Он измеряет производительность сайта и дает советы по улучшению взаимодействия с пользователем. Вы можете подписаться, чтобы отслеживать прогресс сайта с течением времени.

Отчет об удобстве использования Chrome

Отчет

Chrome User Experience (CrUX) может использоваться для измерения как LCP, так и FID и используется в отчете PageSpeed Insights. Он предоставляет показатели взаимодействия с пользователем, которые показывают, как реальные пользователи Chrome воспринимают ваш сайт (называемые полевыми данными), и позволяет вам получать данные о скорости по URL-адресам вашего конкурента.

Новый CrUX API, запущенный 28 мая 2020 года, «позволяет владельцам сайтов быстро оценивать производительность своего сайта для каждого Web Vital, как это делают реальные пользователи Chrome.Набор данных BigQuery уже отображает общедоступные гистограммы для всех Core Web Vitals, и мы работаем над новым REST API, который упростит и упростит доступ как к данным на уровне URL, так и на уровне источника — следите за обновлениями », — написал Google на web.dev в Август 2020 г.

Вы можете получить эти данные, запустив отчет, используя панель инструментов CrUX или новый API отчетов Chrome UX. Он не только измеряет Core Web Vitals, но также измеряет, среди прочего:

First Paint: как определено Paint Timing API:
сообщает время, когда браузер впервые начинает отображать страницу после навигации; первый ключевой момент, о котором заботятся разработчики при загрузке страницы.
Первая содержательная краска:
измеряет, сколько времени требуется браузеру для отображения первой части содержимого DOM после перехода пользователя на вашу страницу.
DOMContentLoad: согласно спецификации HTML: «сообщает время, когда исходный документ HTML был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и субфреймов».
Время до первого байта: «измеряет продолжительность от пользователя или клиента, сделавшего HTTP-запрос, до первого байта страницы, полученного клиентским браузером.

Опытный разработчик или специалист по SEO захочет запустить отчет CrUX, чтобы получить эти дополнительные данные.

Think with Google — Протестируйте мой мобильный сайт

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

Подведение итогов всех инструментов проверки скорости веб-сайта Google

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

Руководство PageSpeed Insights по увеличению скорости загрузки веб-сайта

Если ваш сайт работает медленно, вы теряете бизнес.Это так просто.

По словам Google, «скорость равняется доходу».

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

Почему? Пользователи с гораздо большей вероятностью откажутся от медленного веб-сайта, и вероятность этого увеличивается более чем на 100%, если время загрузки страницы увеличивается с 1 до 6 с:

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

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

Проверьте работоспособность своего веб-сайта

С помощью инструмента аудита сайта SEMrush

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

Ожидается, что Интернет будет быстрым. Еще в 2010 году Google подтвердил, что скорость страницы является фактором ранжирования. Затем он «был сосредоточен на поиске на настольных компьютерах», пока в июле 2018 года не было выпущено специальное обновление PageSpeed для мобильных устройств.Хотя скорость является одним из более чем 200 факторов ранжирования, никто из нас не хочет без надобности терять бизнес. Особенно для того, что обычно находится под нашим контролем. Фактически, SEO-блог Backlinko проанализировал 1 миллион результатов поиска Google и обнаружил «сильную корреляцию между скоростью сайта и рейтингом в Google».

Но помимо SEO, мы уже видели, как количество отказов страниц увеличивается по мере замедления скорости сайта. Действительно, исследование американского агентства цифрового маркетинга Portent в 2019 году показало, что «коэффициент конверсии упал в среднем на 4».42% с каждой дополнительной секундой времени загрузки (от 0 до 5 секунд) ». Также было обнаружено, что первые 5 секунд времени загрузки страницы оказали наибольшее влияние на коэффициент конверсии.

Если вы еще не обращаете внимание на скорость, показатель производительности, настало время.

Передайте привет инструменту Google PageSpeed Insights

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

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

Вы, наверное, задаетесь вопросом: «Как я могу получить оценку 100/100 с помощью PageSpeed Insights?» Притормози. Во-первых, вам нужно знать, как правильно использовать инструмент и как реализовывать предложения, которые он предлагает. В противном случае вы можете не увидеть тех приростов производительности, которые могут иметь такое значение для вашего сайта. Также важно понимать, что такое PageSpeed, а что нет.

Скорость страницы и время загрузки

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

PageSpeed

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

Время загрузки

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

Что это значит для вас?

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

Как работает PageSpeed Insights?

Инструмент Google PagesSpeed Insights работает на Lighthouse и предоставляет как «лабораторные данные», так и «полевые данные» для страницы. «Лабораторные данные» собираются в контролируемой среде при сканировании страницы и являются отличным способом выявления проблем с производительностью и найдите решения для их устранения.«Полевые данные», с другой стороны, собираются из реальных данных о производительности, когда пользователи загружают вашу страницу. Здесь могут проявиться некоторые проблемы и очевидные узкие места, которые затрудняют конверсию для ваших реальных посетителей.

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

3x — первая содержательная краска.
1x — первая содержательная краска.
2x — первый процессор простаивает.
5x — время на интерактив.
4x — индекс скорости.
0x — расчетная задержка ввода.

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

.
Красный (низкая оценка): 0-49
Оранжевый (средний): 50-89
Зеленый (хорошо): 90-100

Итак, зная немного больше о PageSpeed Insights, что это такое и как рассчитываются его оценки, с чего начать?

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

1. Перейдите к инструменту PageSpeed Insights:

2. Введите URL-адрес веб-страницы. Это не обязательно должен быть корневой домен / домашняя страница.После того, как инструмент вычислит оценки и рекомендации, вы увидите следующее:

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

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

Оценка скорости

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

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

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

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

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

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

Первая отрисовка содержимого (FCP)

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

Задержка первого ввода (FID)

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

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

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

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

First Contentful Paint (FCP)

Хотя FCP показан в отчете «полевые данные», он основан на эмулированном анализе Lighthouse, а не на реальных данных.

Первая значимая отрисовка

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

Индекс скорости

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

Первый процессор простаивает

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

Время до взаимодействия (TTI)

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

Макс. Потенциальная задержка первого входа

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

Возможности

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

Диагностика

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

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

Пройденные аудиты — это то, на что это похоже.

Что такое хороший показатель PageSpeed?

Даже если вы не достигнете 100/100, у вас все равно будет сайт с быстрой загрузкой. Помните, что PageSpeed сам по себе не является прямым индикатором времени загрузки.

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

Помните, что реальным показателем производительности вашего сайта является время загрузки, а не оценка PageSpeed Insights. Тем не менее , мы видим, что сам Google разбивает, что плохая оценка составляет от 0 до 49, средняя — от 50 до 89, а хорошая — 90+. Стремитесь высоко, конечно, но не зацикливайтесь на том, чтобы получить оценку 100. Также важно понимать, как сайты, с которыми вы напрямую конкурируете в поисковой выдаче, в какой-то степени складываются.Если у вас более быстрое время загрузки и лучшая оценка PageSpeed, но все же оценка, скажем, 92/100, есть большая вероятность, что ваши усилия могут быть лучше распределены в другом месте.

Как повысить свой рейтинг PageSpeed Insights

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

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

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

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

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

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

Загрузка изображения размером 1 МБ занимает больше времени, чем изображения размером 100 КБ. Чтобы решить эту проблему, работайте над сжатием изображений без потери качества. Для этого вы можете использовать такие инструменты, как TinyPNG, или взглянуть на рекомендацию Google, ImageMagick.

Размер изображений соответствует размеру экрана

Другая распространенная проблема — изображения излишне крупнее, чем они должны быть.Представьте, что на вашей странице отображается изображение размером 250 на 250 пикселей. Если исходное изображение на самом деле имеет размер 1000 на 1000 пикселей, но при этом оно имеет меньший размер с помощью CSS, вы можете ускорить загрузку. В его нынешнем виде браузеру потребуется загрузить исходное (большее) изображение для отображения в меньшем размере.

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

Убедитесь, что загружаемые изображения имеют правильный размер; в противном случае вы, без сомнения, столкнетесь с проблемами скорости. WordPress обрабатывает это автоматически, создавая несколько версий изображения при загрузке, но если вы используете другую CMS, вам может потребоваться вручную изменить размер изображений.

Использование CDN по существу распределяет нагрузку на сервер по ряду различных мест и использует то, что ближе всего к пользователю, для обслуживания ресурсов. Чем ближе данные, тем быстрее время загрузки. Звучит неплохо? Перед тем, как попробовать, ознакомьтесь с обязательными методами SEO для CDN.

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

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

Используйте форматы изображений следующего поколения

Наконец, рассмотрите возможность использования форматов изображений следующего поколения, таких как WebP. Было продемонстрировано, что изображения WebP могут привести к уменьшению среднего размера изображения на 85,87% по сравнению с JPG и к уменьшению на 42,8% по сравнению с PNG.

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

Улучшение времени отклика сервера

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

Если вы видите рекомендации, касающиеся либо времени ответа сервера, либо TTFB (времени до первого байта), поговорите со своим хостинг-провайдером или рассмотрите варианты хостинга, более подходящие для вашего сайта.

Минификация

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

Кэширование в браузере

Если вы используете WordPress в качестве CMS (что, по оценкам, 35% Интернета), использовать кеширование браузера с помощью популярных бесплатных плагинов, включая W3 Total Cache и WP Super Cache, не может быть проще.

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

Если вы не используете WordPress, вы все равно можете настроить кеширование браузера вручную.

Очистить перенаправления

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

Использование SEMrush Site Audit в качестве альтернативы PageSpeed Insights

SEMrush Site Audit — отличный способ проверить вашу скорость.

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

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

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

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

Проблемы с большим размером страницы HTML.
Цепочки и петли перенаправления.
Низкая скорость загрузки страницы.
Несжатые страницы.
Несжатые файлы Javascript и CSS.
Некэшированных файлов Javascript и CSS.
Слишком большой общий размер JavaScript и CSS.
Слишком много файлов JavaScript и CSS.
Унифицированные файлы JavaScript и CSS.
Среднее медленное интерактивное время документа.

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

Когда вы начнете повышать скорость своего сайта?

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

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

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

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

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

Метрики в Google Analytics

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

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

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

Время загрузки страниц

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

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

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

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

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

Google PageSpeed Insights

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

Например, вот результаты анализа веб-сайта Trinity Insight:

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

Первая отрисовка (содержательная и значимая)

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

Если вы немного углубитесь в метрики FP, вы обнаружите FCP или First Contentful Paint . Это относится к первому жизнеспособному контенту на вашем веб-сайте (в виде текста, изображений и т. Д.).). По сути, FCP — это первый раз, когда появляется что-то, что ваша аудитория может действительно использовать или получить информацию.

Однако есть дополнительный уровень выше. First Meaningful Paint (FMP) был придуман Google и относится к времени, которое требуется для загрузки основного содержимого на страницу — или времени, необходимому для загрузки содержимого, которое пользователи пришли на ваш веб-сайт, чтобы увидеть. Независимо от того, насколько впечатляющим является ваш веб-сайт, никто не пришел туда только для того, чтобы увидеть ваш фон и панель инструментов навигации.Вот почему FCP и FMP разделены, но расположены рядом друг с другом в Pagespeed Insights от Google.

Speed Index

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

Время до взаимодействия

Метрика Время до взаимодействия (TTI) выводит FCP и FMP на новый уровень.Google определяет интерактивность в три этапа:

На странице отображается полезный контент (прошел FCP).
Обработчики событий зарегистрированы для наиболее видимых элементов страницы.
Страница реагирует на действия пользователя в течение 50 миллисекунд.

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

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

Первый режим ожидания ЦП

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

Подобно FP по сравнению с FCP, первый режим ожидания ЦП обычно выполняется быстрее, чем TTI.

Макс. Потенциальная задержка первого ввода

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

Например, если вы нажимаете ссылку в Facebook или Google, вы просто сидите и ждете загрузки страницы? Это связано с тем, что браузер слишком занят (обычно обрабатывает другие элементы вашего приложения), чтобы загрузить страницу.

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

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

Дополнительные точки данных, которые имеют значение

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

Время до первого байта

Мы недавно обсуждали время до первого байта (TTFB) в блоге Trinity Insight. Он определяется как время, необходимое для запроса информации с сервера и отправки запрошенной информации. Google придает большое значение TTFB для ранжирования скорости.Если вы сможете улучшить этот показатель, вы сможете улучшить свой поисковый рейтинг.

Количество HTTP-запросов

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

Чем меньше HTTP-запросов, тем быстрее ваша страница сможет полностью загрузиться, улучшая такие показатели, как FMP, TTI и FID.

Повысьте скорость страницы с помощью Trinity Insight

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

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

Скорость загрузки сайта – как ее проверить и увеличить

Как проверить скорость своего сайта

1. PageSpeed Insights

2. Pingdom Tools

3. GTmetrix

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

1. Страницы большого размера

2. «Тяжелые» изображения

3. Много запросов от браузера

4. Перегруженный код JavaScript и CSS

5. Большое расстояние между сервером и пользователем

6. Медленный хостинг

Как регулярно мониторить скорость сайта

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

Чем проверить скорость загрузки сайта — 8 лучших инструментов

как проверить и увеличить скорость загрузки страницы – полезные инструменты и онлайн-сервисы

Зачем увеличивать скорость загрузки сайта

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

Индексация сайта с плохой скоростью

Ранжирование и позиции сайта

Взаимосвязь скорости работы сайта и конверсионности

Какая должна быть скорость загрузки сайта

Порядок загрузки сайта

Какими инструментами просто проверить скорость сайта

PageSpeed Insights

Pingdom Tools

GTmetrix

Loading.express

WebPageTest

Be1.ru

SeoLik

Как увеличить скорость загрузки сайта

Техническая оптимизация серверной части

Оптимизация базы данных, TCP, TLS, HTTP/2

Уменьшение редиректов

Настройка асинхронной загрузки

Удаление лишних плагинов

Оптимизация размера страницы

Сжатие изображений

Оптимизация JavaScript и CSS

Оптимизация веб-шрифтов

Настройка кэширования на стороне браузера

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

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

Оптимизация базы данных (связи, индексы)

Оптимизация SQL запросов

Кеширование результатов SQL запросов

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

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

Минимизация (сжатие) JavaScript, CSS и HTML

Включение сжатия gzip

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

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

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

Ускорение загрузки сайта в Google Analytics

Google хочет ускорить загрузку сайтов в Chrome чужими руками

Скорость загрузки сайтов в Chrome

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

5 способов оптимизации вашего сайта по критериям скорости загрузки страниц Google

Зачем оптимизировать скорость вашего сайта сейчас?

1. Реализовать отложенную загрузку

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

3. Используйте сеть доставки контента

4. Избавьтесь от ненужных плагинов

5. Удалите правила CSS, которые вы не используете.

Следование критериям скорости Google повышает производительность

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

Введение в Google PageSpeed ​​Insights

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

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

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

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

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

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

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

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

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

Введение в Google PageSpeed Insights

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

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

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

Как интерпретировать и улучшить свою оценку Google PageSpeed Insights

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

Достижение высокого балла Google PageSpeed Insights

Узнайте, где вы стоите, с помощью Google PageSpeed Insights

PageSpeed Insights

Руководство PageSpeed Insights по увеличению скорости загрузки веб-сайта

Передайте привет инструменту Google PageSpeed Insights