HTML / HTML гүйцэтгэлийн оновчлол

HTML гүйцэтгэлийн оновчлол

Хуудасны ачаалах хурд хэрэглэгчийн туршлагад шууд нөлөөлнө. Google-ийн судалгаагаар хуудас 3 секундаас удаан ачаалбал хэрэглэгчдийн 53% орхиж явдаг. HTML-ийн зөв бичиж гүйцэтгэлийг мэдэгдэхүйц сайжруулж болно.

Script: defer ба async

Хөтч HTML-г дээрээс доош задлан шинжилнэ. <script> тааралдахад зогсоод JavaScript-г татаж, ажиллуулчихаад үргэлжилнэ. Энэ нь хуудас харагдахыг удаашруулдаг.

html
<!-- ❌ Муу — script body дуусахаас өмнө хуудас блок болно -->
<head>
  <script src="analytics.js"></script>
</head>

<!-- ✓ defer — HTML бүрэн задлагдсаны дараа ажиллана, дараалал хадгалагдана -->
<head>
  <script defer src="main.js"></script>
</head>

<!-- ✓ async — татаж дуусмагц нэн даруй ажиллана, дараалал баталгаагүй -->
<head>
  <script async src="analytics.js"></script>
</head>

Хэзээ аль нь ашиглах:

  • defer — DOM-оос хамаардаг script (ихэнх апп script)
  • async — DOM-оос үл хамаарах бие даасан script (analytics, реклам)

Preload — чухал нөөцийг урьдчилан татах

preload нь хуудасны хамгийн чухал нөөцийг эрт татаж эхлүүлнэ. Хөтч resource discovery хийхээс өмнө урьдчилан мэдэгдэж байна.

html
<head>
  <!-- Гол фонтыг урьдчилан татна — FOUT (Flash of Unstyled Text) багасна -->
  <link rel="preload" href="/fonts/geist.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Hero зургийг урьдчилан татна -->
  <link rel="preload" href="/images/hero.jpg" as="image" />

  <!-- Чухал CSS файл -->
  <link rel="preload" href="/styles/critical.css" as="style" />
</head>

as attribute заавал бичнэ — хөтч зөв priority тохируулна.

Prefetch — дараагийн хуудсыг бэлтгэх

prefetch нь хэрэглэгч удахгүй очих магадлалтай хуудсын нөөцийг сул зай байхад татаж хадгална.

html
<head>
  <!-- Хэрэглэгч "Дараах хичээл" рүү очих магадлал өндөр -->
  <link rel="prefetch" href="/courses/html/03-headings-para" />

  <!-- Дараагийн хуудсын зураг -->
  <link rel="prefetch" href="/images/lesson-03-cover.jpg" as="image" />
</head>

preload vs prefetch ялгаа:

  • preload → одоогийн хуудсанд шаардлагатай, өндөр priority
  • prefetch → дараагийн хуудсанд, бага priority, сул зайд ажиллана

Lazy loading — харагдах үед л татах

Дэлгэцийн доор байгаа зураг ба iframe-г хуудас нээгдэхэд шууд татахгүй, харагдах үед л татна.

html
<!-- Зураг lazy load — loading="lazy" нэмэхэд л хангалттай -->
<img
  src="/images/lesson-cover.jpg"
  alt="Хичээлийн зураг"
  width="800"
  height="450"
  loading="lazy"
/>

<!-- iframe lazy load -->
<iframe
  src="https://www.youtube.com/embed/xyz"
  loading="lazy"
  title="Видео хичээл"
></iframe>

<!-- Hero зураг lazy хийхгүй — хамгийн түрүүнд харагдах ёстой -->
<img
  src="/images/hero.jpg"
  alt="Hero зураг"
  width="1200"
  height="600"
  loading="eager"
/>

Critical Rendering Path

Хөтч хуудсыг харуулахад дараах алхмуудыг дамждаг:

  1. HTML татна → DOM Tree үүсгэнэ
  2. CSS татна → CSSOM Tree үүсгэнэ
  3. DOM + CSSOM → Render Tree
  4. Layout тооцоолно → Paint хийнэ

CSS нь render-blocking — хуудас харагдахаас өмнө бүх CSS татагдаж дуусах ёстой. Тиймээс чухал (above-the-fold) стилийг inline буюу <head>-д эрт оруулна.

html
<head>
  <!-- Чухал стиль шууд inline — нэмэлт HTTP request шаардахгүй -->
  <style>
    /* Хуудасны эхний харагдах хэсгийн стиль */
    body { margin: 0; font-family: sans-serif; background: #0b1120; color: #f1f5f9; }
    nav { height: 56px; background: #0f172a; }
  </style>

  <!-- Бусад стиль defer-тэй адил аргаар хойш татна -->
  <link rel="preload" href="/styles/main.css" as="style" onload="this.rel='stylesheet'" />
</head>

Практик жагсаалт

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 1. Чухал фонт preload -->
    <link rel="preload" href="/fonts/geist.woff2" as="font" type="font/woff2" crossorigin />

    <!-- 2. Stylesheet -->
    <link rel="stylesheet" href="/styles/main.css" />

    <!-- 3. Дараагийн хуудас prefetch -->
    <link rel="prefetch" href="/courses/html/03-headings-para" />

    <title>HTML курс — Хичээл 02</title>
  </head>
  <body>
    <!-- Hero зураг: lazy хийхгүй -->
    <img src="/images/hero.jpg" alt="Hero" width="1200" height="600" />

    <!-- Доод зураг: lazy -->
    <img src="/images/content.jpg" alt="Агуулга" width="800" height="450" loading="lazy" />

    <!-- JS: defer -->
    <script defer src="/js/main.js"></script>
    <!-- Analytics: async -->
    <script async src="/js/analytics.js"></script>
  </body>
</html>

Дараагийн хичээлд:

HTML бичих шилдэг туршлагуудыг үзнэ — indent, lowercase tag, attribute бичиглэл, closing tag, void element зэрэг цэвэр, уншихад хялбар код бичих дүрмүүд.

← Өмнөх хичээлWeb Components үндэсДараах хичээл →HTML шилдэг туршлага