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

Web Server နဲ့ Web Browser တို့ကြားမှာ ဖိုင်တွေ အပို့အယူလုပ်တဲ့အခါ သာမန်ဖိုင်တွေကို ပေးပို့တာထက် Zip လုပ်ပြီး ချုံ့ထားတဲ့ ဖိုင်တွေကို ပေးပို့တာက ပိုမြန်တဲ့ အကြောင်း ပထမပိုင်းမှာ ကျွန်တော်တို့ သိခဲ့ကြပြီးပါပြီ။ အခု ဆက်ပြီး ဒီလို Zip ဖိုင်တွေကို အလွယ်တကူ အပို့အယူ လုပ်နိုင်အောင် Webmaster အနေနဲ့ ကိုယ့်ရဲ့ Server ကို ဘယ်လို ပြင်ဆင် (Configuration) လုပ်ရမလဲဆိုတာ လေ့လာကြရအောင်။

Agreements Between Web Server and Browsers

ဒီလုပ်ဆောင်ချက်တစ်ခုလုံးရဲ့ အဓိက အချက်ကတော့ Web Server နဲ့ Browser ကြားမှာ Zip ဖိုင်တွေ ပေးပို့/လက်ခံနိုင်တယ်ဆိုတဲ့ အပြန်အလှန် သဘောတူညီမှု ရယူထားခြင်းပါ။ ဒီသဘောတူညီချက်က အခုလို အပိုင်းနှစ်ပိုင်းနဲ့ အလုပ်လုပ်ပါတယ်။

1. Web Browser မှ မိမိအနေဖြင့် ဖိချုံ့ထားသည့် အကြောင်းအရာများ (Compressed Content) များကို လက်ခံရယူနိုင်ကြောင်း အသိပေးချက်ပါသည့် Header ဖိုင်ကို ပေးပို့ခြင်း။ Accept-Encoding: gzip, deflate (ဒီနေရာမှာ အများဆုံး အသုံးပြုလေ့ရှိကြသည့် ဖိချုံ့မှု ပုံစံနှစ်ခုကတော့ (Compression Schemes) gzip နှင့် deflate ဖြစ်ပါတယ်။)
2. Web Server မှ ဖိချုံ့ထားသည့် ဖိုင်ကို ပြန်လည်ပေးပို့မည်ဟု အကြောင်းပြန်ခြင်း (Content-Encoding: gzip) နှင့် အမှန်တကယ် ပေးပို့ခြင်း။

တကယ်လို့များ Server အနေနဲ့ Content-Encoding response header ကို ပြန်မပို့ခဲ့ဘူးဆိုရင် Web Browser အနေနဲ့ သူလက်ခံရမယ့် ဖိုင်တွေဟာ ဖိချုံ့ထားခြင်း မရှိဘူးဆိုတာကို နားလည်ပါတယ်။ ဒါဟာ ဆာဗာ အများစုရဲ့ Default Setting လည်းဖြစ်ပါတယ်။ Web Browser အနေနဲ့ ဖိချုံ့ထားတဲ့ ဖိုင်တွေကို ပေးပို့နိုင်ပါတယ် ဆိုတဲ့ တောင်းဆိုချက် (“Accept-encoding” header) ကို ဆာဗာဆီကို ပေးပို့မှသာ Server အနေနဲ့ သူ့မှာရှိတဲ့ ဖိုင်ကို ဖိချုံ့ (Compress) လုပ်ပြီး ပေးပို့တာပါ။ နောက်တစ်ချက်က Web Browser ကချုံ့ထားတဲ့ ဖိုင်တွေကို ပေးပို့ဖို့ တောင်းဆိုနေပေမယ့်လည်း ဆာဗာအနေနဲ့ ဖိချုံ့ထားတဲ့ဖိုင်ကို ပြန်ပေးနိုင်တဲ့ အခြေအနေမရှိရင် ဒါမှမဟုတ် Configuration လုပ်မထားရင်လည်း၊ ချုံ့မထားတဲ့ ရိုးရိုးဖိုင်တွေကိုပဲ Browser ဆီကို ပြန်ပို့မှာ ဖြစ်ပါတယ်။

Setting up the server

အခုဆက်ပြီး ကျွန်တော်တို့ရဲ့ ၀က်ဘ်ဆာဗာကို Configuration လုပ်ကြရအောင်။ Webmaster တစ်ယောက်အနေနဲ့ ကိုယ့်ရဲ့ ဆိုက်ကို လာကြည့်သူတွေရဲ့ အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ Web Browser တွေကို ထိန်းချုပ်နိုင်ခြင်း မရှိပါဘူး။ Web Browser တွေက Accept-encoding: gzip, deflate စတဲ့ header တွေကို ဆာဗာဆီကို ပို့ချင်မှ ပို့မှာပါ။ ဒါပေမယ့် Webmaster တစ်ယောက်ဟာ သူ့ရဲ့ Web Server ကိုတော့ စိတ်တိုင်းကျ (နီးပါး) ထိန်းချုပ်နိုင်ပါတယ်။ အဲဒီအတွက်ကြောင့် ဆာဗာဆီက ပြန်ပို့မယ့် ဖိုင်တွေကို ဖိချုံ့ထားတဲ့ Zip ဖိုင်တွေ အဖြစ်နဲ့ ပြန်ပို့စေဖို့ Configuration လုပ်နိုင်ပါတယ်။

Microsoft IIS ဆာဗာ တွေအတွက်ကတော့ Settings ထဲမှာ Compression ကို Enable လုပ်ပေးရပါမယ်။
Apache ၀က်ဘ်ဆာဗာ တွေအတွက်တော့ အောက်မှာဖော်ပြထားတဲ့ Configuration တွေကို .htaccess ဖိုင်ထဲမှာ ရေးထဲ့ပေးရပါမယ်။ (ကျွန်တော်တို့ အနေနဲ့ Apache Server ရဲ့ mod_deflate module ON ထားတယ်လို့ ယူဆထားပါတယ်။)

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

ဆိုလိုတာက ဆာဗာကနေ ပြန်ပို့မယ့် Text, HTML, JavaScript, CSS နဲ့ XML ဖိုင်တွေကို zip လုပ်ပြီး ပို့မယ်လို့ ပြောတာပါ။ အဲဒီလို မရေးချင်ဘူး ဖိုင် အမျိုးအစား တစ်ခုချင်းစီကို ရေးချင်တယ်ဆိုရင်တော့ အခုလို ရေးရပါမယ်။

<Files *.html>
SetOutputFilter DEFLATE
<Files *.css>
SetOutputFilter DEFLATE
</Files>
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.php>
SetOutputFilter DEFLATE
</Files>
<Files *.xml>
SetOutputFilter DEFLATE
</Files>

Be Aware Not To Compress Image, Audio and Video Files

ဒီနေရာမှာ သတိထားစရာ တစ်ခုကတော့ Compress လုပ်ထားပြီးသား ဖိုင်တွေဖြစ်တဲ့ .jpg, .gif, .png စတဲ့ Graphic ဖိုင်တွေ၊ .flv, .mpeg, .m4v, .mp3 စတဲ့ ဗီဒီယိုနဲ့ ရုပ်သံဖိုင်တွေကို ထပ်ပြီး Compress လုပ်ဖို့ မလိုတော့ပါဘူး။ ထပ်လုပ်ရင် ဆာဗာအနေနဲ့ အပို၀န်ပိသွားမှာပါ။

Compression Options in Apache Server

Apache ဆာဗာမှာ ဖိုင်တွေကို ဖိချုံ့နိုင်တဲ့ နည်းလမ်း နှစ်ခုရှိပါတယ်။
- mod_deflate - အလွယ်တကူ Set Up လုပ်နိုင်ပြီး၊ စံအဖြစ် အသုံးများကြပါတယ်။
- mod_gzip - ပိုပြီး အစွမ်းထက်ပါတယ်။ ဖိုင်တွေကိုလည်း ကြိုပြီး ဖိချုံ့ထားနိုင်ပါတယ်။ (pre-compress)။
အဲဒီတော့ ကိုယ်နှစ်သက်ရာ အဆင်ပြေရာ နည်းလမ်းကို သုံးနိုင်ပါတယ်။ ဘယ်နည်းကို သုံးသုံး၊ Apache ဆာဗာက Web Browser ဆီကနေ ရောက်လာတဲ့ http header တွေမှာ “Accept-encoding” ပါမပါ စစ်ဆေးပါတယ်။ “Accept-encoding” header ပါရင် ဖိချုံ့ထားတဲ့ ဖိုင်တွေကို ပေးပို့ပြီး မပါရင်တော့ ရိုးရိုးဖိုင်တွေကိုပဲ ပြန်ပို့ပေးပါတယ်။ “Accept-encoding” နည်းပညာကို နောက်ဆုံးပေါ် Web Browser တွေမှာ သုံးထားပါတယ်။ ဒီခေတ်မှာ အလွန်အိုမင်း ဟောင်းနွမ်းနေတဲ့ Web Browser တွေ သိပ်မရှိတော့တဲ့ အတွက် Content Encoding နည်းဟာ၊ အချိန်ကုန်သက်သာ၊ ၀က်ဘ်ဆိုက်ကိုလည်း လျင်မြန်စေ၊ Bandwidth ကိုလည်း ချွေတာစေနိုင်ပြီး၊ လူတိုင်း (Web site Owners, Users, Webmasters) ကိုလည်း ပျော်ရွှင်မှု ရစေတဲ့ အလွန်အသုံး၀င်တဲ့ နည်းဖြစ်လာပါတယ်။

Gzipping from PHP

တခါတလေမှာ ၀က်ဘ်ဆာဗာတွေရဲ့ HTACCESS ဖိုင်တွေကို Configuration လုပ်ခွင့် မရတဲ့ အခြေအနေမျိုး ကြုံရတတ်ပါတယ်။ တခါတလေတော့ Configuration လုပ်နိုင်ပေမယ့်လည်း အကြောင်းအမျိုးမျိုးကြောင့် အပေါ်မှာ ကျွန်တော်တို့ ရေးခဲ့တဲ့ Configuration တွေ အလုပ်မလုပ်တာမျိုး ဖြစ်တတ်ပါတယ်။ အဲဒီအခါမှာ PHP ဖိုင်တွေကနေ အခုလို Compress လုပ်ထားတဲ့ ဖိုင်တွေပို့ပေးနိုင်ပါတယ်။ အောက်မှာဖော်ပြထားတဲ့ Code တွေကို .php ဖိုင်ရဲ့ ထိပ်ဆုံးမှာ ထည့်ရေးပေးရပါမယ်။

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

ဒီ Code မှာ - “Accept-encoding” header ကို ပထမဆုံး စစ်ဆေးပါတယ်။ တကယ်လို့ ပါတယ်ဆိုရင် Gzip လုပ်ထားတဲ့ ဖိုင်ကို ပြန်ပို့ပေးပြီး၊ မပါခဲ့ရင်တော့ ပုံမှန်ဖိုင်ကိုပဲ ပြန်ပို့ခိုင်းတာပါ။ ဒီနည်းကလည်း ကိုယ်ပိုင်ဆာဗာတစ်ခု တည်ဆောက်ဖန်တီး လိုက်ရသလိုပါပဲ။ ဒါပေမယ့် ဒီနည်းက .HTACCESS ဖိုင်ကို Configure လုပ်လို့ မရတော့တဲ့ နောက််ဆုံး အခြေအနေမှ သုံးသင့်ပါတယ်။ File Compression အတွက် Apache ကို ခိုင်းတာ အကောင်းဆုံးပါပဲ။

Verify Your Compression

• Online: GidNetwork က ပြုလုပ်ထားတဲ့ online web page compression / deflate / gzip test tool ကို သုံးပြီး ကျွန်တော်တို့ရဲ့ Web Server ဆီက ပြန်ထွက်လာတဲ့ ဖိုင်တွေဟာ Compress လုပ်ထားမထား ပြန်စစ်နိုင်ပါတယ်။
• FireFox: Web Developer Toolbar ကို FireFox မှာ Install လုပ်ပြီး၊ Web Developer Toolbar > Information > View Document Size ကနေတစ်ဆင့် ကြည့်နိုင်ပါတယ်။
• View the headers: Live HTTP Headers ကို FireFox မှာ Install လုပ်ပြီး၊ “Content-encoding: gzip” ဆိုတဲ့ အသိပေးချက်ပါတဲ့ နေရာကို ရှာကြည့်နိုင်ပါတယ်။

Try Some Examples

လက်တွေ့စမ်းသပ်ဖို့အတွက် ပေးထားတဲ့ ဖိုင်ကို Download ချပြီး ဆာဗာပေါ်မှာ စမ်းကြည့်နိုင်ပါတယ်။ အဲဒီဖိုင်တွေထဲမှာ index.html ဖိုင်က Compress လုပ်မထားပါဘူး။ htaccess-index.htm ဖိုင်ကတော့ .htaccess ဖိုင်ထဲမှာ Compress လုပ်ထားတာပါ။ index.php ဖိုင်ကတော့ PHP header ကို သုံးပြီး Compress လုပ်ထားတာ ဖြစ်ပါတယ်။ ကိုယ့်မှာ Hosting ပေါ်တင်ဖို့ အဆင်မပြေရင်လည်း WAMP, XAMPP စတဲ့ Apache ဆာဗာတွေနဲ့ Run ထားတဲ့ ကိုယ့်ရဲ့ Localhost မှာ စမ်းလည်း အဆင်ပြေပါတယ်။

Some Other Things to Know

• အင်တာနက်ကြည့် ဆော့ဖ်၀ဲ အဟောင်းများ (Old Browsers) - တွေဟာ ဖိချုံ့ထားတဲ့ ဖိုင်တွေကို လက်မခံနိုင်ပါဘူး။ Apache mod_deflate module က အဲဒီလို Browser အဟောင်းတွေ အတွက် Compress လုပ်ထားတဲ့ ဖိုင်တွေကို မပို့အောင် အလိုလို လုပ်ပေးနိုင်ပါတယ်။
• ဖိချုံ့ထားပြီးသည့် အကြောင်းအရာများ - ဖြစ်သည့် ရုပ်ပုံ၊ သီချင်းနှင့် ဗီဒီယိုဖိုင်များကို ထပ်မချုံ့သင့်တော့ပါ။ အချိန်ကုန်ခြင်းသာ အဖတ်တင်ပါလိမ့်မယ်။ တကယ်တမ်း ကျွန်တော်တို့ ချုံ့သင့်သည့် ဖိုင်အမျိုးအစားများက Text ကို အခြေခံတဲ့ HTML, CSS နှင့် JavaScript ဖိုင်များ ဖြစ်ပါတယ်။
• CPU-Loading - ကို အသုံးပြုပြီး ဖိုင်များကို ချက်ချင်း ဖိချုံ့ခြင်းကြောင့် Server ၏ စွမ်းဆောင်ရည်ကို အသုံးပြုရာရောက်ပါတယ်။ User များရဲ့ ပျော်ရွှင်မှုကို ရရှိစေဖို့ အတွက် ဆာဗာရဲ့ CPU ကို ထိရောက်စွာ ခိုင်းစေတာ ဖြစ်ပါတယ်။ ဆာဗာကနေ ကြိုတင် zip လုပ်ထားပြီးသား ဖိုင်များကိုလည်း ပေးပို့နိုင်ပါသေးတယ်။ ဒါပေမယ့် လုပ်ဆောင်စရာ အဆင့်ပိုများတဲ့အတွက် Deflate နည်းလမ်းကို သုံးခြင်းက အလွယ်ကူဆုံးပါပဲ။

Now is the Time to Compress Our Content

ကျွန်တော်တို့ရဲ့ Web Server တွေကို အခုလို Compression လုပ်ပေးစေဖို့ လုပ်ဆောင်ထားခြင်းအားဖြင့် လူတိုင်းအတွက် အဖိုးတန်တဲ့ Bandwidth တွေကို ချွေတာရာ ရောက်တဲ့အပြင်၊ ကိုယ့်ရဲ့ ၀က်ဘ်ဆိုက်ကို လာကြည့်တဲ့သူတွေရဲ့ ပျော်ရွှင်ကြေနပ်မှု (Happy Users & Better User Experience)၊ ၀က်ဘ်ဆိုက်ပိုင်ရှင် (Web site owners) များရဲ့ ကျွန်တော်တို့ပေးလိုက်တဲ့ ၀န်ဆောင်မှုများအပေါ် နှစ်သက်လက်ခံမှုတွေကို ရရှိမှာ ဖြစ်ပါတယ်။ ကျွန်တော့် အတွေ့အကြုံအရ ပြောရရင်တော့ အလွန်ထိရောက်ကောင်းမွန်တဲ့ နည်းလမ်းတွေဖြစ်လို့ သုံးကြည့်ရင် သိလိမ့်မယ်လို့ပဲ ထပ်ပြီး အကြံပြု လိုက်ပါတယ်။ WordPress နဲ့ Drupal မှာ ဖိုင်တွေကို GZip လုပ်နိုင်တဲ့ နည်းလမ်းတွေကို အပိုင်း 3 မှာ ဆက်လက် ေ၀မျှသွားပါ့မယ်။

Reference & Disclaimer

အခု ဖော်ပြခဲ့တဲ့ 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 လုပ်ရင်း တွေ့လာတဲ့ နည်းလမ်းတွေကို ပြန်ပြီး ဝေမျှပေးသွားမှာ ဖြစ်ပါတယ်။