Скорость страницы и SEO: загрузка сайта менее чем за 2 секунды

Скорость страницы это и фактор ранжирования в SEO, и бизнес-показатель. Быстрые страницы выше ранжируются в Google. Быстрые страницы также чаще превращают посетителей в клиентов. Исследования показывают, что задержка загрузки на 1 секунду снижает конверсию на 7%. Для интернет-магазинов медленные страницы означают тысячи долларов упущенных продаж ежедневно. Для издателей медленные страницы означают меньше просмотров и меньший доход от рекламы. Для любого сайта скорость страницы критична.

Эталон быстрой загрузки: менее 2 секунд. Страницы, которые загружаются за 2 секунды или быстрее, пользователи воспринимают как быстрые. Страницы, которым нужно 3-5 секунд, кажутся медленными. Страницы, которые грузятся дольше 5 секунд, часто бросают. Ваша цель проста: сократить время загрузки до 2 секунд, затем до 1,5 секунды, а потом продолжать оптимизацию. Важна каждая сотня миллисекунд.

Метрики загрузки страницы

Время загрузки страницы складывается из нескольких компонентов. Time to First Byte (TTFB) показывает, как долго сервер отвечает на запрос. Largest Contentful Paint (LCP) показывает, когда становится видно основное содержимое. Полная загрузка наступает, когда все ресурсы скачаны. Это разные метрики, и для оптимизации каждой нужны свои приёмы.

TTFB это время ответа вашего сервера. Если TTFB превышает 600 мс, сервер работает медленно. Частые причины: неэффективный серверный код, запросы к базе данных или перегрузка сервера. Чтобы улучшить TTFB, оптимизируйте серверный код, перейдите на более мощный хостинг, включите кеширование или используйте сеть доставки контента (CDN).

Учебный курс Google по производительности подробно объясняет каждую метрику. LCP и другие показатели Core Web Vitals разобраны подробно. Понимание этих метрик необходимо, чтобы эффективно оптимизировать скорость страницы.

Оптимизация изображений: самый сильный эффект

Изображения обычно занимают 50-80% веса страницы. Неоптимизированные изображения быстрее всего замедляют сайт. Оптимизируйте изображения, уменьшая размер файла без потери качества. Три приёма:

Сжатие: используйте инструменты сжатия изображений, чтобы уменьшить размер файла. Изображения JPEG сжимаются в 10-40 раз, PNG в 2-5 раз. Используйте такие инструменты, как TinyPNG, ImageOptim, или плагины вашей CMS для автоматического сжатия. Сжимайте изображения до загрузки на сайт.

Современные форматы: используйте WebP вместо JPEG или PNG. WebP сжимает на 25-35% лучше JPEG при сохранении качества. Теперь браузеры поддерживают WebP изначально. Для старых браузеров используйте JPEG в качестве запасного варианта с помощью элемента ``.

Отложенная загрузка: загружайте изображения только тогда, когда пользователь прокручивает страницу рядом с ними. Используйте встроенный атрибут HTML `loading="lazy"` для изображений ниже первого экрана. Так откладывается загрузка изображений, которые пользователь, возможно, никогда не увидит, и начальная загрузка страницы заметно ускоряется.

Руководство Google по оптимизации содержит конкретные приёмы работы с изображениями. Одна только правильная оптимизация изображений часто сокращает время загрузки страницы на 30-50%.

Оптимизация CSS и JavaScript

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

Минимизируйте и откладывайте JavaScript: большие файлы JavaScript блокируют отрисовку. Разделите JavaScript на небольшие части и отложите загрузку некритичных скриптов. Используйте `