Как оптимизировать расположение ресурсов?

1.7 Middle🔥 141 комментариев

#JavaScript Core

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как оптимизировать расположение ресурсов

Расположение ресурсов в веб-разработке означает оптимальное размещение скриптов, стилей, изображений, шрифтов в HTML для максимизации скорости загрузки и первого рендеринга страницы.

Где размещать CSS и JavaScript?

<!-- ❌ Плохо - скрипт в <head> блокирует рендеринг -->
<head>
  <script src="bundle.js"></script>
</head>
<body>
  <!-- Пользователь видит белую страницу до загрузки скрипта -->
</body>

<!-- ✅ Правильно - CSS в head, JS в конце body -->
<head>
  <title>Page</title>
  <!-- ✅ CSS сразу в head -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>Содержимое страницы</main>
  <!-- ✅ JS в конце body не блокирует рендеринг -->
  <script src="bundle.js"></script>
</body>

Async vs Defer для скриптов

<!-- async - загружается параллельно, выполняется сразу когда готов -->
<!-- Подходит для независимого JS (аналитика, объявления) -->
<script src="analytics.js" async></script>

<!-- defer - загружается параллельно, выполняется после парсинга DOM -->
<!-- Подходит для основного приложения -->
<script src="app.js" defer></script>

<!-- Без модификаторов - БЛОКИРУЕТ парсинг (избегать) -->
<script src="old-library.js"></script>

Практический пример оптимальной структуры

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Meta и title -->
  <title>PrepBro - Подготовка к собеседованиям</title>
  
  <!-- Критичные стили для выше складки (inline) -->
  <style>
    header { padding: 16px; background: #fff; }
    main { min-height: 100vh; }
  </style>
  
  <!-- CSS стили -->
  <link rel="stylesheet" href="styles.css" media="print" onload="this.media=all">
  
  <!-- Критичные шрифты с preload -->
  <link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin>
  
  <!-- Аналитика не блокирует -->
  <script src="gtag.js" async></script>
</head>
<body>
  <header>...</header>
  <main>
    <!-- Hero изображение с приоритетом -->
    <img src="hero.jpg" alt="Hero" loading="eager" width="1200" height="600">
    
    <!-- Остальные изображения ленивой загрузкой -->
    <img src="feature-1.jpg" alt="Feature" loading="lazy">
  </main>
  
  <!-- Основной скрипт в конце с defer -->
  <script src="app.js" defer></script>
</body>
</html>

Оптимизация изображений

<!-- ❌ Плохо - одно изображение для всех экранов -->
<img src="hero-large.jpg" alt="Hero" width="2000" height="1000">

<!-- ✅ Хорошо - responsive images с srcset -->
<img 
  src="hero-small.jpg" 
  srcset="hero-small.jpg 480w, hero-medium.jpg 1024w, hero-large.jpg 2048w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 100vw"
  alt="Hero image"
  width="1200"
  height="600"
>

<!-- ✅ Picture элемент для формата WebP -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>

Next.js Image оптимизация

import Image from "next/image";

export default function Hero() {
  return (
    <>
      {/* Главное изображение - priority=true загружается быстрее */}
      <Image
        src="/hero.jpg"
        width={1200}
        height={600}
        alt="Hero"
        priority
        quality={75}
      />
      
      {/* Остальные изображения - ленивая загрузка (по умолчанию) */}
      <Image
        src="/feature.jpg"
        width={400}
        height={300}
        alt="Feature"
      />
    </>
  );
}

Code Splitting - загрузка только нужных компонентов

// ❌ Плохо - все в одном бандле
import Modal from "./modals/Heavy";
import Chart from "./charts/Complex";
import Editor from "./editors/RichText";

// ✅ Хорошо - динамическая загрузка
import dynamic from "next/dynamic";

const HeavyModal = dynamic(() => import("./modals/Heavy"), {
  loading: () => <div>Loading...</div>,
  ssr: false // не загружать на сервере
});

const ComplexChart = dynamic(() => import("./charts/Complex"));

export default function Dashboard() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {/* Компонент загружается только при необходимости */}
      {showModal && <HeavyModal />}
    </>
  );
}

Web Vitals и расположение ресурсов

// Largest Contentful Paint (LCP) - оптимизация
<head>
  <!-- Критичные шрифты preload -->
  <link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin>
</head>

// First Input Delay (FID) - оптимизация
<script src="app.js" defer></script> // не блокирует взаимодействие

// Cumulative Layout Shift (CLS) - оптимизация
<img src="hero.jpg" width="1200" height="600" /> // всегда указывай размеры

Кэширование статических ресурсов

// next.config.js
module.exports = {
  headers: async () => [
    {
      source: "/assets/:path*",
      headers: [
        {
          key: "Cache-Control",
          value: "public, max-age=31536000, immutable" // 1 год
        }
      ]
    }
  ]
};

Чек-лист оптимизации расположения

CSS в <head> - загружается первым
JS в конце <body> или с defer - не блокирует парсинг
Критичные шрифты с preload - ускоряет LCP
Изображения с srcset и loading="lazy" - меньше данных
priority для главного изображения в Next.js
Code splitting для больших компонентов
Кэш-контроль для статичных ресурсов
Inline стили для критичного выше-складочного контента

Итог: Правильное расположение ресурсов уменьшает время первого рендеринга (FCP), улучшает метрики Core Web Vitals, и положительно влияет на SEO ранжирование.