How To Optimize Our Web Sites With GZIP Compression - Part One

Submitted by everlearner on Wed, 08/18/2010 - 10:42

Webmaster တစ်ဦး အနေနဲ့ Modern Web Server များနဲ့ Browser များရဲ့ စွမ်းဆောင်ရည်ကို အထိရောက်ဆုံး အသုံးပြုနိုင်တဲ့ နည်းပညာ တစ်ခုကတော့ GZip Encoding ကို သုံးခြင်းပါပဲ။ ဒီဆောင်းပါးမှာ GZip Encoding နည်းပညာနဲ့ အဲဒီနည်းပညာကို WordPress, Drupal စတဲ့ Blog Engine တွေ၊ CMS တွေနဲ့ PHP ၊ ASP ဘာသာစကားသုံး ၀က်ဘ်ဆိုက်များမှာ ထည့်သွင်း အသုံးပြုနိုင်တဲ့ နည်းလမ်းတွေကို ေ၀မျှသွားပါမယ်။

Saving Bandwidth, Improve User Experience

တည်ဆောက်ထားတဲ့ ၀က်ဘ်ဆိုက်တစ်ခုကို User တွေကြည့်တဲ့အခါမှာ ပိုမိုလျင်မြန်စွာ မြင်တွေ့ရစေဖို့နဲ့ Web Hosting ရဲ့ Bandwidth ကို ချွေတာစေနိုင်ဖို့အတွက် ရိုးစင်းပြီး၊ ထိရောက်တဲ့ နည်းလမ်းတစ်ခုက ဖိုင်များကို ဖိသိပ်ပေးပို့ခြင်း (Compression) ဖြစ်ပါတယ်။ Bandwidth ကို ချွေတာဖို့ဆိုတာ Unlimited Bandwidth ပါတဲ့ Web Hosting ၀ယ်ထားတဲ့ သူတွေအတွက် ပြဿနာ မဟုတ်ပါဘူး။ ဒါပေမယ့် ဥပမာ - တစ်လမှာ 5 GB Bandwidth ပဲ အများဆုံး ရမယ်ဆိုတဲ့ Limited Hosting Account ပိုင်ရှင်တွေ အနေနဲ့ကတော့ Bandwidth ကို တတ်နိုင်သမျှ ချွေတာဖို့ အထူးလိုအပ်ပါတယ်။ Google, Microsoft နဲ့ Yahoo စတဲ့ ၀က်ဘ်ဆိုက်ကြီးတွေ မှာလည်း Server ကနေ Web Browser တွေဆီကို ဖိုင်တွေ ပေးပို့လိုက်တဲ့ အခါမှာ Gzip Compression နည်းလမ်းကို သုံးထားတာပါ။

Google used gzip compression to deliver the requests as fast as possible

ယခုခေတ်မှာ လူအများစု အသုံးပြုနေကြတဲ့ အင်တာနက်ကြည့် ဆော့ဖ်၀ဲ (Web Browser) အများစုက နောက်ဆုံးပေါ် Web Technology များကို အသုံးပြုထားပါတယ်။ Gzip နည်းပညာကို နားလည် ပါတယ်။  HTML5, CSS3 စတဲ့ နောက်ဆုံးပေါ် ၀က်ဘ်နည်းပညာများသုံး (Modern Web Technology) Content များကို ကောင်းစွာ သိရှိနားလည် ပါတယ်။ ထို့ပြင် ဆာဗာများ (Web Servers) နဲ့ ဆက်သွယ်တဲ့အခါ မြန်နှုံးမြှင့် ပို့ဆောင်ဆက်သွယ်ရေး စနစ်များကိုလည်း နားလည် အသုံးပြုနိုင်ပါတယ်။

Why Are We Doing Gzipping?

GZipping မပြုလုပ်မီ၊ ပထမဦးစွာ Content Encoding အကြောင်းကို သိရှိ နားလည်ဖို့ လိုအပ်ပါတယ်။ User တစ်ဦးက ၀က်ဘ်ဆိုက်လိပ်စာ (Web Address - ဥပမာ - http://mmshare.org/index.html) တစ်ခုကို Web Browser မှာ ထည့်ပြီး အဲဒီဆိုက်ကို ဖွင့်ကြည့်ဖို့ လုပ်လိုက်တာနဲ့ အဲဒီ Browser နှင့် Web Server တို့ကြားမှာ အောက်ပါအတိုင်း အပြန်အလှန် ဆက်သွယ်ရေးလမ်းကြောင်းတစ်ခု ဖြစ်ပေါ်လာပါတယ်။

HTTP Request and Response between browser and server

  1. Browser: http://mmshare.org/index.html ဆိုတဲ့ ဖိုင်ကို ရ (GET) ချင်ပါတယ်။ (Hey, GET me /index.html)
  2. Server: ကောင်းပြီ၊ မင်းလိုချင်တဲ့ index.html ဖိုင် ငါ့ဆီမှာ ရှိမရှိ ကြည့်လိုက်ဦးမယ် (Ok, let me see if index.html is lying around…)
  3. Server: တွေ့ပြီဟေ့၊ ရှေ့ပြေး အကြောင်းကြားချက် သငေ်္ကတ (200 OK) အရင်ပို့လိုက်ပြီ။ မင်းလိုချင်တဲ့ ဖိုင်ကိုလည်း ပို့နေပြီ။ ( Found it! Here’s your response code (200 OK) and I’m sending the file.)
  4. Browser: အို 100 ကီလိုဘိုက် (KB) ဆိုတော့ အများကြီးပါလား။ စောင့်နေတယ်....။ စောင့်နေတယ်....။ ရပြီ ငါ့ဆီမှာ ပုံဖော်နေပြီ။ (100KB? Ouch… waiting, waiting… ok, it’s loaded.)

တကယ့် လက်တွေ့မှာ Server နဲ့ Browser ကြားက အပြန်အလှန်ဆက်သွယ်မှုတွေက အခုထက် ပိုများပါတယ်။ သိချင် မြင်ချင်တယ်ဆိုရင် Firefox Addon တစ်ခု ဖြစ်တဲ့ Live HTTP Headers ကိုသုံးပြီး ကြည့်နိုင်ပါတယ်။

ပုံအရ ပြောရမယ်ဆိုရင် ဒီဥပမာမှာ Web Browser က နောက်ဆုံးမှာ Web Server ဆီကနေ 100 KB ရှိတဲ့၊ သူလိုချင်တဲ့ index.html ဖိုင်ကို ရလိုက်ပါတယ်။ ဒါပေမယ့် စောင့်ဆိုင်းလိုက်ရတဲ့ အချိန်က အတော်ကြာပါတယ်။ ပြဿနာက အဲဒါပါပဲ။ စောင့်နေရတဲ့ အလုပ်ကို ဘယ်သူမှ မလုပ်ချင်ကြပါဘူး။

HTML ဖိုင်တစ်ခုဟာ 100 KB ထက်မက အရွယ်အစား ကြီးမားနိုင်ပါတယ်။ စာတွေ၊ ပုံတွေနဲ့ အထဲမှာ ထပ်ခါတလဲလဲ ပါနေတဲ့ HTML Code တွေက ဖိုင်တွေကို ဖောင်းပွနေစေပါတယ်။ ဥပမာ ပြောရရင် Web page တစ်ခုမှာ <html> ၊ <table> နဲ့ <div> စတဲ့ Code တွေ ထပ်ခါထပ်ခါ ပါနေတာပါ။ ဒီတော့ ဖိုင်တွေကို အရွယ်အစားချုံ့ဖို့ အရေးတကြီး လိုအပ်လာပါတယ်။ အရွယ်အစား ကြီးမားတဲ့ ဖိုင်တွေကို Zip လုပ်ဖို့ လိုအပ်လာပါတယ်။

တကယ်လို့များ Web Server တစ်ခုက Browser ဆီကို ပေးပို့ဖို့ လိုအပ်တဲ့ index.html ဖိုင်ကို အရွယ်အစား ချုံ့ပြီး index.html.zip ဖိုင်အဖြစ် ပေးပို့နိုင်ခဲ့တယ် ဆိုရင် Web Hosting ရဲ့ Bandwidth ကို ချွေတာနိုင်ရုံသာမက၊ Web Browser က ဆွဲယူတဲ့ အချိန် (Download Time) ကိုလည်း လျော့ကျစေမှာပါ။

ဒီဖြစ်စဉ်မှာ Web Browser က Server ဆီကနေ index.html.zip ဖိုင်ကို ရယူပါတယ်။ zip ဖိုင်ကို ရတဲ့အခါမှာ ပြန်ဖြည်ပြီးတော့ User ကို ပြပေးတာ ဖြစ်ပါတယ်။ အဲဒီအတွက် ကြည့်နေတဲ့ User အနေနဲ့ စောင့်ဆိုင်းရတဲ့ ပြဿနာ မရှိတော့လို့ ပိုမိုကောင်းမွန်တဲ့ သုံးစွဲမှု အတွေ့အကြုံ (User Experience) ကို ရရှိမှာ ဖြစ်ပါတယ်။ Web Browser နဲ့ Server တို့ကြားက အပြန်အလှန်ဆက်သွယ်မှုကို အခုလိုပုံဖော်ကြည့်နိုင်ပါတယ်။

HTTP request between browser and server to accept gzip

  1. Browser: http://mmshare.org/index.html ဆိုတဲ့ ဖိုင်ကို ရ (GET) ချင်ပါတယ်။ မင်းဆီမှာ ချုံ့ထားတဲ့ ဖိုင်ရှိရင်လည်း ပေးလို့ရပါတယ်။ (Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.)
  2. Server: ကောင်းပြီ၊ မင်းလိုချင်တဲ့ index.html ဖိုင် ငါ့ဆီမှာ ရှိမရှိ ကြည့်လိုက်ဦးမယ်။ တွေ့ပြီဟေ့။ မင်းက ချုံ့ထားတဲ့ဖိုင် ရရင် လိုချင်တယ် ဟုတ်လား။ သိပ်ကောင်းတာပေါ့ကွာ။ (Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.)
  3. Server: တွေ့ပြီဟေ့၊ ရှေ့ပြေး အကြောင်းကြားချက် (200 OK) အရင်ပို့လိုက်ပြီ။ ငါ အခု အဲဒီဖိုင်ကို ချုံ့နေတယ်။ ပြီးတာနဲ့ ပို့လိုက်မယ်။ (Ok, I’ve found index.html (200 OK), am zipping it and sending it over.)
  4. Browser: သိပ်ကောင်းတာပေါ့ကွာ။ ဖိုင်က 10 ကီလိုဘိုက် (KB) ပဲရှိတယ်။ ဒီဖိုင်ကို ပြန်ဖြည်ပြီး User ကို ပြလိုက်တော့မယ်။ (Great! It’s only 10KB. I’ll unzip it and show the user.)
ပုံသေနည်းက ရိုးရိုးလေးပါ။
ဖိုင်အရွယ်အစား ငယ်ခြင်း = လျင်မြန်စွာ ပေးပို့ ရယူနိုင်ခြင်း = User ၏ ပျော်ရွှင်မှု
Smaller file = faster download = happy user.

နမူနာ အနေနဲ့ အောက်မှာ ပြထားတဲ့ mmshare.org ကို Gzip Test လုပ်ထားတဲ့ အဖြေကို ကြည့်နိုင်ပါတယ်။ Zip လုပ်ပြီး အရွယ်အစား ချုံ့လိုက်တဲ့အတွက် 97 KB နီးပါးကနေ 20 KB နီးပါးထိ လျော့ကျသွားတာ မြင်ရမှာပါ။

Gzip Test Results for mmshare.org
အပိုင်း 2 မှာ လက်တွေ့ GZIP လုပ်ကြည့်ကြပါမယ်...

အခု ဖော်ပြခဲ့တဲ့ How To Optimize Our Web Sites With GZIP Compression - Part One နဲ့ Part Two ဟာ BetterExplained က - How To Optimize Your Site With GZIP Compression ဆောင်းပါးကို မူရင်းစာရေးသူရဲ့ ခွင့်ပြုချက်နဲ့ တိုက်ရိုက် ဘာသာပြန်ဆို ရေးသားထားတာ ဖြစ်ပါတယ်။ အပိုင်း 3 မှာတော့ မူရင်းဆောင်းပါးမှာ မပါတဲ့ ကျွန်တော်လုပ်နေတဲ့ WordPress နဲ့ Drupal site တွေမှာ Compression လုပ်ရင်း တွေ့လာတဲ့ နည်းလမ်းတွေကို ပြန်ပြီး ဝေမျှပေးသွားမှာ ဖြစ်ပါတယ်။

Tags:

  • 6266 reads

Add new comment

Similar Articles

  1. Googlebot ကို ပိတ်ဆို့ထားမိပါသလား − Did Your Website Block Googlebot?         307 Reads...
  2. Mobile Phone သုံးလျှင် သတိထားရမည့် လျှပ်စစ် အန္တရာယ်များ         208 Reads...
  3. How to Do a Proper Research for Our Projects, Challenges, Clients, Life and Community         5,893 Reads...
  4. Using Gmail as SMTP Server in WordPress, Joomla & Drupal         15 Reads...
  5. Tips and Tricks on Self-Studying Computer and IT - ကွန်ပျူတာနှင့် အိုင်တီကို ကိုယ်တိုင် လေ့လာရာတွင် အသုံးဝင်မည့် နည်းလမ်းများ         2,051 Reads...
  6. WinFF - Ultimate Free Multimedia Conversion Tool for Windows and Linux Users         9,226 Reads...
  7. အမှန်တကယ် အသုံးပြုသူ (End User) များနှင့် စတင် အလုပ်လုပ်ခြင်း         265 Reads...