Медленные сайты не устраивают ни пользователей, ни поисковые системы. Благодаря современным технологиям и высокоскоростному интернету люди отвыкли ждать. Оптимизация скорости загрузки сайта должна стать первоочередной задачей для создателей интернет-проектов.
Зачем проверять скорость загрузки страниц
В настоящее время поисковые движки стали гораздо сложнее. Эти интеллектуальные алгоритмы больше не принимают во внимание искусственные количественные показатели наподобие ссылочной массы или высокой частоты ключевых слов, о чём мы говорили в статье Как определить релевантность страниц сайта.
Ведущую роль сейчас играют поведенческие факторы, отражающие характер взаимодействия пользователей с сайтом. К ним относятся:
- Показатель отказов (bounce rate)
- Глубина просмотра страниц
- Длительность сессии
И несколько других. Подробнее об этом читайте в статье Поведенческие факторы на сайте.
Как раз показатель отказов, а вслед за ним и остальные параметры зависят от первых миллисекунд пользовательского опыта. Если конкретно — от скорости загрузки сайта. Если вы только начинаете свой путь, и сайт только недавно заработал, вам может разобраться в верности ваших шагов продукты Calltouch.
В пору сверхскоростного интернета, доступного почти везде, а в крупных городах — повсеместно, время загрузки сайта становится одним из определяющих факторов при работе с ним. Пользователи привыкли к скорости.
Во время выбора среди нескольких поставщиков товара, услуги и информации велика вероятность моментального отсеивания посетителем сайтов, которые начинают зависать при переходе на них.
За скорость загрузки веб-разработчики ведут нешуточную борьбу, прибегая к различным инструментам анализа и повышения качества данного параметра. Как это происходит на практике — далее.
От чего зависит скорость загрузки
Загрузка производится путем обмена данными между двух сторон — браузером (со стороны пользователя) и сервером (на нем хранятся все файлы). Замедление может происходить из-за:
- слабого сервера: ему не хватает мощности (процессора, оперативной памяти);
- неоптимизированного движка (CMS): если ядро прописано неопытными программистами;
- слишком удаленного от клиента сервера: физически файлы могут храниться в Европе, а пользователь запрашивает информацию из Москвы — системе нужно время, чтобы связать две точки;
- перегруженности сайта: браузеру приходится загружать картинки, текст, стили и прочие элементы;
- подбора контента: файлы весят больше, чем должны.
Чтобы устранить эти проблемы необходимы методы оптимизации сайта.
На что влияет скорость загрузки сайта
Современный пользователь нетерпелив — если сайт моментально не открылся, он его покидает. Также скорость загрузки влияет на факторы СЕО.
Индексация
Это процесс внесения информации о сайте в базу данных поисковой системы. Робот поочередно открывает страницы, анализирует их и распределяет в выдаче. Если создатель сайта хочет, чтобы покупатели легко находили его продукт, ему нужно попасть в топ поисковых систем. Это невозможно без быстрой индексации.
На скорость обновления информации влияет много факторов: правильный файл robots.txt, ошибки в коде, в том числе и скорость загрузки сайта. Робот учитывает показатели оптимизации как для мобильных устройств, так и для компьютеров. Более удобные сайты индексируются быстрее остальных и, соответственно, занимают более высокие позиции в ранжировании.
Ранжирование
Поисковая система развивается, чтобы улучшить качество интернет-сервиса. Если сайт загружается быстро, то пользователю не приходится ждать, пока материал отобразится в браузере (скорость особенно актуальна для мобильных телефонов).
Google официально объявил, что если портал отображается с задержками, то он будет терять позиции ранжирования в системе. Официальных публикаций от Яндекс на этот счет не было, но оптимизаторы сходятся во мнении, что при ранжировании в любой поисковой системе скорость играет важнейшую роль.
Конверсия
В 2019 году Коли Лафран (редактор Unbounce) опубликовал исследование о скорости загрузки страниц. Согласно опросам, проведенными его командой, были сделаны выводы:
- около 70% пользователей признают, что скорость загрузки влияет на шанс их покупки;
- 19% маркетологов не признают, что показатели сказываются на конверсии.
Исходя из исследований Лафрана, задержки в открытии страницы негативно отражаются на готовности пользователя совершить целевое действие (просмотреть видео, изучить материал, купить товар или др.).
Какую скорость загрузки считать нормой
Нормы загрузки сайта:
- 1-3 секунды — хорошо;
- 4-7 — нормально, но лучше оптимизировать;
- 8-11 — очень плохо, пользователи покидают сайт.
Если сайт перестанет обращать внимание на скорость отображения страницы, то до 60% пользователей начнут уходить (если загрузка длится дольше трех секунд).
Эффективный маркетинг с Calltouch
- Анализируйте воронку продаж от показов рекламы до ROI от 990 рублей в месяц
- Отслеживайте звонки с сайте с точностью определения источника рекламы выше 96%
- Повышайте конверсию сайта на 30% с помощью умного обратного звонка
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Добавьте интеграцию c CRM и другими сервисами: более 50 готовых решений
- Контролируйте расходы на маркетинг до копейки
Обзор сервисов для проверки скорости загрузки сайта
PageSpeed Insights
Продукт от Google, работает и для десктопных сайтов, и для мобильных. В начале общий результат отображается по шкале от 1 до 100, где 100 — идеальная ситуация, в которой скорость загрузки стремится к нулю, причём иногда его достижение реально. В обоих случаях даётся развёрнутая аналитика по перечню значимых факторов и рекомендации по каждому:
- Данные наблюдений
- Origin Summary
- Имитация загрузки страницы
- Оптимизация
- Диагностика
- Успешные аудиты
С помощью Lighthouse инструмент эмулирует 3G-сеть для загрузки сайта. В разделе имитации загрузки отмечаются следующие параметры:
- Время загрузки первого контента
- Индекс скорости загрузки
- Время загрузки для взаимодействия
- Время загрузки достаточной части контента
- Время окончания работы ЦП
- Приблизительное время задержки при вводе
Они оцениваются в секундах, а иконка показывает, является ли значение высоким, средним или низким по качеству. Каждый показатель снабжён пояснением.
В разделах Оптимизация, Диагностика и Успешные аудиты приведены детальные рекомендации по улучшению факторов загрузки сайта.
Pingdom Tools
Бесплатный инструмент в рамках комплексного сервиса Pingdom. Имеется лишь англоязычная версия, но это не существенный аспект, ведь функционал довольно продвинутый и даёт ясное понимание положения дел.
Сперва пользователь должен ввести адрес страницы в строку и выбрать регион, из которого будут поступать запросы к сайту. После этого можно приступать непосредственно к анализу.
Результатом будет балльная оценка и категория качества — от A до F, где A — наилучший результат. Также в списке главных параметров система отображает размер страницы, скорость загрузки и каким количеством запросов тестировалось подключение.
Далее последует раздел Improve page performance, в котором будут даны чёткие рекомендации по улучшению содержимого страницы с точки зрения кода, необходимые для оптимизации скорости загрузки.
После тестирования Response code 200 — кода ответа страницы — располагается раздел с указанием веса элементов сайта по категориям:
- скрипты
- HTML
- шрифты
- изображения
- CSS
Тут же имеется таблица с размерами разных категорий загружаемой страницы и количество обращений к категориям контента.
В заключении пользователя знакомят с последовательностью загрузки элементов в виде диаграммы, где в секундах отмечено время загрузки каждого из них в хронологическом порядке.
Наглядная информация вкупе с детальными рекомендациями делает сервис одним из самых полезных инструментов анализа скорости загрузки сайта и улучшения показателя.
WebPageTest
Запуск осуществляется после указания адреса страницы, ввода геолокации и браузера.
Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые малозначимые и дилетантские.
Основные инструменты анализа — диаграммы, где отображена последовательность загрузки всех элементов с разбивкой на этапы. На некоторой позиции устанавливается фиолетовая вертикальная линия — момент полной отрисовки сайта. Затем — синяя линия — окончательная загрузка. Соответственно, их расположение не должно превышать 2-3 секундной отметки. Показатели весьма условные и предостерегают только от экстремальных случаев. В целом, следует минимизировать и то, и другое время.
Детальный анализ даётся по всем запросам, что позволяет вместо усреднения посмотреть картину загрузок в динамике и понять, какие запросы отражают реальное положение дел, а какие не вписываются в общую тенденцию.
Другие инструменты
Было перечислено ограниченное количество наиболее востребованных и профессиональных инструментов, которые дают максимальный эффект от использования. Но существуют и аналогичные сервисы, каждый со своими достоинствами и недостатками, которые могут заинтересовать пользователей. В частности:
- GTmetrix
- Load Impact
- PR-CY
- Monitis Tools
Как ускорить загрузку сайта
Один из бывших сотрудников Facebook и основатель 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:
- WordPress — в работе поможет расширение Autoptimize (также можно скачивать измененные элементы из PageSpeed Tool);
- Opencart — рекомендуется уменьшить размеры статичных элементов (Nix-системы могут быть улучшены при помощи ModPagespeed);
- Joomla — изображения должны быть оптимизированы под Web, тогда их объем снизится (нельзя загружать иллюстрации с большим разрешением для CSS и HTML);
- 1C Битрикс — в панели управления имеется много настроек (пользователь может корректировать «Автокэширование» и др.).
Рекомендации по увеличению скорости загрузки
Для увеличения скорости загрузки сайта необходимо принять ряд мер, которые касаются как работы с контентом, так и серьёзных манипуляций в коде и структуре.
- Оптимизация базы данных. Приведите базу данных к структуре, при которой запросы к содержимому не нагружают её.
- Выберите быстрый хостинг. Немаловажным фактором является то, где располагается ваш домен. С одной стороны, лучше довериться надёжным площадкам с большим количеством пользователей, но с другой, стоит удостовериться, что эти пользователи не перегружают хостинг.
- Расположите второстепенные элементы в конце кода. Если они располагаются в начале, то их загрузка запускается первой, и в случае задержек они тормозят отображение основного контента.
Результаты проделанной на сайте работы помогут проанализировать продукты Calltouch.
Как закрепить результат
Для постоянного качества функционирования сервиса показатели нужно поддерживать, мониторить и налаживать.
Поддержка ускорения
Все веб-ресурсы находятся в постоянной доработке. Меняются шаблоны, контент, шрифты и даже программный код. Любое изменение может отразиться на скорости.
Владелец должен ввести систему мониторинга, чтобы сразу определять динамику, выявлять причины падения трафика.
Чтобы постоянно публиковать «правильный контент» в системы управления требуется ввести оптимизирующие процедуры. Особенно это касается картинок.
Мониторинг реальной скорости у пользователей
Постоянное тестирование в идеальных серверных условиях полезно для отслеживания эффекта от изменений в коде, но этого мало. Любой владелец сайта хочет, чтобы страница работала не только у него, но и у пользователя. Для сбора нужной информации есть специальные сервисы (RUM).
Для введения системы нужно подключить одну из аналитик ПС и изучить отчеты о времени открытия страницы. Для подробных и точных сведений можно воспользоваться полноценными ресурсами.
Заключение
Ускорение загрузки сайтов — это довольно молодое направление оптимизации. Процедура важна в конкурентной борьбе. Владелец сайта всегда должен помнить о пользователях и их удобстве. Тогда проект будет развиваться и зарабатывать деньги.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
