Minimize HTTP Requests - HTTP Request များကို အနည်းဆုံးဖြစ်အောင် ပြုလုပ်ခြင်း

အဓိက အကြောင်းအရာ - Content ဝက်ဘ်ဆိုက်တစ်ခုသို့ လာရောက်သူများအတွက် ပြန်လည်တုံ့ပြန်သည့် စုစုပေါင်း အချိန် (Response Time) ၏ ၈၀ ရာခိုင်နှုန်းမှာ - ဆိုက်၏ ရှေ့မျက်နှာစာပိုင်း (Front end of the website) အတွက် ဖြစ်သည်။ အချိန်အများစုကို သက်ဆိုင်ရာ အင်တာနက်စာမျက်နှာများအတွင်း ပါရှိသော အစိတ်အပိုင်းများ ဖြစ်သည့် - ရုပ်ပုံများ၊ Stylesheet များ၊ Script နှင့် Flash ဖိုင်များ အားလုံးကို စုစည်း ဆွဲချရန် အသုံးပြုရလေ့ ရှိသည်။

အင်တာနက်စာမျက်နှာ တစ်ခုတွင် ပါ၀င်သည့် အစိတ်အပိုင်းများ၏ အရေအတွက်ကို လျော့ချခြင်းသည် (တကယ်တမ်းတွင်) ၄င်းစာမျက်နှာကို အင်တာနက်ကြည့်ဆော့ဖ်၀ဲတွင် ပုံဖော်ပြသခြင်း (Rendering) ပြုလုပ်နိုင်ရန် အတွက် ပြုလုပ်ရသည့် HTTP Request အရေအတွက်ကို လျော့ချခြင်းပင် ဖြစ်သည်။ ဤအချက်သည် အင်တာနက် စာမျက်နှာများကို ပိုမို လျင်မြန်စေသည့် အဓိက သော့ချက်ဖြစ်သည်။

စာမျက်နှာတစ်ခုတွင် ပါသည့် အစိတ်အပိုင်းများ၏ အရေအတွက်ကို လျော့ချနိုင်သော နည်းလမ်းတစ်ခုမှာ - ၄င်းစာမျက်နှာ၏ ဒီဇိုင်းကို ရိုးစင်းစွာ ဖန်တီးထားခြင်း ဖြစ်သည်။ သို့သော် စာမျက်နှာ၏ ဒီဇိုင်းကိုလည်း မရိုးစင်းရစေဘဲ အကြောင်းအရာစုံလင်စွာ ထည့်သွင်းနိုင်သည့် အပြင်၊ လာရောက်သူများလည်း လျင်မြန်စွာ မြင်တွေ့နိုင်စေသည့် နည်းလမ်းများကို အသုံးပြုပါက ပိုမို အကျိုးရှိမည် ဖြစ်သည်။ ထိုနည်းလမ်းများကို အောက်တွင် လေ့လာနိုင်သည်။

ဖိုင်များကို စုပေါင်းထားခြင်း သည် HTTP Request များ၏ အရေအတွက်ကို လျော့နည်းစေသည့် နည်းလမ်းတစ်ခု ဖြစ်သည်။ Script များအားလုံးကို စုစည်းပြီး Script တစ်ခုတည်းတွင်ထည့်သွင်းခြင်း၊ တနည်းအားဖြင့် CSS များ အားလုံးကို CSS ဖိုင်တစ်ခုတည်းတွင် ပေါင်းစည်းထည့်သွင်း အသုံးပြုခြင်းမျိုး ဖြစ်သည်။ အသုံးပြုထားသည့် Script များနှင့် Stylesheet များမှာ အင်တာနက် စာမျက်နှာ တစ်ခုနှင့် တစ်ခု မတူကြသည့် အခါတွင် ထိုဖိုင်များကို ပေါင်းစည်းရခြင်းသည် စိန်ခေါ်မှုတစ်ခု ဖြစ်သည်။ သို့သော်လည်း ဤသို့ ပေါင်းစည်းခြင်းအားဖြင့် အမြန်နှုန်း မြင့်တက်လာမည် ဖြစ်သည်။

အင်တာနက်စာမျက်နှာတစ်ခုတွင် ပါရှိသည့် ရုပ်ပုံများကို တောင်းဆိုမှု အကြိမ်အရေအတွက် လျော့ချနိုင်ရန်အတွက် အသုံးပြုသင့်သည့် နည်းလမ်းမှာ CSS Sprites ဖြစ်သည်။ ဤနည်းပညာတွင် အသုံးပြုထားသည့် Background image များအားလုံးကို ပုံတစ်ပုံထဲတွင် ပေါင်းစည်းထားပြီး၊ CSS background-image နှင့် background-position property များကို ထိရောက်စွာ အသုံးပြုကာ လိုအပ်သည့် နေရာတွင် ပုံဖော်ပြသခြင်း ဖြစ်သည်။

Image map များသည် ပုံများစွာကို တစ်ပုံတည်းအဖြစ် ပေါင်းစည်းထားခြင်း ဖြစ်သည်။ စုစုပေါင်း ပမာဏ (File size) အနေဖြင့် သိပ်မကွာသော်လည်း တောင်းဆိုသည့် HTTP Request အရေအတွက်ကို လျော့ချပေးနိုင်သည့် အတွက် အမြန်နှုန်း မြင့်တက်လာသည်။ Image map များကို Navigation bar ကဲ့သို့ တစ်ဆက်တစ်စပ်တည်း ရှိနေသည့် ပုံများပါ၀င်သည့် အခြေအနေတွင် ကောင်းစွာ သုံးနိုင်သည်။ Image map များ၏ နေရာချ အမှတ်များ (Coordinates) ကို ဖန်တီးရခြင်းသည် - အလွန်ငြီးငွေ့ ဖွယ်ရာကောင်းပြီး အမှားအယွင်းများစွာလည်း ကြုံရနိုင်သည်။ ထို့ပြင် Navigation စနစ်အတွက် Image map များကို အသုံးပြုခြင်းသည် ကွန်ပျူတာ အသုံးပြုသူများအတွက် အသုံးပြုရန်ခက်ခဲ (Not Accessible) သည့် အတွက် - Image map များကို မသုံးသင့်ချေ။

Inline images များတွင် data: URL scheme ကို အသုံးပြုပြီး ပုံများအတွက် လိုအပ်သည့် အချက်အလက်များကို အင်တာနက် စာမျက်နှာအတွင်းသို့ မြှပ်နှံ ထည့်သွင်း ကြသည်။ ဤနည်းမှာ ကျွန်တော်တို့၏ HTML ဖိုင်များ၏ အရွယ်အစားကို မြင့်တက်စေနိုင်သည်။ Inline image များကို ကျွန်တော်တို့၏ (cached) stylesheets များဖြင့် ပေါင်းစည်းခြင်းသည် HTTP request များကို လျော့ချနိုင်သည့် နည်းလမ်းတစ်ခု ဖြစ်ပြီး HTML ဖိုင်များ၏ အရွယ်အစား မြင့်တက်လာမှု ကိုလည်း ရှောင်လွှဲစေနိုင်သည်။ Inline image များကို အများဆုံးသုံးနေသည့် အင်တာနက်ကြည့် ဆော့ဖ်ဝဲများ အားလုံးက အထောက်အပံ့ ပေးနိုင်ခြင်း မရှိသေးပေ။

ကျွန်တော်တို့ တည်ဆောက်လိုက်သည့် ဝက်ဘ်ဆိုက်တစ်ခု၏ အမြန်နှုန်းကို ကောင်မွန်စေရန် အတွက် ပထမဆုံး စတင်ရမည့်အဆင့်မှာ - ပါရှိသည့် အင်တာနက်စာမျက်နှာများတွင် ဖြစ်လာသည့် HTTP request အရေအတွက်ကို လျော့ချခြင်း ဖြစ်သည်။ ဤနည်းမှာ ၀က်ဘ်ဆိုက်တစ်ခုကို ပထမဆုံး အကြိမ် စတင်လာရောက် လည်ပတ်သူများ အတွက် ဆိုက်၏ စွမ်းဆောင်ရည်ကို တိုးတက်စေရန် အရေးအကြီးဆုံး လမ်းညွှန်ချက် ဖြစ်သည်။ Tenni Theurer's ၏ ဘလော့ခ်မှ Browser Cache Usage - Exposed! တွင် ဆိုက်ကို နေ့စဉ် လာရောက်သူများ၏ ၄၀ မှ ၆၀ ရာခိုင်နှုန်းမှာ Empty Cache များဖြင့် ရောက်လာ ကြခြင်းဖြစ်ကြောင်း ဖော်ပြထားသည်။

ကျွန်တော်တို့၏ အင်တာနက်စာမျက်နှာများကို ပထမဆုံး လာရောက်သူများ (First time visitors) အတွက် အမြန်ဆုံးမြင်တွေ့ နိုင်စေရန် ဖန်တီးထားခြင်းသည် လာရောက်သူများအတွက် ပိုမိုကောင်းမွန်သည့် အတွေ့အကြုံ (Better User Experience) တစ်ခုကို ရရှိစေသည့် သော့ချက်တစ်ခု ဖြစ်သည်။

REF: http://developer.yahoo.com/performance/rules.html#num_http