Скорость загрузки

Половина посетителей закрывает страницу, если она не открылась за три секунды. Причём терпение у человека с телефоном в метро заметно меньше, чем у вас за домашним компьютером, где всё «летает».

Зачем это знать

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

Хорошая новость: на маленьком сайте без рекламы и десятка чужих виджетов скорость получается высокой сама собой. Испортить её можно всего несколькими способами, и каждый из них легко заметить, если знать, куда смотреть. Ничего сложного в этой работе нет: правится она в разметке и в настройках хостинга, а не переписыванием сайта.

Три числа, которыми меряют

Их называют Core Web Vitals — основные показатели работоспособности. Каждое отвечает на свой человеческий вопрос.

Третье — самое обидное. Страница открылась, человек начал читать, тут догрузилась картинка, текст подпрыгнул, и палец попал не по той ссылке. Лечится одной строкой: размеры картинки в разметке.

Что тормозит на самом деле

• Картинки. Почти всегда первое место. Неподготовленная фотография весит больше, чем весь остальной сайт. Подробности — в статье про изображения.
• Чужие скрипты. Счётчики, виджеты чатов, карты, кнопки соцсетей. Каждый тянет свой код с чужого сервера, и ваша страница ждёт.
• Шрифты. Пока файл шрифта не загружен, текста может не быть вовсе. Лечится свойством font-display: swap: сначала показать системным шрифтом, потом заменить.
• Скрипты, которые блокируют разбор страницы. Тег <script> без defer останавливает сборку страницы, пока файл не загрузится и не выполнится.

<!-- скрипт не задерживает сборку страницы -->
<script src="/assets/js/main.js" defer></script>

<!-- шрифт первого экрана грузится заранее -->
<link rel="preload" href="/assets/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>

<!-- картинка знает свои пропорции до загрузки -->
<img src="/assets/img/hero.webp" width="800" height="500" alt="…">

Кеш: второй раз должен быть быстрее

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

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

Чем мерить

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

Мерить нужно инструментами. Вкладка «Сеть» в браузере показывает вес каждого файла и общий вес страницы; там же можно включить замедление сети, чтобы увидеть страницу глазами человека с плохим интернетом. Отдельные сервисы — например PageSpeed Insights — открывают сайт на своих серверах и выдают те самые три числа с подсказками, что чинить в первую очередь.

Что просить у нейросети

Как проверить, что получилось

• Открыть вкладку «Сеть», обновить страницу с очищенным кешем и посмотреть общий вес.
• Включить замедление сети и открыть страницу заново: то, что появляется последним, и есть ваша проблема.
• Прокрутить сверху донизу и убедиться, что ничего не прыгает.
• Проверить на телефоне через мобильный интернет, а не через домашний Wi-Fi.
• Открыть страницу второй раз и сравнить: при работающем кеше повторное открытие заметно быстрее первого.