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

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

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

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

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

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

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

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

• показатель отказов (bounce rate);
• глубина просмотра страниц;
• длительность сессии.

И несколько других. Подробнее об этом читайте в статье «Поведенческие факторы на сайте».

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

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

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

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

От чего зависит скорость загрузки

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

Нагрузка на сервер

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

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

Тип хостинга

Разновидности хостинга влияют на скорость сайта. Так, самый медленный — общий (Shared) — ресурсы делятся между множеством сайтов. Виртуальный (VPS) и выделенный (Dedicated) серверы обеспечивают более высокую скорость. Облачный хостинг динамически перераспределяет мощность, подстраиваясь под нагрузку.

Версия PHP

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

Вес сайта

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

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

Скрипты и плагины

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

CMS

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

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

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

Индексация

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

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

Ранжирование

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

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

Конверсия

Еще в 2019 году Колин Лафран (редактор Unbounce) опубликовал исследование о скорости загрузки страниц. Согласно опросам, проведённым его командой, были сделаны выводы:

• около 70% пользователей признают — скорость загрузки влияет на вероятность их покупки;
• 19% маркетологов не согласны, что эти показатели сказываются на конверсии.

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

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

Маркетинг

Читайте также:

Ведение корпоративного блога: нужен ли он и как вести правильно

Ведение корпоративного блога: нужен ли он и как вести правильно

Какую скорость загрузки считать нормой

Нормы загрузки сайта:

• 1–3 секунды — хорошо;
• 4–7 — нормально, но лучше оптимизировать;
• 8–11 — очень плохо, пользователи уходят.

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

Эффективный маркетинг с Calltouch

• Анализируйте весь маркетинг и продажи в одном окне
• Удобные дашборды и воронки от показов рекламы до ROI

Узнать подробнее

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

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

PageSpeed Insights

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

С помощью инструмента Lighthouse сервис эмулирует 3G-сеть для закачки сайта. В разделе имитации загрузки отмечаются следующие параметры:

• первая отрисовка контента;
• индекс скорости (speed index);
• время загрузки для взаимодействия (Time to Interaction, TTI);
• загрузка достаточной части контента (FMP);
• время окончания работы ЦП (First CPU Idle);
• приблизительное время задержки при вводе (Estimated Input Latency).

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

В разделах «Показатели», «Диагностика» и «Успешные аудиты» приведены детальные рекомендации по улучшению факторов загрузки сайта.

WebPageTest

Запускается анализ после указания URL, геолокации и браузера.

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

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

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

GTmetrix

Сервис оценивает сайт по ключевым метрикам (LCP, TBT, CLS) и выдает подробные рекомендации по оптимизации. Особенность этой программы — возможность тестирования из разных регионов и с разной скоростью соединения. GTmetrix, как и WebPageTest, показывает waterfall-график загрузки элементов страницы, что помогает выявить узкие места.

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

UpTrends

Это решение для проверки скорости сайта дает возможность провести мониторинг с разных серверов по всему миру. Сервис проверяет загрузку на мобильных и десктопных устройствах, а также позволяет тестировать работу сайта за файрволом. Важная особенность — возможность эмулировать различные сети (3G, 4G, Wi-Fi) и браузеры.

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

PR-CY

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

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

Sitespeed

Инструмент хорошо подходит для разработчиков и QA-инженеров. Это инструмент с открытым исходным кодом для глубокого анализа скорости сайта. Он собирает данные о загрузке страниц, проверяет метрики Web Vitals. Особенность — возможность автоматического тестирования большого количества страниц и использования в DevOps-среде.

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

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

Один из бывших сотрудников Facebook (продукт компании Meta, признанной экстремистской организацией в России) и основатель Pave Д. Митчел так описал начало оптимизации: «Прежде чем начинать что-то ремонтировать, сначала нужно понять, что сломалось».

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

Серверная оптимизация

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

Хостинг (серверные ресурсы)

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

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

СУБД (сервер базы данных)

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

Управление этим происходит путём применения СУБД. Одна из эффективных и популярных — MySQL. Это ПО с открытым исходным кодом, разработанная компанией Oracle в 1995 году. Владельцу сайта стоит заняться оптимизацией таблиц MySQL, чтобы обойти ошибки в обработке данных и сильно ускорить отображение контента на сайте.

Влияние CMS и программного кода

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

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

Кэширование

Это одно из мощных средств увеличения скорости загрузки. Кэширование делается на сервере, а не на заголовках. Если для вычисления используются серьёзные ресурсы, то нужно перенести результат в кэш и обновлять его регулярно. Идея простая, но трудная в исполнении. Алгоритмы кэширования встроены в языки программирования, CMS и серверы.

Процедура помогает уменьшить рендеринг (сократить до миллисекунд). В таком случае на сервер могут пойти пики трафика. Сложность в том, что не всё удаётся кэшировать или кэш неправильно удалён. Если с этими трудностями справиться, то процедуру можно назвать эффективной.

Оптимизация TCP, TLS, HTTP/2

Регулировка TCP полезна для больших проектов и серверов со скоростью от 10G. Так как сетевая подсистема постоянно обновляется с выпуском новых ядер Linux, поэтому нужно вовремя делать обновление.

Корректировка TLS (HTTPS) помогает повысить безопасность и снизить время на подключение защищённого соединения. Рекомендации по настройке были выпущены компанией Mozilla.

HTTP — HTTP/2 нужен для ускорения работы ресурса. Протокол был придуман совсем недавно, но уже используется в 20% случаев. Однако полагаться только на HTTP — HTTP/2 не стоит, так как ускорение не слишком успешно.

Клиентская оптимизация

Процесс ориентирован на всё, что происходит со стороны клиента (в браузере). Это усложняет контроль, так как требует учёта разных браузеров, устройств, и формирует несколько направлений. Рассмотрим самые эффективные из них.

Оптимизация критического пути: CSS, JS

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

Самый простой метод — запустить аудит в браузере от Google (панель разработчика) и подключить Lighthouse (вычисляет состав и время загрузки с учётом слабого соединения).

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

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

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

Улучшения устраняют лишний объём трафика и позволяют быстро получать файлы. Трафик удаётся урезать путём применения новых форматов: WOFF2 или WOFF (для совместимости). А также стоит активировать наборы только используемых на сайте шрифтов (латиница, кириллица или др.).

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

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

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

• в png для прозрачных файлов с текстом;
• в jpeg для фото и многосоставных картинок;
• в svg для вектора.

А также можно использовать новые форматы — WebP или другие, вместо png и jpeg.

Кэширующие заголовки

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

Если портал работает с Nginx, то стоит добавить: add_header Cache-Control “max-age=31536000, immutable”. Это позволит браузеру кэшировать сайты на период до 12 месяцев. Для изменения такого ресурса можно корректировать url-адрес. Например, к имени файла добавляется версия.

Сжатие данных

Обязательно требуется сжатие любой текстовой информации при отправке с сервера. Большинство серверов посылают ответ при помощи gzip. Но обычной активации процедуры не хватает. Уровень сжатия можно настроить — он должен быть почти максимальным.

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

Можно также применять более совершенные системы сжатия: Zopfli и Brotli.

Использование CDN

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

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

Рассмотрим популярные CMS.

1. WordPress. В работе поможет расширение Autoptimize. А также можно скачивать изменённые элементы из PageSpeed Tool.
2. Opencart. Рекомендовано уменьшать размеры статичных элементов (Nix-системы могут улучшаться с помощью ModPagespeed).
3. Joomla. Изображения должны быть оптимизированы под Web, тогда их объём снижается (нельзя загружать иллюстрации с большим разрешением для CSS и HTML).

1C Битрикс. В панели управления есть много настроек (можно корректировать «Автокэширование» и др.).

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

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

1. Оптимизация базы данных. Приведите базу данных к такой структуре, при которой запросы к содержимому не нагружают.
2. Быстрый хостинг. Важно, где хостится домен. С одной стороны, лучше надёжные площадки, где много пользователей. Но с другой, стоит удостовериться, что эти пользователи не перегружают хостинг.
3. Размещение второстепенных элементов в конце кода. Если неважные элементы находятся в начале кода, то их загрузка запускается первой. И в случае задержек они тормозят отображение основного контента.

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

Маркетинг

Читайте также:

Как мы искали формулу успеха в Facebook Ads* для В2В-продукта

Как мы искали формулу успеха в Facebook Ads* для В2В-продукта

Как закрепить результат

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

Поддержка ускорения

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

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

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

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

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

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

Заключение

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