Навигация по статье

Почему это важно и как избежать лишней работы Метод 1. Оптимизация изображений Метод 2. Минификация CSS, JavaScript и HTML Метод 3. Оптимизация скорости ответа сервера Метод 4. Использование адаптивного дизайна Метод 5. Применение асинхронной загрузки Метод 6. Использование preload Метод 7. Оптимизация работы сторонних скриптов Итоги

Александр Шестаков

7 способов ускорить сайт: обходим технические сложности с помощью готовых решений

Статья

499

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

Меня зовут Александр Шестаков, руководитель платформы LinksSape, и в этой статье мы разберем, что улучшить, чтобы ускорить сайт без серьезных доработок и лишних затрат времени разработчиков.

Почему это важно и как избежать лишней работы

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

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

Не забудьте замерить метрики на старте с помощью Google PageSpeed Insights и Lighthouse и после каждой итерации замеряйте эффективность.

Итак, давайте рассмотрим методы оптимизации скорости загрузки.

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

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

1. Массовое сжатие изображений

Рекомендуемый вес изображений — до 100-150 КБ, а из форматов наиболее оптимальный — WebP: он предлагает сжатие с наименьшими потерями.

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

В Wordpress — Imagify, ShortPixel, WebP Converter for Media. Также последние версии Wordpress автоматически генерируют изображения в формате WebP при загрузке, если сервер поддерживает его обработку.
В Drupal — модули WebP Support и Picture.
В ModX — сниппет ImageWebP и пакет pThumb.
В OpenCart — расширение WebP Image Converter.
В Magento 2 — модуль Mageplaza WebP Image Optimizer.

Как это работает:

Изображения в формате JPEG/PNG загружаются в CMS.
Система или плагин создают WebP-версии (с настройкой качества).
В HTML-коде автоматически подставляется WebP-версия, если браузер поддерживает этот формат (через <picture> или HTTP-заголовки).

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

2. Использование адаптивных изображений

Адаптивные изображения подстраиваются под размер экрана пользователя: это означает, что на мобильном устройстве будет загружено изображение с меньшим размером, и страница загрузится быстрее. HTML5 предлагает тег <picture> и атрибут “srcset”, позволяя разработчикам определять различные версии изображения для разных экранов. Например, одно для десктопов, другое для планшетов и третье для мобильных телефонов. Браузер пользователя автоматически выбирает правильный вариант.

Также для многих CMS можно использовать инструменты вроде ShortPixel или Imagify, которые мы упоминали выше: они создают несколько версий изображения при загрузке и подставляют их в <picture> или <img srcset> автоматически.

3. Ленивая загрузка (Lazy Loading)

Ленивая загрузка — техника, при которой изображения на странице загружаются только тогда, когда попадают в поле зрения пользователя. Это уменьшает количество данных, необходимых для загрузки, и ускоряет ее отображение. Многие современные CMS, такие, как WordPress, включают поддержку ленивой загрузки в свои последние версии. Большинство фреймворков типа React и Vue также используют библиотеки и компоненты для ленивой загрузки.

Хорошая практика — резервировать место под ширину и высоту для изображения: если этого не сделать, контент будет «прыгать» и смещаться, что повлияет на метрику CLS (Content Layout Shift). Такие скачки раздражают пользователей и негативно влияют на метрики Core Web Vitals. Чтобы сохранить стабильность макета, указывайте атрибуты width и height для изображения.

Также настраивайте «коридор» загрузки: например, можно загружать изображения за 500px до того, как они появятся в зоне видимости пользователя.

Используйте Lighthouse в Chrome DevTools для проверки, применяется ли ленивая загрузка, и WebPageTest для анализа влияния ленивой загрузки на скорость. Screaming Frog поможет проверить, есть ли на сайте изображения без атрибута loading=”lazy”.

Метод 2. Минификация CSS, JavaScript и HTML

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

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

CSS — минимизация CSS уменьшает размер стилевых файлов, и благодаря этому стили грузятся быстрее. Использование инструментов или CSS Compressor или CSS Minify автоматизирует этот процесс.
JavaScript — сжатие JavaScript-файлов увеличивает скорость выполнения скриптов на сайте. Используйте UglifyJS или Terser для удаления неиспользуемого кода.
HTML — минимизация HTML удаляет лишние пробелы и комментарии из разметки, уменьшая общий размер файлов и ускоряя их обработку браузером. Для этой цели можно использовать инструмент HTMLMinifier.

Сервис позволяет минифицировать HTML-код

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

Используйте сборщиков проектов — инструменты сборки (например, Webpack, Gulp или Grunt) позволяют автоматически минимизировать код, оптимизируя файлы при их сохранении.
Установите плагины для CMS — для популярных CMS, таких как WordPress, есть плагины (например, WP Rocket и Autoptimize), которые автоматически минимизируют CSS, JS и HTML, ускоряя работу сайта.

Метод 3. Оптимизация скорости ответа сервера

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

Способы улучшения времени ответа сервера:

Оптимизация конфигурации — убедитесь, что сервер правильно настроен и оптимизирован для обработки запросов. Например, для серверов Apache и Nginx можно настроить кэширование и сжатие данных.
Использование CDN — сеть доставки контента помогает уменьшить время ответа, отправляя ответ с ближайшего к пользователю сервера. Используйте Cloudflare, Akamai или AWS CloudFront для снижения нагрузки на основной сервер и улучшения стабильности сайта.

Оптимизация баз данных — убедитесь, что запросы к базе данных эффективны и не создают излишней нагрузки на сервер. Индексация базы данных может значительно ускорить время обработки запросов.
Кэширование контента — настройка кэширования на сервере позволяет временно хранить копии часто запрашиваемых ресурсов, уменьшая время ответа. Для оптимизации этого процесса используйте технологии кэширования, такие как Varnish или Memcached.
Использование сжатия — сжатие на сервере уменьшает размер передаваемых файлов (HTML, CSS, JavaScript и др.), что ускоряет загрузку страницы. Меньший размер файла = меньше времени на скачивание. Это особенно важно для мобильных пользователей и медленного интернета. Активируйте сжатие с помощью GZIP или Brotli: последний эффективнее, но требует совместимости с браузерами.
Выбор надежного хостинга — качество хостинг-провайдера имеет огромное значение. Если вы замечаете, что сервер часто перегружен или время ответа высокое даже после оптимизации, возможно, стоит рассмотреть переход на другой хостинг или более мощный сервер.

Проверка использования CDN: страница загружается с разных IP-адресов для разных городов, значит, сайт использует CDN

Метод 4. Использование адаптивного дизайна

Google начал использовать Mobile First с 2016 года (полное внедрение завершилось к 2018). Это значит, что при индексации и ранжировании сайтов поисковик в первую очередь анализирует мобильную версию, а не десктопную. Сайты с адаптивным дизайном, быстрой загрузкой на мобильных устройствах и удобной навигацией получают преимущество в выдаче.

Как достичь адаптивности:

Используйте мобильные метатеги (например, <meta name=”viewport”>) — для правильного масштабирования на телефонах.
Указывайте размеры в процентах вместо пикселей — элементы будут автоматически сжиматься или расширяться, чтобы поместиться на любом устройстве.
Применяйте разные стили для разных типов экранов — например, меню можно преобразовывать в «гамбургер» на маленьких устройствах.
Используйте адаптивные изображения — внедряйте атрибут srcset для автоматической подгрузки подходящих размеров.

Для проверки используйте Responsinator — он показывает, как сайт выглядит на разных устройствах:

Адаптивность дизайна можно протестировать в специальных сервисах

Метод 5. Применение асинхронной загрузки

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

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

Для реализации асинхронной загрузки подойдут следующие методы:

Использование атрибутов async и defer в тегах <script> — атрибут async позволяет скрипту загружаться асинхронно, в то время как атрибут defer загружает скрипт в фоне, но выполняет его только после того, как HTML-документ будет полностью разобран. Выбор между async и defer зависит от того, требуется ли скрипту доступ к DOM-дереву и в какой момент его нужно выполнить.

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

Принцип работы асинхронной загрузки

Метод 6. Использование preload

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

Настройка проста: используйте <link rel=”preload”> с правильными атрибутами. Пример:

Чтобы точнее определить, что является критическим, проверьте в Lighthouse или GTMetrix, какие ресурсы блокируют рендеринг или влияют на LCP. Также в Chrome DevTools в разделе Coverage можно посмотреть, какие части CSS/JS используются на первом экране.

За счет выполнения скриптов, блокирующих интерактивные элементы на странице, приходится ждать несколько секунд, чтобы использовать функционал

Метод 7. Оптимизация работы сторонних скриптов

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

Как уменьшить влияние сторонних скриптов на скорость загрузки:

Загружайте скрипты асинхронно: это позволит браузеру загружать скрипт параллельно с парсингом HTML, не дожидаясь завершения загрузки скрипта. Это полезно для тяжелых скриптов вроде аналитики и чата.
Используйте requestAnimationFrame для отложенного взаимодействия, чтобы скрипт был задействован только тогда, когда основной контент будет загружен — например, когда пользователь открывает окно чата.
Переместите некритичные скрипты в нижнюю часть страницы, перед закрывающим тегом <body>.

Также важно мониторить и контролировать все плагины, которые устанавливаются на сайт: например, Jivosite, Carrot Quest или Яндекс Метрика могут сильно замедлить скорость открытия сайта не из России, при этом не все установленные плагины могут быть действительно актуальны для сайта в определенный момент времени. Добавление всех новых скриптов желательно согласовывать через QA-команды, чтобы не потерять в качестве работы сайта.

Итоги

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

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