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

وێبی ئەمڕۆ وێبێکی Visual ـە، گرینگی زۆر دەدرێت بە ڕوومەت و گاریگەری جۆراوجۆر بەکار دەبرێت بۆ جوانتر کردن یان باشتر گوونجاندنی ماڵپەڕێک کە زۆر جارێک لە ئەنجامدا کاریگەریی دەبێتە سەر خاوبوونەوەی کردنەوەی پەڕەکانی ماڵپەڕێک.

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

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

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

داگرتن و دامەزراندنی پێوەکراوی Firebug http://getfirebug.com

ماڵپەڕی GTmetrix http://gtmetrix.com

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

GTmetrix هەمان تاقیکردنەوەکانی Firebug جێبەجێ دەکات و زانیاری زۆرتر لەگەڵ پێشنیار پیشان دەدات بۆ چارەسەرکردنی ئەو کێشانەی کە بەدی دەکرێن. لە وێنەی سەرەوە جارێکی دیکە قەبارە، ژمارەی داواکارییەکان و کاتی پێویست دەبینینەوە. هەروەها پلەپەندی پەڕەی ناوبرا لەگەڵ لیستی کێشەکان، کێشەی ڕەنگ سنوور کێشەی گەورەیە و پێویستی بە چارەسەرکردن هەیە.

http://gtmetrix.com/reports/saghez.org/31nGHU8D

کێشەکان بە پێی گرینگترین، Enable gzip compression پەستاندنی پەڕگەکان لە کاری ناردنیان لە ڕاژەکاری وێب بۆ وێبگەڕی بەکارهێنەر بۆ خێراتر جێبەجێ بوونی گواستنەوەیان.

Leverage browser caching رێگەدان بە کاش بوونی ئەو بەشانەی ماڵپەڕ کە ناگۆڕدرێن، بۆ نموونە وێنەکانی نێو ماڵپەڕ بە شێوەیەکی ئاسایی کە جاری یەکەم بڵاوکرانەوە دواتر دەستکاری ناکرێن، هەمان وێنە وەک خۆی دەمێنێتەوە. کارێکی باش دەبێت کە ڕوونووسێک لە وێنەی ناوبراو لە نێو کۆمپیوتەری بەکارهێنەر پاشەکەوت بکرێت کە وێبگەڕ هەموو جارێک هەمان وێنە لە ڕاژەکاری وێبی ماڵپەڕ دانەگرێتەوە، لە کۆتادا کردنەوەی ماڵپەڕ خێراتر دەبێت.

Serve scaled images واتە لە شوێنێک کە پێویست بە بەکاربردنی وێنەی بچووک هەیە، وێنەی بچووک بەکار ببرێت (وێنەیەک کە بەڕاستی بچووک کرابێتەوە، نەک بە CSS قەبارەیەکی بچووکتری بۆ دیاری کرابێت). وێنەکان کە لە پەڕەی سەرەتا دەردەکەون بە قەبارەی پانیی ١٣٠ و بەرزیی ٩٥ پیسكڵ دەردەکەون، بەڵام لە ڕاستیدا قەبارەی ئەسڵی وێنەی ناوبراو لە سەرەوەی ٣٠٠ پیکسڵە کە ٣ بەرانبەری وێنەی پێویست گەورەیە.

بچووک کردنەوەی وێنەکان و بەکاربردنیان بە بچووکیی لە شوێنی درووست هۆکارێکی دیکە دەبێت کە کاریگەریی زۆری دەبێت بۆ سەر خێراکردنەوەی پەڕەی ماڵپەڕ.

چارەسەرکردنی ٣ کێشەی سەرەوە

چالاک کردنی gzip compression، زۆرینەی ڕاژەکارەکانی وێب بە شێوەیەکی ئاسایی پاڵپشتیی Gzip دەکەن (هەندێک هۆستی هەرزان پاڵپشتیی ناکەن). بۆ چالاک کردن پێویست بە درووستکردنی پەڕەیەکی htaccess دەکات کە کۆدەکانی خوارەوە لە خۆ بگرێت.

    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 

کۆدەکانی سەروە لە نێو Notepad بنووسە و بە ناوی .htaccess پاشەکەوت بکە (تێبینی بکە کە htaccess پاشگری پەڕگە دەبێت و ناوی نابێت). دواتر باری بکە نێو بوخچەی سەرەکی ماڵپەڕ Root Directory.

چالاک کردنی browser caching، لە هەمان پەڕگەی سەرەوە کۆدەکانی خوارەوە بنووسە،

# چالاک کردن
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/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-icon "access plus 1 year"

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

ExpiresByType image/gif "access plus 1 month"

مەرجی سەرەوە ئەوە دەگەیەنێت کە وێنە بە فۆرماتی gif بۆ ماوەی ١ مانگ لە کۆمپیوتەری بەکارهێنەر پاشەکەوت بکرێت، پاش تێپەڕبوونی مانگێک هەمان پرۆسە دووبارە دەبێتەوە ئەگەر وێنەی ناوبراو گۆڕانکاری بەسەردا نەهاتبێت.

بچووکردنەوەی وێنەکان بچووکردنەوەی هەر وێنەیەک پێویستی بە پرۆسەی تایبەت بە خۆ هەیە، لە ئەم بابەتە پرۆگرامی Adobe Fireworks بەکار دەبەم بەڵام هەموو پرۆگرامێکی دیکەی وێنە توانای بچووک کردنەوەی قەبارەی وێنەی هەیە.

http://saghez.org/admin/data/upimages/e … zi91-1.jpg وێنەی سەرەوە پاش بچووک کردنەوە بۆ بەکاربردن لە پەڕەی سەرەتا، http://saghez.org/images/weney-babet/89 … _cp_sc.jpg

تا ئێستا و پاش جێبەجێکردنی چاککارییەکانی سەرەوە قەبارەی پەڕەی لە ٣،٨ مێگابایت کەمتر کردووەتەوە بۆ ١،١ مێگابایت. http://gtmetrix.com/reports/saghez.org/1FpUrmun

لە هەمان کاتدا کاتێک بەکارهێنەر سەردانی ماڵپەڕ بکات پاش جار یەکەم وێنەکان دووبارە لە ڕاژەکاری وێبەوە ناهێندرێنەوە و کردنەوەی پەڕەکان خێراتر دەبێت.

کاتی کردنەوەی پەڕە بۆ یەکەم جار لە ٧ چرکە کەمتر بووەتەوە بۆ ٤،٣ چرکە.

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

هەنگاوێکی دیکە بۆ باشتر کردنی وێنەکان، هەڵبژاردنی ڕەنگی پێویستە و سڕینەوەی ئەو ڕەنگانەی کە پێویست نین،

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

لە بەشی ژمارە ٢ و ٣ ڕوونە کە قەبارەی وێنە لە ١٦٠ کیلۆبایت کەمکراوەتەوە بۆ ٤٣ کیلۆبایت. Ctrl + Shift + R بۆ پاشەکەوتکردنی وێنە دەستکاریکراوەکە.

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

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

نووسەری بابەت: ئاسۆ نادری