Оптимизация скорости загрузки сайта: как проверить и увеличить

Елизавета Теряева

Редактор блога

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

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

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

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг

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

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

• Показатель отказов (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).

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

Заключение

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

Сквозная аналитика

 от 990 рублей в месяц

• Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
• Анализируйте воронку продаж от показов до ROI
• Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
• Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
• Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

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