Optimizing CSS Delivery & Performance

CSS: Website ကို လှပစေပေမဲ့၊ နှေးကွေးအောင်လည်း လုပ်နိုင်စွမ်း ရှိတယ်

CSS ဟာ သင့် Website ရဲ့ အသွင်အပြင် (Design) ဘယ်လို ပုံစံ ရှိရမလဲ ဆိုတာကို သတ်မှတ်ပေးပါတယ်။ ပြဿနာက ဘာလဲဆိုတော့၊ Browser ဟာ HTML <head> ထဲမှာ ချိတ်ဆက်ထားတဲ့ CSS ဖိုင်တွေ အားလုံးကို Download အပြည့်အစုံ ဆွဲပြီး၊ အကုန် ဖတ်ရှု နားလည်ပြီးမှသာ Website ကို မျက်နှာပြင်ပေါ်မှာ စတင် ပြသ (Render လုပ်) တာ ဖြစ်ပါတယ်။

ဘာလို့လဲဆိုတော့ Browser က အရာအားလုံးကို “ဘယ်လို ပုံစံချရမလဲ” ဆိုတာကို အရင်ဆုံး အတိအကျ သိဖို့ လိုအပ်လို့ပါ။ ဒီလို CSS ကို စောင့်ဆိုင်းနေရတဲ့ အချိန်တွေကြောင့် User တွေ အနေနဲ့ Website က နှေးကွေးတယ်လို့ ခံစားရစေပါတယ်။

အဓိကကျသော CSS Optimization နည်းလမ်းများ

၁။ CSS ဖိုင်များကို သေးငယ်အောင်လုပ်ခြင်း (Minification & Compression)

Minification: CSS Code တွေထဲမှာ လူတွေ ဖတ်ရလွယ်အောင် ချန်ထားခဲ့တဲ့ နေရာလွတ်တွေ (Spaces, Tabs)၊ အတန်းသစ်တွေ (New Lines) နဲ့ မှတ်ချက် (Comments) တွေကို အကုန် ဖယ်ရှားပစ်ပြီး ဖိုင်အရွယ်အစားကို အသေးဆုံး ဖြစ်အောင် ချုံ့ပစ်တာပါ။ ဒါက CSS ရဲ့ အလုပ်လုပ်ပုံကိုတော့ လုံးဝ မပြောင်းလဲစေပါဘူး။ (CSSNano လို Tools တွေက အလိုအလျောက် လုပ်ပေးနိုင်ပါတယ်)။
Compression: Minify လုပ်ပြီးသား သေးငယ်သွားတဲ့ CSS ဖိုင်တွေကို၊ Server ကနေ User ဆီ မပို့ခင်မှာ Gzip ဒါမှမဟုတ် Brotli လို Algorithm တွေသုံးပြီး နောက်တစ်ကြိမ် ထပ်မံ “ဖိသိပ်” လိုက်တာပါ။ ဒါကြောင့် အင်တာနက် ကနေ လွှဲပြောင်းတဲ့အခါ (Transfer Size) အလွန် သေးငယ်သွားပါတယ်။ 📄🤏
(ဖိုင်အရွယ်အစား သေးငယ်လေ၊ User ဆီ ရောက်ဖို့ Download လုပ်ရတဲ့ အချိန် ပိုမြန်လေ ဖြစ်လို့ပါ)။

၂။ အရေးကြီးသော Styles များကို အရင်ဆုံး ပေါ်အောင်လုပ်ခြင်း (Critical CSS)

Critical CSS ဆိုတာက Website တစ်ခု ပွင့်လာတာနဲ့ User မျက်စိနဲ့ အရင်ဆုံး မြင်တွေ့ရမယ့် အပေါ်ဆုံး အပိုင်း (Above-the-fold Content) လေးကို ပုံစံချ (Style) ဖို့အတွက် မရှိမဖြစ် လိုအပ်တဲ့ CSS Codes လေးတွေကို ဆိုလိုတာပါ။
ဒီ Critical CSS အနည်းငယ် (Snippet) ကို သီးသန့် ခွဲထုတ်ပြီး၊ HTML ဖိုင်ရဲ့ <head> ထဲမှာ (CSS ဖိုင်ခွဲပြီး ခေါ်မနေတော့ဘဲ) <style> Tag နဲ့ တိုက်ရိုက် (Inline) ထည့်သွင်း ရေးသားလိုက်တာပါ။ ပြီးမှ ကျန်တဲ့ သိပ်အရေးမကြီးတဲ့ CSS ဖိုင် အကြီးကြီးကိုတော့ အေးဆေးမှ (Asynchronously) နောက်ကနေ လိုက်ပြီး Load လုပ်ပါတယ်။
ဒါက Page ရဲ့ အစပိုင်း မြင်ကွင်းကို Browser က ချက်ချင်း ဆိုသလို Render လုပ်ပြနိုင်တဲ့အတွက်၊ FCP နဲ့ LCP လို Metrics တွေကို အများကြီး တိုးတက်စေပြီး User အတွက်လည်း Website ချက်ချင်း ပွင့်လာတယ်လို့ ခံစားရစေပါတယ်။
(Penthouse ဒါမှမဟုတ် CriticalCSS လို Tools တွေ သုံးပြီး ကိုယ့် Website အတွက် Critical CSS ကို အလိုအလျောက် ထုတ်ယူနိုင်ပါတယ်)။

၃။ အသုံးမပြုတော့သော CSS များကို ဖယ်ရှားခြင်း (Remove Unused CSS)

Project ကြီးတွေမှာ အချိန်ကြာလာတာနဲ့အမျှ ဘယ်နေရာမှာမှ အသုံးမပြုတော့တဲ့ (Unused) CSS Codes တွေ အများကြီး ကျန်ရစ်နေတတ်ပါတယ်။ ဒီ အသုံးမဝင်တဲ့ Styles တွေက CSS ဖိုင်ကို မလိုအပ်ဘဲ Size ကြီးစေပြီး Download အချိန်တွေ ပိုကြာစေပါတယ်။
ရှာဖွေ ဖယ်ရှားရန် Tools များ:
- Chrome DevTools (Coverage Tab): လက်ရှိ Page တစ်ခုချင်းစီမှာ ကိုယ်ရေးထားတဲ့ CSS (နဲ့ JS) ဖိုင်တွေထဲက ဘယ်ရာခိုင်နှုန်းလောက်က အသုံးမဝင်ဘဲ အလကား ဖြစ်နေလဲ ဆိုတာကို အသေးစိတ် ပြသပေးပါတယ်။
- PurgeCSS, UnCSS: ဒီ Tools တွေကတော့ Project ကို Build လုပ်တဲ့ အချိန်မှာ HTML နဲ့ JS တွေကို အလိုအလျောက် စကင်ဖတ် (Scan) ဆန်းစစ်ပြီး၊ တကယ် အသုံးပြုထားတဲ့ CSS Classes တွေကိုပဲ ချန်ထားခဲ့ပြီး ကျန်တာအားလုံးကို ဖြတ်ထုတ် ဖယ်ရှားပေးပါတယ်။ ✂️
(CSS ဖိုင်တွေ သေးငယ်လေ၊ Download လုပ်ရတာနဲ့ Browser က ဖတ်ရှု တွက်ချက် (Parse) ရတာ ပိုမြန်လေပါပဲ)။

၄။ ထိရောက်သော CSS Selector များ ရေးသားခြင်း (Minor but Best Practice)

CSS Selector ဆိုတာက Style ထည့်သွင်းဖို့အတွက် HTML Element တွေကို ရွေးချယ် သတ်မှတ်တဲ့ အပိုင်းပါ (ဥပမာ - .button, #header p)။
ယနေ့ခေတ် Browser တွေက CSS တွက်ချက်မှုပိုင်းမှာ အလွန် မြန်ဆန်နေပြီ ဖြစ်ပေမဲ့၊ အလွန် ရှည်လျား ရှုပ်ထွေးတဲ့ Selectors တွေ (Nested အရမ်းများတာတွေ) ကို DOM Elements တွေ ထောင်သောင်းချီ ပါဝင်တဲ့ Page အကြီးကြီးတွေမှာ သုံးမယ်ဆိုရင်တော့ အနည်းငယ် နှေးကွေးနိုင်ပါသေးတယ်။
ဒါကြောင့် ရိုးရှင်းပြီး ရှင်းလင်းတဲ့ Selectors တွေ၊ အထူးသဖြင့် Class ကို အခြေခံတဲ့ Selectors တွေကို တိုက်ရိုက် သုံးတာက အကောင်းဆုံး အလေ့အကျင့်ပါပဲ။ (ဥပမာ - div#main-content section.products ul li.item > h2.title လို့ အရှည်ကြီး ရေးမယ့်အစား .product-title လို့ Class သီးသန့် ပေးပြီး ရေးတာမျိုးပါ)။ ဒါက ကိုယ်တိုင် ပြန်ဖတ်ရတာလည်း ပိုလွယ်ကူပါတယ်။

၅။ Browser ကို အလုပ်အများကြီး လုပ်စေသော CSS များ ရှောင်ရှားခြင်း (Reflows/Repaints)

CSS Properties တချို့ကို ပြောင်းလဲ (Animate) လုပ်လိုက်တဲ့အခါ၊ Browser က မျက်နှာပြင်ပေါ်က Element တွေရဲ့ Layout တွေကို နေရာပြန်ချ (Reflow) တွက်ချက်ဖို့ ဒါမှမဟုတ် အရောင်တွေ ပြန်ခြယ် (Repaint) ဖို့ အလုပ်တွေ အများကြီး ကြီးကြီးမားမား လုပ်ရနိုင်ပါတယ်။ ဒါပေမဲ့ တချို့သော ပြောင်းလဲမှုတွေ ကတော့ ဆွဲပြီးသား အလွှာလေးတွေကို ရွှေ့ရုံ၊ ပေါင်းစပ်ရုံ (Composite) သာ ဖြစ်တဲ့အတွက် အလွန် ပေါ့ပါးပါတယ်။
Layout/Reflow အကြီးအကျယ် ဖြစ်စေနိုင်သော ပြောင်းလဲမှုများ: width, height, top, left, margin, display စတာတွေကို ပြောင်းလဲခြင်း။
Paint (အရောင်ပြန်ခြယ်ရခြင်း) ဖြစ်စေနိုင်သော ပြောင်းလဲမှုများ: background-color, color, box-shadow စတာတွေကို ပြောင်းလဲခြင်း။
အပေါ့ပါးဆုံးနှင့် အမြန်ဆုံး (Composite Only): transform (ဥပမာ - translate, scale, rotate) နဲ့ opacity တို့ကိုသာ ပြောင်းလဲခြင်း။
Animation အတွက် အကြံပြုချက်: ထစ်ငေါ့မှုမရှိဘဲ (60fps) ချောမွေ့တဲ့ Animations တွေ ရရှိဖို့အတွက် transform နဲ့ opacity နှစ်ခုတည်းကိုသာ အသုံးပြုဖို့ ကြိုးစားပါ။ ဘာလို့လဲဆိုတော့ Browser ရဲ့ Graphics Card (GPU) က ဒါတွေကို အလွန် လျင်မြန် ထိရောက်စွာ ကိုင်တွယ် ဖြေရှင်းနိုင်လို့ပါ။

၆။ CSS Preprocessors နှင့် Post-Processors (အကျဉ်းချုပ်)

Preprocessors (Sass, Less ကဲ့သို့): ဒီ Tools တွေက CSS ကို ရေးသားတဲ့ အဆင့်မှာ Variable တွေ၊ Functions တွေ၊ Nesting တွေ သုံးပြီး ပိုမို စနစ်တကျနဲ့ မြန်မြန်ဆန်ဆန် ရေးနိုင်အောင် ကူညီပေးတာပါ။ (ဒါပေမဲ့ သူတို့ ထုတ်ပေးလိုက်တဲ့ နောက်ဆုံး CSS ရဲ့ Performance ကိုတော့ အထူးတလည် ပိုကောင်းအောင် မလုပ်ပေးနိုင်ပါဘူး)။
Post-Processors (PostCSS ကဲ့သို့): ဒီ Tools တွေကတော့ ရေးပြီးသား CSS ဖိုင်တွေကို ယူပြီး၊ Performance ပိုကောင်းအောင် (သို့) Browser မျိုးစုံမှာ အလုပ်လုပ်နိုင်အောင် Plugins တွေနဲ့ ထပ်မံ ပြုပြင် (Process) ပေးတာပါ။ (ဥပမာ - Browser Vendor Prefixes တွေ အလိုအလျောက် ထည့်ပေးတဲ့ Autoprefixer နဲ့ ဖိုင်အရွယ်အစားကို ချုံ့ပေးတဲ့ CSSNano တို့ဟာ PostCSS ရဲ့ နာမည်ကြီး Plugins တွေ ဖြစ်ပါတယ်)။