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

Аудит скорости сайта | Студия Флаг

Миша Радионов

Опубликовано: 28 Сен 2022

Вернуться в блог

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

В этой статье я расскажу о принципах загрузки страницы и трех инструментах, которые позволяют измерить скорость сайта: PageSpeed Insights, Lighthouse и DevTools Network.Также расскажу, из-за чего падает скорость загрузки страницы, и как ее оптимизировать. А если вы предпочитаете формат видео, то у меня для вас есть целая лекция на YouTube.

Принципы загрузки сайта

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

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

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

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

Шаг 1.

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

Шаг 2.

Анализ документа. Строитель изучает то, что прислал сервер, и понимает, что ему предстоит строить DOM. Да, у нас получилась игра слов. DOM (от англ. Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Шаг 3.

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

После всех полученных данных строитель наконец может построить дом. Ура!

Теперь посмотрим на все более серьезным взглядом, проанализировав все шаги во времени.

1. Получение документа

2. Анализ документа

3. Параллельно со вторым шагом получаем статику

Схематично все выглядит таким образом:

Основные классы проблем

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

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

2. Медленный анализ документа. Для решения этой проблемы нужна оптимизация Frontend-a, или отказ от поддержки старых устройств.

3. Медленное получение статики. Оптимизация Frontend-a и увеличение скорости интернета помогут решить эти проблемы.

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

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

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

Выглядит инстурмент подобным образом 👇

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

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

Основные метрики PageSpeed Insights и LightHouse

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

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

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

3. Best Practices — проверяет безопасность сайта и использование современных стандартов веб-разработки.

4. SEO — помогает узнать, выполняется ли оптимизация сайта под поисковые системы.

5. Progressive Web App — позволяет проверить, подходит ли страница под стандарты прогрессивных web-приложений.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Контрольные метрики

1. First Contentful Paint (FCP)

Первая отрисовка контента — это время от момента отправки запроса на сервер до момента, когда браузер отображает первый пиксель контента на экране. Эта метрика критически важна, поскольку отображение контента (пусть даже минимальное) — это сигнал для пользователя о том, что сайт загружается. Если показатель FCP высокий, пользователь подумает, что сайт не реагирует, и уйдет.

2. First Input Delay (FID)

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

3. Largest Contentful Paint (LCP)

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

4. Cumulative Layout Shift (CLS)

Совокупное смещение макета — метрика, которая измеряет визуальную стабильность сайта и фиксирует сдвиги макета. Проще говоря, замеряет, не «дергается» ли сайт.

Возможности DevTools Network

Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:

Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.

В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.

Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Нас интересует конкретная вкладка Network. Перед нами открывается инструмент, в котором мы видим все HTTP-запросы на конкретной странице сайта. Разберем полезные столбцы в таблице запросов DevTools Network.

1. Имя. Имя файла или идентификатор ресурса.
2. Статус. Код состояния HTTP.
3. Тип. XHR — это AJAX. Media — аудио. Jpeg — изображения. Script, font — шрифт.
4. Инициатор. Объекты или процессы могут инициировать запросы.
5. Размер. Суммарный размер заголовков ответа плюс тело ответа, доставленное сервером.
6. Время. Общая продолжительность от начала запроса до получения последнего байта в ответе.
7. Waterfall. Визуальная разбивка активности каждого запроса.

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

1. Статус-код ответа: 200, 400, 500
2. Домен, на который идет запрос
3. Тип контента
4. Инициатор запроса (страница, скрипт)
5. Размер ответа и время ответа
6. Protocol. Используется HTTP версии 1,2 или 3
7. Scheme. Схема HTTP или HTTPS
8. Method. GET, POST и т.д.

Выделил эти столбцы красной рамкой на скриншоте ниже.

Теперь обратим внимание на столбец «Тип запроса». В DevTools Network есть несколько типов запросов.

1. XHR —Асинхронный AJAX запрос к серверу.
2. JS — JavaScript скрипты
3. CSS — стили CSS
4. Img — изображения
5. Media — видео
6. Font — шрифты
7. Doc — HTML-документы
8. WS — вебсокеты
9. WASM — скрипты нового языка Web Assembly
10. Manifest — манифесты сайта.Техническая информация про сайт.

DevTools.Network. Дополнительные фичи

— Дополнительные столбцы
— Поиск по названию
— Фильтрация и сортировка
— Preserve log. Позволяет не очищать список запросов при перезагрузке страницы.
— Красная кнопка записи. Позволяет включать и отключать добавление новых запросов для анализа.
— Throttling. Возможность указать нужную скорость загрузки.
— Disable Cache. Отключает кэш браузера, работает только при открытом DevTools.
— Блокирование сетевых запросов. Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы.

Проблемы

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

1. Проблемы с медиафайлами

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

💡 Продумывайте, какой формат изображения использовать. SVG — векторный формат используем для иконок, PNG, если есть прозрачность, JPEG для фотографий, WebP для продвинутого сжатия картинок без потерь в качестве. Формат WebP считается современным, он дает значительное улучшение производительности сайта, однако старые браузеры не поддерживают его.
💡 Размер картинки в среднем не должен превышать 250кб.
💡 Lazy load. Подход, когда картинки подгружаются только, когда пользователь дойдет до них. Сейчас это делается средствами браузера, необходимо только указать в верстке дополнительный атрибут loading co значением lazy.
💡 Не забывайте отслеживать «битые» картинки. Это означает, что картинка не может загрузиться и во вкладке Network будет подсвечиваться красным цветом.
💡 Для видео используйте два формата WEBM+mp4.
💡 Подробно расписал в инструкции по загрузке медиафайлов на сайт.

2. Проблемы с JS, CSS, шрифтами

Для шрифтов советуем использовать формат Woff2 и убирать неиспользуемые начертания шрифтов.

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

CSS, JS:

💡 вес не более 1 мб
💡 либо динамическое подключение компонентов Vue.js (видео)
💡 минификация для JS и CSS. Минимизация ресурсов означает удаление из HTML, JavaScript и CSS кода символов, которые не требуются для загрузки, например пробелы, разделители блоков и т.д.

3. Проблемы с внешними запросами

😖 Блокировки и различные фаерволы. Попробуйте зайти через VPN, чтобы выявить проблему.

😖 Не забывайте про Adblock. Зачастую он негативно влияет на отображение некоторых элементов.

😖 Проблемы с Ajax. Если запрос возвращает ошибку, то посмотрите код ответа, содержание и адрес ошибки, передаваемые параметры. Если запрос слишком тяжелый, то облегчите его и разбейте на части.

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

Симптомы медленного бэка/сервера: долгий главный HTTP ответ.

Какие меры предпринять:

1. Оптимизация Backend-a.

👨‍💻 Работа с БД. Проектируйте базы данных руками, используйте индексы, устраняйте лишние запросы.
👨‍💻 Кэширование запросов к БД, HTML, статика (JS, шрифты и т.д.).
👨‍💻 Очереди. Отправка Email, запросы по API. Используйте фоновое выполнение долгих задач.

2. Оптимизация сервера

🛠 Ресурсы сервера. Посмотрите, на что тратятся ресурсы, добавьте RAM, ядра CPU.
🛠 Вертикальный способ. Возьмите сервер помощнее.
🛠 Горизонтальный способ. Возьмите еще один сервер и распределите по ним нагрузку. Для этого используйте Kubernetes.

3. Настройка сжатия. Проверьте, что файлы, которые отдает ваш сервер, сжимаются с помощью gzip. Это можно проверить в DevTools (вкладка Network).

Выводы

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

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

---

Последние записи блога

---

Please enable JavaScript to view the comments powered by Disqus.

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

Доля интернет-продаж увеличивается с каждым годом. Cогласно исследованию Akamai, в 2017 году она составляла всего 10 % от мировых продаж, в 2019 — уже 14 %, а в этом году, учитывая пандемию, эта цифра вырастет еще стремительнее. Конкуренция в интернете огромная. Вывести сайт в топ поиска и привлечь клиентов — задача намбер ван для предпринимателей и корпораций. Рассказываем, как незначительное увеличение скорости загрузки сайта поможет обойти конкурентов и начать продавать больше.

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

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

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

Оптимальная скорость загрузки — 2-3 секунды. В идеале за этот промежуток времени должна загрузиться страница со всеми ее компонентами. Это тот показатель, к которому надо стремиться.

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

Проанализировать этот показатель можно с помощью инструментов от Гугла и Яндекса.

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

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

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

Показатели в норме отмечены зеленым цветом, а те, которые надо улучшить, — красным. Отчет по показателям находится в разделе «Имитация страницы».

Анализ скорости загрузки сайта

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

PageSpeed Insight выдает конкретные рекомендации и показывает, на сколько секунд повысится скорость

Оценивание идет по 100-балльной шкале. 50–70 баллов — хороший показатель, если ниже — надо дорабатывать сайт.

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

Минусы: неточная диагностика, показатели надо анализировать. Например, если отправить на проверку хорошо оптимизированный сайт весом 15 МБ, то сервис, скорее всего, выдаст результат 100/100 по мобильному/компьютерному анализу. Хотя по факту сайт с таким весом будет тормозить, если его открывать на смартфоне. Стоит отметить, что ресурс проверяет скорость загрузки сайта до DOM (программный интерфейс), минуя интерактивность с пользователем.

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

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

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

Скорость загрузки сайта в Метрике можно посмотреть в разделе «Отчеты» > «Время загрузки страниц». Данные сервис показывает в виде карты: на ней указано время ожидания жителей разных стран и регионов.

Зеленый цвет — все хорошо, красный — сайт медленно загружается

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

Pingdom Website Speed Test. Работает так же, как и PageSpeed Insights: надо указать адрес проверяемого сайта, и через несколько секунд отчет будет готов. Показывает производительность сайта, количество запросов к серверу, время загрузки страниц и размер конкретной страницы.

Информация по оптимизации скорости загрузки

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

Минусы: сервис платный. Платить придется минимум $9,95 в месяц.

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

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

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

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

Для аналитики лучше использовать минимум 3 инструмента — так будет выше точность анализа. 1-2 проблемные зоны в каждом сервисе — это случайность, 3 — закономерная ошибка. Ее стоит устранить.

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

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

Объединить все картинки в одну.

Это называется CSS-спрайт. Так уменьшается общий вес изображений, к серверу отправляется один запрос, и скорость сайта увеличивается. Например, на сайте есть раздел «Способы оплаты» с иконками сервисов, через которые можно платить: Яндекс.Деньги, Вебмани, банковские карточки. Каждая иконка отправляет отдельный запрос на сервер, обработка запроса занимает время, и скорость загрузки падает.

В этом случае поможет CSS-спрайт. Его можно создать с помощью редакторов изображения — объединить все иконки в одно изображение. Картинка будет весить меньше, и сервис получит только один запрос, а не 5 или 10.

Скомбинировать несколько файлов js- и css в один. У JavaScript и CSS есть свои плагины, стили и шрифты. Каждый из них генерирует свой код. Из-за этого на сервер отправляется множество запросов, и скорость загрузки сайта снижается. Если два компонента объединить, то показатели улучшатся.

Если совместить анимацию или активный элемент с табличкой, стилями, то общий вес элементов уменьшится

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

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

Использовать максимум 3 шрифта на одной странице. А лучше один. У каждого шрифта есть вес: чем больше шрифтов на странице, тем больше ее размер. Это влияет на скорость загрузки сайта.

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

Сжать объемные изображения. Уменьшить вес картинок можно в специальных сервисах — например, с помощью Kraken.io.

Таблица для сравнения показателей сайта с эталонными.

Метрика	Описание показателя	Эталонные цифры согласно сервису
Время загрузки контента	Количество секунд до загрузки первой статьи или картинки	0–2 сек.
Индекс скорости	Как быстро появляется информационное содержание (контент)	0–4,3 сек.
Время загрузки основной части контента	Промежуток времени между началом и концом загрузки; он должен совпасть с первой метрикой в таблице	0–2 сек.
Завершение работы ЦП	Когда интерфейс полностью доступен для пользователя	0–4,7 сек.
Время загрузки для использования	Через какое время страничка готова для пользовательского ввода	0–5,2 сек.
Максимальная вероятная задержка после ввода	Время первого взаимодействия с сайтом и отклика самого браузера	0–200 мсек.

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

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

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Оптимизируйте скорость своего веб-сайта с помощью этих 10 лучших практик

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

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

Что такое скорость сайта?

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

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

Скорость сайта можно проверить с помощью различных бесплатных онлайн-инструментов, таких как GTMetrix, Google Pagespeed Insights, WebPageTest, Test my Site by Think with Google и т. д. Давайте подробно рассмотрим каждый инструмент.

• Метрикс GT

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

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

• Pagespeed Insights

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

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

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

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

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

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

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

• Дар скорости

Gift of Speed ​​— один из моих любимых инструментов для измерения скорости веб-сайта. Наряду с показателями измерения скорости этот инструмент также предоставляет услуги по оптимизации скорости веб-сайта.

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

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

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

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

Идеальным подходом является сжатие изображения при его загрузке на сервер. В случае электронной коммерции изображения веб-сайтов являются жизненно важной частью. Изображения на странице продукта улучшают взаимодействие с пользователем. Изображения размером более 100 кб долго загружаются; в результате общая скорость страницы снижается. Рассмотрите возможность использования метода сжатия gzip для уменьшения размера изображения. Сжатие Gzip уменьшает размер изображения на 70%. Для получения дополнительной информации об оптимизации вы можете ознакомиться с нашими 7 советами по оптимизации изображений.

2. Используйте CDN

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

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

CSS используется для украшения вашего сайта. По данным UnusedCSS.com, 35% CSS, реализованных на веб-сайте, не используются. Выявление неиспользуемых файлов CSS и их удаление было бы отличным вариантом для повышения скорости веб-сайта. Этот инструмент можно использовать для обнаружения неиспользуемых файлов CSS и их сжатия.

4. Сократите файлы JS и CSS

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

Лучшие инструменты минификации:

• Чтобы минимизировать HTML, попробуйте HTML Minifier
• Чтобы минимизировать CSS, попробуйте CSSNano и CSS.
• Чтобы минимизировать JavaScript, попробуйте Uglify.

5. Правильно используйте веб-шрифты

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

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

1. Подавать вариант WOFF 2.0 в браузеры, которые его поддерживают.
2. Подавать вариант WOFF большинству браузеров.
3. Подавать вариант TTF в старых браузерах Android (ниже 4.4).
4. Подавать вариант EOT в старые браузеры IE (ниже IE9).

6. Используйте методы предварительной выборки:

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

7. DNS — предварительная выборка

В этом методе доменное имя разрешается заранее, прежде чем пользователь выполнит какое-либо действие. Например, можно выполнить предварительную выборку таких доменов, как Google Analytics, Google Fonts, Google Maps, CDN, LinkedIn, Facebook и т. д.

8. Предварительная выборка ссылок

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

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

9. Уменьшение чрезмерного размера DOM

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

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

• Всего узлов менее 1500.
• максимальная глубина 32 узла.
• Родительский узел с более чем 60 дочерними узлами.

Инструмент Lighthouse — отличный способ проверить, не возникает ли на вашем веб-сайте проблема с чрезмерным размером DOM. Вот как отчет Lighthouse отмечает проблему чрезмерного размера DOM

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

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

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

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

Заключение

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

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

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

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

Согласно другому отчету, «BBC заметила, что они теряют дополнительно 10% пользователей за каждую дополнительную секунду, необходимую для загрузки их сайта».

Подробнее:

Популярные поисковые запросы

Компания SEO в Индии | Услуги цифрового маркетинга  | SEO-агентство  | Местные SEO-услуги  | SEO-услуги для электронной коммерции  | Что такое SEO  | Что такое SEO на странице  | Что такое цифровой маркетинг  | Что такое техническое SEO  | Обновления алгоритма Google  | Google Обратный поиск изображений  | Структура веб-сайта  | Что такое структурированные данные SEO  | Что такое маскировка  | Типы SEO  | Что такое избранный фрагмент  | Список кодов состояния HTTP  | Методы SEO вне страницы  | Что такое контекстная реклама  | Преимущества SEO

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

Как быстро должен загружаться ваш сайт? Так быстро, как это требуется, чтобы получить 90+ Google PageSpeed ​​​​Score. Это общий показатель производительности поисковой системы, конверсий и пользовательского опыта.

Что такое время загрузки страницы (или скорость веб-страницы)?

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

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

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

Если вы не уверены, какая скорость страницы сейчас, используйте бесплатный инструмент Google PageSpeed ​​Insights (PSI), чтобы узнать. Вы хотите набрать больше 90 баллов.

Какое хорошее время отклика веб-сайта?

Для Google показатель PSI 90+ считается хорошим, 50–90 требует улучшения, а ниже 50 — плохим.

Переводя это в секунды: менее 2,5 секунд — это хорошо, 2,5-4 секунды требуют улучшения, а более 4 секунд — это плохо.

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

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

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

Среднее время загрузки

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

Удивительно, насколько плохи большинство веб-сайтов.

Вот некоторые средние значения:

• Веб-сайту требуется 1,286 секунды на компьютере и 2,594 секунды на мобильном устройстве, чтобы отправить свой первый байт информации.
• Google очень хотел бы, чтобы этот первый байт загружался менее чем за 0,2 секунды.
• Полная загрузка веб-страницы занимает 10,3 секунды на ПК и 27,3 секунды на мобильных устройствах.
• Опять же, Google хочет, чтобы это было менее 2,5 секунд.

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

Тем не менее, давайте подробнее поговорим о том, почему вам вообще стоит беспокоиться. (Как и почти все остальное, связанное с веб-производительностью, ответ в основном потому, что это делает Google.)

Как время загрузки влияет на SEO?

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

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

Google проверяет вашу скорость на основе исторических отчетов о пользовательском опыте Chrome и проверок инструментов в реальном времени.

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

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

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

1. 1,2 секунды
2. 3 секунды
3. 4,6 секунды
4. 5,8 секунды

Ответ… 3.

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

И с переходом Google на ранжирование в первую очередь для мобильных устройств сделать это правильно еще более важно.

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

• Когда время загрузки страницы увеличивается с 1 до 7 секунд, вероятность отказа мобильного посетителя увеличивается на 113%.
• При увеличении количества элементов страницы (текст, заголовки, изображения) с 400 до 6000 вероятность конверсии падает на 95%.

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

• 70% страниц превышали 1 МБ.
• 36% страниц превышали 2 МБ.
• 12% превышали 4 МБ.

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

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

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

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

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

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

• 47% людей ожидают, что веб-страницы будут загружаться менее чем за 2 секунды
• 40% покинут сайт, для загрузки которого требуется более 3
• Задержка ответа страницы на 1 секунду может привести к падению коэффициента конверсии на 7%.

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

Увеличение показателя отказов = упущенная выгода. Для сайта электронной коммерции, зарабатывающего 10 000 долларов в день, потеря конверсий из-за задержки в одну секунду может стоить 2,5 миллиона долларов в год.

Почему мой сайт загружается медленно?

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

Веб-хостинги

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

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

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

Нет сети доставки контента

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

JavaScript и Flash

JavaScript и Flash раздутые сайты. Добавляйте их с особой осторожностью, а лучше вообще не добавляйте.

Изображения

Большие, несжатые, неоптимизированные изображения увеличивают размер файлов веб-сайтов. Более объемные форматы изображений, такие как PNG, потребляют пропускную способность.

Плагины CMS

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

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

Со всем этим, как вы можете получить до 90+?

1. Используйте Google PageSpeed, чтобы оценить, где вы находитесь. PageSpeed ​​даст вам первоначальные рекомендации.
2. Воспользуйтесь услугами профессионального веб-хостинга с оптимизированной производительностью.
3. Сжимайте файлы изображений.
4. Используйте сеть доставки контента, например Cloudflare.
5. Откажитесь от WordPress, перейдите на Drupal. Он намного легче.
6. Получите профессиональный код для своего сайта.
7. Разденьте все.
8. Оптимизация для мобильных устройств.
9. Уменьшить количество переадресаций.
10. Сократите HTML, JavaScript, CSS и Flash.

Эти шаги помогут повысить скорость загрузки вашего веб-сайта. Вам не нужно зацикливаться на достижении 100. Это редко и 90+ сделает свою работу. Но будьте в курсе последних изменений в веб-технологиях.

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

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

Обратитесь к нам за помощью в этом.

Райан Пеликос

Координатор по маркетингу

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