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

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

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

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

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

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

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

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

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

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

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

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

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

Замедление может происходить:

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

Чтобы устранить эти проблемы, необходимо сделать оптимизацию.

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

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

Индексация

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

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

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

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

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

Конверсия

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

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

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

Маркетинг

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

Как маркетологу работать с SEO-подрядчиком: 11 признаков, что все идет хорошо (или не очень)

Как маркетологу работать с SEO-подрядчиком: 11 признаков, что все идет хорошо (или не очень)

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

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

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

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

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

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

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

Обзор сервисов для проверки скорости загрузки сайта

PageSpeed Insights

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

• данные наблюдений;
• Origin Summary;
• имитация загрузки страницы;
• оптимизация;
• диагностика;
• успешные аудиты.

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

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

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

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

Pingdom Tools

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

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

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

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

После тестирования Response code 200 — кода ответа страницы — идёт раздел с указанием веса элементов сайта по категориям:

• скрипты;
• html;
• шрифты;
• изображения;
• css.

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

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

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

WebPageTest

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

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

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

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

Другие инструменты

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

• GTmetrix;
• Load Impact;
• PR-CY;
• Monitis Tools.

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

Один из бывших сотрудников 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.

Маркетинг

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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