මාර වැ‍ඩේ! එහෙන් අධිවේගී මාර්ග(Highways). මෙහෙන් අධිවේගී බ්ලොග්ස්(High Speed Blogs). අධිවේගයෙන් ඇවිත් කියවන්න.

අද මම ඉදිරිපත් කරන ලිපිය ගොඩක්ම වැදගත් වන්නෙ බ්ලොග් ලියන අයට සහ වෙබ් අඩවි හදන අයට. ඒ කිව්වට බලන අයටත් වැදගත් වෙනව.:P
වෙබ් අඩවි හදන අය සහ බොහෝ බ්ලොග් කරුවන් මේගැන දැනුවත් නමුත් නොදන්න කිහිප දෙනෙක්හරි ඇතිනෙ!
 ඉතින් එකී නොකී සියලුම දෙනාටම ප්‍රායෝගිකව වැදගත් වෙයි කියල මේ පුංච් ලිපිය ලියන්න හිතුන. හැමෝම කැමතිනෙ Speed(වේගය) එකට. හැමෝම ඉල්ලන්නෙත් ඒකනෙ! අද මගේ ලිපියෙන් විස්තර කරන්නෙ බ්ලොග් අඩවියක හෝ වෙබ් අඩවියක Speed(වේගය)  වැඩි කරගන්න සාමන්‍ය දැනුමක් තිබෙන කෙනෙකුට උනත් කරන්න පුලුවන් දේවල් හයක් ගැන.

ඇයි මේ කියන වේගය මෙතරම් වැදගත්? හිතන්න  ඔබ යමක් මිළදීගන්න කඩයකට ගියා කියල, නමුත් කඩය වහල. ඔබ දැන් කරන්නෙ අදාල භාණ්ඩය තිබෙන වෙනත් කඩයකට යන එකනෙ! අන්න ඒ දේම බ්ලොග් සහ වෙබ් අඩවි වලටත් අදාලයි. මෙය ආසියානු රටවල් වලට සහ ජනප්‍රිය වෙබ් අඩවි වලට නම් එතරම් අධාල නැහැ. ඒකට හේතුවන්ම් ඔයාල දන්නවනෙ.:D සරළ විදියට මෙය පැහැදිලි කරනවනම්

• වේගය වැඩිනම් වෙබ් අඩවිය හෝ බ්ලොග් අඩවිය වේගයෙන් Load වෙනව. ඒක එම වෙබ් අඩවියෙහි හෝ ‍බ්ලොග් අඩවියෙහි පාඨකයින්ට පහසුවක්.
• Google ඇතුලු බොහෝ සෙවුම් යන්ත්‍ර වේගවත් අඩවි වලට කැමතියි. ඒකියන්නෙ Search Engine Ranking වලට මෙය බලපානව.
• සීමා සහිත දත්ත/තොරතුරු පරාස(Limited Bandwidth) බාවිතා කරන, විශේෂයෙන් ජංගම අන්තර්ජාල සේවා බාවිතා කරන්නන්(Mobile Internet Users) අතර ඔබගේ අඩවිය ජනප්‍රිය වනව.
• මුදල් ගෙවා ගත් වෙබ් ඉඩක පවත්වාගෙන යන වෙබ් අඩවි වලට, සීම සහිතව මාසිකව ලැබෙන දත්ත/තොරතුරු පරාස පළල(Bandwidth) එක ඉතිරි කරගැනීමට.

වගේ හේතු කිහිපයක් දක්වන්න පුලුවන්. ඔය මම දුන්නෙ ඇයි මේ දේ වැදගත් වන්නෙ කියන දේ සහ මෙම ලිපියට ප්‍රවිෂ්‍ඨ වීම සඳහා සරළ පැහැදිලි කිරීමක්. දැන් අපි බලමු මේ දේ කරන්නෙ කොහොමද කියල.

සැ.යු:- මම මෙහිදී ඉදිරිපත් කොට ඇත්තේ සාමාන්‍ය දැනුමක් තිබෙන හෝ නොතිබෙන කෙනෙකුට උනත් ප්‍රායෝගිකව කරන්න පුලුවන් සරළ කාරණා කිහිපයක් පමණි.

01 රූප වල බර අඩු කිරීම (Image Optimization)

ඔබ ඡායාරූප සංස්කරණයෙන් අනතුරුව රූප අවසන් ස්ථාපනයේදී(Save) සාමාන්‍ය ආකාරයට එය නොකොට, වෙබ් අඩවි සඳහාම වන “Save for the web” යන බාවිතාව හරහා රූප ස්ථාපිත(Save) කරගන්න. 80% විතර ලංකාවෙ වෙබ් අඩවි සහ බ්ලොග් අඩවි මෙය බාවිතා කරන්නෙ නැහැ කියල කියන්න පුලුවන්. මම මේ කියන දේ ඔප්පු කරලම පෙන්නන්නම් කෝ. කිව්වට විස්වාස නැතිද දන්නෙ නැහැනෙ.D

මේ සඳහා මම උදාහරණයට ගන්නෙ http://www.president.gov.lk/ කියන වෙබ් අඩවියෙහි ගරු මහින්ද රාජපක්ෂ ජනපතිඳුන්ගෙ ඡායාරූපයක්.

වෙබ් අඩවියෙහි එම ඡායාරූපය දිස්වන අයුරු

එම තෝරා ගත් ඡායාරූපය - සාමාන්‍ය අවස්ථාව - 18KB

එම තෝරා ගත් ඡායාරූපය - Optimize කළපසු - 8.51KB

බලන්න 50%කට වැඩි වෙනසක්. ඒත් ඉහත ඡායාරූප දෙකේ මිනිස් ඇසකට හඳුනාගත හැකි වෙනස්කම් බොහොම අඩුයි. මට නම් දෙකම එක වගේ.:D මෙම ඡායාරූපයටනම් මෙය ලොකු දෙයක් නොවුනත් ඇතැම් 300KB ‍වගේ තිබෙන ඡායාරූප 60KB වගේ ගේන්න පුලුවන් ඒක‍ ලොකුවෙනසක්. මම පිළිගන්නව මෙහිදී ගුණාත්මක බව අඩුවන බව. එහෙත් බොහෝ අවස්තා වලදී එම ගුණාත්මක බවේ අඩුවීම මිනිස්  ඇසට පැහැදිලිව හඳුනාගන්න අපහසුයි.

ඔන්න මම උදාහරණයක් දුන්න. දැන් අපි බලමු අපි හැමෝම දන්න, ගොඩදෙනෙක් භාවිතා කරන Adobe Photoshop හරහා මෙය කරන ආකාරය. පහත රූප හොඳින් නිරීක්ෂණය කරන්න.

1. මුලින්ම ඡායාරූපය විවෘර්ත කරගන්න
2. File Menu එක ඔබන්න
3. එහි තිබෙන Save for the web යන Menu Item එක හරහා යන්න
4. ඔබට අවශ්‍ය ආකාරයට වෙනස්කම් කොට ස්ථාපනය(Save) කරන්න.

රූපය පැහැදිලි නොමැතිනම් එය මත Click කරන්න

ඔබට මෙය සිදු කරන්න PhotoShop Software එකම අවශ්‍ය නැහැ. වෙනත් විවෘර්ත මෘදුකාංගයක් හෝ අන්තර්ජාලයේ ඇති online image optimizer බාවිතා කරන්න පුලුවන්. මෙය මගින් වෙබ් අඩවියෙහි වේගය වැඩි වෙනවා මෙන්ම 

* විශේෂයෙන් Blogger සේවාව හෝ Wordpress.com සේවාව බාවිතාකරන්නන්ට මේ ක්‍රමය මගින් තමන්ට නොමිලේ හිමිවෙන Image සඳහා ඉඩ බොහෝ සෙයින් ඉතිරි කරගන්න පුලුවන්.

02 රූප වර්ග (Image Formats)

ඔබ Images Optimize කරන කොට ඒ සඳහා නිවැරිදිම රූප ආකාරය(Image Type) තෝරාගත යුතුවනව. මෙය සරළව විස්තර කරනවනම්

• ඔබ photograph එකක් හරි truecolor image එකක් හරි Optimize කරනවානම් වඩාත් යෝග්‍ය වන්නෙ JPEG/JPG (Joint Photographic Experts Group) ආකාරයයි. මොකද මෙම රූප ආකාරයට සාපේක්ෂව ඉහල වර්ණ සංඛාවක් පෙන්වීමේ හැකියාව තිබෙනවා.
• flatcolor images වලිදි හා වෙබ්අඩවියක හෝ බ්ලොග් අඩවියක logo සහ image buttons ආදී දේවල් වලදී ඔබට GIF (Graphics Interchange Format) යන රූප ආකාරය තෝ‍රාගන්න පුලුවන්.
• මීට අමතරව PNG  (Portable Network Graphics) උනත් ඔබට බාවිතා කරන්න පුලුවන් මේ රූප ආකාරය GIF වලට බොහෝ සෙයින් සමාන උනත් ඊට වැඩි වර්ණ ප්‍රමාණයක් PNG රූප ආකාරයට පෙන්වීමේ හැකියාව පවතිනව. තවද පසුබිම විනිවිද පෙනෙන ආකාරයට රූප සැකසිමටත්මෙම රූප ආකාරය බාවිතා කරන්න පුලවන්

සැ.යු:- ඉහත ආකාරයටම ඔබ රූප ආකාරය තෝරාගත යුතුයි කියල නියමයක් නැහැ. නමුත් ඉහත නිර්දේෂයන් පිළිගන්නා සහ සුදුසු භාවිතාවන්(Good/Common Practice) ලෙස දක්වන්න පුලුවනි.

‍

03 CSS Optimize කිරීම

CSS(Cascading Style Sheets) කියන්නෙ මොනවද කියල ඔයාල ගොඩදෙනෙක් දන්න‍වනෙ. ඒ නිසා මම ‍ඒගැන මෙතනදී විස්තරයක් කරන්න යන්නෙ නැහ. දැන් අපි බලමු සරළව ‍කොහොමද මේගැන සැලකිලිමත් වෙන්න ඕනෙ කියල.

• CSS code එකේ අනවශ්‍ය ඉඩවල්(Unwanted White Space) ඉවත් කිරීම.
• අනවශ්‍ය තිත්කොමා සලකුණු(Semicolon) නොයෙදීම
• විශාල comments දමා ඇතිනම් ඒවා ඉවත් කිරීම හෝ කෙටි අයුරකින් ‍යෙදිම
• බාවිතා නොවෙන css rules ඇත්නම් සොයා ඉවත් කිරීම.
• බොහෝ අවස්තාවලදී අවශ්‍ය වන එකම css rule එකක් සඳහා වෙන වෙනම css ලියන්නෙ නැතිව css classes බාවිතා කිරීම.
• කෙටි css rule නාම භාවිතය.

වගේ සුළු සුළු දේවල් කරන්න පුලුවනි. පහත රූපය හොඳින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමැතිනම් එය මත Click කරන්න

මේ කාර්යයට බොහෝ සේවා අන්තර්ජාලයේ තිබුනත්. ඒවා මගින් යම් යම් දෝෂ ඇති වන්ට පුලුවන්. ඒනිසා මමනම් අනුමත කරන්නෙ තමා විසින්ම මේකාර්යය කරන ලෙසයි.

04 සබැඳුම්(links) යෙදීමේදී හැකි සෑම විටෙකම එහි අගට / යෙදීම.

මේ ගැනනම් කියන්න තියෙන්නෙ ඉතාම සුළු දෙයක්. එනම් ඔබ http://www.yourdomain.com/contact ලෙස link එකක් යොදා එය මත Click කර සබැඳුම සක්‍රිය කළ විට, web server එකට එක පාරටම හිතාගන්න බැහැ මම ප්‍රතිඡාරය විදියට දෙන්න ඕනෙ නැත්නම් Open කරන්න ඕනෙ මෙන විදියෙ File එකක්ද Page එකක්ද කියල. නමත් ඔබ http://www.yourdomain.com/contact/ ලෙස සබැඳුම සක්‍රිය කළවිට web server එක වේගයෙන් හඳුන ගන්නව, මේ link එක directory page එකක් කියල. එමගින් Web Server එක ප්‍රතිඡාර දක්වන වේලාව කෙටි කරගන්න පුලවන්. මේ සම්බන්දව වැඩි දුර විස්තර Google කිරීමෙන් සොයාගන්න පුලුවන්.

05 උස(Height) සහ පළල(Width) පෙන්වන උපලක්ෂණයන් අවශ්‍ය සෑම අවස්ථාවකදීම බාවිතා කිරීම.

height="" හා width="" යන html උපලක්ෂණ ආකාර භාවිතාවන html tags(ටැගයන්) වලදී, විශේෂයෙන්ම <img> යන html ටැගය භාවිතයේදී බොහෝ දෙනෙක් කරන වැරැද්දක් තමයි height="" හා width="" යන html උපලක්ෂණ ආකාර භාවිතා නොකිරීම. එහිදී Web Browser එක මුලින්ම html page එක කියවීමේදී අධාල <img> ටැගයේ උපලක්ෂණ කෙසේ හැසිරිය යුතුද යන්න මුලදීම නොදන්නා නිසා එම http ඉල්ලීම(Request) එක යන්න සහ එය සම්පූර්ණ වෙන්න ගතවන කාලයේ තරමක වැඩිවීමක් තිබෙනවා. නමුත් ඔබ මෙවැනි සෑම අවස්තාවකදීම උපලක්ෂණ භාවිතා කරනවානම් Web Browser එක කල්තියාම දන්නව  http ඉල්ලීම(Request) කෙසේද ක්‍රියාකලයුතුවන්නේද කියල. එමගින් වෙබ්අඩවිවල වේගය වැඩිකරගන්න පුලුවන්.

height="" හා width="" යන html උපලක්ෂණ ආකාර <img> යන html ටැගයක් සඳහා යොදා ඇති ආකාරය පහත රූපයෙන් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමැතිනම් එය මත Click කරන්න

06 HTTP Requests ප්‍රමාණය අඩුකිරීම.

Web Browser එකක් මගින් වෙබ් අඩවියක් ඉල්ලූවිට මුලින්ම Web Browser එක මගින් එම වෙබ් අඩවියෙහි html කේතය කියවනු ලබයි. ඉන් පසු එහි ඇති විවිද Objects සඳහා ඉල්ලීම්(HTTP Requests) Web Server එකට යවනු ලබයි. මෙම ඉල්ලීම් අතරට CSS files, JavaScripts files, Images, swf, Applets, mp3, mp4...etc ඇතුලත් විය හැකිය. මේ ආකාරයේ ඉල්ලීම් වැඩිවෙන විට වෙබ් අඩවියේ වේගය පහල යයි. ඇත්තටම ඉල්ලීම් ප්‍රමාණයම විතරක් නොවෙයි ඉල්ලීම් වල විශාලත්වය ද මෙහිදී බලපානු ලබයි. එම නිසා මෙවැනි ඉල්ලීම් වෙබ් අඩවියක් සඳහා හැකිදාක් දුරකට අවම කරගැනීම‍ සහ ප්‍රබලත්වය අවම කිරීම වෙබ් අඩවියක වේගය කෙරෙහි තදින්ම බලපානු ලබයි.

මේ සඳහා පිළියම්.

• අනවශ්‍ය Widgets, රූප යනාදිය ඉවත්කිරීම.
• බාවිතා කරන රූප වල විශාලත්වය අඩුකිරීම.
• පසුබිම් රූප(Background Images ) බාවිතයේදී එම රූප සියල්ලක්ම කැටිකරගත් තනි පසුබිම් රූප භාවිතා කරීම.
• Ajax තාක්ෂණය බාවිතා කිරීම.
• CSS Files කිහිපයක් තිබෙනවානම් එවා සියල්ල එකතු කර තනි CSS File එකක් විදියට බාවිතා කරීම.
• CSS සහ JAVASCRIPT ගොනු Optimize කිරීමෙන් ඒවාගේ විශාලත්වය අඩුකිරීම.

වගේ සරළ දේවල් ඉදිරිපත් කරන්න පුලුවන්. පහත රූපය හොඳින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමැතිනම් එය මත Click කරන්න

මම අද මේ ලිපියෙන් ඉදිරිපත්කලේ වෙබ් අඩවි වේගවත් කිරීම හා බැඳුනු මතුපිට කාරණා කිහිපයක් පමණයි. මෙම මතුපිට කාරණාවල සිට Server side scripting languages වල Variable එකක් call කිරීම වගේ සියුම් ‍තැන් දක්වා දිවෙන බොහෝ කාරණා මේ කාර්යය සඳහා බාවිතා කරන්න පුලවන්. මෙම සරළ කාරණා කිහිපය තෝරාගන්න හේතුව එතරම් තාක්ෂණික දැනුමක් නොමැති පුද්ගලයෙකුට උනත් එදිනෙදා තමන්ගේ බ්ලොග්කරණ ජීවිතයේදී ඒවා ප්‍රායෝගිකව කරන්න තියෙන හැකියාව වැඩිකම හින්දයි. තවත් කාරණා රාශියක් තියෙනව මේසම්බන්දව කතාකරන්න. එම කාරණා සමග තවත් දවසක අලුත් ලිපියකින් හමුවෙමු. මම නාලක ප්‍රසාද් | Nalaka Prasad

SinhalaPress Facebook page එක like කරල, SinhalaPress Follow කරල SinhalaPress හා එක්වෙන්න පුලුවන්. ඒ වගේම Lanka Online Facebook Group එක මගින් SinhalaPress හි මිතුරු සමාජය හා එක්වන්න පුලුවන්.

ඔබට එදිනෙදා ඇතිවන තාක්ෂණික ගැටලු වලට ඉක්මන් විසදුම් ලබාදීම සහ නවතම තාක්ෂණික පුවත්, තාක්ෂනයන් සහ නව නිපැයුම් පිලිබද සාකච්චා අරමුණු කොට ආරම්භ කල SinhalaPress Forum එක හා ඔබත් අදම එක්වන්න.