На скорость отображения веб-страницы влияет ряд факторов:
- Количество HTTP-запросов серверу.
- Валидность HTML кода.
- Вес, размер и формат изображений.
- Объем кода CSS и JS.
- Место размещения элементов CSS и JS на странице.
- Количество редиректов страницы.
- Кэширование содержимого.
- Настройки сжатия файлов.
- Использование системы CDN.
При грамотном подходе все можно оптимизировать. Поэтому давайте рассмотрим подробнее.
Проверка и уменьшение времени ответа сервера
В отличие от скорости полной загрузки, время ответа сервера – это период от браузерного запроса до вывода на экран первого байта страницы.
Для успешного ранжирования этот показатель не может превышать 200 миллисекунд. Оптимальный результат – в 4 раза меньше. Если время ответа сервера превышает 200 миллисекунд, то надо принимать меры. Проверить время ответа сервера можно с помощью:
- DevTools;
- Google Analytics;
- Netpeak Spider;
- Serpstat;
- GTmetrix и др.
Следует опираться на простое правило – каким бы ни был ваш результат, его всегда нужно стремиться сократить. Это можно сделать с помощью CDN (Content Delivery Network) – географически распределенной сети серверов.
CDN загружает веб-файлы с ближайшего сервера. За счет сокращения расстояния между сервером и пользователем графический и текстовый контент загружается быстрее. Также обращайте внимание на качество хостинга – оно напрямую связано с мощностью сервера.
Техническая оптимизация сайта
В ходе разработки и администрирования могли быть допущены ошибки, которые привели к медленной загрузке. Также возможны хакерские атаки, которые влияют на общую работоспособность сайта. Среди самых распространенных ошибок:
- лишние редиректы;
- несоблюдение валидности верстки;
- наличие вирусов и вредоносного кода;
- плохой код бэкенда;
- лишние запросы к базе данных;
- отсутствие кэширования.
Любая из этих ошибок будет негативно сказываться на скорости загрузки, мешать продвижению и правильной индексации сайта, что ведет к занижению позиций в выдаче.
Поэтому лучше делать SEO-оптимизацию на этапе создания сайта и привлекать SEO-специалиста в ходе текущей работы.
В случае с уже существующим сайтом надо начать с SEO-аудита – это поможет определиться с дальнейшими действиями и устранить ошибки. Для проверки на вирусы можно использовать Quterra, Sucuri и другие популярные сервисы.
Оптимизация CSS и Javascript
Чем больше перегружен сайт, тем медленнее загружаются его страницы. Ускорить процесс можно 5 способами:
- Выполнить минификацию кода с помощью специальных сервисов: Minifier, Willpeavy, CSS Compressor.
- Использовать правильную очередность загрузки ресурсов, осуществить правильную компоновку CSS – в начале страницы для постепенного отображения.
- Минимизировать количество JavaScript кода для отрисовки первого экрана (переместить его в конец страницы, чтобы браузер загружал скрипты после текстов и изображений.
- Подключить JavaScript и CSS по типам страниц, чтобы исключить траты времени загрузки на файлы, которые не используются.
- Отказаться от запросов @import url("style.css").
Работа с контентом на сайте
Изобилие визуального контента сказывается на скорости загрузки ресурса, при этом показатели разных страниц могут сильно отличаться.
Рекомендуем проверить быстродействие каждой страницы отдельно и работать с теми, которые действительно нуждаются в оптимизации.
Сжатие изображений
Не всегда целесообразно использовать фотографии с высоким разрешением, особенно для мобильных версий сайтов. Для экономии места их следует сжимать и конвертировать.
Учитывайте, что изображение должно быть как можно меньше, но без заметной глазом потери качества при его оптимизации. Программы Screaming Frog и Netpeak Spider указывают, как ошибку графические файлы размером более 100 Кб.
Стоит использовать GZIP сжатие, благодаря которому без потери качества изображений можно вдвое сократить объем загружаемого контента, а значит – увеличить скорость загрузки.
Чтобы «облегчить» изображения можно уменьшить их физические размеры, но есть и другой способ – оптимизировать параметры сохранения.
Файлы изображений часто содержат избыточные мета-данные, удаление которых не повлияет на качество, но сократит размер картинки.
Если у вас есть видео, то для ускорения загрузки первого видимого контента лучше разместить его ниже на странице и использовать отложенную загрузку (lazy loading). Тогда видео будет загружаться по мере прокрутки страницы (скролла), что хорошо с точки зрения поведенческих факторов.
Оптимизация шрифтов
Веб-шрифты (при их относительно незначительном весе) могут негативно влиять на скорость загрузки. Факторы влияния следующие:
- Количество шрифтов. Многообразие – явное излишество. На быстрых сайтах обычно используется 1–3 шрифта с не более, чем 3 начертаниями для каждого.
- Подбор шрифтов. Некорректные наборы шрифтов и загрузка вариантов, которые не поддерживают текущий язык сайта – распространенное упущение.
- Показ при загрузке. Чтобы посетителям не приходилось смотреть на пустой экран в ожидании загрузки файла шрифта, следует добавить в стили свойство «font-display:swap», благодаря чему текст будет до загрузки отображаться системным шрифтом.
- Использование шрифтов WOFF2. Это сжатая версия формата WOFF. WOFF2 использует алгоритм Brotli для сжатия данных шрифта, благодаря чему размеры файлов становятся меньше, чем у шрифтов WOFF. В результате шрифты на сайте прогружаются быстрее.
Применение любого инструмента оптимизации шрифтов следует сопровождать тестами быстродействия, чтобы узнать наиболее результативный метод повышения скорости загрузки.
