Font Optimization
Web Fonts တွေကြောင့် ဖြစ်တတ်တဲ့ ပြဿနာများ
Section titled “Web Fonts တွေကြောင့် ဖြစ်တတ်တဲ့ ပြဿနာများ”ကိုယ်ပိုင် Web fonts တွေက website ရဲ့ ဒီဇိုင်းကို ပိုကောင်းစေပေမဲ့၊ ကောင်းကောင်း မကိုင်တွယ်တတ်ရင် အောက်ပါ ပြဿနာတွေ ဖြစ်စေနိုင်ပါတယ်။
-
စာသား မမြင်ရဘဲ ခဏတာ ပျောက်နေခြင်း(FOIT): font load မလုပ်မချင်း စာလုံးတွေ ပျောက်နေတာမျိုး။
-
စာလုံးပုံစံပြောင်းပြီးမှ ပေါ်လာတာ (FOUT): စာလုံးတွေက fallback font နဲ့ အရင်ပေါ်လာပြီးမှ တကယ်သုံးတဲ့ font နဲ့ ပြောင်းသွားတာမျိုး။ ဒါက ရုတ်တရက် ပြောင်းလဲသွားလို့ ကြည့်ရတာ အဆင်မပြေနိုင်ပါဘူး။
-
LCP ကိုပိုကြာစေတာ: font တွေ load ပြီးတာကို စောင့်နေရရင် website ပေါ်လာတာ နှေးစေနိုင်ပါတယ်။
-
CLS ဖြစ်စေတာ: font ပြောင်းလဲမှုကြောင့် website ရဲ့ Content များ သိသိသာသာ ရွေ့သွားတာမျိုး။
Fonts တွေကို Optimize လုပ်ဖို့ နည်းလမ်းများ
Section titled “Fonts တွေကို Optimize လုပ်ဖို့ နည်းလမ်းများ”-
ခေတ်မီ Font Formats တွေကို သုံးပါ။
Section titled “ခေတ်မီ Font Formats တွေကို သုံးပါ။”- WOFF2 က fonts တွေကို အကောင်းဆုံး ချုံ့ပေးနိုင်ပြီး အခုခေတ် browser အများစုကလည်း ပံ့ပိုးပါတယ်။ ဒါကိုပဲ အဓိကထား သုံးသင့်ပါတယ်။
- လိုအပ်ရင် old browser တွေအတွက် WOFF ကို fallback အဖြစ် အစားထိုး ထည့်ပေးထားနိုင်ပါတယ်။
-
Section titled “font-display နဲ့ fonts ပေါ်လာပုံကို ထိန်းချုပ်ပါ။”font-displayနဲ့ fonts ပေါ်လာပုံကို ထိန်းချုပ်ပါ။font-displayက fonts တွေကို ဘယ်အချိန် ဘယ်လို ပြရမယ်ဆိုတာ ပြောပြပါတယ်။auto: Browser က သူ့ဘာသူ font ကို load လုပ်ပါတယ်။ browser တစ်ခုနဲ့ တစ်ခု နည်းနည်း ကွာနိုင်ပေမဲ့၊ များသောအားဖြင့် block လိုပဲ အလုပ်လုပ်ပါတယ်။block: စာလုံးတွေကို မပေါ်စေဘဲ block ဖြစ်နေစေပြီး (3 seconds) လောက်နေမှ တကယ်သုံးထားတဲ့ font ကို ပြောင်းပါတယ်။ FOIT ဖြစ်စေနိုင်ပါတယ်။swap: default system font ကို ချက်ချင်းပြသထားပြီး မှ တကယ်သုံးထားတဲ့ font load လုပ်ပြီးတဲ့အချိန်ကျ ပြောင်းပေးပါတယ်။ Contents တွေ ချက်ချင်းမြင်ရတယ်ဆိုပေမယ့် fonts နှစ်ခု size တွေကွာရင် CLS ဖြစ်စေနိုင်ပါတယ်။fallback: တကယ်သုံးထားတဲ့ font load လုပ်တာကို အချိန်ခဏ စောင့်ပါတယ်။ အဲ့ဒီ အချိန်အတွင်း အဆင်သင့် မဖြစ်သေးရင် fallback font ကိုပဲ သုံးပါတယ်။optional: font ချက်ချင်း အဆင်သင့် မဖြစ်ရင် fallback font ကိုပဲ သုံးပါတယ်။
အကြံပြုချက်:
font-display: swap;ကို သုံးသင့်ပါတယ်။ ဒါက စာလုံးကို မြန်မြန် ပေါ်စေပြီး စိတ်ကြိုက်ဖောင့်နဲ့ ပြောင်းတာကို balance ဖြစ်စေပါတယ်။ ဒါပေမဲ့ CLS အပေါ် ဘယ်လို သက်ရောက်လဲဆိုတာ စစ်ဆေးသင့်ပါတယ်။
Self-Hosting vs Third-Party Font Services (e.g., Google Fonts):
Section titled “Self-Hosting vs Third-Party Font Services (e.g., Google Fonts):”-
Self-Hosting: font files တွေကို download လုပ်ပြီး ကိုယ့် server ကနေ တင်တာ။
- pros: Cache ကို အပြည့်အဝ ထိန်းချုပ်နိုင်တယ်။ တခြားဝန်ဆောင်မှုတွေပေါ် မမှီခိုရဘူး။
- cons: ကိုယ်တိုင် setup နဲ့ configure လုပ်ရတာတွေ ရှိတယ်။
-
Third-Party Services: Google Fonts လို ဝန်ဆောင်မှုတွေက ပေးတဲ့ CSS ဖိုင်တွေကို website မှာ ချိတ်ဆက်တာ။
- pros: လုပ်ရလွယ်ကူတယ်။ သုံးစွဲသူတွေရဲ့ browser တွေမှာ ဖောင့်တွေ ရှိပြီးသား ဖြစ်တတ်တယ်။ optimized ဖြစ်အောင် လုပ်ထားပေးတယ်။
- cons: တခြား service တစ်ခုကို ထပ်ခေါ်ရတာ၊ တစ်ခါတစ်လေ privacy ကိစ္စတွေ စဉ်းစားရနိုင်တယ်။ (Google Fonts ကို သုံးရင် font-display (ဥပမာ- &display=swap ကို URL မှာ ထည့်တာ) ကို သေချာ ထည့်ပေးပါ။)
font ကို လိုအပ်သလောက်ပဲ သုံးပါ (Subsetting Fonts)။
Section titled “font ကို လိုအပ်သလောက်ပဲ သုံးပါ (Subsetting Fonts)။”- font file တစ်ခုလုံးကနေ တကယ်လိုအပ်တဲ့ စာလုံးတွေကိုပဲ ထည့်သွင်းပါ။ ဒါက ဖိုင်အရွယ်အစားကို အများကြီး လျှော့ချနိုင်ပါတယ်။ အထူးသဖြင့် စာလုံးအများကြီးပါတဲ့ ဘာသာစကားတွေ (ဥပမာ- တရုတ်၊ ဂျပန်၊ ကိုရီးယား) နဲ့ icon fonts တွေအတွက် အရေးကြီးပါတယ်။
- glyphhanger လို tools တွေက ကူညီနိုင်ပါတယ်။
အရေးကြီးတဲ့ fonts တွေကို preload လုပ််ပါ။
Section titled “အရေးကြီးတဲ့ fonts တွေကို preload လုပ််ပါ။”- Website ရဲ့ အစောပိုင်း content (ဥပမာ- အပေါ်ဆုံး စာသား) တွေမှာ သုံးထားတဲ့ အဓိက font ဆိုရင်
<link rel="preload">ကို သုံးပြီး browser ကို ပိုမြန်မြန် download လုပ်ဖို့ ပြောနိုင်ပါတယ်။ - ဥပမာ:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> - သတိထားပါ။ အရမ်းအများကြီး preload လုပ်ရင် တခြားအရေးကြီးတဲ့ အရာတွေကို နှေးစေနိုင်ပါတယ်။
Font Weights အရမ်းများတာကို ရှောင်ပါ။
Section titled “Font Weights အရမ်းများတာကို ရှောင်ပါ။”- Font ရဲ့ ပုံစံတစ်ခုချင်းစီ (ဥပမာ- normal, bold, italic) ဟာ သီးခြား ဖိုင်တစ်ခုစီ ဖြစ်ပါတယ်။ ဒါကြောင့် တကယ်သုံးတဲ့ font file ကိုပဲ တင်ပါ။