Тестирование скорости сайта: Проверить скорость загрузки сайта — проверка скорости сайта онлайн.

03.06.2023 alexxlab

Содержание

Блог о программировании — Проверка скорости заргрузки сайта используя Python

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

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

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

000, это будет намного приятее и удобнее. Фото ниже:

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

Следующим шагом импортируем библиотеки, которые необходимы для работы:

    import urllib.request, json
    import re
    import pandas as pd

Создаем текстовый документ в переменной среде path, у нас он будет называться как всегда)) 1.txt, в него мы поместим все URL сайтов, скорость которых необходимо проверить. Затем возвращаемся к коду и считываем построчно данные из файла, также создадим пустой словарь для дальнейшего формирования результатов в таблицу с помощью pandas + добавляем переменную key в которой укажем ключ API, который получен через сервисы google (ссылка на инструкцию указана выше):

    f = open('1.txt')
    s = f.readline()
    d = {}
    key = "указываем ключ google API"

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

    while(s):

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

    s = re.  \s+|\n|\r|\s+$", '', s)

Формируем URL запроса для получения скорости загрузки:

    url = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" \
    + s + "&strategy=mobile&locale=en&key=" + key

Попытаемся отправить запрос с помощью urllib.request и получить данные в формате json в ответ на наш запрос, если URL рабочий и верно указан, код отработает и мы получим ответ, который будет храниться в переменной data, затем в переменную overall_score получим нужные нам данные из переменной data.

После этого добавим данные в переменную d (URL и код ответа для формирования таблицы)

     try:
        response = urllib.request.urlopen(url)
        data = json.loads(response.read())
        overall_score = data["lighthouseResult"]["categories"]["performance"]["score"] * 100
        d.setdefault("URL", []).append(s)
        d.setdefault("Скорость", []).append(overall_score)

Если URL указан неверно или анализ невозможен, создадим исключение, которое отработает, если произойдет ошибка сканирования, и добавим эти данные, как и ранее в переменную d:

    except:
        d. setdefault("URL", []).append(s)
        d.setdefault("Скорость", []).append("Ошибка сканирования, проверьте указанный URL")

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

    finally:
        s = f.readline()

Когда цикл завершит свою работу, а завершит он ее после прохода всех URL в текстовом файле 1.txt, создадим DataFrame с помощью pandas получив данные из переменной d

    df = pd.DataFrame(data=d)

У нас есть DataFrame, но такие данные использовать неудобно и проблематично, поэтому мы перенесем данные в таблицу Excel, таблица будет создана автоматически в переменной среде

path:

    df.to_excel('./googlepagespeed.xlsx')

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

Ниже приведем полный код, для удобного копирования:

    import urllib. \s+|\n|\r|\s+$", '', s)
        url = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" \
        + s + "&strategy=mobile&locale=en&key=" + key
        try:
            response = urllib.request.urlopen(url)
            data = json.loads(response.read())
            overall_score = data["lighthouseResult"]["categories"]["performance"]["score"] * 100
            fcp = data["loadingExperience"]["metrics"]["FIRST_CONTENTFUL_PAINT_MS"]["percentile"] /1000
            fid = data["loadingExperience"]["metrics"]["FIRST_INPUT_DELAY_MS"]["percentile"] /1000
            lcp = data["loadingExperience"]["metrics"]["LARGEST_CONTENTFUL_PAINT_MS"]["percentile"] /1000
            cls = data["loadingExperience"]["metrics"]["CUMULATIVE_LAYOUT_SHIFT_SCORE"]["percentile"]
            d.setdefault("URL", []).append(s)
            d.setdefault("Скорость", []).append(overall_score)
            d.setdefault("fcp", []).append(fcp)
            d.setdefault("fid", []).append(fid)
            d.   setdefault("lcp", []).append(lcp)
            d.setdefault("cls", []).append(cls)
        except:
            d.setdefault("URL", []).append(s)
            d.setdefault("Скорость", []).append("Ошибка сканирования, проверьте указанный URL")
            d.setdefault("fcp", []).append("-")
            d.setdefault("fid", []).append("-")
            d.setdefault("lcp", []).append("-")
            d.setdefault("cls", []).append("-")
        finally:
            s = f.readline()
    df = pd.DataFrame(data=d)
    df.to_excel('./googlepagespeed.xlsx')

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

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

Ростелеком — проверка скорости

№ лицевого счета Ростелеком
Пинг (мс)
Джиттер (мс)
Мбит/с
Входящее соединение
Исходящее соединение
Загрузка…
Входящее
соединение
Мбит/с
Исходящее
соединение
Мбит/с
IP-адрес:
38.242.157.157
Тип соединения
Проводное Беспроводное

Удаленность устройства от CPE
(конечного оборудования/роутера)
в метрах
Количество сетей Wi-Fi в зоне
видимости устройства
До 5
До 10
Свыше 10

Диапазон
2,4 ГГц
5 ГГц
Устройство, с которого проводится
замер скорости
Смартфон
Планшет
Ноутбук
ПК
Телевизор
Данные не отправлены. Попробуйте еще раз
Замерить
Отменить
Как проверить скорость вашего веб-сайта
Исследование, проведенное Google, показало, что показатель отказов веб-сайта увеличивается на целых 31% при времени загрузки от одной до трех секунд.
По моему опыту, время загрузки страницы является одной из наиболее частых технических ошибок веб-разработчиков и веб-администраторов, особенно на мобильных устройствах.
Первым шагом к устранению ошибок скорости страницы является понимание того, как загружаются веб-сайты, и определение наиболее важных показателей, которые приводят к ускорению загрузки.
Понимание скорости страницы: как загружаются веб-сайты
Интернет очень сложен.
Итак, чтобы упростить это объяснение, мы можем разбить процесс загрузки страницы на два основных компонента, которые взаимодействуют друг с другом.
Клиенты <> Серверы
Клиенты : Веб-устройство, которое отправляет запрос через Интернет на сервер для отображения веб-страницы. Примеры клиентов включают компьютерные устройства, подключенные к WiFi, мобильные устройства, подключенные к тарифным планам, и браузеры, используемые для выполнения этой функции.
Серверы : Компьютер, который хранит веб-адреса и пытается обрабатывать запросы, чтобы клиенты могли просматривать веб-страницу. Серверы также могут называться DNS (система доменных имен), в которой размещены все адреса, доступные в Интернете.
Понимание взаимосвязи между клиентами и серверами поможет вам обнаружить любые потенциальные сбои или увеличение задержки, которые влияют на скорость страницы вашего веб-сайта.
Как всем известно, первым шагом к загрузке веб-страницы является ввод URL-адреса. Этот URL-адрес отправляет запрос в DNS, который извлекает уникальный IP-адрес и обрабатывает запрос на сервере веб-приложения.
После обработки запроса браузер пользователя отправит ответ в формате HTML, чтобы начать обработку объектной модели документа (DOM). Время получения этой информации известно как время до первого байта (TTFB) — жизненно важный показатель загрузки страницы.
Как только браузер обработает ответ HTML, он сопоставит объектную модель DOM и CSS для выполнения JavaScript.
Прежде чем можно будет начать точную отрисовку страницы, браузер должен отобразить все элементы CSS и JavaScript, а это означает, что при наличии каких-либо внешних блокирующих сценариев необходимо будет загрузить этот ресурс.
Затем необходимо сделать еще один запрос между браузером и сервером (увеличение времени загрузки).
После завершения будет инициировано событие загрузки окна, и страница будет полностью загружена в верхней части сгиба.
Также обратите внимание, что страницы с асинхронной загрузкой будут продолжать загружать элементы даже после выполнения событий загрузки окна.
Однако время загрузки страницы будет различаться на настольных и мобильных устройствах в зависимости от удобства веб-сайта для мобильных устройств и сети, используемой устройством для подключения к Интернету.
Например, Google устанавливает эталон скорости загрузки мобильных страниц не менее чем за одну секунду для всего содержимого верхней части страницы, чтобы пользователи могли взаимодействовать с сайтами как можно быстрее.
Поскольку сетевая задержка в сети 4G будет занимать не менее 300 миллисекунд времени загрузки страницы, у вас есть 700 миллисекунд, чтобы оптимизировать страницу для загрузки содержимого верхней части страницы как минимум за одну секунду.
Скриншот с сайта developer.google.com, март 2023 г.
Достичь этого эталона возможно, но сложно.
Итак, почему Google рекомендует, чтобы страницы загружались как минимум на одну секунду вверху страницы?
Важность скорости веб-сайта
Поскольку Google полагается на положительный опыт клиентов, чтобы сохранить свою долю рынка, он хочет обслуживать только те сайты, которые загружаются быстро и эффективно.
В результате приоритет отдается страницам, которые загружаются быстрее остальных. Кроме того, ваша аналитика, как правило, отражает это, так как более медленные страницы будут иметь более высокий показатель отказов, чем более быстрые страницы.
В целом, существует несколько причин, по которым важно следить за скоростью страницы:
Пользовательский опыт: Пользователи ожидают быстрой загрузки страниц на мобильных и настольных устройствах. Чем медленнее ваша страница, тем больше времени требуется до первого взаимодействия и тем выше показатель отказов. Это не только влияет на ключевые пользовательские показатели, но также может снизить коэффициент конверсии и повлиять на доход вашего веб-сайта.
Алгоритмы Google: Исследования показывают, что Google придает большое значение скорости страницы в своих алгоритмах ранжирования, особенно на мобильных устройствах. Насколько это повлияет на ранжирование, неизвестно, но Google заявил, что отдает приоритет таким факторам, как Core Web Vitals (показатели, перечисленные ниже).
Функциональность и обработка: Скорость страницы — еще один важный компонент функциональности веб-сайта, который может препятствовать основным процессам, таким как загрузка корзины покупок или сообщений в блогах, что приводит к высоким показателям отказов.
Авторитет и доверие: Быстро загружающийся веб-сайт сообщает об определенном уровне доверия и авторитета, в то время как наличие медленно загружаемого веб-сайта может означать, что ваш веб-сайт плохо построен или даже содержит спам.
Принимая во внимание эти факторы, вы не сможете оптимизировать скорость страницы своего веб-сайта, не обнаружив проблем, которые негативно на нее влияют.
Кроме того, вы обнаружите, что скорость загрузки страниц различается в зависимости от устройства и местоположения, что делает необходимость постоянного тестирования еще более важной.
Что следует учитывать при выполнении теста веб-страницы
Не каждый тест скорости страницы или инструмент дают одинаковые результаты.
По этой причине балансирование этих результатов и понимание того, на какие показатели следует обращать внимание, даст вам наиболее объективные результаты.
Кэширование
Прежде всего, я бы рекомендовал протестировать сайты с включенным и отключенным кэшированием, чтобы увидеть разницу.
Большинство инструментов обычно игнорируют кэширование, но другие инструменты, такие как WordPress, позволяют тестировать скорость страницы с включенным кэшированием.
Настройте кэширование, чтобы увидеть, не мешает ли оно вашим результатам или искажает их по сравнению с тем, что вы находите в других инструментах.
Местоположение
Многие люди не учитывают местоположение при тестировании скорости страницы, но люди в разных странах и регионах будут испытывать разное время загрузки в зависимости от их сети и близости сервера.
Я даже видел, как люди существенно сокращали время загрузки своего веб-сайта, размещая свой сайт на географически более близком сервере или подключая сеть доставки контента (CDN) — сеть распределенных серверов.
Запуск нескольких тестов
Как вы увидите, каждый тест скорости страницы может давать разные результаты в зависимости от аномалий на вашем веб-сайте или в сети.
По этой причине я рекомендую выполнять несколько тестов на нескольких инструментах, чтобы получить наиболее точные результаты того, с чем сталкиваются пользователи.
Метрики
Наконец, мы должны понять метрики, наиболее важные для скорости загрузки нашей страницы.
Ниже я выделил несколько из них, которые больше всего повлияют на скорость загрузки страницы.
Время загрузки страницы
Этот показатель учитывает общее время, необходимое для полной загрузки страницы.
Google Analytics предоставляет отчет о времени загрузки страницы для каждого из ваших URL-адресов и даже в разных браузерах.
Скриншот из Google Analytics, март 2023 г.
Время до первого байта (TTFB)
Измеряет время, необходимое браузерам для получения HTML-запроса с сервера.
Плохие оценки TTFB могут указывать на то, что на вашем веб-сайте много больших файлов или что вам нужно перейти на новый сервер.
Количество HTTP-запросов
Каждый раз, когда вашей странице необходимо загрузить файл, она отправляет новый запрос, который может снизить скорость страницы.
Core Web Vitals
Снимок экрана из PageSpeed Insights, март 2023 г.
Отрисовка самого большого содержимого: Время, необходимое для загрузки самого большого изображения или текстового элемента на странице. Эта метрика измеряет, насколько быстро фактическая загрузка вашей страницы отображается визуально.
Задержка первого ввода: Время, необходимое пользователю для взаимодействия со страницей (т. е. для нажатия ссылки или прокрутки).
Суммарное смещение макета: Насколько стабильна ваша страница. Другими словами, он измеряет, смещаются ли элементы страницы после загрузки страницы.
Поле Против. Лабораторные данные
Наконец, при измерении скорости страницы важно различать полевые и лабораторные данные.
Полевые данные учитывают историческое время загрузки страницы, тогда как лабораторные данные предоставляют данные смоделированного теста.
Google Analytics предоставляет полевые данные и исторический отчет о том, сколько времени в среднем требуется для загрузки страниц на вашем сайте.
С другой стороны, лабораторные данные, такие как Google Lighthouse, обеспечивают приблизительное измерение скорости загрузки страницы при заданных переменных.
Лабораторные данные отлично подходят для диагностики конкретных проблем, а полевые данные — отличный способ отслеживать прогресс и удобство использования вашего веб-сайта с течением времени.
Помня об этих советах, давайте рассмотрим некоторые из лучших инструментов, которые я рекомендую каждому сайту попробовать для проверки скорости своего сайта.
Лучшие инструменты для проверки скорости веб-сайта
Google PageSpeed Insights
Google PageSpeed Insights — это бесплатный инструмент, предназначенный для диагностики конкретных возможностей, когда скорость страницы недостаточна.
Снимок экрана из PageSpeed Insights, март 2023 г.
Эти предложения повысят показатели скорости вашей страницы и повысят рейтинг ваших ключевых слов.
Этот инструмент также предоставляет показатели Core Web Vitals, время до интерактивности и общий индекс скорости.
PageSpeed Insights использует Lighthouse, который предоставляет лабораторные данные для оценки загрузки страниц на стандартном устройстве с хорошим WiFi-соединением.
PageSpeed Insights — полезный первый шаг для выявления поверхностных проблем, которые можно легко решить.
GTMetrix
GTMetrix — отличный инструмент для аудита скорости страниц веб-сайта, который предоставляет лабораторные данные, аналогичные Google Lighthouse, с еще более совершенными инструментами визуализации.
Вкладка «Производительность» содержит всю необходимую информацию о Core Web Vitals, а вкладка «Структура» предоставляет возможности для повышения скорости загрузки страниц.
Скриншот из GTMetrix, март 2023 г.
Скриншот из GTMetrix, март 2023 г.
Однако мой любимый инструмент в GTMetrix — это вкладка водопада, которая позволяет визуализировать элементы загрузки страницы и то, как они влияют на время загрузки страницы.
Скриншот из GTMetrix, март 2023 г.
Pingdom
Pingdom — это платный инструмент, который стоит своих денег, если вам нужен мониторинг скорости страницы в реальном времени с помощью его настройки мониторинга реальных пользователей.
Этот инструмент позволяет использовать как смоделированные лабораторные данные, так и полевые данные в режиме реального времени, чтобы вы могли видеть, как ваш веб-сайт работает на разных устройствах, в разных сетях и на разных клиентах.
Pingdom также предоставляет все те же показатели и полезную информацию, что и другие инструменты при постоянной поддержке вашего веб-сайта.
WebPageTest
С моей точки зрения, WebPageTest — лучший бесплатный инструмент для проверки скорости, о котором вы когда-либо слышали.
Этот инструмент предоставляет все те же лабораторные данные, что и Lighthouse, с возможностью тестирования на нескольких устройствах и в разных сетях.
Некоторые из его наиболее примечательных особенностей:
Водопад.
Видео загрузки вашей страницы.
Показатели производительности.
просмотров трассировки.
Несколько тестов одновременно.
Самое главное, вы можете видеть, как ваш веб-сайт загружается в режиме реального времени с помощью киноленты.
Снимок экрана из WebPageTest, март 2023 г.
WebPageTest даже предоставляет небольшую анкету, например, насколько быстр, удобен или устойчив ваш веб-сайт, с ответами, чтобы указать, где ваш сайт нуждается в улучшении.
Google Search Console
Я настоятельно рекомендую вам получить доступ к отчету о скорости в Google Search Console для более детального изучения скорости отдельных страниц.
В этом отчете представлены индивидуальные показатели скорости и общая производительность в разных браузерах и на разных устройствах.
Скриншот с сайта developer.google.com, март 2023 г.
Используйте Search Console для отслеживания прогресса или изменений на вашем сайте. Конечно, вы также можете найти много тех же данных в Google Analytics.
New Relic
New Relic предлагает сложные инструменты для отслеживания скорости загрузки страниц с течением времени, отладки кода и даже очистки плагинов для повышения скорости сайта.
Для этого инструмента требуется подписка, но он имеет полезные функции, такие как оповещение о падении скорости страницы в режиме реального времени после внесения изменений на сайт.
Советы по повышению скорости веб-сайта
Хотя инструменты могут указывать на отдельные проблемы с вашим веб-сайтом, есть несколько общих рекомендаций, которым вы можете следовать, чтобы повысить скорость страниц вашего веб-сайта.
Включить сжатие
Большие размеры файлов и изображений сильно тормозят работу любого веб-сайта, поэтому может помочь включение сжатия с помощью автоматического подключаемого модуля.
Для WordPress доступны десятки плагинов, в том числе такие популярные, как Optimole и WP Rocket, которые включают плагин Imagify.
Кэширование
Кэширование — еще один простой способ быстро повысить скорость веб-сайта для постоянных клиентов.
Веб-кеширование или кэширование браузера позволяет веб-сайтам хранить небольшие фрагменты данных на клиентских устройствах, поэтому при следующей загрузке веб-сайта извлекается меньше ресурсов.
Плагины, такие как WP Rocket и WP Super Cache, позволяют кэшировать и могут значительно улучшить ваш пользовательский опыт.
Отложенная загрузка
Еще одна функция, которую предлагают инструменты кэширования, такие как WP Rocket или LazyLoad, — это возможность откладывать загрузку файлов до тех пор, пока пользователь не получит к ним доступ.
Другими словами, если у вас есть изображения в нижней части веб-страницы, отложенная загрузка позволяет веб-сайту отложить загрузку этого изображения до тех пор, пока пользователь не прокрутит страницу вниз.
Оптимизируйте расположение сервера/CDN
Размещение вашей веб-страницы на географически близком сервере может значительно сократить время ожидания и загрузки.
Однако, если вы распространяете контент среди глобальной аудитории, инвестиции в сеть доставки контента (CDN) могут значительно сократить время задержки и скорость загрузки для людей во всем мире.
Минимизация ресурсов
Помимо изображений, CSS и JavaScript будут двумя самыми большими элементами любой веб-страницы, которые необходимо загрузить.
Таким образом, минимизация или устранение ненужных ресурсов CSS и JavaScript, таких как повторяющиеся данные, уменьшит количество запросов и загрузок, которые клиент и сервер должны выполнить для правильной загрузки страницы.
Уменьшите количество подключаемых модулей и ненужного кода
Наконец, устранение ненужных ресурсов, таких как большие внутренние подключаемые модули, освободит ресурсы вашего веб-сайта и снизит нагрузку на устройства, пытающиеся загрузить ваш веб-сайт.
К сожалению, владельцы сайтов WordPress слишком часто оставляют устаревшие плагины после того, как они выполнили свою задачу, что может сильно повлиять на эффективность и функциональность веб-сайта.
Заключение
Теперь, когда вы понимаете, как тестировать скорость вашего сайта и какие показатели искать, вы можете внедрять решения для увеличения скорости вашего сайта и отслеживать, как они влияют на ваш SEO-рейтинг.
Хотя скорость веб-сайта является одним из многих факторов, преимущества быстро загружаемого веб-сайта значительно перевешивают любые затраты, которые вы в него вкладываете.
Дополнительные ресурсы:
GTmetrix: как использовать инструмент для проверки скорости
Core Web Vitals: 3 основных показателя Google для оценки пользовательского опыта
Core Web Vitals: полное руководство
Рекомендуемое изображение: Каспарс Гринвальдс/Shutterstock
Категория SEO
Наш лучший выбор на 2023 год
Согласно исследованию, проведенному Backlinko:
«Средняя скорость загрузки страницы для результата первой страницы в Google составляет 1,65 секунды».
Однако преимущества загрузки веб-сайта менее чем за 2 секунды распространяются не только на место в первой десятке результатов Google.
Обслуживание оптимизированного контента быстрее, чем у конкурентов, означает:
Больше трафика;
Меньше отказов;
Больше конверсий;
Счастливые клиенты.
Чтобы достичь такого уровня веб-производительности, вы должны найти правильный баланс между регулярным тестированием и быстрым применением оптимизации скорости сайта.
Вот почему в этой статье мы собрали список лучших инструментов для тестирования скорости веб-сайта и решений для оптимизации веб-производительности, которые помогут резко увеличить скорость вашего сайта в 2023 году.
На что обратить внимание при использовании инструмента для тестирования скорости сайта
Лучшие инструменты для тестирования скорости веб-сайта
Выход за рамки тестирования
Лучшие инструменты для оптимизации изображений
Лучшие инструменты для оптимизации CSS
Лучшие инструменты для оптимизации HTML
Лучшие поставщики CDN
Как выбрать лучшие инструменты для вашего сайта
Все- In-One, бесплатные решения и несколько плагинов
Начнем!
На что обращать внимание при использовании инструмента для тестирования скорости сайта
Популярные инструменты для тестирования скорости сайта имеют схожий пользовательский интерфейс и визуализацию данных, но это не означает, что информация, которую они предоставляют, одинакова.
Например, вы можете использовать один инструмент для проверки основных веб-показателей. Другой для тестирования вашего сайта из разных мест. Третий для проверки каскадной диаграммы вашего сайта.
Несмотря на это, вот три вещи, с которыми вы не должны идти на компромисс при использовании инструмента тестирования:
Он должен служить вашей цели.
Должен иметь четкий и понятный пользовательский интерфейс.
Он должен предоставить вам полезную информацию.
И вот наши 3 лучших выбора, которые могут предоставить вам все это.

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

1. Google PageSpeed Insights

Первым в нашем списке стоит Google PageSpeed Insights. PSI уже много лет является популярным инструментом для тестирования скорости сайта.
Он имеет очень интуитивно понятный дизайн, что делает его одинаково простым в использовании как новичками, так и разработчиками.
Как его эффективно использовать
Страница отчета разделена на разделы, начиная с оценки Core Web Vitals.

Используйте данные о реальном опыте пользователей, чтобы оценить, насколько хорошо ваши посетители воспринимают ваш веб-сайт.
Далее идут оценка производительности PSI, а также оценки доступности, лучших практик и SEO.
Поскольку они основаны на лабораторных данных, их можно использовать для тестирования и отладки.
В нижней части отчета PageSpeed Insights вы найдете панель «Возможности и диагностика», где перечислены все предложения по улучшению.
Плюсы и минусы PageSpeed Insights
Pro: инструмент для тестирования скорости, разработанный Google
Pro: лучший способ мониторинга Core Web Vitals
Pro: детализированные данные и информативные предложения по улучшению 900 03
Кон : нет анализа каскадной диаграммы
Против: невозможно изменить местоположение, из которого тестировался ваш сайт
Резюме
Мы считаем, что PSI — это инструмент для тестирования скорости, который каждый должен добавить в свой арсенал.
Используйте PSI для: Мониторинга Core Web Vitals и устранения проблем со скоростью сайта
Подходит для: Начинающих и опытных разработчиков
Лучшая функция: Оценка Core Web Vitals
Доступность: Бесплатно
900 02
Если вы’ Если вы хотите узнать больше об этом, перейдите к нашему руководству для начинающих о том, как использовать PageSpeed Insights.

2. WebPageTest

WebPageTest — это идеальный инструмент для мониторинга производительности вашего веб-сайта в глобальном масштабе, поскольку он позволяет проводить тестирование из разных мест, устройств и сетей.
Как эффективно использовать
Вы можете запускать тесты Site Performance, Core Web Vitals, Lighthouse, Visual Comparison и Traceroute.
Кроме того, вы можете выбрать один из двух режимов конфигурации:
Простой – 3 тестовых запуска из рекомендуемого местоположения и предустановок браузера
Расширенный – выбор из всех параметров браузера, местоположения и устройства
иметь техническое образование, чтобы получить от этого максимальную отдачу.
После запуска вашего сайта через WebPageTest вы получите полный отчет о производительности, который включает:
Сводка о производительности
Возможности и диагностика
Диафильм
Разбивка контента
Core Web Vitals
Водопадные диаграммы
Разбивка по доменам
9001 5 плюсов и минусов WebPageTest
Pro: возможность протестировать свой сайт из разных мест, браузеры и устройства
Pro: режим расширенной конфигурации позволяет использовать множество различных настроек
Pro: содержит детализированные данные и различные отчеты о производительности
Минусы: большое количество отчетов может ошеломить вас, если вы новичок
Минусы: вам потребуются технические знания, чтобы получить максимальную отдачу от расширенной конфигурации , а тот факт, что его можно использовать бесплатно, делает его еще лучше.
Единственная причина, по которой мы поставили его на второе место, заключается в том, что новичок может быть перегружен всеми отчетами. Однако, как только вы поймете, что стоит за всеми данными и что с ними делать, это будет совсем другая игра!
Используйте WebPageTest для: мониторинга производительности вашего сайта и его тестирования из разных мест, устройств и сетей
Подходит для: начинающих и опытных разработчиков
Лучшая функция: Тестирование из разных мест
Доступность: 900 16 бесплатно ( доступна версия Pro)
3. GTmetrix

GTmetrix — еще один известный инструмент для тестирования скорости, который «немного похож» на WebPageTest с точки зрения настроек конфигурации.
Как эффективно использовать
Базовая версия GTmetrix бесплатна, и вы можете получить доступ к нескольким параметрам, просто зарегистрировав учетную запись.
Вы можете выбрать из разных мест:
Даллас, США
Гонконг, Китай
Лондон, Великобритания
Мумбаи, Индия
Сидней, Австралия
Сан-Паулу , Бразилия
Ванкувер, Канада
Дополнительные параметры включают возможность создания видео, которое поможет вам отладить проблемы, поскольку вы можете видеть, как отображается страница. И функция AdBlock отлично подходит, если вы используете стороннюю рекламную сеть и хотите увидеть полное влияние рекламы на время загрузки.
Кроме того, вы можете отправить файл cookie вместе с вашим запросом, использовать HTTP-аутентификацию и возможность заносить URL-адреса в белый и черный списки.
Отчеты о производительности GTmetrix делятся на разные категории:
Сводка — включает общую оценку и отчет Core Web Vitals (на основе лабораторных данных).
Производительность — показывает несколько различных показателей, полученных из данных о производительности Lighthouse.
Структура — Вкладка, на которой вы найдете список конкретных проблем, влияющих на производительность вашего сайта.
Каскадная диаграмма — отображает все отдельные запросы на вашей веб-странице.
Видео — автоматически записывает встраиваемое видео, показывающее, как загружается страница для каждого теста производительности. (платная функция)
История — включает все ваши прошлые тесты производительности.

Плюсы и минусы GTmetrix
Pro: Удобный пользовательский интерфейс
Pro: Многочисленные отчеты о производительности
Pro: Возможность протестировать сайт из разных мест
Минусы: Вы не можете запускать мобильные тесты, если у вас нет платной подписки
Минусы: The Core Web Отчет о жизненно важных показателях основан на лабораторных данных
Минусы: вам нужна платная подписка, чтобы разблокировать все функции
Сводка
В целом, это хороший, всесторонний инструмент для тестирования скорости сайта, который стоит попробовать.
Используйте GTmetrix для: Тестирование и устранение проблем со скоростью сайта
Подходит для: Новичков
Лучшая функция: Вкладка «История»
Доступность: Бесплатные, но ограниченные функции (доступна версия Pro)
Сокрушите каждый тест скорости сайта! Посмотрите, насколько быстрым может быть ваш сайт с NitroPack →
Выходя за рамки тестирования
Регулярное тестирование производительности вашего сайта — это половина дела.
Если вы действительно хотите достичь «времени загрузки 1,65 секунды» и присоединиться к результатам первой страницы Google и ко всему, что связано с быстрой загрузкой сайта, вам нужно запачкать руки.
Другими словами, вам нужно действовать в соответствии со всеми предложениями по улучшению, которые вам предлагают PSI, WebPageTest и GTmetrix.
А вот что:
Некоторые возможности улучшения могут быть сложными и требовать работы разработчиков. Тем не менее, большинство из них можно легко исправить с помощью правильного набора инструментов.
С учетом сказанного, вот список инструментов, которые могут помочь вам на этом пути:

Лучшие инструменты для оптимизации изображений
Снова и снова доказано, что изображения повышают вовлеченность пользователей. Однако, если они не оптимизированы, они могут сильно повредить вашему показателю «Самая большая содержательная отрисовка» (LCP) и замедлить время загрузки вашей страницы.
Хотя существует множество отличных плагинов, которые могут автоматически оптимизировать ваши изображения, если вы предпочитаете одноразовые решения, вы также можете положиться на онлайн-инструменты:

1. Сжатие JPEG

Compress JPEG — это онлайн-инструмент, который сжимает файлы JPEG, PNG, GIF и PDF.
Независимо от типа файла, Compress JPEG применяет сжатие с потерями.
Как эффективно использовать
Это простой процесс.
Загрузите файл, затем инструмент автоматически определит идеальную степень сжатия и оптимизирует ее.

Если у вас все в порядке с коэффициентом сжатия, вы можете сразу загрузить его. Если нет — можно вручную настроить.
Как только вы будете довольны результатами, вы можете загрузить его.
Плюсы и минусы сжатия JPEG
Pro: Простой процесс
Pro: Удобный пользовательский интерфейс
Pro: Мгновенные результаты
Con: Сжатие с потерями снижает как размер, так и качество оптимизированного изображения
Резюме
Сжатие JPEG — идеальное решение для оптимизации визуальных элементов вашего сайта. В нем есть все, что вы ожидаете от онлайн-инструмента для оптимизации изображений.
Используйте сжатие JPEG до: Уменьшите размер изображений
Подходит для: Начинающих
Лучшая функция: Простой в использовании пользовательский интерфейс
Наличие: Бесплатно
2. Оптимизатор JPEG

Оптимизатор JPEG — это онлайн-инструмент для сжатия и преобразования изображений.
Как эффективно использовать
Загрузите файл (только в формате JPEG) и настройте нужные параметры перед началом процесса оптимизации.
Вы можете настроить качество изображения после оптимизации, установить значение максимального размера и изменить размер сжатого изображения.
Когда вы закончите, просто нажмите Сжать и Загрузить все .
Плюсы и минусы JPEG Optimizer
Pro: Удобный пользовательский интерфейс
Pro: Доступны настройки оптимизации
Pro: Возможность преобразования оптимизированного изображения в другой формат
Минусы: Вы можете загружать изображения только в формате JPEG
Резюме
Оптимизатор JPEG — отличный инструмент для оптимизации изображений. Что отличает его от двух других вариантов, так это количество настроек, которые вы можете настроить перед запуском оптимизации. И то, что вы можете конвертировать изображения в другой формат.
Используйте JPEG Optimizer для: Уменьшения размера изображений JPEG
Подходит для: Начинающих
Лучшая функция: Четыре настройки оптимизации
Наличие: Бесплатно
9 0015 3. TinyPNG

Несмотря на то, что в названии есть png, TinyPNG не ограничивается оптимизацией PNG-файлов. Вы также можете сжимать файлы WebP и JPEG.
Как эффективно использовать
Оптимизация изображений не может быть проще.
После загрузки изображения и запуска оптимизации вы увидите размеры до и после и возможность загрузить изображение:
Вот и все!
Плюсы и минусы TinyPNG
Pro: Простой процесс оптимизации
Pro: Может оптимизировать изображения WebP и JPEG вместе с PNG
Минусы: Сжатие с потерями уменьшает размер и качество оптимизированного изображения
Минусы: Может не настраивать параметры оптимизации вручную
Резюме
Очень эффективный и простой в использовании инструмент для оптимизации изображений. Вот почему это один из самых используемых инструментов. К сожалению, он не предоставляет настройки оптимизации, поэтому у вас нет никакого контроля над результатом.
Используйте TinyPNG, чтобы: Уменьшить размер изображений PNG, JPEG и WebP
Подходит для: Начинающих
Лучшая функция: Простой процесс оптимизации
Наличие: Бесплатно

Сделайте это автоматически: Установив NitroPack, вы получаете все наши расширенные функции оптимизации изображений. Это включает в себя автоматическое применение сжатия с потерями, преобразование всех изображений в WebP и обеспечение идеального соответствия изображений их контейнерам.
Оптимизируйте изображения на автопилоте! Посмотрите, насколько быстрым может быть ваш сайт с NitroPack →

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

1. CSS Minify

Как следует из названия, CSS Minify оптимизирует CSS вашего сайта путем минимизации.
Как эффективно использовать
Вы можете вставить свой код, ввести URL своего сайта или загрузить файл. После этого инструмент начнет оптимизировать ваш код, удалив пробелы, отступы, новые строки и комментарии.
Вот оно!
В некоторых случаях ваш код может стать на 20% меньше после минификации, что приведет к ускорению загрузки.
Плюсы и минусы CSS Minify
Pro: Простота использования
Pro: Различные варианты загрузки кода
Против: придется делать это вручную
Резюме
CSS Minify — это простой в использовании инструмент оптимизации кода, который выполняет свою работу.
Используйте CSS Minify для: Минимизации CSS вашего сайта
Подходит для: Опытные владельцы сайтов
Лучшая функция: Простой процесс оптимизации
Доступность: Бесплатно
2. Улучшение и уменьшение CSS

CSS Beautifier & Minifier работает аналогично нашему предыдущему предложению.
Как эффективно использовать
Просто вставьте свой код, загрузите файл или введите URL своей страницы. Затем инструмент автоматически начинает оптимизировать ваш код. Затем все, что вам нужно сделать, это скопировать и вставить его обратно на свой сайт.
Плюсы и минусы CSS Beautifier & Minifier
Pro: Простота в использовании
Pro: Различные варианты загрузки кода0003
Резюме
CSS Beautifier & Minifier основан на том, что делают другие наши инструменты оптимизации CSS, украшая ваш код и минимизируя его.
Используйте CSS Beautifier & Minifer для: Оптимизации CSS-файла вашего сайта
Подходит для: Опытных владельцев сайтов
Лучшая функция: Комбинация опции улучшения и минимизации кода
Доступность: Бесплатно 9000 3
3. Оптимизатор CSS

CSS Optimizer — это инструмент для минимизации кода, который больше подходит для опытных пользователей, поскольку предоставляет длинный список параметров оптимизации.
Как использовать его эффективно
Процесс загрузки стандартный — вы можете вставить свой код или ввести URL-адрес, но затем вы можете выбрать один из многочисленных вариантов:
Если вам неудобно ориентироваться через все варианты, мы рекомендуем вам обратиться за помощью к разработчику. В противном случае вы рискуете сломать код своего сайта.
Плюсы и минусы Оптимизатора CSS
Плюсы: Простота использования
Плюсы: Большое количество вариантов оптимизации кода
Минусы: Приходится делать это вручную разработчик, если у вас нет технических навыков
Резюме
Оптимизатор CSS — самое мощное решение из всех перечисленных в этой категории. Однако богатый список настроек оптимизации требует от вас технической подготовки.
Используйте CSS Optimizer для: Оптимизации файла CSS с помощью различных настроек
Подходит для: Продвинутых пользователей
Лучшая функция: Длинный список настроек оптимизации
Доступность: Бесплатно
90 412 Сделать это автоматически: Используя NitroPack, вы автоматически оптимизируете свои CSS-файлы. Это включает в себя критический CSS, сокращение неиспользуемого CSS, а также минимизацию и конкатенацию.

Лучшие инструменты оптимизации HTML
В прошлом году Google объявил, что Googlebot будет сканировать до первых 15 МБ HTML-кода страницы, а затем останавливаться.
Хотя веб-страница в формате HTML размером 15 МБ немыслима, это не означает, что все, что меньше этого порога, допустимо.
Если ваша цель — сайт с быстрой загрузкой, ваш код должен быть максимально компактным.
И эти инструменты помогут вам в этом:

1. Toptal HTML Minifier

Это довольно простой инструмент HTML Minifier and Compressor.
Как эффективно использовать
Все, что вам нужно сделать, это вставить HTML-код вашей страницы. Затем инструмент сожмет его и удалит ненужные части, такие как пробелы и комментарии.
Плюсы и минусы Toptal HTML Minifier
Плюсы: Простота использования
Плюсы: Мгновенная оптимизация код вашего сайта
Резюме
Toptal HTML Minifier — отличный, простой в использовании инструмент, который минимизирует и сжимает HTML-код вашего сайта. Если у вас нет технического опыта, мы рекомендуем доверить разработчику оптимизацию HTML вашего сайта с помощью этого инструмента.
Используйте Toptal HTML Minifier для: Сокращения и сжатия файлов HTML
Подходит для: Опытных владельцев веб-сайтов
Лучшая функция: Простой процесс оптимизации
Доступность: Бесплатно
2. Минификатор HTML
Минификатор HTML прогоняет вашу разметку через серию регулярных выражений, написанных на PHP, для оптимизации вашего кода.
Как его эффективно использовать
Опять же, это простой процесс — скопируйте и вставьте свой код и нажмите «Minify». Вот и все.
Плюсы и минусы HTML Minifier
Pro: Простота использования
Pro: Мгновенная оптимизация
Минусы: придется делать это вручную
Минусы: нужно нанять разработчика, если вам неудобно настраивать код вашего сайта
Резюме
HTML Minifier настолько прост, насколько это возможно. Опять же, настройка вашего кода — это не шутки, поэтому, если у вас есть какие-либо проблемы с использованием этого инструмента, лучше позвонить разработчику.
Используйте HTML Minifier для: Сокращения и сжатия файлов HTML
Подходит для: Опытных владельцев веб-сайтов
Лучшая функция: Простой процесс оптимизации
Наличие: Бесплатно
3. Код Beautify

900 02 Code Beautify уменьшит ваш HTML-код и избавится от некоторых КБ.
Как эффективно использовать
Вставьте свой код, загрузите файл или введите URL своей страницы. Затем нажмите «Minify». Готово!
Да, это так просто!
Плюсы и минусы Code Beautify
Pro: Простота использования
Pro: Мгновенная оптимизация
Pro: Несколько вариантов загрузки HTML
Минусы: Приходится делать это вручную
Минусы: Необходимо нанять разработчика, если вам неудобно настраивать код вашего сайта
Резюме
Code Beautify превосходит два других предложения, предлагая еще два варианта загрузки кода. Кроме того, это работает так же.
Используйте Code Beautify, чтобы: минимизировать файлы HTML
Подходит для: Опытные владельцы веб -сайтов
Лучшая функция: Различные варианты загрузки HTML
Доступность: БЕСПЛАТНО

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

Лучшие поставщики CDN
Все ваши посетители за пределами хостинга вашего сайта сообщают, что загрузка страницы занимает целую вечность? Вам нужна сеть доставки контента (CDN).
CDN состоит из множества географически распределенных серверов в разных местах по всему миру. Его основная задача — сократить физическое расстояние между вашим посетителем и веб-сервером, что приведет к ускорению загрузки.
И это одни из лучших вариантов для вашего изучения:
1. Cloudflare

CloudFlare является одним из ведущих поставщиков CDN в мире. Им доверяют такие компании, как IBM, L’Oreal и Garmin.
Их сеть CDN — одна из самых быстрых на планете: достигает 95% населения мира примерно за 50 мс .
Их серверы расположены в 275 городах в более чем 100 странах мира , что означает, что вы будете рядом со своими клиентами независимо от их местонахождения.
Встроенная CDN NitroPack предоставляется Cloudflare. Получите 2 решения по цене 1 →
2. Amazon CloudFront

Amazon CloudFront — это сервис сети доставки контента (CDN), созданный для обеспечения высокой производительности, безопасности и удобства для разработчиков.
Это может помочь вам сократить задержку в сети за счет доставки данных через 450+ точек присутствия (PoPs) , расположенных по всему миру, с автоматическим отображением сети и интеллектуальной маршрутизацией.
Компании, которые доверяют CloudFront, включают Hulu, Slack, Reuters и другие.

3. KeyCDN

KeyCDN — это высокопроизводительная сеть доставки контента, позволяющая быстро доставлять контент вашим пользователям.
Покрытие включает 60+ центров обработки данных в 40+ странах на 6 континентах.
Некоторые из крупнейших компаний мира предоставляют свой контент через глобальную сеть KeyCDN — Intel, Sennheiser и GoDaddy.
Все включено: Установка NitroPack означает, что вы получаете доступ к более чем 35 ведущим в отрасли функциям оптимизации веб-производительности и встроенной CDN, предоставляемой Cloudflare. Все включено в цену.

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

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

2. Остерегайтесь скрытых затрат
Все бесплатные онлайн-инструменты для оптимизации скорости сайта в конце концов могут быть платными.
Если у вас нет технических навыков для управления кодом вашего сайта, обновлять его в одиночку рискованно. Следовательно, вам нужно будет нанять разработчика, который может сделать это за вас.
С другой стороны, установка нескольких плагинов для повышения скорости сайта может показаться заманчивой, если вы используете одну из популярных систем управления контентом, например WordPress.
Но помните — это палка о двух концах.
В конечном итоге вы можете столкнуться с проблемами совместимости, раздутыми базами данных и значительным увеличением HTTP-запросов.
Проще говоря, вместо ускорения вашего сайта вы добьетесь обратного.

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

Все-в-одном, бесплатные решения или несколько плагинов
Использование бесплатных онлайн-инструментов или установка нескольких плагинов — не единственные варианты оптимизации скорости сайта.
Есть и третий способ — полагаться на мощное универсальное решение, такое как NitroPack.
NitroPack — это облачное решение для оптимизации веб-производительности, которое объединяет более 35 функций скорости сайта:
Расширенное кэширование
Оптимизация изображений
Оптимизация HTML, CSS, JavaScript
Встроенный глобальный CDN
И больше.