Оптимизация CSS и JavaScript: как ускорить загрузку сайта

Содержание

Сайт загружается медленно, а посетители не дожидаются открытия? Разберём, как ускорить его работу и удержать аудиторию.

Введение

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

В поисковой выдаче скорость тоже играет роль: Google уже с 2010 года учитывает быстроту сайта при ранжировании, особенно на мобильных устройствах. Поисковик «Яндекс» также отмечает, что скорость влияет на поведенческие факторы и позиции сайта. Хорошая новость: ускорить сайт под силу каждому, даже новичку. В статье рассказали, как оптимизировать CSS и JavaScript, убрать из них всё лишнее и правильно их загрузить.

Аренда VPS/VDS от 219 руб/месяц

Преимущества VPS в AdminVPS:

✓ Бесплатное администрирование

✓ Только быстрые NVMe-диски

✓ Защита от DDoS-атак

✓ Быстрая техподдержка

Аренда VPS/VDS виртуального сервера от AdminVPS — это прозрачная и честная услуга с доступной ценой

Почему CSS и JS могут тормозить сайт

Когда браузер загружает веб-страницу, он по очереди тянет все ресурсы, в том числе файлы стилей CSS и скрипты JavaScript. CSS отвечает за внешний вид страницы. Пока основные CSS-файлы не подгрузились, браузер не покажет страницу полностью, чтобы пользователь не увидел сырой вариант без стилей. JavaScript-файлы по умолчанию тоже блокируют отрисовку: если скрипт стоит в <head> без специальных атрибутов, страница остановит рендеринг, дождётся, пока скрипт загрузится и выполнится, и лишь затем продолжит загрузку. Если CSS и JS много весят или разбросаны по десяткам отдельных файлов, время до показа страницы сильно увеличивается.

Лишний код в стилях и сценариях утяжеляет страничку на килобайты. Каждый лишний запрос к серверу за очередным .css или .js файлом добавляет задержку. Итог: посетитель дольше видит пустой или неполный экран, растёт показатель отказов, падает конверсия. Особенно страдают мобильные пользователи с медленным Интернетом.

Оптимизация фронтенда заметно ускоряет загрузку и улучшает пользовательский опыт. Правильная стратегия — минимизировать и объединить CSS/JS, а также загрузить их без блокировок. Рассмотрим пошагово, как этого добиться на практике.

Читайте в нашем блоге и о других причинах, по которым тормозит сайт.

Шпаргалка по ускорению загрузки CSS и JavaScript

Что сделать	Как	Инструменты
Удалить лишнее	Найти неиспользуемые стили/скрипты	Chrome DevTools, PurgeCSS
Сжать код	Минификация CSS и JS	CSSNano, Terser, Autoptimize
Объединить файлы	Один файл вместо многих	Webpack, вручную
Загрузить асинхронно	<script defer> или <script async>	HTML-атрибуты
Ускорить первый экран	Встроить критический CSS	Critical (Node.js), Penthouse
Включить кеш	Cache-Control на 30+ дней	.htaccess, nginx.conf
Сжать при передаче	Gzip или Brotli	Apache/Nginx настройка
Избежать блокировок CDN	Хранить JS/CSS локально	–

Таблица. Оптимизация CSS и JavaScript

Удаление лишнего кода из CSS и JS

Прежде чем менять файлы, подумайте, весь ли CSS и JavaScript код на сайте действительно нужен? Часто на сайте копятся ненужные стили и скрипты. Например, вы подключили большой CSS-фреймворк, но используете оттуда лишь пару компонентов, остальные стили зря грузятся каждый раз. Или поставили плагин со скриптом, функционал которого больше не используется. Такая нагрузка только тормозит сайт.

Чтобы найти неиспользуемый код, откройте свой сайт в Chrome и перейдите в «Инструменты разработчика» (F12). Откройте вкладку «Сеть» и перезагрузите страницу с отключённым кешем. Вы увидите список всех загружаемых файлов. Посмотрите, нет ли среди них подозрительно больших CSS/JS. Затем перейдите во вкладку «Сфера действия» через «Другие инструменты». На графике вы увидите, сколько байт каждого файла используется (зелёным) и сколько остаётся мёртвым грузом (красным).

Если знакомы с веб-разработкой, подключайте автоматизацию. Например, PurgeCSS удаляет из стилей всё, что не используется на сайте. С Tailwind можно сжать CSS со 150 КБ до 5. Но после чистки проверьте сайт, ведь динамические стили могут исчезнуть по ошибке. Нужные куски CSS добавьте в исключения и повторите процесс.

С JavaScript та же логика: убирайте неиспользуемые скрипты. В сборках через Webpack или Parcel сработает Tree Shaking — он сам удалит лишнее. А если пишете без сборщика, проверяйте и чистите код вручную. Чем меньше кода, тем быстрее сайт.

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

Минификация CSS и JavaScript

Минификация файлов CSS и JS — это сжатие кода за счёт удаления всего лишнего: комментариев, пробелов, переносов строк. Файл становится легче на 20–30 %, а браузер всё равно читает его без проблем.

Если используете сборщик, подключите минификаторы — CSSNano для стилей, Terser или UglifyJS для скриптов. Они автоматически сожмут код при сборке. Без сборщика подойдут онлайн-сервисы вроде CSS Minifier и JSCompress: вставьте код, нажмите одну кнопку и скачайте минифицированную версию.

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

Если сайт на WordPress, проще поставить плагин вроде Autoptimize, он сам минифицирует CSS, JS и HTML, а при желании объединяет файлы и откладывает загрузку. Только не забудьте после активации пройтись по сайту и убедиться, что всё работает.

Объединение CSS-файлов

Скорость загрузки зависит не только от размеров файлов, но и от количества HTTP-запросов. Если на странице подключено десять отдельных CSS-файлов, браузеру придётся столько же раз обратиться к серверу. Особенно это замедляет работу на HTTP/1.1, где запросы обрабатываются последовательно. Решение простое — объедините стили в один файл.

Например, вместо отдельных CSS для шапки, подвала, формы и пары плагинов создайте один styles.min.css. Скопируйте в него содержимое всех файлов, соблюдая порядок: сначала библиотеки, затем основные стили, потом мелкие правки. Это важно для правильной работы каскада.

После объединения подключите только итоговый файл в <head>, старые теги <link rel="stylesheet"> удалите. Один файл загрузится быстрее, чем десяток маленьких.

Стили, которые нужны только на одной странице, не добавляйте в общий CSS. Локальные большие файлы подключайте отдельно. Цель в том, чтобы каждая страница тянула минимум и только нужное.

В HTTP/2 и HTTP/3 объединение всё ещё актуально. Запросы стали быстрее, но каждый по-прежнему требует ресурсов. А вот большой файл хорошо кешируется: после первого визита браузер загрузит стили из кеша без лишних обращений к серверу.

Объединение и оптимизация JavaScript

С JavaScript та же история — объедините скрипты, чтобы сократить число запросов. Если на странице подряд подключено, например, три внешних скрипта:

<script src="/js/menu.js"></script>
<script src="/js/tools.js"></script>
<script src="/js/footer.js"></script>

— соберите их код в один файл, например app.min.js, и подключите его одним тегом:

<script src="/js/app.min.js"></script>

Браузер скачает один файл вместо трёх. Вы сэкономите на накладных расходах установления соединений и получите выигрыш во времени загрузки. После объединения не забудьте минифицировать итоговый app.min.js.

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

После склеивания проверьте работу сайта. Скрипты могут зависеть от порядка подключения, где неправильная последовательность вызовет ошибку. Комбинируйте только независимые или хорошо знакомые по логике подключения файлы.

Небольшая оптимизация: атрибут type="text/javascript" больше не нужен — <script> и так считает JavaScript. Уберите его, чтобы сократить тег. Если сайт работает по http и https, используйте протокол-независимые ссылки, браузер сам подставит нужное. Мелочь, но уменьшает вес страницы и избавляет от лишних перенаправлений.

Асинхронная загрузка скриптов

JS‑файлы могут тормозить первый рендер, поэтому подключайте их асинхронно. У тега <script> есть два помощника:

defer — файл грузится параллельно, но выполняется после построения DOM. Порядок скриптов сохраняется.
async — скрипт грузится и запускается сразу по готовности. Кто первым загрузился, тот и выполнился.

Для аналитики, чатов, низовых виджетов ставьте defer:

<script src="/js/app.min.js" defer></script>

Для независимых счётчиков хватит async:

<script src="/js/metrics.js" async></script>

Главное не оставляйте в <head> скрипты без этих атрибутов. Если порядок критичен, используйте defer либо перенесите теги в самый конец перед </body>. Так страница соберётся сразу, а JS запустится уже после отображения контента.

Критический CSS и отложенные стили

CSS тоже может тормозить загрузку — без него страница не отрисуется как надо. Чтобы ускорить показ первого экрана, используют приём Critical CSS: важные стили (только для верхней части) встраивают прямо в HTML, а остальное подключают с задержкой.

Пример — основной CSS в <link> с media="print", который потом через JS переключается на media="all". Так браузер сразу покажет шапку и первый экран, а остальные стили загрузит фоном.

Метод требует точности и тестирования, поэтому удобнее воспользоваться готовыми инструментами, например, пакеты для Node.js или Ruby, которые генерируют critical CSS автоматически. Особенно полезно для лендингов и главных страниц.

Если пока не готовы к таким экспериментам, ничего страшного. Грамотно минимизированные и объединённые CSS-файлы, хранящие только нужные стили, и так дадут отличный результат. А defer/async для скриптов уберёт основные тормоза при загрузке. Новичкам советуем начать с базовых шагов, описанных выше.

Проверяем результат и не забываем про сервер

Вы проделали большую работу, пора проверить результат. Протестируйте сайт через PageSpeed Insights и подобные сервисы. Обратите особое внимание на показатели First Contentful Paint и Time To Interactive. Они покажут, насколько быстрее стал первый отклик и интерактивность.

Если остались рекомендации, доработайте. Часто всплывают советы про gzip или кеширование. Для gzip (или Brotli) на Apache добавьте в .htaccess:

AddOutputFilterByType DEFLATE text/css text/javascript application/javascript text/html

На Nginx включите gzip on; и задайте нужные типы.

Настройте кеширование для статики (CSS, JS, картинки) через заголовки Cache-Control хотя бы на 30 дней. Браузер не станет каждый раз запрашивать файлы и будет грузить их из кеша мгновенно.

И наконец, сервер. Даже самый лёгкий код тормозит, если хостинг слабый. Для серьёзных проектов нужен мощный бэкенд: SSD или NVMe, поддержка HTTP/2 и PHP 8+. На серверах AdminVPS всё это уже есть: быстрые диски, современные протоколы, встроенные оптимизации. В итоге даже тяжёлые страницы открываются молниеносно.

Аренда VPS/VDS от 219 руб/месяц

Преимущества VPS в AdminVPS:

✓ Бесплатное администрирование

✓ Только быстрые NVMe-диски

✓ Защита от DDoS-атак

✓ Быстрая техподдержка

Аренда VPS/VDS виртуального сервера от AdminVPS — это прозрачная и честная услуга с доступной ценой

Заключение

Ускорение сайта похоже на работу шефа на кухне: чем меньше лишнего и лучше выстроен процесс, тем быстрее подаётся «блюдо» — контент. Оптимизация CSS и JavaScript — ключевой шаг: вы уменьшили вес файлов, сократили их количество и настроили загрузку так, что пользователь сразу получает контент без пауз. Теперь страницы открываются быстро и плавно, а посетители остаются довольны и готовы оставаться дольше. Это выгодно и для поисковиков, и для вас. Продолжайте следить за рекомендациями и пробуйте новые методы, а пока наслаждайтесь результатом — ваш сайт теперь летит вперёд, оставляя конкурентов позади.

Читайте в блоге: