Технологии независимого сайта· Продвинутый
Оптимизация CSS/JS на сайте: объединение, минификация, отложенная загрузка, встраивание критического CSS
Цель оптимизации CSS/JS — не «чем меньше файлов, тем лучше», а чтобы при первой отрисовке загружались только нужные байты. Четыре основных правила: критический CSS встроить в head (примерно до 15 КБ), некритический CSS грузить асинхронно через media=print onload, JS для интерактива на первом экране подключать с defer, а не с async, аналитику и рекламные скрипты откладывать до после первого экрана через requestIdleCallback. Контринтуитивный вывод: добавить async ко всем JS — не бесплатный обед, нарушенный порядок выполнения заставит jQuery и зависящие от него плагины массово выдавать ошибки; ещё один контринтуитивный момент: объединение в один CSS-файл не всегда быстрее, потому что теряется разбиение на блоки для долгосрочного кеширования.
