Как измерить скорость загрузки сайта — База знаний

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

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

 

TTFB / Статический контент

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

 

TTFB — Аббревиатура Time To First Byte, это время, которое занимает время отправки запроса от клиента до ответа сервера хостинга. На данный показатель влияет отдаленность пользователя от сервера в меньшей степени и время обработки запроса сервера. Для интернет магазинов показатель TTfb 600-800 мс является предельно допустимым для быстрой работы сайта. Как правило, данный показатель должен составлять около 400-500мс для интернет магазинов и около 150-300 для блогов/форумов. Важно понимать, что каждый сайт может загружаться по разному из-за количества подключаемых модулей и количества запросов в базу данных.

Все что происходит дальше — это уже загрузка основного статического контента сайта (css стили, js, jpg картинки и т.д.), а также загрузка контента от внешних источников.

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

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

 

 

Как определить скорость загрузки ttfb или статического контента?

Лучше всего использовать отладчик в браузере Chrome для этой задачи:

1) Откройте страницу Вашего сайта и нажмите правой кнопкой мыши на любую область сайта. Откроется окно 

2) Выберите пункт «Инспектировать»

3) Внизу откроется окно с вкладками для анализа сайта 

4) Выберите вкладку «Networks / Сеть» + выберите тип «Doc» для анализа загрузки именно TTFB, а не всего контента.

Это будет выглядеть примерно так:

 

В данном случае, при наведении на полосы загрузки справа от общего значений 243ms, Вы увидите такую картинку

На этой картинке Вы можете увидеть TTFB, а также другие параметры скорости загрузки.

 

 

Так в чем причина?

Как правило, проблемы бывают из-за объема статического контента (картинок, виджетов, видео). Что касается анализа статического контента, то при переходе на вкладку «Networks / Сеть», не выбирайте тип Doc. В этом случае, Вы сможете увидеть полную картину загрузки всего сайта и всех его элементов, в том числе, загрузки внешнего контента. Далее, необходимо анализировать сайт через Google PageSpeed и оптимизировать загрузку контента.

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

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

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

Прежде чем думать об измерении и оптимизации, нужно понять, какую скорость загрузки сайта вообще можно считать нормой. Хотя однозначного ответа на вопрос “какая должна быть скорость загрузки сайта?” не существует, большинство исследований говорит о том, что для пользователей является оптимальным, когда мобильные версии сайтов загружаются 3-4 секунды, а десктопные — до 2 секунд. Если загрузка затягивается, в сфере электронной коммерции до 40% пользователей закрывают сайт и начинают искать альтернативные варианты. Таким образом, чтобы не терять потенциальных клиентов, надо стараться делать работу своего интернет-ресурса как можно более быстрой.

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

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

PageSpeed Insights

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

GTMetrix

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

WebPageTest

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

Pingdom

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

Load Impact

На закуску — наиболее профессиональный веб-сервис, предназначенный для полноценного нагрузочного тестирования. Это платный инструмент (есть триальный период, есть гибкая система тарифов), который анализирует работу не только фронтэнда, но и бэкенд сайтов. Воспользовавшись Load Impact, вы узнаете чувствительность вашего сервера к нагрузкам и то, как это влияет на скорость загрузки вашего интернет-ресурса.

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

Как оптимизировать скорость загрузки сайта?

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

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

В общем случае это лечится сжатием или переконвертированием изображений, редактированием html-кода и удалением из него мусорных строчек, задействованием технологий ускорения мобильных страниц, таких как турбо-страницы от «Яндекс» и accelerated mobile pages, настройками сжатия и кэширования данных (о последнем мы подробнее писали в статье, посвященной оптимизации сайтов на «Битрикс») и т. д. Также может помочь оптимизация ответа сервера с помощью, например, подключения CDN, о чем мы поговорим чуть ниже.

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

Рассмотрим теперь подробнее конкретные меры по оптимизации сайта.

I. Облегчаем код

Массивность кода сайта прямопропорциональна скорости, с которой он будет загружаться. Соответственно, если вы хотите, чтобы сайт работал быстрее — из кода необходимо убрать все лишнее. В первую очередь это касается главной страницы проекта, на которую многие необдуманно вешают скрипты JavaScript и Ajax сильно замедляющие работу. Правило KISS («keep it simple, stupid») сформулированное полвека назад ВМС США работает и в IT — код должен быть лаконичным, ведь «краткость — сестра таланта».

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

Помочь разобраться в том, как работает ваш JavaScript, может бесплатный CEO-инструмент Varvy SEO.

II.

Производим сжатие данных

Чем меньше весят данные на странице сайта, тем быстрее он будет загружаться. На сегодняшний день существует несколько технологий сжатия данных, широко использующихся при оптимизации интернет-ресурсов. Воспользовавшись этим инструментом, вы можете проверить, отправляет ли ваш сервер какой-либо способ сжатия данных. Как правило, речь идет о gzip (GNU Zip) — утилите сжатия и восстановления (декомпрессии) файлов, работающей на алгоритме Deflate. Работая по протоколу HTTP она уменьшает число запросов от браузера к серверу, что уменьшает объем загружаемых файлов до 70%, серьезно повышая скорость загрузки страниц.

III. Уменьшаем число редиректов

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

IV. Убираем лишние плагины

Сайты на таких популярных CMS, как WordPress, Joomla, Bitrix часто оснащены солидным обвесом в виде плагинов и расширений — далеко ходить не надо, вся наша предыдущая статья была посвящена мощному плагину Woocommerce для электронной коммерции. Бывает так, что подключенные плагины теряют актуальность, и тогда требуется своевременно отключать их т.к. они существенно замедляют загрузку сайтов. Это можно сделать как вручную, так и с помощью разных инструментов. Например в WordPress есть плагин, охотящийся на другие плагины — P3, он же Plugin Performance Profiler. Установив его, вы получите доступ к данным о производительности остальных ваших WP-плагинов и сможете отключить ненужные.

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

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

Воспользовавшись PageSpeed Insights, вы сможете получить рекомендации по поводу того, сколько должно весить изображение в каждом конкретном случае. Если же говорить об общих советах, то они таковы: размер изображения для сайта должен колебаться в пределах 100 — 250 Kb. Каждый пиксель весит 4 байта. Зная разрешение загружаемых изображений легко самостоятельно рассчитать их оптимальный вес и, если в реальности он окажется слишком большим, уменьшить, например, глубину цвета.

Также разный контент будет воспроизводиться с оптимальной скоростью, будучи сохраненным в оптимальных форматах. Для кнопок интерфейса и логотипов в векторе это будет SVG, для инфографики и растровых лого — PNG, для иллюстраций и фотографий оптимален JPG, а видеофайлы до сих пор проще всего заливать в MPEG4. В качестве более современной альтернативы для видео можно вспомнить о таком открытом формате контейнера, как WEBM, позволяющим уменьшать размеры файлов без потери качества, однако он не воспроизводится браузером MacOS / iOS Safari, что отекает часть аудитории.

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

Существенный вклад в ускорение работы вашего сайта может внести браузерное кэширование. Если вы корректно настроите HTTP-заголовок Expires, то посетитель, заходя на сайт повторно, сможет видеть некоторые JavaScript и CSS-файлы, подгружающиеся из кэша его браузера, а не с вашего сайта, что будет существенно экономить время загрузки. Главное прописать в файле . htaccess, хранящейся в корневом каталоге сайта, время хранения кэша — разброс может составлять от нескольких дней до лет. Многие CMS, например тот же WP, предлагают специальные расширения для настройки кэширования, благодаря которым вам не придется заниматься его настройкой вручную — это можно будет сделать в два клика в настройках плагина W3 Total Cache и увеличить скорость загрузки сайта WordPress.

VII. Оптимизируем скорость ответа сервера

Часто проблема со скоростью загрузки сайта, ведущая к понижению его поискового рейтинга, может быть связана с удаленностью сервера от пользователя. Это частично лечится подключением сети доставки содержимого CDN (content delivery network), благодаря которой файлы можно подгружать с сайтов на сервере, расположенном географически ближе всего к посетителю. Также можно посоветовать использовать облачный DNS или сети DNS-серверов для кэширования, работающие как в РФ, так и в странах ближнего и дальнего зарубежья.

VIII.

Ищем оптимального хостинг-провайдера

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

Резюме

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

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

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

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

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

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

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

Что такое время загрузки страницы?​

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

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

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

Мы рекомендуем сосредоточиться на метрике «Самая большая отрисовка контента».

Почему процесс загрузки страницы состоит из нескольких этапов?​

Загрузка веб-страницы обычно состоит из множества различных шагов, например:

• Загрузка документа HTML
• Загрузка таблиц стилей CSS
• Загрузка изображений
• Загрузка виджета чата с другого веб-сайта
• Запуск кода JavaScript

как только он будет готов . Контент обычно появляется на странице постепенно.

Нет ни одного случая, когда страница «загружается». Страница может загрузить 98% своего содержимого, за исключением небольшого изображения нижнего колонтитула и скрипта аналитики, но это не влияет на пользователя, поэтому мы не можем сказать, что страница еще не загружена. Мы не хотим измерять конечное растяжение до 100% как время загрузки, поскольку пользователи могут нормально использовать эту страницу до этого времени.

Вместо этого можно рассмотреть несколько показателей:

• Время до первого байта (TTFB) : Сколько времени требуется серверу, чтобы ответить на первоначальный HTML-запрос?
• Первая отрисовка содержимого (FCP) : Как скоро появится некоторое содержимое (например, текст или изображение)
• Максимальное отрисовка содержимого (LCP) : Как скоро появится содержимое главной страницы?
• Время до взаимодействия (TTI) : Когда сеть и ЦП простаивают
• Визуально завершено : Когда страница перестает визуально изменяться (это может никогда не произойти, если сайт содержит видео или анимацию)
• Событие загрузки браузера : Когда страница загрузила все зависимые ресурсы, такие как таблицы стилей и изображения

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

Зачем фокусироваться на самом большом содержании Paint?​

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

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

Что такое хорошее время загрузки страницы?

Время загрузки страницы до 4 секунд допустимо, и Google помечает их как «Требует улучшения».

Время загрузки страницы более 4 секунд является медленным, и Google оценивает его как «Плохо».

Влияет ли время загрузки страницы на SEO?​

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

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

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

Как вы измеряете время загрузки страницы?​

Вы можете измерить время загрузки страницы с помощью бесплатного инструмента, такого как Google PageSpeed ​​Insights или тест скорости DebugBear.

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

Часто можно увидеть сочетание лабораторных и полевых данных:

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

Полевые данные часто основаны на отчете об опыте использования Chrome (CrUX), в котором собраны данные за последние 28 дней.

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

Сразу видно, что оптимизация метрики Largest Contentful Paint этой страницы может повысить ее рейтинг в Google. Есть и другие показатели, за которыми нужно следить, и все они выделены красным.

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

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

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

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

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

DebugBear может отслеживать скорость сайта с течением времени, включая показатели Core Web Vitals, влияющие на рейтинг в поисковых системах.

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

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

Шаг 1. Оптимизация времени отклика сервера

Когда пользователь щелкает ссылку или вводит URL-адрес, браузер запрашивает эту страницу с удаленного сервера. Затем он ждет, пока сервер не ответит содержимым страницы.

Эта часть процесса загрузки страницы представлена ​​метрикой TTFB (время до первого байта). В дополнение ко времени, затраченному на обработку запроса на сервере, TTFB также включает время, затраченное на поиск IP-адреса сервера через DNS и установление безопасного соединения с сервером с использованием TCP и SSL.

Если вы заметили, что ваш TTFB слишком высок, вы можете сосредоточиться на этой части процесса загрузки. Google считает TTFB менее 0,8 секунды хорошим. Если он выше 1,8 с, это считается плохим.

Теперь посмотрим, как можно улучшить TTFB.

Сокращение времени обработки на сервере

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

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

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

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

Физическое расстояние между клиентом (браузером) и сервером назад.

Например, если ваш сервер находится в Нью-Йорке, но некоторые из ваших посетителей находятся в Токио, то для каждого кругового пути между клиентом и сервером потребуется около 180 миллисекунд. Обычно для создания соединения и отправки запроса требуется не менее 3 циклов. Таким образом, один только этот фактор может вызвать задержку в 0,5 секунды только для одного запроса.

Сети доставки контента (CDN) могут решить эту проблему. Они расположены в сотнях мест по всему миру, поэтому время в пути будет намного меньше.

Шаг 2: Оптимизация размера загрузки

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

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

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

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

Сжатие изображений, видео и текста​

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

Использование современных форматов изображений, таких как WebP или AVIF, позволяет уменьшить объем загружаемых файлов без ущерба для качества изображения. Вы также можете уменьшить разрешение ваших изображений или загрузить разные изображения в зависимости от размера устройства, используя атрибут srcset .

Текстовые файлы, такие как HTML, CSS и JavaScript, можно сжимать с помощью таких алгоритмов, как gzip и brotli.

Существует множество плагинов и инструментов WordPress для автоматического сжатия ресурсов, например WP Rocket.

Оптимизация приоритетов ресурсов​

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

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

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

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

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

Шаг 3. Сокращение времени рендеринга

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

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

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

Определите, какой код замедляет работу вашего веб-сайта.

Графики времени ЦП в DebugBear или на вкладке Производительность Chrome DevTools сообщат вам, замедляет ли это работу вашего веб-сайта и на какие задачи браузер тратит время.

Используйте меньше JavaScript

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

Иногда лучшее решение — просто удалить их.

Заключение​

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

Как измерить время загрузки вашего сайта? 7 Полезные инструменты

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

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

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

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

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

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

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

Измерение времени загрузки веб-сайта – инструменты:

1. Google PageSpeed ​​Insights

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

Кроме того, Google PageSpeed ​​Insights предоставляет рекомендации по UX. Он доступен по адресу: https://developers.google.com/speed/pagespeed/insights/?hl=en. В ноябре 2018 года Google представил совершенно новую машину для измерения PageSpeed, основанную на Lighthouse, инструменте с открытым исходным кодом.

2. GTmetrix

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

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

3. Yahoo’s YSlow

Yahoo’s YSlow сканирует компоненты страницы и на их основе исследует время загрузки сайта. Данные представлены в виде графиков и диаграмм . Он также сообщает, какие области требуют вмешательства администратора веб-сайта. Если вы нажмете на отображаемые ошибки, вам будут предоставлены рекомендации по их устранению. Инструмент поставляется в виде плагина, который можно использовать в Firefox, Chrome, Opera и Safari.

4. Проверка веб-страницы

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

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

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

5. DareBoost

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

После нажатия на стрелку вам будет объяснено, почему именно этот аспект важен для сайта.

6. Load Impact

Load Impact предлагает 10 тестов в месяц бесплатно. Премиум-план, который стоит 119 долларов в месяц, позволяет вам просматривать свой сайт столько раз, сколько пожелаете. Тест основан на создании искусственного трафика на сайт и проверке его реакции на такую ​​перегрузку. Сайт «посещают» 1 миллион пользователей из разных уголков мира одновременно.

7. Chrome Dev Tools

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

Источник: https://developers.google.com/web/updates/2017/05/devtools-release-notes#lighthouse

В заключение

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