Производительность
Как ускорить статический сайт без смены технологии
Поиск тяжёлых изображений, лишнего JavaScript и ресурсов, которые блокируют первый экран.
Вес статического сайта чаще всего создают изображения и видео. HTML обычно занимает десятки килобайт, а одна фотография с камеры — несколько мегабайт. Поэтому оптимизация начинается с отчёта по файлам, а не с переписывания разметки. ## Изображения Фотография должна иметь размеры, близкие к реальному отображению. Файл 5000 × 3000 пикселей не нужен для карточки шириной 600 пикселей. WebP и AVIF обычно уменьшают объём фотографий по сравнению с PNG; PNG остаётся уместен для прозрачной графики и изображений, где важна точность пикселей. ```html <img src="/img/work-800.webp" srcset="/img/work-480.webp 480w, /img/work-800.webp 800w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" loading="lazy" alt="Готовая работа в мастерской"> ``` Атрибуты `width` и `height` резервируют место и уменьшают скачки макета. `loading="lazy"` подходит изображениям ниже первого экрана. Главный баннер не стоит загружать лениво: браузер должен получить его сразу. ## CSS, JavaScript и шрифты Большая библиотека ради одного эффекта добавляет сетевой запрос, разбор кода и выполнение. В панели Network можно отсортировать ресурсы по размеру и времени. Неиспользуемый виджет проще удалить, чем компенсировать кешем. Скрипты, которые не строят начальную разметку, подключаются с `defer`: ```html <script src="/js/app.js" defer></script> ``` Для шрифтов оставляют нужные начертания и форматы WOFF2. Пять гарнитур по четыре веса загружаются даже тогда, когда дизайн использует обычный и полужирный текст. ## Сжатие и кеш Сервер Deploya отдаёт HTML, CSS, JavaScript, JSON, SVG и XML с gzip, когда клиент его поддерживает. Версионированные ресурсы можно кешировать дольше, но файл с прежним именем рискует остаться в браузере после обновления. Сборщики решают это хешем в имени: `app.a31f2.js`. > Место для скриншота: рекомендации проекта с общим размером, списком самых тяжёлых файлов и изображениями без lazy loading. После изменений запускается повторная проверка в аналитике Deploya. Предупреждение можно скрыть, если тяжёлый файл оставлен осознанно, например для скачиваемого каталога. Скрытие не уменьшает файл; оно только убирает пункт из текущего отчёта до следующей проверки.