Xəbər 06 Apr 2026

CSS və JS minify: səhifə yüklənmə vaxtını qısaltmaq

Minification - CSS, JS və HTML fayllarından boş yer, şərhlər və lazımsız simvolları silməklə faylların ölçüsünü 30-50% azaldır. Browser sürətli yükləyir, bandwidth qənaət olunur.

Minify nə edir?

CSS-də

Boş yerlər, sətir kəsmələri, şərhlər silinir. color: red; → color:red.

JS-də

Yuxarıdakı + dəyişən adları qısaldılır - let userName → let a.

Tipik nəticə

  • jQuery 3.6: 285 KB → 87 KB (minified) → 30 KB (gzipped)
  • Bootstrap 5 CSS: 175 KB → 25 KB minified gzipped

WordPress-də minify

LSCache (tövsiyə)

Page Optimization → CSS/JS Settings → Minify aktivləşdirin. Heç bir başqa plagin lazım deyil.

Autoptimize

LSCache-siz hostingdə alternative. CSS, JS, HTML minify + combine.

WP Fastest Cache

Pulsuz versiyada minify dəstəyi.

Combine CSS/JS - nə vaxt?

HTTP/1.1 dövründə vacib idi

Hər fayl ayrı TCP connection - 30 fayl = çox gecikmə.

HTTP/2 ilə az vacib

HTTP/2 multiplexing - eyni connection-da 100+ fayl paralel. Combine etmək hətta zərər verə bilər (cache invalidation).

Bu gün tövsiyə

Minify - bəli, mütləq. Combine - yox, HTTP/2 var.

Critical CSS

Nədir?

Above-the-fold (ekranın görünən hissəsi) üçün CSS inline olur. Qalanı async yüklənir.

Necə yaratmaq?

criticalcss.com və ya LSCache "Generate Critical CSS" aktivləşdirin.

JS defer və async

defer atributu

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

HTML parse edilir, JS arxa fonda endirilir, DOM hazır olandan sonra icra. Order qorunur.

async atributu

JS endirilən kimi icra. Order qorunmur. Analytics üçün ideal.

İstifadə olunmayan CSS silmək

PurgeCSS

HTML faylını skan edir, hansı CSS class-larının istifadə olunduğunu tap-ır, qalanını silir. Bootstrap 200 KB → 30 KB.

WordPress-də

Asset CleanUp plagini - hansı CSS/JS yalnız müəyyən səhifələrdə yüklənsin təyin et.

JavaScript code splitting

Webpack code splitting

Yalnız hazırkı səhifəyə lazım olan JS yüklənir. Anasayfa-da 200 KB, məhsul səhifəsində 350 KB - hamısı bir 600 KB faylda yox.

Source maps

Minified kodun debug-u üçün app.js.map faylı yaranır. Production-da public olmasın - kompromisə görə.

HTTP/2 push (deprecated)

Vaxtilə CSS/JS-i HTML ilə birgə push etmək tövsiyə olunurdu. Chrome 2022-də deprecated etdi.

HTTP caching headers

.htaccess-də:

<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=31536000, immutable"
</FilesMatch>

1 il brauzer cache - dəyişəndə fayl adına hash əlavə (app.abc123.css).

Real performance test

WebPageTest.org - "filmstrip" funksiyası ilə hər mərhələdə nəyin yükləndiyini görün.

Hostinq.az hosting - LSCache minify + HTTP/2 + Brotli hazır aktivdir.

Paylaş: