خێراکردنی ماڵپەڕی خاو، دۆزینەوەی کێشە و چارەسەرکردنیان (بەشی یەکەم)


وێبی ئەمڕۆ وێبێکی Visual ـە، گرینگی زۆر دەدرێت بە ڕوومەت و گاریگەری جۆراوجۆر بەکار دەبرێت بۆ جوانتر کردن یان باشتر گوونجاندنی ماڵپەڕێک کە زۆر جارێک لە ئەنجامدا کاریگەریی دەبێتە سەر خاوبوونەوەی کردنەوەی پەڕەکانی ماڵپەڕێک.
لە ئەم بابەتەدا ماڵپەڕێک وەک نموونەی بابەت تاوتوێ دەکەین کە چەند کێشەی هەیە لە ئەو پەیوەندیەدا، لە بەردەوامبوونی بابەتەکەمان کێشەکان چارەسەر دەکەین و ماڵپەڕ پێش و پاش گۆڕانکارییەکان بەرداورد دەکەین. ماڵپەڕی ناوبراو saghez.org کە کۆمەڵێک وێنەی زۆری لە خۆ گرتووە و یەکەم هۆکاری سەرەکی خاوبوونەوەی ماڵپەڕی ناوبراوە. جگە لە وێنە لە چەند لایەنێکی دیکەوە دەکرێت باشتر بکرێت لە کۆتادا کاریگەری دەبێتە سەر خڕابوونەوەی پەڕەکانی.
پێش بەردەوامبوون: دەبێت ئەوەت بۆ ڕوون بێت کە شێوازێکی یەک شێوە و ئامادە نییە بۆ خێراکردنی هەموو ماڵپەڕێک، هەر ماڵپەڕێک کەم و کۆڕیی خۆی هەیە و بە شێواز و پێداویستی خۆی چارەسەر دەکرێت، گرینگە کە لە کێشەکانی ماڵپەڕەکەت بکۆڵیتەوە و بەپێی پێویست گۆڕانکاری جێبەجێ بکەیت. هەوڵ دەدەم چارەسەریی کێشەکان لە ئەم بابەتە بە شێوەیەکی گشتیی بنووسم کە بۆ ماڵپەڕەکانی دیکەش بەکار ببرێت، بەڵام ئەوە ناگەیەنێت کە کێشەی خاویی ماڵپەڕەکەت چارەسەر دەکات.
بۆ لێکۆڵینەوە و دۆزینەوەی کێشەکانی ماڵپەڕی saghez.org دوو ئامراز بەکار دەبەیت، پێوەکراوی Firebug بۆ وێبگەڕی Firefox، هەروەها ماڵپەڕی gtmetrix.com بۆ درووستکردنی ڕاپۆرتێک لەسەر ئاستی ماڵپەڕ.
داگرتن و دامەزراندنی پێوەکراوی Firebug 

ماڵپەڕی GTmetrix 

دۆزینەوەی قەبارەی پەڕەی ماڵپەڕ، داوکارییەکان کە دەنێردرێن بۆ ڕاژەکاری وێب HTTP Requests، هەروەها کاتی پێویست بۆ کردنەوەی پەڕەی سەرەتا. وێبگەڕی Firefox بکەوە و پەنجە بنێ بە F12 بۆ کردنەوەی Firebug. لە پێوەکراوەکەدا کرتە لە بەشی Net بکە و دواتر ژێربەشی All. 
لە نێو شوێنی ناونیشانی ماڵپەڕ نووسین، بەستەری ماڵپەڕەکەت بنووسە و پەڕەکەی بکەوە. Firebug لە هەمان کاتدا هەندێک زانیاری کۆ دەکاتەوە وەک لە وێنەی خوارەوە ڕوونە.

http://www.webchin.org/v3-images/babet/website-speed-up/firebug-page-test.png
لە وێنەی سەرەوە چەند زانیارییەکانی گرینگ دەبینین، یەکەم ژمارەی داواکارییەکان کە ٧٦ داواکاریین. قەبارەی پەڕە کە ٣،٨ مێگابایتەوە و هەروەها کاتی پێویست بۆ کردنەوەی پەڕەی ناوبراو کە دەگەڕێتەوە سەر خێرایی هێڵی ئینتەرنێتی بەکارهێنەر، لە کاتی تاقیکردنەوەی ناوبراو ١،٨ چرکە.
ئەنجامەکانی سەرەوە چەند کێشەیەکیان هەیە، ٧٦ داواکاریی ژمارەیەکی زۆرە بۆ پەڕەی سەرەتا، بە هۆکاری ئەوەی پەڕەی سەرەتا یەکەمین پەڕەیە کە بەکارهێنەر سەردانی دەکات دەبێت تا دەکرێت خێرا بکرێتەوە. بۆ کەمکردنەوەی ژمارەی داواکارییەکان دەبێت لە هەنگاوی یەکەم دا پێکهاتەکانی پەڕە کەم بکرێتەوە، ژمارەیەکی کەمتر وێنە بەکار ببرێت، ئەگەر چەند پەڕگەی css یان js هەیە تێکەڵاو بکرێن و هتد... هەر گۆڕانکارییەک کە ژمارەی داواکارییەکان کەم بکاتەوە بە شێوەیەکی ئاسایی گۆڕانکاری درووستە.
٣،٨ مێگابایت وەک قەبارەی پەڕەیەک زۆرە، دیارە لە هەنگاوی یەکەم دا هۆکاری ئەو قەبارە زۆرییە بەکاربردنی وێنەیە یان پەڕگەی دیکە کە بە شێوەیەکی ئاسایی قەبارەی گەورەیان هەیە. ماڵپەڕی ناوبرا ماڵپەڕێکی کوردییە کە ڕوو لە خوێنەری کورد دەکات، بەپێی شێوازی وڵاتمان و نەبوونی ئینتەرنێتی خێرا لە بەردەست بەکارهێنەران، ٣،٨ مێگابایت قەبارەیەکی زۆرە و بە شێوەیەکی ئاسایی لە خوولەکێک زۆرتری پێویست دەبێت بۆ بەکارهێنەرانی نێوخۆی کوردستان کە پەڕەی ناوبراو بکەنەوە. خوولەکێک ژمارەیەکی زۆرە و دەبێت کەم بکرێتەوە.

درووستکردنی ڕاپۆرتێکی گشتیی سەبارەت بە کەم و کۆڕییەکانی دیکەی ماڵپەڕ، تاقیکردنەوە لە ماڵپەڕیwww.gtmetrix.com جێبەجێ دەکەین.
http://www.webchin.org/v3-images/babet/website-speed-up/gtmetrix-test-first-step.png
GTmetrix هەمان تاقیکردنەوەکانی Firebug جێبەجێ دەکات و زانیاری زۆرتر لەگەڵ پێشنیار پیشان دەدات بۆ چارەسەرکردنی ئەو کێشانەی کە بەدی دەکرێن. لە وێنەی سەرەوە جارێکی دیکە قەبارە، ژمارەی داواکارییەکان و کاتی پێویست دەبینینەوە. هەروەها پلەپەندی پەڕەی ناوبرا لەگەڵ لیستی کێشەکان، کێشەی ڕەنگ سنوور کێشەی گەورەیە و پێویستی بە چارەسەرکردن هەیە.
کێشەکان بە پێی گرینگترین، 
Enable gzip compression پەستاندنی پەڕگەکان لە کاری ناردنیان لە ڕاژەکاری وێب بۆ وێبگەڕی بەکارهێنەر بۆ خێراتر جێبەجێ بوونی گواستنەوەیان.

Leverage browser caching رێگەدان بە کاش بوونی ئەو بەشانەی ماڵپەڕ کە ناگۆڕدرێن، بۆ نموونە وێنەکانی نێو ماڵپەڕ بە شێوەیەکی ئاسایی کە جاری یەکەم بڵاوکرانەوە دواتر دەستکاری ناکرێن، هەمان وێنە وەک خۆی دەمێنێتەوە. کارێکی باش دەبێت کە ڕوونووسێک لە وێنەی ناوبراو لە نێو کۆمپیوتەری بەکارهێنەر پاشەکەوت بکرێت کە وێبگەڕ هەموو جارێک هەمان وێنە لە ڕاژەکاری وێبی ماڵپەڕ دانەگرێتەوە، لە کۆتادا کردنەوەی ماڵپەڕ خێراتر دەبێت.
Serve scaled images واتە لە شوێنێک کە پێویست بە بەکاربردنی وێنەی بچووک هەیە، وێنەی بچووک بەکار ببرێت (وێنەیەک کە بەڕاستی بچووک کرابێتەوە، نەک بە CSS قەبارەیەکی بچووکتری بۆ دیاری کرابێت). وێنەکان کە لە پەڕەی سەرەتا دەردەکەون بە قەبارەی پانیی ١٣٠ و بەرزیی ٩٥ پیسكڵ دەردەکەون، بەڵام لە ڕاستیدا قەبارەی ئەسڵی وێنەی ناوبراو لە سەرەوەی ٣٠٠ پیکسڵە کە ٣ بەرانبەری وێنەی پێویست گەورەیە.
بچووک کردنەوەی وێنەکان و بەکاربردنیان بە بچووکیی لە شوێنی درووست هۆکارێکی دیکە دەبێت کە کاریگەریی زۆری دەبێت بۆ سەر خێراکردنەوەی پەڕەی ماڵپەڕ.
چارەسەرکردنی ٣ کێشەی سەرەوە
چالاک کردنی gzip compression، زۆرینەی ڕاژەکارەکانی وێب بە شێوەیەکی ئاسایی پاڵپشتیی Gzip دەکەن (هەندێک هۆستی هەرزان پاڵپشتیی ناکەن). بۆ چالاک کردن پێویست بە درووستکردنی پەڕەیەکی htaccess دەکات کە کۆدەکانی خوارەوە لە خۆ بگرێت.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml image/gif image/jpeg text/css application/x-javascript
#چارەسەرکردنی کێشەی پەستاندن کە هەندێک وێبگە بە درووستی مامەڵە لەگەڵ gzip ناکەن BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
کۆدەکانی سەروە لە نێو Notepad بنووسە و بە ناوی .htaccess پاشەکەوت بکە (تێبینی بکە کە htaccess پاشگری پەڕگە دەبێت و ناوی نابێت). دواتر باری بکە نێو بوخچەی سەرەکی ماڵپەڕ Root Directory.
چالاک کردنی browser caching، لە هەمان پەڕگەی سەرەوە کۆدەکانی خوارەوە بنووسە،
<IfModule mod_expires.c>
# چالاک کردن
ExpiresActive On
دیارکردنی کات بۆ کاشکردن
#ExpiresByType text/css "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month
ExpiresByType image/jpg "access plus 1 month" "
s 1 year" ExpiresByType application/x-icon "access plus 1
ExpiresByType application/javascript "access pl u year"
</IfModule>
کۆدەکانی سەروە چالاک دەبن کاتێک mod_expires لەسەر ڕاژەکاری وێب دامەزرابێت، کە بە شێوەیەکی ئاسایی لەسەر زۆرینەیان دامەزراوە. پاشان بە پێی ئەو پەڕگانەی کە دیاریکراون پەڕگەکان کاش دەکاتە نێو کۆمپیوتەری بەکارهێنەر بۆ ئەوەی لەگەڵ کردنەوەی پەڕەکانی ماڵپەڕ هەموو جارێک پەڕگە نەگۆڕدراوەکان داوا نەکرێنەوە.
ExpiresByType image/gif "access plus 1 month"
مەرجی سەرەوە ئەوە دەگەیەنێت کە وێنە بە فۆرماتی gif بۆ ماوەی ١ مانگ لە کۆمپیوتەری بەکارهێنەر پاشەکەوت بکرێت، پاش تێپەڕبوونی مانگێک هەمان پرۆسە دووبارە دەبێتەوە ئەگەر وێنەی ناوبراو گۆڕانکاری بەسەردا نەهاتبێت.
بچووکردنەوەی وێنەکان 
بچووکردنەوەی هەر وێنەیەک پێویستی بە پرۆسەی تایبەت بە خۆ هەیە، لە ئەم بابەتە پرۆگرامی Adobe Fireworks بەکار دەبەم بەڵام هەموو پرۆگرامێکی دیکەی وێنە توانای بچووک کردنەوەی قەبارەی وێنەی هەیە.

وێنەی سەرەوە پاش بچووک کردنەوە بۆ بەکاربردن لە پەڕەی سەرەتا، 

تا ئێستا و پاش جێبەجێکردنی چاککارییەکانی سەرەوە قەبارەی پەڕەی لە ٣،٨ مێگابایت کەمتر کردووەتەوە بۆ ١،١ مێگابایت. 

لە هەمان کاتدا کاتێک بەکارهێنەر سەردانی ماڵپەڕ بکات پاش جار یەکەم وێنەکان دووبارە لە ڕاژەکاری وێبەوە ناهێندرێنەوە و کردنەوەی پەڕەکان خێراتر دەبێت.
کاتی کردنەوەی پەڕە بۆ یەکەم جار لە ٧ چرکە کەمتر بووەتەوە بۆ ٤،٣ چرکە.
بە شێوەیەکی گشتیی بە جێبەجێکردنی ٣ گۆڕانکاری سەرەوە کۆمەڵێک چاککاری جێبەجێ کراوە کە کاتی ئەوتۆی پێویست نەبوو. بە هۆکاری ئەوەی وێنە پەڕگەیەکە کە زۆرترین قەبارەی هەیە دەبێت لە پەڕگەکانی دیکە گرینگی زۆرتری پێبدرێت و تا دەکرێت باشتر بگوونجێدرێت.
هەنگاوێکی دیکە بۆ باشتر کردنی وێنەکان، هەڵبژاردنی ڕەنگی پێویستە و سڕینەوەی ئەو ڕەنگانەی کە پێویست نین،
http://www.webchin.org/v3-images/babet/website-speed-up/image-optimization-adobe-fireworks.png
لە پرۆگرامی Fireworks دەتوانرێت لە بەشی ژمارە ١ ژمارەی ئەو ڕەنگانە دەستنیشان بکرێت کە لەگەڵ وێنەی هەڵبژێدراو دەگوونجێت، بۆ نموونە وێنەیەک کە تەنیا چەند سادەی لە خۆ گرتبێت دەتوانرێت ژمارەی ڕەنگەکان کەم بکرێتەوە بۆ سنوورێک کە ڕەنگی وێنەکە تێک نەدات.
لە بەشی ژمارە ٢ و ٣ ڕوونە کە قەبارەی وێنە لە ١٦٠ کیلۆبایت کەمکراوەتەوە بۆ ٤٣ کیلۆبایت. 
Ctrl + Shift + R بۆ پاشەکەوتکردنی وێنە دەستکاریکراوەکە.

ئەگەر پێت وایە Adobe Fireworks وێنەکان تێکدەدات یان ڕەنگەکانیان بە درووستی ڕێکناخات، دەتوانیت ئامرازی Yahoo! Smash.it بەکار ببەیت کە کارێکی هاوشێوە جێبەجێ دەکات. 

لە دێڕەکانی سەرەوە ئەو شێوازە سەرەکییانە ئاماژەپێدراون کە دەتوانیت وەک بەڕێوەبەری ماڵپەڕ/وێبداڕێژ جێبەجێیان بکەیت، وەک ڕوونە پرۆسەی خێراکردنی ماڵپەڕ پرۆسەیەکی یەک کرتەیی نییە و هەندێک جار کات تەرخان کردنی پێویستە.
کۆتایی بەشی یەکەم. 
لە بەشی دووەمی ئەم بابەتە تیشک دەخەینە سەر ئەو ڕاژە خۆڕاییانەی دیکە کە دەتوانرێت بەکار ببرێت بۆ هەوڵدان و 
خێراکردنی ماڵپەڕەکەت بە شێوەیەکی خۆکارانە
سەرچاوە:مالپەری وێب چین.

0 comments:

إرسال تعليق