Font Optimization
Web Fonts တွေကြောင့် ဖြစ်တတ်တဲ့ ပြဿနာများ
Section titled “Web Fonts တွေကြောင့် ဖြစ်တတ်တဲ့ ပြဿနာများ”ကိုယ်ပိုင် Web Fonts (Custom Fonts) တွေက Website ရဲ့ အသွင်အပြင် (UI/UX) ကို သိသိသာသာ လှပ တိုးတက်စေပေမဲ့၊ သူတို့ကို စနစ်တကျ ကောင်းကောင်း မကိုင်တွယ်တတ်ဘူး ဆိုရင်တော့ အောက်ပါ ပြဿနာတွေ ဖြစ်ပေါ်စေနိုင်ပါတယ်။
- စာသားများ မမြင်ရဘဲ ခဏတာ ပျောက်နေခြင်း (FOIT - Flash of Invisible Text): Custom Font ဖိုင်ကို Download လုပ်ပြီး Load မလုပ်နိုင်သေးခင် အချိန်အတွင်းမှာ စာလုံးတွေ နေရာမှာ အလွတ်ကြီး (Invisible) ဖြစ်နေတာမျိုးပါ။
- စာလုံးပုံစံ ပြောင်းပြီးမှ ပေါ်လာခြင်း (FOUT - Flash of Unstyled Text): စာလုံးတွေက အရင်ဆုံး System ပေါ်မှာ ရှိနေတဲ့ (Fallback) Font နဲ့ အရင် ပေါ်လာပြီးမှ၊ Custom Font ရောက်လာတဲ့ အချိန်ကျမှ ရုတ်တရက် ပုံစံ ပြောင်းလဲသွားတာမျိုးပါ။ ဒါက မျက်စိနောက်စရာ ကောင်းသလို၊ User Experience ကိုလည်း ထိခိုက်စေပါတယ်။
- LCP ကို ပိုကြာစေခြင်း: အကယ်၍ LCP Element ဟာ စာသား ဖြစ်နေပြီး၊ အဲ့ဒီ စာသားကို ဖော်ပြဖို့ Font ဖိုင်ကို စောင့်နေရမယ် ဆိုရင် Website ရဲ့ အဓိက အကြောင်းအရာ ပေါ်လာဖို့ အချိန် ပိုနှေးသွားစေပါတယ်။
- CLS ဖြစ်စေခြင်း: FOUT လိုမျိုး Font ပြောင်းလဲသွားတဲ့ အချိန်မှာ၊ Font နှစ်ခုရဲ့ စာလုံးအရွယ်အစား (Size) နဲ့ အကွာအဝေး (Spacing) တွေ မတူညီတဲ့အတွက်၊ စာပိုဒ်တွေ ရှည်ထွက်လာတာ ဒါမှမဟုတ် တိုသွားတာမျိုး ဖြစ်ပြီး Website ရဲ့ Content တွေ သိသိသာသာ ရွေ့လျားသွား (Layout Shift) တတ်ပါတယ်။
Fonts တွေကို Optimize လုပ်ရန် နည်းလမ်းများ
Section titled “Fonts တွေကို Optimize လုပ်ရန် နည်းလမ်းများ”၁။ ခေတ်မီ Font Formats တွေကို အသုံးပြုပါ
Section titled “၁။ ခေတ်မီ Font Formats တွေကို အသုံးပြုပါ”- WOFF2 (Web Open Font Format 2) က Fonts တွေကို အကောင်းဆုံးနဲ့ အသေးဆုံး ဖြစ်အောင် ချုံ့ (Compress) ပေးနိုင်ပြီး၊ အခုခေတ် Browser အားလုံးနီးပါးကလည်း အပြည့်အဝ ပံ့ပိုးပေးထားပါတယ်။ ဒါကြောင့် WOFF2 ကိုပဲ အဓိကထား အသုံးပြုသင့်ပါတယ်။
- လိုအပ်ရင် (အရမ်းဟောင်းတဲ့ Browser တွေအတွက်) WOFF (WOFF1) ကို Fallback အနေနဲ့ အစားထိုး ထည့်ပေးထားနိုင်ပါတယ်။ (TTF နဲ့ OTF တွေကို Web အတွက် တိုက်ရိုက် မသုံးသင့်ပါဘူး)။
၂။ font-display ဖြင့် Fonts ပေါ်လာပုံကို ထိန်းချုပ်ပါ
Section titled “၂။ font-display ဖြင့် Fonts ပေါ်လာပုံကို ထိန်းချုပ်ပါ”CSS ရဲ့ @font-face အတွင်းမှာ သုံးနိုင်တဲ့ font-display Property ဟာ Fonts တွေ Load လုပ်နေချိန်အတွင်း စာသားတွေကို ဘယ်လို ပြသရမလဲ ဆိုတာကို Browser ကို ညွှန်ကြားပေးပါတယ်။
auto: Browser ရဲ့ မူလ သတ်မှတ်ချက်အတိုင်း လုပ်ဆောင်ပါတယ်။ (များသောအားဖြင့် FOIT လိုမျိုး ခဏ ဖျောက်ထားတတ်ပါတယ်)။block: စာလုံးတွေကို မပေါ်စေဘဲ (Invisible) အနေအထားနဲ့ ၃ စက္ကန့်လောက် စောင့်ဆိုင်းစေပါတယ်။ ပြီးမှ Custom Font ကို ပြသပါတယ်။ (FOIT ပြဿနာကို တိုက်ရိုက် ဖြစ်စေပါတယ်)။swap: System Font ကို သုံးပြီး စာသားတွေကို ချက်ချင်း ပြသထားပါတယ်။ Custom Font Load လုပ်ပြီးတာနဲ့ ချက်ချင်း (Swap) ပြောင်းလဲပေးပါတယ်။ (Contents တွေကို ချက်ချင်း မြင်ရတဲ့အတွက် UX အရ ကောင်းမွန်ပေမဲ့၊ Font နှစ်ခု အရွယ်အစား ကွာခြားရင် CLS ပြဿနာ ဖြစ်စေနိုင်တာကို သတိပြုပါ)။fallback: ချက်ချင်း System Font နဲ့ ပြသပေမဲ့၊ Custom Font Load လုပ်ဖို့ အချိန် အနည်းငယ် (ဥပမာ - ၁၀၀ မီလီစက္ကန့်) သာ စောင့်ဆိုင်းပေးပါတယ်။ အဲ့ဒီ အချိန်အတွင်း ရောက်မလာရင် System Font (Fallback Font) ကိုပဲ ဆက်သုံးသွားပါတယ်။optional:fallbackနဲ့ ဆင်တူပေမဲ့ Browser ကို ပိုပြီး လွတ်လပ်ခွင့် ပေးထားပါတယ်။ Connection အရမ်း နှေးနေရင် Custom Font ကို လုံးဝ မသုံးတော့ဘဲ System Font ကိုပဲ အပြီးတိုင် သုံးသွားမှာ ဖြစ်ပါတယ်။
အကြံပြုချက်: အများစုသော အခြေအနေတွေမှာ
font-display: swap;ကို အသုံးပြုသင့်ပါတယ်။ ဒါက စာသားတွေကို အမြန်ဆုံး ဖတ်လို့ရစေပြီး၊ စိတ်ကြိုက် Font လည်း ရရှိစေဖို့ အကောင်းဆုံး မျှတမှု ရှိပါတယ်။ ဒါပေမဲ့ Layout Shift (CLS) မဖြစ်အောင် Fallback Font နဲ့ Custom Font ရဲ့ Size/Line-height တွေကို ချိန်ညှိဖို့ (CSS Size-adjust) လိုအပ်နိုင်ပါတယ်။
၃။ Self-Hosting နဲ့ Third-Party Font Services (ဥပမာ - Google Fonts)
Section titled “၃။ Self-Hosting နဲ့ Third-Party Font Services (ဥပမာ - Google Fonts)”-
Self-Hosting (မိမိ Server မှ တိုက်ရိုက် ခေါ်ယူခြင်း): Font ဖိုင်တွေကို Download ရယူပြီး၊ မိမိ Project ထဲ (Server ပေါ်) ကနေ တိုက်ရိုက် တင်ပြခြင်း။
- အားသာချက် (Pros): Cache လုပ်တာ၊ Preload လုပ်တာတွေကို ကိုယ်တိုင် အပြည့်အဝ ထိန်းချုပ်နိုင်ပါတယ်။ အခြား ပြင်ပ Server တွေဆီ (DNS Resolution, Connection) သွားရောက် ချိတ်ဆက်နေရတဲ့ အချိန်တွေကို သက်သာစေပါတယ်။
- အားနည်းချက် (Cons): ကိုယ်တိုင် Setup လုပ်ရတာ၊ Formats တွေ ပြောင်းရတာ၊ CSS တွေ ရေးရတာ အနည်းငယ် အလုပ်ရှုပ်ပါတယ်။
-
Third-Party Services (Google Fonts, Adobe Fonts): သူတို့ပေးတဲ့ CSS ဖိုင် (Link Tag) တွေကို Website မှာ ချိတ်ဆက် အသုံးပြုခြင်း။
- အားသာချက် (Pros): အသုံးပြုရတာ အလွန် လွယ်ကူပါတယ်။ သူတို့ဘက်ကနေ CDN တွေ သုံးပြီး အမြန်ဆုံး ရောက်အောင်နဲ့ ဖိုင်အရွယ်အစား အသေးဆုံး ဖြစ်အောင် အလိုအလျောက် Optimize လုပ်ပေးထားပါတယ်။
- အားနည်းချက် (Cons): ပြင်ပ Server ကို သွားရောက် ချိတ်ဆက်ရတဲ့အတွက် အနည်းငယ် နှေးနိုင်ပါတယ်။ Privacy (ဥပမာ - GDPR) ကိစ္စတွေ စဉ်းစားဖို့ လိုလာနိုင်ပါတယ်။
- (Google Fonts ကို သုံးမယ်ဆိုရင်
font-display: swapဖြစ်အောင် URL အဆုံးမှာ&display=swapဆိုတာလေး သေချာ ထည့်ပေးဖို့ မမေ့ပါနဲ့)။
၄။ Font ကို လိုအပ်သလောက်ပဲ သုံးပါ (Subsetting Fonts)
Section titled “၄။ Font ကို လိုအပ်သလောက်ပဲ သုံးပါ (Subsetting Fonts)”- Font ဖိုင် တစ်ခုလုံး (ဥပမာ - ဘာသာစကား အစုံ၊ သင်္ကေတ အစုံ ပါဝင်တဲ့ ဖိုင်အကြီးကြီး) ကနေ ကိုယ်တကယ် အသုံးပြုမယ့် စာလုံး (Characters/Glyphs) တွေကိုပဲ သီးသန့် ရွေးထုတ်ပြီး ဖိုင်အသစ် ဖန်တီးတာကို Subsetting လို့ ခေါ်ပါတယ်။
- ဒါဟာ ဖိုင်အရွယ်အစားကို (ဥပမာ - Megabytes ကနေ Kilobytes အထိ) သိသိသာသာ အများကြီး လျှော့ချပေးနိုင်ပါတယ်။ အထူးသဖြင့် စာလုံး အရေအတွက် ထောင်သောင်းချီ ပါဝင်တဲ့ ဘာသာစကားတွေ (ဥပမာ - တရုတ်၊ ဂျပန်၊ ကိုရီးယား၊ မြန်မာ Unicode) နဲ့ Icon Fonts တွေအတွက် အလွန် အရေးကြီးပါတယ်။
glyphhangerဒါမှမဟုတ် Google Fonts ကပေးတဲ့&text=Parameter လို Tools တွေကို အသုံးပြုနိုင်ပါတယ်။
၅။ အရေးကြီးတဲ့ Fonts တွေကို Preload လုပ်ပါ
Section titled “၅။ အရေးကြီးတဲ့ Fonts တွေကို Preload လုပ်ပါ”- Website ရဲ့ အစောပိုင်း မြင်ကွင်း (Above-the-fold Content) တွေမှာ အသုံးပြုထားတဲ့ အဓိက Font (ဥပမာ - ခေါင်းစဉ်ကြီးတွေအတွက် သုံးတဲ့ Font) ဆိုရင်၊ HTML ရဲ့
<head>ထဲမှာ<link rel="preload">ကို သုံးပြီး Browser ကို “ဒီ Font ကို နောက်မှ မဟုတ်ဘဲ အခုချက်ချင်း မြန်မြန် Download ဆွဲထားပါ” လို့ ညွှန်ကြားနိုင်ပါတယ်။ - ဥပမာ:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> - သတိပြုရန်: ဖိုင်တိုင်းကို Preload လိုက်မလုပ်ပါနဲ့။ အရမ်းများသွားရင် တကယ် အရေးကြီးတဲ့ တခြား အရာတွေ (ဥပမာ - CSS, JS, ပုံများ) ကို Download ဆွဲတာ နှေးသွားစေနိုင်ပါတယ်။ (အရေးအကြီးဆုံး ၁ ခု ၂ ခု လောက်ကိုသာ Preload လုပ်သင့်ပါတယ်)။
၆။ Font Weights နဲ့ Styles အရမ်းများတာကို ရှောင်ပါ
Section titled “၆။ Font Weights နဲ့ Styles အရမ်းများတာကို ရှောင်ပါ”- Font ရဲ့ ပုံစံတစ်ခုချင်းစီ (ဥပမာ - Regular, Medium, Bold, Italic) ဟာ သီးခြား ဖိုင် တစ်ခုစီ ဖြစ်နေတတ်ပါတယ်။ ဒါကြောင့် မလိုအပ်တဲ့ Weights တွေကို မထည့်ပါနဲ့။
- တကယ် လက်တွေ့ အသုံးပြုမယ့် Font Weights (ဥပမာ - 400 နဲ့ 700 လောက်သာ) တွေကိုသာ ရွေးချယ် အသုံးပြုပါ ခင်ဗျာ။ (နောက်ပိုင်းမှာတော့ ဖိုင်တစ်ခုတည်းနဲ့ Weight မျိုးစုံ ပြောင်းလို့ရတဲ့ Variable Fonts တွေကိုလည်း အသုံးပြုလာကြပါပြီ)။