Содержание

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

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

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

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

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

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

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Как скорость влияет на SEO

Как я уже говорил в самом начале, скорость напрямую влияет на ранжирование сайтов – об этом Google сообщил еще в 2010 году. Сейчас этот параметр стал еще важнее, и вот почему:

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

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

Быстрый сайт – это какой?

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

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

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

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

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

  1. скорость работы сервера, где хранятся файлы сайта;
  2. программная часть самого ресурса.

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

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

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

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

  • Оптимизация веб-шрифтов. Используйте формат WOFF2 для современных браузеров. Предварительная загрузка позволит уведомить браузер, когда загружать файл шрифта. Функция отображения шрифтов обеспечивает гибкий способ управления поведением браузера в случае задержки загрузки файла.
  • Оптимизация изображений – загрузка объемных изображений приводит к тому, что сайт загружается существенно медленнее, а иногда и настолько медленно, что приходится ждать 15-30 секунд. Решить это можно с помощью специальных программ, которые уменьшат размер картинки. Подобные сервисы приведут к сжатию без потери качества, так что пользователи даже не заметят разницы.
  • Сжатие данных – код страницы должен быть максимально простым и оптимизированным. Уберите неудобные конструкции, замените их более простыми вариантами. Помните, что компрессия данных ускорит работу ресурса и не даст потерять потенциальных клиентов. Используйте статическое сжатие, чтобы сервер предоставлял пользователям последнюю сжатую версию вашего сайта.

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

Сервисы для измерения скорости загрузки сайта

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

Google PageSpeed Insights

Популярный SEO-инструмент, который определяет время загрузки страниц на мобильных устройствах и десктопах, а также дает рекомендации по оптимизации кода. Загрузка имитируется с помощью технологии Lighthouse. Дополнительно ко всему в отчете используются данные наблюдений – например, как тестируемая страница загружалась в Chrome у других пользователей.

Ссылка на сервис: Google PageSpeed Insights

Pingdom Tools

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

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

Ссылка на сервис: Pingdom Tools

GTmetrix

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

Ссылка на сервис: GTmetrix

UpTrends

Free Website Speed Test — бесплатный инструмент внутри еще одной платформы для мониторинга сайтов, приложений и серверов.

UpTrends предоставляет для теста 9 локаций в США, Австралии, Европе и Азии. Плюс можно указать размер экрана, тип соединения и браузер, измерить скорость не только на ПК, но и на мобильных устройствах. Также можно подключить регулярный мониторинг проектов, но за это придется платить $11 в месяц.

Ссылка на сервис: UpTrends

PR-CY

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

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

Ссылка на сервис: PR-CY

Web Page Test

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

Еще один интересный инструмент внутри WebPageTest – Visual Comparison. Он позволяет анализировать время загрузки сразу нескольких сайтов.

Ссылка на сервис: Web Page Test

Sitespeed

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

Ссылка на сервис: Sitespeed

Заключение

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

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

Открываю сайт, скорость загрузки низкая. На второй секунде начинаю испытывать нетерпение, на четвертой — злиться, на пятой — закрываю и ухожу к конкурентам. И это не только я, но и типичный интернет-пользователь в 2021 году: по данным Unbounce, почти 27% уходят после 3 секунд, еще 32,3% уйдут через 6 секунд.

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

  • Что такое скорость загрузки сайта
  • Скорость загрузки сайта и ранжирование
  • Скорость загрузки и конверсия
  • Сервисы для измерения скорости загрузки сайта
  • Lighthouse
  • PR-CY
  • Pingdom Tools
  • GTmetrix.com
  • Uptrends.com
  • Web Page Test
  • Dotcom-Monitor
  • Как увеличить скорость загрузки сайта
  • org/ListItem»> Зависимость скорости сайта от хостинга
  • Скорость загрузки динамических и статических сайтов
  • CDN
  • Влияние картинок на скорость загрузки сайта
  • Влияние стилей на скорость загрузки сайта
  • Скрипты и скорость загрузки сайта
  • Сторонние скрипты и скорость сайта
  • Сжатие кода и скорость загрузки сайта
  • Скорость загрузки сайта: что стоит запомнить

Что такое скорость загрузки сайта

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

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

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

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

Скорость загрузки сайта и ранжирование

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

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

Вот эти три показателя:

  1. Отрисовка основного контента (Largest Contentful Paint, LCP) — время, за которое на видимой части страницы отрисовывается самый большой по площади элемент. Например, самый крупный блок текста, видео или большая картинка. Нужно учитывать, что самый большой элемент может быть разным при просмотре с разных устройств: например, с большого экрана компьютера и маленького экрана смартфона. К тому же пользователь может перейти на ваш сайт по якорной ссылке и попасть не в начало страницы, а сразу дальше. Каждый из этих сценариев — это разная скорость загрузки. Идеальный показатель LCP — до 2,5 секунды.
  2. Задержка первого ввода (First Input Delay, FID) — это время с момента первой попытки пользователя взаимодействовать с сайтом до момента, когда интерфейс сайта фактически способен обработать это взаимодействие. Идеальный показатель FID — до 100 милисекунд.
  3. Совокупное смещение макета (Cumulative Layout Shift, CLS) — определяет визуальную стабильность страницы. Например, вы читаете статью, а текст внезапно смещается вниз, потому что выше наконец прогрузился какой-то баннер и подвинул весь контент. Если бы баннер загрузился быстрее или его размер был запрограммирован заранее, такого бы не случилось. CLS измеряется не временем, а как коэффициент таких смещений. Идеальный показатель CLS — до 0,1.

Простой, но мощный конструктор лендингов

Создайте мобильный лендинг, интернет-магазин или мультиссылку для Instagram и продвигайте ее через чат-боты в мессенджерах, email и SMS — все это на одной платформе!

Создать лендинг

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

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

Google и Deloitte провели исследование, в котором увеличили скорость загрузки мобильных сайтов в разных сферах на 0,1 секунды. На скриншоте ниже показано, как изменилась при этом конверсия на разных стадиях воронки продаж в сфере розничной торговли. Количество оплаченных заказов при этом суммарно увеличилось на 5,2%.

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

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

  • Оператор мобильной связи Vodafone улучшил свои Web Vitals на треть, и это привело к росту продаж на 8%.
  • Мебельная компания Hoff ускорила мобильную версию сайта на 60%, и конверсия в покупку в мобайле выросла на 15%.

Сервисы для измерения скорости загрузки сайта

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

Lighthouse

Lighthouse запускается прямо из панели разработчика в некоторых браузерах

Инструмент от Chrome, который проверяет скорость загрузки сайта на базе показателей Core Web Vitals. Lighthouse запускается из панели разработчика во всех браузерах на базе движка Chromium — Chrome, Opera, Edge и «Яндекс.Браузер». Вам нужно открыть страницу для проверки, открыть панель инструментов разработчика и перейти на вкладку Lighthouse, она может быть либо отдельным пунктом, либо на вкладке Audits.

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

Google PageSpeed Insights

PageSpeed Insights — онлайн-версия инструмента LightHouse

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

PR-CY

Российский сервис по проверке скорости загрузки сайтов

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

Pingdom Tools

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

Это англоязычный сервис, русского интерфейса нет. Сервера, с которых идет проверка скорости, расположены в Азии, Европе, Америке и Австралии, русских и украинских нет.

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

GTmetrix.com

Отчет по скорости загрузки сайта от GTmetrix

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

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

Uptrends.com

Тест скорости сайта с помощью Uptrends

Приятный интерфейс, анализ скорости ведется с помощью Lighthouse. Российских и украинских серверов для проверки нет, есть Азия, Европа, Америка и Австралия.

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

Web Page Test

Тройная проверка скорости сайта от Web Page Test

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

Dotcom-Monitor

Тест скорости сайта из трех локаций от Dotcom-Vonitor

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

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

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

Зависимость скорости сайта от хостинга

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

Как узнать время ответа сервера. Показатель может называться либо TTFB (time to first bite), либо «время ответа сервера», либо «ожидание сервера».

  1. Если пользуетесь одним из сервисов из подборки выше — ищите его либо как отдельную цифру в отчете, либо смотрите на водопадных диаграммах. На диаграмме сразу видно, какой сервер долго отдает информацию.
    Сервис UpTrends указывает время ожидания ответа сервера как Wait
  2. В отчетах систем аналитики. В «Google Аналитике» это отчет «Скорость загрузки сайта», в «Яндекс.Метрике» — «Стандартные отчеты» / «Мониторинг» / «Время загрузки страниц». Здесь важно смотреть не только на показатели, но и на динамику — если время ответа растет, это плохо.
  3. В инструментах разработчика в браузере. В Chrome, Mozilla и Opera они открываются сочетанием Ctrl+Shift+I. Откройте их на новой вкладке, найдите там раздел Network («Сеть») и на этой же вкладке идите на нужный сайт. В водопадной диаграмме наведите на цветную часть у нужного элемента и там увидите расшифровку. Будет хорошо перед этим поставить галочку Disable cache на той же вкладке и открывать в режиме инкогнито, чтобы результаты были чистыми.
    В отчете Lighthouse в инструментах разработчика ответ сервера обозначен как Waiting (TTFB)

Какое время ответа считать хорошим? Google ранее заявлял, что время ответа сервера не должно превышать 0,2 секунды — такая рекомендация появлялась в результатах проверки PageSpeed Insights. В новой версии инструмента этой нормы нет.

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

  • Shared хостинг — хостинг с разделяемыми ресурсами. Самый простой дешевый и непредсказуемый вариант. На одном физическом серверном компьютере размещается множество сайтов разных клиентов в пределах одной операционной системы. Как правило, все вычислительные ресурсы доступны всем сайтам без какого-либо их резервирования, а уровень изоляции сайтов одного клиента от сайтов других клиентов минимальный. Это значит, что вычислительные ресурсы получает сайт, который первым их запросил. То есть один сайт с большой нагрузкой может забирать большинство ресурсов сервера, а остальные сайты на этом сервере в такие моменты будут работать медленно.
  • VDS/VPS — виртуальный выделенный сервер, хостинг с виртуализацией операционных систем. На одном физическом серверном компьютере каждый клиент получает виртуальный компьютер со своей отдельной виртуализированной операционной системой и определенный объем зарезервированных вычислительных ресурсов. Этот вариант позволяет получить более предсказуемые и стабильные результаты и довольно высокий уровень изоляции сайтов друг от друга при более высокой стоимости. Но все еще возможны ситуации, когда чрезмерная нагрузка на сайт одного клиента влияет на работу сайта другого клиента, правда уже в меньшей степени.
  • Dedicated Server — выделенный сервер. Самый дорогой и стабильный вариант. На одном физическом серверном компьютере размещаются сайты одного клиента. Все вычислительные ресурсы доступны в полном объеме все время.

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

Скорость загрузки динамических и статических сайтов

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

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

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

Все это требует определенный объем ресурсов сервера: мощность процессора, количество оперативной памяти. На дешевом/медленном хостинг-сервере с ограниченными вычислительными ресурсами это может занять много времени и будет большой TTFB. И чем больше одновременных запросов, то есть просмотров страниц, серверу нужно обработать, тем медленнее он будет это делать. Если запросов станет слишком много, то часть посетителей может вовсе не получить в ответ страницу сайта. Вместо нее посетители увидят ответ сервера с ошибкой обработки запроса или сообщение браузера о том, что сервер не отвечает.

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

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

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

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

  • Pelican,
  • Jekyll,
  • Hugo.

CDN

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

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

Влияние картинок на скорость загрузки сайта

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

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

  • IloveIMG,
  • Optimizilla,
  • ResizePixel.

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

  • ShortPixel Adaptive Images,
  • Optimole,
  • Smush,
  • EWWW Optimizer.

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

Гиф-анимацию лучше перевести в формат WebM. Этот формат специально разработан для HTML5, его поддерживают браузеры Chrome, Mozilla, Opera, Edge и «Яндекс.Браузер».

Настроить отложенную загрузку, она же lazy load. Эта технология будет подгружать картинки и видео постепенно, когда будет их очередь появиться на экране. Сайт просто будет грузиться сверху вниз.

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

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

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

Влияние стилей на скорость загрузки сайта

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

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

Все стили, которые отвечают за отрисовку стартового экрана, входят в критический CSS

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

  • онлайн-сервис Critical Path CSS Generator,
  • JavaScript-инструмент Critical,
  • JavaScript-инструмент CriticalCSS,
  • плагин JCH Optimize для сайтов на Joomla, WordPress, Drupal, Magento.

Учтите, что нет смысла выносить в HTML-файл все стили. Во-первых, эти стили не кешируется, а во-вторых, это утяжелит файл HTML.

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

Подробнее можно изучить вопрос в инструкции от разработчиков Google.

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

Скрипты и скорость загрузки сайта

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

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

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

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

Сторонние скрипты и скорость сайта

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

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

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

Добиться эффекта независимой загрузки можно с помощью атрибутов async и defer:

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

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

Оптимизация шрифтов для скорости сайта

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

Выбрать современный, сжатый формат шрифта — WOFF или WOFF2. Google предлагает такую схему:

  • WOFF 2.0 для браузеров, которые его поддерживают.
  • WOFF для большинства остальных браузеров
  • TTF (сжать в gzip) для мобильных телефонов на Android 4.4 и ниже.
  • EOT (сжать в gzip) для старых версий Internet Explorer (IE9 и старше).

Разбить шрифт на группы (кириллица, латиница, цифры, спецсимволы) с помощью свойства unicode-range и подгружать группы по мере необходимости. Разбить можно с помощью онлайн-сервисов, например, FontSquirrel.

При подключении веб-шрифтов не забывайте указывать безопасный шрифт после выбранного. Пока браузер загружает ваш шрифт, текст будет отображен безопасным, и если его не указать, текст просто не будет виден какое-то время. Безопасные шрифты — это те, которые отображаются в любом браузере, на любом устройстве и в любом почтовом клиенте: Times New Roman, Arial, Verdana и другие. Полный список и инструкция по использованию есть в статье, приведенной ниже.

Статья по теме: «Выбираем шрифты для письма: стильные, уместные, безопасные».

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

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

Сжатие кода и скорость загрузки сайта

Все готовые файлы для сайта нужно обработать:

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

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

Вот какие сервисы и инструменты можно использовать:

  • Для HTML — HTML Minifier, Kangax HTML Minifier.
  • Для JS — UglifierJS, JSMin, Closure Compiler, YUI Compressor, minifier.org.
  • Для CSS — CSSO, YUI Compressor, minifier.org, CSSNano.

Скорость загрузки сайта: что стоит запомнить

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

Скорость загрузки сайта зависит от нескольких факторов:

  • Архитектура инфраструктуры — хостинг, CDN, CMS.
  • Оптимизация кода — HTML, JS и CSS.
  • Оптимизация контента — изображений, видео и шрифтов.

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

13 лучших инструментов – Блог TRINET

Содержание

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

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

  • уменьшает количества отказов
  • увеличивает глубину просмотра
  • увеличивает время изучения сайта

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

Что важно измерять и какие инструменты для этого нужны:

Оценка от Google — формальный параметр оценки скорости загрузки сайта в пожалуй самом популярном сервисе PageSpeed Insights. Многие другие сервисы работают по тому же принципу и мало чем друг от друга отличаются, например: Seolik. ru, Pr-cy.ru, Uptrends, Pingdom Tools. Наиболее информативным из всех на наш взгляд является Gtmetrix. Все эти сервисы дают советы и рекомендации по улучшению сайта, чтобы он загружался быстрее.

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

Для проверки времени ответа сервера можно использовать панель вебмастера Яндекс.

Порядок работы через Яндекс.Вебмастер:

  1. Заходим в систему https://webmaster.yandex.ru/
  2. Нажимаем “Инструменты” в правом верхнем углу
  3. Переходим “Проверка ответа сервера” https://webmaster.yandex.ru/tools/server-response/
  4. Проверяем время ответа сервера в миллисекундах

Хорошим ответом является менее 1000 мс, что равнозначно 1 сек.

Порядок работы через Google Chrome

  1. Заходим в браузер
  2. Переходим на страницу, на которой хотим измерить скорость ответа сервера
  3. Нажимаем правой кнопкой мыши
  4. Выбираем пункт “Посмотреть код”
  5. В открывшемся окне выбираем вкладку “Network”
  6. Нажимаем кнопку Ctrl+F5
  7. Chrome показывает на диаграмме Ганта, как загружаются все части сайта.

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

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

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

Время полной загрузки (время до загрузки DOM) — это время, за которое загрузился весь контент страницы — картинки, скрипты, CSS, и т. п.

Для больших международных сайтов важна скорость загрузки из разных точек мира, а не одной локальной страны. Для этого можно воспользоваться следующими сервисами: Sitespeed.me — 7 точек, GiftofSpeed — 8 точек, Dotcom-Monitor — 25 точек (тестирует скорость загрузки при первом визите и при повторном).

Также для больших проектов важно понимать, как будет меняться скорость загрузки с увеличением нагрузки на сервер для этого есть сервис Load Impact.

Проверка скорости по отчетам из веб-аналитики

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

Проверка скорости через сервис Яндекс.Метрика

Для этого нужно:

  1. Зайти в Метрику
  2. Выбрать интересующий сайт
  3. Нажать: Отчёты — Стандартные отчёты — Мониторинг — Время загрузки страниц.

Какую полезную статистику можно получить из этих данных?

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

Проверка скорости через сервис Google Analytics

  1. Зайти в Analytics
  2. Выбрать нужный сайт
  3. Нажать Отчеты — Поведение — Скорость загрузки сайта

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

Время ответа сервера

Для уменьшения времени ответа сервера рекомендуем сделать следующие действия:

  1. Выбрать надежного хостера с мощными серверами и хорошим каналом связи;
  2. Арендовать выделенный сервер;
  3. Использовать кэширование страниц;
  4. Оптимизировать базы данных;
  5. Использовать кэширование скриптов;
  6. Не используйте обращения к сторонним серверам.

Кеширование

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

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

Картинки

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

Google PageSpeed Insights рекомендует использовать формат изображений WebP. Но такой формат не поддерживается сервисом Яндекс.Картинки. Если у вас тематика, связанная с большим трафиком из Яндекс.Картинок, мы рекомендуем использовать PNG и JPG. Их нужно максимально сжать без потери качества.

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

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

Скрипты и CSS

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

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

2. Соединить CSS в один файл, также для уменьшения количества потоков.

3. Google PageSpeed Insights также порекомендует свести скрипты в один файл, но это практически невозможно.

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

Обычная загрузка

Асинхронная загрузка

Отложенная загрузка

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

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

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

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

Чтобы понять выгодно это для вас или нет рекомендуем проводить тестирование. Подключить турбо страницы достаточно просто — через функционал Яндекс Вебмастер.

На позиции в Google использование турбо-страниц никак не влияет.

Значок отображает турбо страницу

Пример турбо для интернет-магазина

С AMP страницами немного другая картина. Технология AMP создана независимыми разработчиками и активно продвигается в Гугле. Эта технология улучшит скорость загрузки и ранжирование страниц именно в Google. Для некоторых CMS (например WordPress) есть плагины, которые могут автоматически формировать AMP страницы в других случаях придется прибегнуть к помощи разработчиков.

Итог

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

Время загрузки страниц — Метрика. Справка

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

Посмотреть отчет: Отчеты → Мониторинг → Время загрузки страниц.

Пример отчета можно увидеть на демосчетчике Яндекс Метрики.

Узнать среднее время загрузки сайта

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



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

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

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

  2. Выберите условие Просмотр URL и в строке укажите адрес страницы.

Чтобы увидеть динамику загрузки страницы, выберите диаграмму «Линии».



Проверить скорость загрузки Турбо-страниц сайта

Если на обычную версию и его Турбо-страницы установлен один счетчик Метрики, нужно выделить сегмент:

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

  2. Выберите условие Турбо.



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

Для этого используйте переключатель стран и показатели отчета, например Время до загрузки DOM.

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

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

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

Метрики в отчете соответствуют этапам загрузки страницы, а также показывают время загрузки.

  • DNS (обработка запросов к DNS) — время, потраченное на отработку запросов к DNS-серверу при загрузке страницы. Учитываются только значения с ненулевым временем.

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

  • Редиректы (обработка редиректов) — время, потраченное на отработку HTTP-переадресации при загрузке страницы. Учитываются только значения с ненулевым временем.

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

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

  • Ответ сервера — время, в течение которого был отправлен запрос и был получен ответ с содержимым страницы от HTTP-сервера к браузеру. Учитываются только значения с ненулевым временем.

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

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

    На этот параметр влияет размер и сложность (количество и вложенность тегов) HTML-страницы.

  • Время до загрузки DOM — то время от начала перехода на страницу до полной загрузки страницы со всеми ее компонентами (изображения, CSS, скрипты и т. п.). Это время, через которое страница становится доступна для взаимодействия с пользователем.

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

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

О том, как настроить отчет, смотрите в разделе Настройки отчета.

 Написать в чат

Обратите внимание: служба поддержки не обзванивает пользователей. Не следуйте указаниям людей, которые вам звонят и представляются службой поддержки Яндекс Метрики.

Зачем и как проверять скорость загрузки сайта? / Хабр

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



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

Гонка за покупателем

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

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

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

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

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

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

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

Простой пример:

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

Результаты поисковой выдачи по запросу «робот-пылесос купить» в регионе Москва

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

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

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

Факт

«70% пользователей с меньшей вероятностью совершат покупку (и маловероятно, что вернутся в будущем), если время загрузки дольше, чем ожидалось».

По данным опроса Unbounce

Как скорость влияет на SEO?

Скорость загрузки сайта — один из факторов ранжирования. Google сообщил об этом еще в 2010 году. Ну а к 2020-м гг. значимость показателя page speed только выросла. 

Быстродействие прямо влияет на SEO, и вот почему:

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

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

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

Какой сайт быстрый, а какой нет?

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

Задержка в 5-7 секунд еще допустима. Но если контент загружается более 10 секунд — нужно принимать меры.

64% пользователей ожидают, что страницы будут загружаться не более 4 секунд.

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

Как измеряется скорость?

Для проверки скорости сайта можно использовать доступные сервисы. Самый популярный из них — PageSpeed Insights от Google.

Пример работы сервиса PageSpeed Insights

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

Еще один инструмент от Google — сервис Lighthouse, встроенный в браузер Chrome. С его помощью удобно тестировать страницы, просто заходя на них и нажимая кнопку теста.

Для проверки скорости мобильной версии предназначен сервис Test My Site.

Альтернативные инструменты

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

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

  • GTmetrix;
  •  Pingdom Tools;
  •  WebPagetest;
  •  UpTrends;
  • Loading.express;
  • SiteSpeed.me.

Анализировать page speed можно и по отчетам веб-аналитики: в сервисах Яндекс.Метрика и Google Analytics. Здесь наглядно показывается, как соотносится скорость загрузки с отказами, конверсией и различными действиями пользователей.

Почему сайт медленный?

Быстродействие определяется двумя основными факторами:

  1. Скорость работы сервера, где хранятся файлы сайта.
  2. Программная часть самого ресурса.

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

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

Как «разогнать» сайт?

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

Код сайта

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

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

Всего лишь односекундная задержка загрузки сайта снижает конверсию на 7%!

Постоянный мониторинг page speed

Работа на ускорение сайта дает результаты в виде продвижения в ТОП, роста посещаемости и увеличения продаж. Нужно контролировать page speed и улучшать показатель, одновременно повышая качество и привлекательность ресурса для пользователей.

Как узнать скорость загрузки сайта: анализ, оценка, оптимизация

16.06.2017  Обзор сервисов и приложенийНет комментариев

(2 оценок, среднее: 5,00 из 5)

Загрузка…

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

Содержание:

  • Google Analytics
  • PageSpeed Insights
  • Консоль разработчика Google Chrome
  • GTmetrix
  • WebPage Analyzer
  • Pingdom
  • WebPagetest
  • Load Impact
  • WhichLoadFaster
  • Monitis Tools
  • PR-CY
  • Seo28
  • Выводы

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

Google Analytics

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

  1. Скорость загрузки ресурса, вычисляемая для определенной выборки просмотров страниц. С помощью данной выборки можно проанализировать, как изменяется скорость загрузки веб-страниц в зависимости от местоположения пользователей, операционной системы, браузера, разрешения дисплея и целого ряда иных параметров.
  2. Быстрота выполнения/загрузки для единичного запроса или действия. Например, можно определить скорость загрузки графического элемента (изображения, GIF-файла и т.п.) или время отклика на нажатие кнопки.
  3. Эффективность обработки документа на сайте и скорость предоставления этого файла пользователю.

Какие же действия необходимо выполнить для использования функционала Google Analytics?

  1. Необходимо завести аккаунт Google и авторизоваться в системе.
  2. Перейти по адресу www.analytics.google.com.
  3. Создать учетную запись для сайта, если ее нет.
  4. Выбрать соответствующее представление.

Интерфейс Google Analytics

  1. Во вкладке «Отчеты» кликнуть по пункту «Поведение».

Вкладка «Отчеты», пункт «Поведение» в Google Analytics

  1. Жмем по ссылке «Скорость загрузки сайта».

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

Подпункт «Время загрузки страниц в Google» Analytics

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

Дополнительные параметры подпункта «Время загрузки страниц»

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

Подпункт «Ускорение загрузки» в Google Analytics

Для новичков в Google Analytics присутствует подробное руководство по работе с ресурсом с удобным и функциональным поиском по ключевым словам.

Поиск по ключевым словам в Google Analytics

PageSpeed Insights

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

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

PageSpeed Insights отображает следующие результаты:

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

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

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

  • красный – выполнение рекомендаций приведет к изрядному повышению скорости загрузки;
  • желтый – простые исправления улучшат работу ресурса;
  • зелёный – проблем нет или они практически не отражаются на эффективности работы сайта.

Проверить реакцию любой интернет-страницы можно, перейдя по ссылке www.developers.google.com/speed/pagespeed/insights/. В строку поиска вставляем интересующий URL и жмем «Анализировать».

Анализ быстродействия сайта посредством PageSpeed Insights

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

Результаты анализа сайта по PageSpeed Insights

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

Консоль разработчика Google Chrome

Проверить скорость загрузки сайта можно также при помощи браузера Google Chrome и консоли отладчика. Для того чтобы выполнить проверку, зайдите на интересующий вас сайт и нажмите клавишу F12. После этого откроется окно разработчика — перейдите на вкладку «Network» и обновите страницу с помощью нажатия клавиши F5. По мере загрузки страницы можно будет увидеть перечень прогружаемых файлов (изображений, скриптов и т.п.), а также количество времени, которое потребовалось на загрузку того или иного элемента.

Анализ скорости сайта с помощью консоли разработчика Google Chrome

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

GTmetrix

С помощью зарубежного сайта GTmetrix можно проанализировать скорость страниц через Google PageSpeed и YSlow. Для проверки используется единый сервер, расположенный в Ванкувере. Эксплуатация ресурса аналогична: вставляем адрес и жмем «Analyze».

Интерфейс сервиса GTmetrix

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

Результаты проверки сайта посредством GTmetrix

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

Для продвинутых пользователей пригодится вкладка «Waterfall», на которой отображаются все файлы, найденные на странице и скорость их загрузки. Интерфейс вкладки весьма похож на интерфейс консоли разработчика в Google Chrome или инструмент Firebug Net Panel для Mozilla Firefox.

Кнопка «Download PDF» скачает на ПК отчет по сайту в формате PDF. Результаты тестирования можно сохранить, что дает возможность сравнить их с итогами тестов после внедрения исправлений.

WebPage Analyzer

Процесс проверки с помощью WebPage Analyzer является практически аналогичным предыдущим онлайн-сервисам — вставляем URL-адрес веб-ресурса и жмем кнопку «Отправить»:

Интерфейс онлайн-сервиса WebPage Analyzer

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

Статистика сайта по WebPage Analyzer

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

Объекты проверяемой страницы — WebPage Analyzer

После данной таблицы находятся подробные характеристики и рекомендации по исправлению ошибок:

Рекомендации по оптимизации файлов страницы WebPage Analyzer

Pingdom

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

Открываем адрес https://tools.pingdom.com/, вставляем ссылку на интересующий сайт, определяемся с сервером и кликаем «Start test».

Интерфейс онлайн-сервиса Pingdom

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

Показатели скорости загрузки сайта — Pingdom

Ниже в сводной таблице проверки отображаются данные по каждому запросу к серверу (java-скрипты, различные стили, медиафайлы и т. п.).

Перечень объектов страницы и время их загрузки — Pingdom

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

WebPagetest

Данный онлайн-инструмент позволяет проводить простые и расширенные тесты с указанием массы параметров:

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

Что же необходимо, чтобы проверить скорость ответа сайта?

  1. Для быстрой проверки кликаем по ссылке http://www. webpagetest.org и активируем вкладку «Simple Testing».
  2. Вставляем адрес ресурса в текстовую форму, указываем скорость соединения (мобильный интернет, 3G, высокоскоростное подключение) и жмем «Start test».

Интерфейс онлайн-инструмента WebPagetest

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

Результаты проверки сайта с помощью WebPagetest

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

Load Impact

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

Вставляем адрес ресурса и кликаем «Run free test»:

Load Impact — интерфейс сервиса

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

Результирующий график проверки нагрузки на сайт

WhichLoadFaster

Инструмент WhichLoadFaster предназначен для сравнения динамики загрузки двух сайтов, например, собственного и конкурирующего.

Проверка сайтов через сервис WhichLoadFaster

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

Сравнение сайтов с помощью WhichLoadFaster

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

Анализ каждого из двух сайтов отдельно — WhichLoadFaster

Monitis Tools

Анализирует посещение URL с серверов, расположенных по всему земному шару, показывая информацию о каждом соединении. Алгоритм проверки выглядит аналогично другим похожим сервисам — необходимо просто вставить URL и нажать кнопку “Start test”:

Интерфейс инструмента Monitis Tools

Это один из немногих сервисов, разгружающих себя от роботов благодаря использованию сервиса капчи для запуска теста. По окончанию проверки на экране отобразится отчет, где красным цветом на временной линии отображаются файлы, отрицательно влияющие на показатель скорости загрузки сайта. Испытать сервис можно по ссылке: http://www.monitis.com/pageload/.

Результаты проверки сайта через Monitis Tools

Проверка осуществляется с помощью трех различных местоположений серверов — США (United States), Европа (Europe), Азия (Asia/Pacific).

PR-CY

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

Вставляем ссылку в форму по URL http://pr-cy.ru/speed_test/ и кликаем «Анализировать».

Анализ веб-сайта с помощью PR-CY

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

Перечень ошибок и рекомендации по исправлению — PR-CY

Seo28

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

Проверка сайта посредством онлайн-инструмента Seo28

Также сервис предлагает постоянную ссылку на результаты проверки скорости ресурса.

Выводы

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

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

Автор статьи:

Олег Скрып

Руководитель компании ApollonGuru, ментор SEO-материалов vc.ru. В интернет-маркетинге с 2012 года. Люблю чтобы все было четко.

Будем признательны за каждый лайк:

Go Pro с WebPageTest

Сравнить планы

Стартовый план

запусков/мес:

1000 5000 10000 20000

1000 5000 10000 20000

План: Годовой Месячный

Цена Подпишитесь на бесплатный план Подпишитесь на профессиональный план
Ежемесячные тестовые прогоны 300 По плану
Места 30 40 *
Браузер Все Все
Скорость подключения Все Все
Диафильм и видео
Маяк Google
Трассировка
История испытаний 13 месяцев 13 месяцев
Приоритетные тесты
Доступ к API
Интеграция
Частные тесты
Массовое тестирование
Возможности
Эксперименты
Поддержка Форумы Специальная поддержка
Нужен индивидуальный план? Свяжитесь с нами

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

Что входит в WebPageTest Pro?

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

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

И WebPageTest Starter, и Pro дают вам доступ к сохранению истории тестов в течение 13 месяцев.

ДЛЯ ВСЕХ ПЛАНОВ, Тест на WebPageTest состоит из одного или нескольких тестовых прогонов. Тестовый запуск определяется как загрузка одной страницы в рамках теста. Вот несколько примеров:

  • Тест из одного браузера и местоположения, с 3 тестовыми запусками, только для первого просмотра, считается за три тестовых запуска. (3 прогона * 1 загрузка за прогон)
  • Тест из одного браузера и местоположения с 5 тестовыми запусками, первым и повторным просмотром для каждого запуска считается за 10 тестовых запусков (5 запусков * 2 загрузки за запуск)
  • Тест из одного браузера и местоположения с 4 запусками тестов, первым и повторным просмотром для каждого запуска, а также дополнительным запуском Lighthouse считается за 9 запусков теста ((4 запуска * 2 загрузки за запуск) + 1 запуск Lighthouse)
  • Эксперимент из одного браузера и местоположения с 2 тестовыми запусками, только первый просмотр для каждого запуска, считается за 4 запуска (2 запуска * 2 теста (один для эксперимента, один для контрольного запуска).

WebPageTest Starter предоставляет доступ к 30 точкам по всему миру, включая материковый Китай. С WebPageTest Pro вы получаете доступ к еще 11 местам премиум-класса.

WebPageTest всегда актуален для текущей версии каждого браузера, и вы можете тестировать его в Chrome (стабильная, бета-версия, canary), Firefox (стабильная, бета-версия, ESR), Microsoft Edge (dev) и Brave.

WebPageTest Pro также поддерживает тестирование мобильной эмуляции. Вы можете протестировать мобильный контент, эмулируя браузер Android, передав «mobile=1» в качестве параметра API.

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

Возможности — это рекомендации, которые разбиты на три категории:

  • Быстрота
  • Удобство использования
  • Устойчивость

Opportunities — бесплатная функция WebPageTest, предоставляемая всем пользователям.

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

Эксперименты являются платной функцией и доступны только подписчикам WebPageTest Pro.

Мы предоставляем 1 бесплатный эксперимент для каждого теста, чтобы вы могли ознакомиться с экспериментами WebPageTest. Вы также можете запускать эксперименты с нашей внутренней веб-страницы под названием The Metric Times, где мы встроили анти-шаблоны для упрощения тестирования.

У нас нет бесплатной пробной версии, кроме 2 вышеперечисленных опций, поскольку Web PageTest Pro предоставляет вам все показатели (за исключением возможности запуска экспериментов), которые вы видите на типичной странице результатов теста WebPageTest, а также в JSON сегодня для любого теста, который вы запускаете на www.webpagetest.org.

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

Для ежемесячных и годовых планов подписки с вашей кредитной карты будет автоматически выставлен счет, когда вы зарегистрируетесь и приобретете подписку, вы сможете получить доступ к своей истории платежей в разделе «История платежей» в «Моей учетной записи» на www. webpagetest.org. Все планы подписки могут быть отменены в любое время без штрафных санкций. Как только вы решите отменить подписку, подписка WebPageTest Pro не будет автоматически продлеваться на следующий платежный цикл. У вас по-прежнему будет доступ к тестированию этого плана до конца текущего расчетного периода.

Для планов Custom Enterprise, в которых вы хотите проводить более 20 000 тестов в месяц, свяжитесь с нами.

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

Мы принимаем оплату кредитной картой (VISA, Mastercard, American Express, JCB, Maestro, Discover, Diners Club International, UnionPay). Пожалуйста, убедитесь в правильности вашего способа оплаты и в том, что он правильно профинансирован, чтобы избежать проблем с приемом платежей.

Мы не принимаем и не будем просить вас производить оплату наличными или физическим чеком.

Для получения планов Custom Enterprise, требующих более 20 000 тестов в месяц, свяжитесь с нами.

Все платежи безопасно обрабатываются через HTTPS, и информация о вашей карте никогда не попадает на наши серверы. Вся обработка платежей осуществляется сторонним процессором кредитных карт уровня 1, совместимым с PCI. Все данные отправляются через SSL, который представляет собой 2048-битный канал с шифрованием RSA. Наш платежный шлюз также соответствует требованиям и правилам карточных сетей, касающихся обработки платежей.

В настоящее время мы поддерживаем только одну учетную запись пользователя для входа и настройки вашей учетной записи для WebPageTest Starter или для приобретения подписки WebPageTest Pro. Однако если вы используете API WebPageTest в рамках подписки Pro, вы можете сгенерировать до 30 ключей API Consumer для нескольких вариантов использования и команд из одной учетной записи WebPageTest Pro. Создайте новый ключ, нажав «+ Новый ключ API» на странице своей учетной записи.

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

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

10 инструментов Page Speed ​​для определения скорости загрузки целевых страниц

Большинство сайтов теряют половину своих посетителей во время загрузки страницы. Это шокирующая реальность, в которую трудно поверить, но, возможно, нет, если учесть, что средний показатель отказов веб-страниц сегодня составляет 58,18%. Хуже того, средний показатель отказов целевой страницы после клика колеблется от 60 до 90%.

Мобильные страницы в равной степени страдают от низкой скорости загрузки страниц. Исследование Google и SOASTA, проведенное в 2016 году, показало, что среднее время загрузки мобильного веб-сайта для сеансов с отказом было примерно на 2,5 секунды медленнее, чем для сеансов без возврата.

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

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

Как это влияет на скорость страницы?

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

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

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

  • Большие изображения и текстовая графика
  • Видео
  • Длина страницы
  • Скрипты, шрифты и плагины (HTML, JavaScript, CSS)
  • Ненужные перенаправления
  • География (страна, город, организация, интернет-провайдер, скорость сети)
  • Полоса пропускания

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

10 самых надежных инструментов скорости страницы

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

1. GTmetrix

GTmetrix анализирует ваш сайт, используя комбинацию 27 рекомендаций по скорости страницы (тест скорости Google) и 19 рекомендаций YSlow (тест скорости Yahoo). В верхней части отчета представлены оценки производительности от A до F, а также сведения о странице, включая время загрузки, размер страницы и количество запросов.

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

GTmetrix позволяет тестировать и сравнивать производительность веб-сайта с различными типами подключения, чтобы увидеть, как это влияет на скорость загрузки вашей страницы. Он предлагает функцию регулирования соединения для имитации возможных типов интернет-соединений, которые могут использовать посетители вашего сайта: кабельное, DSL, мобильное 3G, мобильное 2G и коммутируемое соединение 56K. Вы также можете выбрать Chrome или Firefox в качестве возможного браузера.

Этот инструмент имеет 7 тестовых мест, но предоставляет в общей сложности 28 выделенных тестовых серверов: 11 в Ванкувере, Канада; 5 в Далласе, США; 7 в Лондоне, Великобритания; 2 в Сан-Паулу, Бразилия; 1 в Сиднее, Австралия; 1 в Мумбаи, Индия; и 1 в Гонконге, Китай.

GTmetrix поддерживает HTTP/2, который загружает веб-страницы быстрее, чем HTTP/1.1, пытаясь устранить многие недостатки и ограничения HTTP/1.1. К преимуществам HTTP/2 относятся:

  • Мультиплексирование и параллелизм (можно быстро отправить несколько запросов по одному TCP-соединению)
  • Потоковые зависимости
  • Сжатие заголовка
  • Отправка сервера

Кроме того, GTmetrix является одним из немногих инструментов для определения скорости страницы, который также предлагает тестирование производительности мобильных устройств. Он использует два телефона Samsung Galaxy Nexus, поэтому пользователи могут создавать отчеты о производительности на основе фактических загрузок страниц на этих устройствах.

2. Pingdom

Pingdom позволяет вам проверить скорость вашего сайта из 3 основных мест:

  • Даллас, Техас
  • Мельбурн, Австралия
  • Сан-Хосе, Калифорния

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

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

3. Google PageSpeed ​​Insights

PageSpeed ​​Insights — это тест скорости Google, который предоставляет рекомендации по улучшению и оценивает вашу страницу от 0 до 100 баллов на основе двух параметров:

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

Чем выше ваш балл, тем более оптимизирован ваш сайт, а все, что выше 85, означает, что ваша страница работает хорошо.

PageSpeed ​​Insights предоставляет отчеты как для настольной, так и для мобильной версии вашей страницы. Он извлекает URL-адрес дважды — один раз с мобильным пользовательским агентом и один раз с настольным пользовательским агентом. Мобильный отчет включает в себя дополнительную категорию под названием «Пользовательский опыт», которая включает в себя конфигурацию вашего окна просмотра, размер ваших целей касания (кнопок и ссылок) и размеры шрифта.

Команда PageSpeed ​​Insights также недавно запустила новый инструмент для определения скорости страницы «Думай с Google», который следует в списке.

4. Think with Google: Test My Site

Разница в том, что тестируется только скорость мобильных страниц.

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

время загрузки), измеряя, сколько времени требуется для отображения видимого содержимого страницы с помощью Chrome на устройстве Moto G4 в сети 3G. (Примечание: для тестирования используется сеть 3G, поскольку 70 % подключений к сотовым сетям во всем мире будут осуществляться на 3G или более низких скоростях до 2020 г.)

Средняя часть результатов представляет собой отраслевое сравнение, рассчитанное на основе внутреннего исследования Google более 5 миллионов веб-страниц:

Наконец, инструмент Test My Site показывает, сколько времени можно сэкономить, внеся несколько исправлений в вашу страницу с подробным отчетом об исправлениях, рекомендованных PageSpeed ​​Insights:

5. Система показателей скорости Google

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

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

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

6. KeyCDN

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

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

7. Веб-тест страницы

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

Тесты могут быть запущены с функцией регулирования подключения для имитации потенциальных подключений к Интернету, которые посетители сайта могут использовать: кабель, DSL, 3G Slow, 3G, 3G Fast, 4G, LTE, Mobile Edge, 2G, коммутируемое соединение 56K, FIOS, Родное соединение и настраиваемые скорости.

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

Когда WebPagetest предоставляет свои результаты, он присваивает вашему сайту буквенную оценку от A до F на основе времени полной загрузки по умолчанию, с необязательным временем загрузки. Другие параметры оценки включают FTTB, сжатие, кэширование, эффективное использование CDN и многое другое. Отчет разделен на шесть разделов — сводка, подробности, обзор производительности, разбивка содержимого и снимки экрана — предоставляя обширную диагностическую информацию с каскадными диаграммами, проверками оптимизации скорости страницы и предложениями по улучшению.

Последнее замечание: HTTP/2 поддерживается WebPagetest.

8. Dotcom-Monitor

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

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

  • Сводка по местонахождению
  • Тестирование времени загрузки всех элементов страницы на основе браузера
  • Обнаружение медленных/отсутствующих элементов
  • 10% самых быстрых элементов
  • 10% самых медленных элементов
  • Подробная каскадная диаграмма
  • Разбивка по элементам узла (включая DNS, соединение, SSL, запрос, первый пакет и загрузку)
  • Проверка ошибок и диагностика

9. Pagelocity

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

  • Краткое содержание: Ценная информация о текстовом содержании вашей страницы (ключевые слова, ссылки заголовков, альтернативный текст для изображений и т. д.)
  • Разбивка ресурсов: Информация о структуре вашей страницы — сколько на ней изображений, скриптов или файлов стилей, а также контент, блокирующий рендеринг, и как эти факторы могут повлиять на время загрузки вашей страницы
  • Советы и идеи по коду: Предложения по обновлению кода, чтобы сделать его более удобным в сопровождении и расширяемым, с полезными данными о вашей разметке (классы/идентификаторы, теги, Google PageSpeed, время до первого байта и т. д.)

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

10. YSlow

YSlow — это проект с открытым исходным кодом, который анализирует веб-страницы на основе 23 из 34 правил Yahoo! для высокопроизводительных веб-сайтов. Чтобы сгенерировать результаты теста производительности, необходимо выполнить три шага:

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

YSlow также предлагает сводку страницы со статистикой, предложениями по улучшению и инструментами для анализа производительности (включая Smush.it и JSLint).

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

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

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

Как бренды могут ускорить свои веб-страницы?

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

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

Убедитесь, что изображения не больше необходимого, что они имеют правильный формат файла и сжаты для Интернета. 25% страниц могут сэкономить более 250 КБ за счет сжатия изображений и текста, а 10% могут сэкономить более 1 МБ. Что касается видео, либо оставьте его, либо разместите файл на другой платформе (например, YouTube или Vimeo), а не на своих серверах.

Асинхронная загрузка

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

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

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

Сокращение перенаправлений

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

Кэшируйте свои страницы

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

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

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

Выберите инструмент скорости страницы, который соответствует вашим потребностям.

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

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

7 инструментов для точного тестирования скорости веб-сайта (мобильный и десктопный сайты)

7 апреля 2016 г. 28 мая 2020 г. / Автор Суровый Агравал / 5 минут чтения

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

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

Верно?

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

Очевидно, это серьезно!

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

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

  • Как ускорить WordPress (руководство по настройке производительности)

CDN, например MAXCDN или BunnyCDN. Это еще больше сократит время загрузки вашего веб-сайта.

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

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

Содержимое страницы

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

1. GTMetrix Mobile Test

GTMetrix предлагает тестирование загрузки мобильного сайта на устройствах Android.

Чтобы попробовать это, вам нужно создать бесплатную учетную запись на их сайте, а на панели инструментов вы можете выбрать вариант «Chrome, (Android, Galaxy Nexus)», который проверит время загрузки вашего Android.

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

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

Ознакомьтесь с GTMetrix

2. Google PageSpeed ​​Insights: (Mobile)

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

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

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

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

Check out Google PageSpeed ​​Insights

5 Free Tools To Check Website Speed ​​

  1. Google Page Speed ​​Insights tool
  2. WebpageTest. Org
  3. Sucuri Load Time Tester
  4. GTMetrix
  5. Pingdom

Let us take a detailed look на все инструменты, упомянутые выше.

1. Инструмент Google Page Speed ​​Insights (Desktop)

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

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

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

Проверьте скорость веб-сайта сейчас

2. WebpageTest.Org

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

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

3. GTMetrix

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

Вот отчет о производительности ShoutMeLoud, и вы можете увидеть множество предложений. Здесь GTMetrix показывает, что ShoutMeLoud занимает 90,26 секунды для загрузки, что самоубийственно.

Рекомендуется повторить тест. Иногда плагины кеширования могут делать забавные вещи ( например, удаление 6 секунд из времени загрузки страницы ).

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

4. Tools.Pingdom

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

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

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

Проверьте Pingdom здесь.

5. Тест скорости сайта

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

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

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

Также прочитайте:

  • Имеет ли значение время загрузки сайта для SEO?

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

Если вам интересны эти инструменты, не забудьте поделиться этой статьей со своими друзьями на Facebook и Google Plus.

Подписаться на YouTube

Автор Харш Агравал

Блогер, автор и спикер! Харш Агравал признан лидером в области цифрового маркетинга и финтеха. Основатель ShoutMeLoud и спикер на ASW, Hero Mindmine, Inorbit, IBM, саммите по блокчейну в Индии. Кроме того, отмеченный наградами блогер.

Как правильно запустить тест скорости веб-сайта ⚡️

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

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

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

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

Перед запуском теста скорости веб-сайта

Перед запуском теста скорости вы должны проверить, настроены ли и работают ли следующие две вещи на вашем сайте WordPress:

  1. Кэширование
  2. Сеть доставки контента

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

1. Настройка кэширования

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

Мгновенное сокращение времени загрузки на 37 % после перемещения @WPColt в @kinsta! (БЕЗ КЭШИРУЮЩИХ ПЛАГИНОВ) 🚀🚀🚀

— WPColt (@WPColt) 3 января 2018 г.

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

2. Включите сеть доставки контента (CDN)

Если вы не знаете, что такое сеть доставки контента, вы должны сначала прочитать наш подробный пост о том, почему вам следует использовать WordPress CDN. В 99,9% сценариев, это окажет огромное влияние на скорость вашего сайта. В зависимости от расположения центра обработки данных, в котором размещен ваш сайт, и местонахождения ваших посетителей, CDN сокращает время загрузки более чем на 50%!

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

Шаг 1

Сначала войдите в свою панель управления MyKinsta. Нажмите на свой сайт, а затем на Kinsta CDN таб.

Kinsta CDN
Шаг 2

Затем подтвердите изменение, нажав кнопку Включить Kinsta CDN в появившемся модальном окне.

Подтвердите, что хотите включить Kinsta CDN

Если вы используете Cloudflare или заинтересованы в нем, у нас есть подробное руководство о том, как установить Cloudflare на ваш сайт WordPress, и этот пост о наиболее оптимальных настройках. Мы также рекомендуем ознакомиться с нашим сравнением Kinsta CDN и Cloudflare и нашим руководством по автоматической оптимизации платформы CloudFlare.

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

Как правильно запустить тест скорости веб-сайта

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

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

Место проведения теста скорости имеет значение

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

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

Что бы вы ни делали, не отклоняйтесь от выбранного вами места .

Вы должны протестировать несколько раз

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

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

Как узнать, что ваш контент или мультимедиа не загружаются из кеша?

Это просто: каждый инструмент для проверки скорости показывает так называемые заголовки HTTP (также известные как заголовки ответов). Они содержат важную информацию о каждом запросе.

У нас есть сайт разработки, созданный в Kinsta с включенной CDN Kinsta. Сначала мы протестировали его через Pingdom и получили следующий результат.

Тест скорости

Если вы посмотрите на приведенный ниже пример, первый запрос относится к основному домену, и он загружается непосредственно с сервера Kinsta. Ниже вы можете видеть, что остальные запросы загружаются из CDN Kinsta (xxxx.kinstacdn.com).

Если вы посмотрите на запрос к серверу Kinsta , вы увидите заголовок с именем x-kinsta-cache . Когда он еще не обслуживается из кеша, он регистрирует MISS . Название этого заголовка может незначительно отличаться в зависимости от вашего хостинг-провайдера.

CDN Kinsta запрашивает ниже таким же образом. Найдите заголовок с именем x-cache . Когда он еще не обслуживается из кеша, он регистрирует MISS . Опять же, имя заголовка может немного отличаться в зависимости от вашего провайдера CDN. Например, когда вы используете Cloudflare, заголовок HTTP называется 9.0858 cf-кэш-статус .

Разбивка теста скорости веб-сайта

Чтобы правильно выполнить тест скорости, вам нужно увидеть, как все загружается из кеша, как с вашего хоста WordPress, так и с вашей CDN. Как только все будет видно, заголовки x-kinsta-cache и x-cache зарегистрируют HIT (как показано ниже). Этот обычно требует многократного запуска теста скорости . Мы обнаружили, что три обычно является магическим числом.

Некоторые инструменты тестирования скорости, такие как Pingdom, также ограничивают время между каждым тестом (обычно пару минут), поэтому вам, возможно, придется запустить тест скорости, вернуться позже, запустить его снова и т. д.

Хост WordPress и кеш CDN

Также возможно, что ваш хост WordPress зарегистрирует HIT с кешем до вашего CDN. Вы можете быстро просмотреть тест и найти большую желтую полосу. Это указывает на TTFB (время ожидания), которое очень сильно возрастает, когда страница или актив не доставляются из кеша.

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

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

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

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

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

Тест скорости с кешем

Помимо запросов к вашему хостинг-провайдеру и CDN, у вас, скорее всего, также будут внешние запросы к таким вещам, как Facebook, Google Analytics, Google Fonts и т. д. Устранение этих неполадок — тема для другого дня. 😉 Ознакомьтесь с нашим постом о том, как идентифицировать и анализировать внешние сервисы на вашем сайте WordPress, нашим исчерпывающим руководством по Pingdom и нашим подробным руководством о том, как менять шрифты в WordPress.

Лучшие инструменты для тестирования скорости веб-сайтов в 2022 году

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

  1. Пингдом
  2. Google PageSpeed ​​Insights
  3. Инструмент тестирования скорости веб-сайта для мобильных устройств Google
  4. Скорость сайта Google Analytics
  5. Тест веб-страницы
  6. GTMetrix
  7. Тест скорости веб-сайта KeyCDN
  8. DareBoost
  9. Анализатор веб-страниц
  10. YМедленно
  11. Chrome DevTools
  12. Реликвия Зоны
  13. дотком-монитор
  14. Новая реликвия

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

Гэри Иллиес, аналитик трендов для веб-мастеров из Google, хорошо резюмирует:

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

— Гэри 鯨理/경리 Illyes (@methode) 12 июля 2018 г.

1. Pingdom

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

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

Инструмент для тестирования скорости веб-сайта Pingdom

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

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

2. Google PageSpeed ​​Insights

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

Инструмент Google PageSpeed ​​Insights

Оценки PageSpeed ​​варьируются от 0 до 100 баллов и основаны на Lighthouse. Чем выше балл, тем лучше; оценка 85 или выше указывает на то, что страница работает хорошо. Страница отчета содержит полезную разбивку шагов, которые можно предпринять для повышения производительности. PageSpeed ​​Insights также предоставляет вам дополнительные рекомендации по удобству работы с мобильными устройствами. Ознакомьтесь с нашими мыслями о том, возможно ли получить 100/100 баллов в PageSpeed ​​Insights.

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

3. Инструмент тестирования скорости веб-сайта для мобильных устройств Google

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

Инструмент для проверки скорости веб-сайта Google для мобильных устройств

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

4. Скорость сайта Google Analytics

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

Их отчеты о скорости сайта измеряют три аспекта задержки:

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

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

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

5. WebPageTest

WebPageTest был создан Патриком Минаном, инженером Chrome в Google. Это проект с открытым исходным кодом, который позволяет вам запустить бесплатный тест скорости веб-сайта из разных мест по всему миру, используя настоящие браузеры (IE, Chrome и т. д.). Для вас, более продвинутых пользователей, которым необходимо получить дополнительные данные из ваших тестов скорости, это отличный инструмент.

WebPageTest

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

6. GTmetrix

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

Инструмент тестирования скорости веб-сайта GTmetrix

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

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

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

7. Тест скорости веб-сайта KeyCDN

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

Инструмент для проверки скорости веб-сайта KeyCDN

Вы можете запустить как частную, так и общедоступную проверку, которую затем можно будет опубликовать или добавить в закладки для дальнейшего использования. В отчете о разбивке представлен подробный обзор методов запроса ( GET / POST ), кодов состояния HTTP (например, 200 OK или 404), типов файлов, размера контента, времени ожидания/получения, общего времени загрузки и общее количество HTTP-запросов, сгенерированных на вашем сайте.

KeyCDN также предлагает другие бесплатные удобные инструменты для тестирования веб-производительности, такие как Ping Test, HTTP/2 Test, HTTP Check и Traceroute Tool.

8. DareBoost

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

Инструмент тестирования скорости веб-сайта DareBoost

Отчет о тестировании скорости DareBoost анализирует более 80 различных точек данных по следующим категориям:

  • Политика кэширования
  • Количество запросов
  • Безопасность
  • Доступность
  • Соответствие
  • Качество
  • jQuery
  • Браузерный рендеринг
  • Количество данных
  • SEO

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

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

Отчет о тестировании скорости DareBoost

9. Анализатор веб-страниц

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

Анализатор веб-страниц

В частности, инструмент сообщит вам, сколько времени требуется вашему веб-сайту для загрузки при различных скоростях соединения. Если вам нужны детализированные данные, инструмент Web Page Analyzer разбивает их для вас, отображая размер и комментарий для каждого элемента. В нижней части анализа инструмент предоставляет комментарии и рекомендации по 11 конкретным аспектам производительности вашего сайта, включая области, в которых вы работаете хорошо. Однако похоже, что этот инструмент некоторое время не обновлялся, поэтому не ожидайте таких вещей, как поддержка HTTP/3.

10. YSlow

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

Yahoo! команда определила 34 фактора, влияющих на скорость веб-сайта. К сожалению, только 23 из них можно протестировать количественно, поэтому инструмент фокусирует свой анализ на этих областях. На веб-сайте YSlow перечислены эти 23 «правила» с подробной информацией, с которой стоит ознакомиться.

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

Раньше это был самый популярный инструмент для тестирования скорости, но, к сожалению, проект YSlow больше не поддерживается. Их последний коммит был несколько лет назад, и на их странице GitHub есть более 100 открытых вопросов. Тем не менее, есть еще некоторая полезная информация, которую может предоставить расширение, хотя мы рекомендуем использовать более новый и более активно поддерживаемый инструмент для проверки скорости веб-сайта.

11. Chrome DevTools

Сетевая панель Chrome DevTools входит в состав Chrome и других браузеров на основе Chromium. Это очень популярный инструмент среди разработчиков, так как он легко доступен и отлично подходит для локальной отладки и тестирования. Вы можете легко запустить сетевую панель в Chrome, нажав Command+Option+I (Mac) или Control+Shift+I (Windows и Linux). Затем вы можете провести каскадный анализ своего сайта и изучить производительность каждого из ваших активов.

Сетевой водопад Chrome DevTools

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

Блокировать запрос в Chrome DevTools

Команда Google также интегрировала Lighthouse в Chrome DevTools. Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Он предлагает аудит производительности, доступности, прогрессивных веб-приложений и многого другого. Вы можете запустить его из вкладки «Аудит». Он имеет аналогичную систему оценок 0/100. Вы можете углубиться в свои запросы, посмотреть, какие сценарии могут блокировать рендеринг, найти экономию на сжатии изображений и т. д. Затем вы можете легко поделиться своими результатами с другими.

Аудит веб-производительности Chrome DevTools

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

12. Site Relic

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

Site Relic

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

Тест скорости Site Relic

13. dotcom-monitor

dotcom-monitor имеет множество бесплатных и полезных инструментов, одним из которых является инструмент для проверки скорости веб-сайта. Это позволяет вам мгновенно проверить скорость вашего сайта из 25 мест по всему миру. Вы можете выбирать между различными браузерами, такими как Internet Explorer, Firefox, Chrome, iOS, Android и Windows Phone.

Тест скорости веб-сайта dotcom-monitor

Их отчет о производительности сети включает:

  • Сводка по местоположению
  • 10% самых быстрых элементов
  • 10% самых медленных элементов
  • Комплексная каскадная диаграмма
  • Разбивка по элементам узла, включая DNS, соединение, SSL, запрос, первый пакет и загрузку
  • Проверка ошибок и диагностика

14. New Relic

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

New Relic

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

Количество веб-транзакций New Relic

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

Время отклика плагина WordPress в New Relic

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

Внешние сервисы New Relic Скорость веб-сайта важна. 🚀 Чем быстрее, тем выше ваши шансы на успех. Нажмите, чтобы твитнуть

Резюме

Понимание того, как правильно протестировать скорость вашего сайта WordPress, поможет вам эффективно оценить производительность, особенно если вы пытаетесь измерить, насколько быстро сайт после перехода на Kinsta. 😉

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

Какие инструменты вы используете для измерения скорости сайта? Поделитесь ими в комментариях ниже!


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

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

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

Как я могу проверить PageSpeed ​​своего веб-сайта с помощью инструментов?

Обновлено: 21.02.2022

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

Contents

Contents

Бесплатный инструмент SISTRIX PageSpeed ​​

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

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

Google PageSpeed ​​Insights

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

Данные эталонного теста, проведенного для мобильных и настольных компьютеров, доступны отдельно в виде метрик в разделе «Лабораторные данные». Эти наборы данных можно сравнивать друг с другом, поскольку каждый тест PageSpeed ​​Insights проводится в относительно постоянных условиях. Инструмент предоставляется непосредственно Google.

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

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

Хотя инструмент PageSpeed ​​Insights в основном основан на тесте Lighthouse, отладка в PageSpeed ​​Insights, к сожалению, невозможна. Кроме того, полевые данные обновляются только после большой задержки. Поэтому для вашего собственного веб-сайта вы всегда должны использовать отчет Core Web Vitals в Google Search Console.

  • Google PageSpeed ​​Insights Analysis

Google Lighthouse

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

Чтобы получить доступ к аудиту Lighthouse в Chrome, просто щелкните правой кнопкой мыши на веб-сайте и выберите «Исследовать». Откроется консоль разработчика — вы также можете перейти в «Параметры Chrome» и нажать «Дополнительные инструменты > Консоль разработчика» или использовать сочетания клавиш. В консоли разработчика выберите вкладку «Аудит».

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

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

Также проверяется пригодность веб-сайта в качестве так называемого «прогрессивного веб-приложения». Прогрессивные веб-приложения (PWA) — это в основном веб-сайты, созданные с использованием современных API и дополненные функциями классических приложений. Прогрессивное веб-приложение выглядит как нативное приложение на устройстве независимо от сети: PWA доступны и могут использоваться в автономном режиме.

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

Примечание. К встроенной SEO-проверке не следует относиться слишком серьезно; Google правильно указывает, что существуют «дополнительные факторы, которые не проверяются Lighthouse и которые влияют на рейтинг».

Google Analytics

Среднее время загрузки веб-сайта и другие показатели скорости можно просмотреть в Google Analytics. Отчет можно найти в категории «Поведение» в разделе «Скорость веб-сайта».

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

Таким образом, среднее время загрузки страницы в Google Analytics всегда состоит из двух компонентов: времени сети и сервера и времени браузера.

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

  • Google Analytics
  • Информация Google Analytics о скорости веб-сайта

Измерение основных веб-показателей в режиме реального времени в Google Analytics Гугл Аналитика. Эти данные соответствуют тому, как они измеряются Chrome и сообщаются другим инструментам Google.

Если основные веб-показатели регистрируются в Google Analytics, инструмент Web Vitals Report с открытым исходным кодом можно использовать для создания очень привлекательных отчетов. Инструмент требует разрешения на использование данных Google Analytics из домена.

  • Библиотека Web Vitals на github.com
  • Отчет Web Vitals на github.com
  • Запустить отчет Web Vitals

Search Console Core Web Vitals Report

Отчет Google Search Console Core Web Vitals содержит релевантные для рейтинга данные о производительность веб-сайта. Это основано на фактических данных об использовании (полевых данных) из отчета об опыте использования Google Chrome.

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

К сожалению, более глубокая отладка невозможна, и значения поступают в Search Console с задержкой примерно в 2-3 дня.

Если ваш веб-сайт еще не подключен, добавьте его в Google Search Console с помощью этого руководства.

WebPageTest

Помимо PageSpeed ​​Insights, WebPageTest предлагает наиболее полный анализ времени загрузки, а также многочисленные функции оценки и отладки.

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

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

Полевые данные из отчетов CrUX также отображаются и оцениваются по сравнению с текущими лабораторными значениями:

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

SISTRIX Optimizer

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

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

Как повысить скорость страницы от начала до конца (Расширенное руководство)

Патрик Стокс

Патрик Стокс — консультант по продуктам, технический SEO и представитель бренда в Ahrefs. Он является организатором Raleigh SEO Meetup, Raleigh SEO Conference, Beer & SEO Meetup, Findability Conference и модератором /r/TechSEO.

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

Показывает приблизительный месячный поисковый трафик к этой статье по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3-5 раз больше.

Сколько раз этой статьей поделились в Твиттере.

Поделитесь этой статьей
Подпишитесь на еженедельные обновления

Подписка по электронной почте

Подпишитесь

Содержание

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

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

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

    WordPress:

    • WP Rocket (платно) + подключаемый модуль оптимизации изображений или:
    • Autoptimize + подключаемый модуль кэширования

    Drupal

    • AdvAgg + модуль оптимизации изображений

    Теперь вернемся к делу. Вот все, что я собираюсь рассказать:

    • Что такое скорость страницы?
    • Почему вы должны заботиться о скорости страницы
    • Как быстро должна загружаться моя страница?
    • Как создается страница
    • Тестирование скорости страницы и инструменты
    • Оценка влияния изменений

    Что такое скорость страницы?

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

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

    В последнее время Google снова обратил внимание на скорость страницы, поскольку скорость мобильных устройств стала фактором ранжирования, отчет о скорости в Google Search Console, а Chrome объявляет, что они могут помечать медленные сайты. , но знаете ли вы, что скорость страницы является фактором ранжирования Google с 2010 года?

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

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

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

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

    Так почему же вы видите больше посетителей?

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

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

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

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

    Как создается страница

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

    Примечание.

    Я буду использовать https://www.webpagetest.org/ для многих изображений, а также буду ссылаться на тесты и перечислять настройки, где это применимо.

    Установление соединения

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

    DNS (зеленый)

    Система доменных имен (DNS) считается телефонной книгой Интернета. Вы даете своему браузеру имя веб-сайта, и он сверяется с DNS-сервером, чтобы получить IP-адрес (метку местоположения), сообщающий ему, где размещен веб-сайт. Это похоже на сохранение контакта на вашем телефоне, поэтому вам нужно знать только имя, а не номер телефона.

    Большую часть времени ваш DNS будет находиться у вашего регистратора домена (где вы купили домен) или у вашей сети доставки контента (CDN).

    Важно отметить, что не все провайдеры DNS одинаковы. Если для вас важна каждая миллисекунда, вы можете рассмотреть возможность использования другого провайдера DNS. Согласно DNSPerf, у Cloudflare средняя скорость запросов составляет 12,6 мс, в то время как другие, такие как GoDaddy (46,04 мс) и Rackspace (90,38 мс), в среднем медленнее. Однако эти цифры не являются полностью точным представлением, поскольку DNS может кэшироваться (временно сохраняться) в браузере, когда вы уже посещали веб-сайт. Время, в течение которого он кэшируется, называется TTL (время жизни). Пока кеш все еще активен, браузеру не нужно будет подключаться к DNS-серверу, чтобы узнать, куда идти для доступа к веб-сайту.

    Connect (оранжевый)

    Здесь браузер устанавливает соединение с сервером хостинга. Протокол управления передачей/Интернет-протокол (TCP/IP) сложен, но просто подумайте о том, как вы приступите к работе. Вероятно, это не прямая линия; вам нужно делать повороты, и будут участки с более высоким трафиком. Вы можете даже изменить маршрут или сделать несколько неправильных поворотов. Вот как это работает; это маршрутизация из вашего браузера на сервер и обратно.

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

    Многие из этих проблем решаются путем сокращения расстояния до сервера и использования более интеллектуальной маршрутизации, что могут сделать многие CDN. Благодаря сети серверов по всему миру посетители обычно могут подключиться к ближайшему. Некоторые провайдеры CDN также управляют большими объемами интернет-запросов и могут видеть в режиме реального времени, где могут быть узкие места (трафик). Если они увидят более быстрый вариант, они смогут перенаправить трафик — точно так же, как GPS перенаправит вас в обход пробки.

    Уровень защищенных сокетов (SSL) (фиолетовый)

    Для сайтов, устанавливающих безопасное соединение (HTTPS), здесь браузер и сервер согласовывают версию протокола TLS (Transport Layer Security), набор шифров (уровень безопасности) и проверяют сертификат (чтобы убедиться, что сайт это тот, который он говорит, что это ).

    Вы можете подумать, что можете сделать свой сайт быстрее, просто не используя HTTPS. Отчасти это правда — по крайней мере, для части подключения. Но у использования HTTPS есть и другие преимущества, например тот факт, что браузеры не позволяют использовать HTTP/2 (h3) без HTTPS. h3 имеет некоторые преимущества, такие как постоянные соединения, поэтому ему не нужно постоянно открывать новое соединение для файлов на том же сервере. Заголовки в этих запросах также меньше, чем в HTTP/1.1, и несколько файлов могут передаваться одновременно. В большинстве случаев сайты, использующие HTTPS и h3, будут работать быстрее, чем сайты, использующие HTTP.

    Как правило, самые значительные преимущества, которые вы получите здесь, связаны с обновлением вашего протокола (например, TLS 1.3 быстрее, чем TLS 1.2) и внедрением HTTP Strict Transport Security (HSTS), который указывает браузеру всегда использовать безопасное соединение. . Браузер меняет запросы с HTTP на HTTPS, не связываясь с сервером и не выполняя перенаправление. На изображении ниже перенаправление с HTTP на HTTPS и затраченное время можно устранить с помощью HSTS.

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

    Загрузка и обработка HTML

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

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

    Здесь также браузер начинает создавать страницу. Когда HTML загружается, браузер преобразует его в объектную модель документа (DOM), именно так компьютер понимает структуру содержимого. Этот процесс синтаксического анализа использует основной поток браузера для обработки действий пользователя и рисования страницы, запуска JavaScript и выполнения компоновки, перекомпоновки и сборки мусора. Пока просто знайте, что этот основной поток существует и выполняет множество различных задач. Мы расскажем об этом чуть позже.

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

    Для HTML и других типов файлов, таких как CSS и JavaScript, вы можете сократить время за счет использования меньшего количества кода, минификации для удаления ненужных символов, таких как комментарии и пробелы, из кода и сжатия для уменьшения размера файлов. Смысл в том, чтобы сделать загрузку файла меньше, чтобы эта часть загрузки была быстрее. Однако существует не только один способ минификации и сжатия. Во многих случаях это обрабатывается CDN или сервером (Apache или Nginx являются распространенными серверами) или плагином/модулем/пакетом. Дополнительную информацию о реализации сжатия можно найти здесь, а минификации — здесь.

    Обработка дополнительных подключений

    После загрузки HTML будут обработаны ссылки на другие файлы и другие серверы, и будут запущены новые подключения. Обычно это место, где к смеси добавляются другие файлы, такие как JavaScript, CSS, изображения и шрифты. Здесь все может сойти с ума, поскольку некоторые файлы ссылаются на другие файлы, и мы начинаем связывать соединения и загружать файлы. Взгляните на карту запросов ниже для Forbes.com. Каждая точка — это запрос отдельного файла, а каждая строка — это место, где один файл ссылается на другой файл, который необходимо загрузить. Всего это 363 запроса по 128 соединениям.

    Использовать один и тот же сервер для запросов, когда это возможно

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

    Начиная с HTTP/2, это не лучшая практика. Вы должны использовать тот же сервер для запросов, если это возможно.

    Например, cdn.ahrefs.com  на каскадной диаграмме ниже.

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

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

    Использовать предварительное подключение или предварительную выборку DNS (если вы используете другой сервер)

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

    Пример кода:

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

    Пример кода:

    Как браузеры отображают страницу

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

    1. HTML обрабатывается в дерево DOM, о котором мы упоминали ранее
    2. CSS анализируется в объектную модель CSS (CSSOM), которая сообщает браузеру, как все оформлено, дополнено, окрашено, имеет размер и т. д.
    3. CSSOM + DOM вместе сделать то, что называется Render Tree.
    4. Происходит компоновка, то есть обработка того, где каждый элемент будет находиться в области просмотра браузера, в зависимости от того, что находится в дереве рендеринга.
    5. Пиксели закрашиваются на экране, поэтому вместо белого экрана вы видите цвета, формы, текст и изображения.

    Примечание.

     Любопытный факт, раскрытый Мартином Сплиттом из Google, заключается в том, что робот Googlebot экономит время и ресурсы, фактически не рисуя пиксели страницы. У них есть информация, которая им нужна после компоновки.

    Цель должна состоять в том, чтобы получить необходимые элементы как можно раньше, чтобы построить начальный вид как можно быстрее. Видимое время загрузки — это воспринимаемое людьми представление о скорости страницы, т. е. о том, как скоро контент появляется для них на экране. Больше всего на это влияет способ загрузки ресурсов. Обычно CMS или JavaScript Framework несут ответственность за то, чтобы помочь браузеру расставить приоритеты, когда/какие/как ресурсы загружать и в каком порядке, чтобы сайт отображался быстрее. Подробнее об этом чуть позже.

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

    Показатели визуальной нагрузки:
    • Первая отрисовка (FP)  – браузер отображает что-либо в первый раз.
    • First Contentful Paint (FCP)  — браузер отображает что-то из DOM (объектной модели документа), что может быть текстом, изображением и т. д.
    • First Meaningful Paint (FMP)  — визуальная загрузка наиболее важных элементов.
    • Отрисовка с наибольшим содержанием (LCP)  — самый большой элемент над загруженным сгибом.
    • Визуально завершено  – страница визуально загружена.
    • Индекс скорости — расчетный показатель зрительной нагрузки, учитывающий несколько моментов времени.
    • Совокупное смещение макета (CLS)  – измеряет, сколько элементов перемещается в области просмотра во время загрузки или насколько стабилен макет. Здесь есть хорошее руководство по причинам CLS.

    «Если вы не можете это измерить, вы не можете это улучшить» https://t.co/dNrDYaIj4Z рассказывает, как измерить современные показатели веб-производительности и оптимизировать их. pic.twitter.com/yvBO2FQ6Ds — Эдди Османи (@addyosmani) 31 января 2020 г.

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

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

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

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

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

    Тип файла CSS

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

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

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

    Асинхронная загрузка CSS

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

    Например, это:

    Становится следующим:

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

    Встроенное

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

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

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

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

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

    Встроенный критический CSS в масштабе:

    Вам понадобится автоматизированная система, а не повторение этого для каждой страницы. Возможно, имеет смысл встроить только CSS для домашней страницы в темы WordPress, так как она обычно имеет другую таблицу стилей, чем другие страницы. Обычно это какой-то плагин/модуль/пакет или версия Critical или Critical CSS. Эти пакеты существуют для любого средства запуска задач или пакетов, которые вы можете использовать, таких как Grunt, Gulp, Webpack или Framework, таких как React, Angular, Vue, и вы даже можете найти учебные пособия, специфичные для WordPress или Drupal, или даже страницы с ручным кодом. Они собираются отправить безголовый браузер на страницу, чтобы определить, какой CSS на самом деле важен для загрузки страницы при разных размерах, и либо предоставить вам код, либо разделить код на критические и некритические элементы, чтобы вы могли загрузить их соответствующим образом. . Несколько примеров:

    Grunt:
    https://github. com/filamentgroup/grunt-criticalcss
    https://www.npmjs.com/package/grunt-critical-css
    https://github.com/bezoerb/grunt -critical

    Gulp:
    https://github.com/addyosmani/critical
    https://www.npmjs.com/package/gulp-critical-css

    Webpack:
    https://github .com/anthonygore/html-critical-webpack-plugin
    https://github.com/GoogleChromeLabs/critters
    https://github.com/anthonygore/html-critical-webpack-plugin
    https://www.npmjs.com/package/critical-css-webpack-plugin

    React:
    https://www.npmjs.com/package/react-critical-css
    https://github .com/addyosmani/critical-path-css-tools
    https://github.com/sergei-zelinsky/react-critical-css

    Angular:
    https://github.com/addyosmani/critical-path -angular-demo

    Vue:
    https://github.com/anthonygore/vue-cli-plugin-critical
    https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/

    Drupal:
    https://www. fourkitchens.com/blog/article/use-gulp-automate-your-critical-path-css/

    WordPress:
    https://wordpress.org/ plugins/wp-criticalcss/

    Ручной код:
    https://www.sitelocity.com/critical-path-css-generator
    https://jonassebastianohlsson.com/criticalpathcssgenerator/

    Предварительная загрузка

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

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

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

    Новое: советы по загрузке производительности для , предварительной выборки и приоритетов в Chrome: https://t.co/PzgxSQEgcd 🔥 pic.twitter.com/DpDmlNIedO — Addy Osmani (@addyosmani) 27 марта 2017 г.

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

    Примеры кода:


    Выбор файлов для предварительной загрузки

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

    Что нужно знать о предварительной загрузке
    1. Вам необходимо перекрестное происхождение шрифтов, иначе вы получите двойную загрузку файла.
    2. Вам по-прежнему нужны обычные вызовы файлов для JS + CSS, поэтому не удаляйте их.
    3. Вы можете предварительно загрузить шрифт, даже если он вызывается в другом файле, например в файле CSS.
    4. Будьте осторожны при предварительной загрузке. Вы можете столкнуться с проблемами, пытаясь предварительно загрузить слишком много файлов.
    Сервер Push

    Это было частью спецификации HTTP/2 (h3). Это позволяет серверу доставлять файл без запроса. Таким образом, вместо цепочки, которая может быть HTML > CSS > Шрифт, это позволяет сайту сказать, что мне нужен этот шрифт, просто отправьте его.

    Server Push проблематичен, и я обычно не рекомендую его использовать, но если вы отличный разработчик или у вас есть доступ к нему, вы можете попробовать. Он запрашивает файлы с сервера по тому же соединению, что и запрос страницы. При отправке на сервер ресурсы могут загружаться дважды. Существует обходной путь с использованием файлов cookie и проверки того, не передавали ли вы активы пользователям, но это сложная реализация. Есть еще одна проблема, связанная с проблемами подключения, из-за которой файлы могут вообще не загружаться. Несмотря на всю дополнительную работу, вы все равно не увидите значительных преимуществ по сравнению с предварительной загрузкой, потому что браузеры проверяют кеш страницы (где находится предварительная загрузка) перед отправкой кеша.

    Тип файла JavaScript

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

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

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

    Переместить в нижний колонтитул

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

    Defer/Async

    Defer и Async — это атрибуты, которые можно добавить в тег script. Обычно загружаемый скрипт блокирует анализатор во время загрузки и выполнения. Async позволит парсингу и загрузке происходить одновременно, но по-прежнему будет блокироваться во время выполнения скрипта. Defer не блокирует синтаксический анализ во время загрузки и выполняется только после завершения синтаксического анализа HTML.

    Примеры кода отсрочки/асинхронизации

    Обычный:

    1 Асинхронный:

    2

    2

    2

    Отложить:

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

    Приоритеты загрузки JavaScript в Chrome: https://t.co/O3Qg2eHgXb ~ как