تسريع وتحسين أداء موقعك من خلال العمل على CSS

مـرحـبـا بـكـم شـبـاب، كـيـف الـحـال ؟؟

جـئت إلـيـكـم الــيـوم وبــعـد غــيـاب طــويـل بــمــوضـوع سـيــفــيـد حــثــمـا الـمــدونــيـن الــذيـن يـعــمــلـون عــلـى تـحــســيـن وتــســريـع مـدونــاتــهـم...، الأمــر لا يــقـتــصــر عــلــى الـمــدونــات فــقــط، بــل عــلــى أصــحــاب الـمــواقــع أيــضــا ( يــمـكــنــك الإطــلاع عــلــى تــدويــنــة خــاصــة مــن هــنــا حـيـث أوضـح فــيـهـا الـفــرق بـيــن الـمـدونــة والــمـوقـع ).

سـبـب وضـعـي لـهـذا الــمـوضـوع هـو أن الــعـديـد مـن الـمــودنـيـن يـشــتـكـون مـن الــبـطـئ الـواضــح فــي مــدونــاتـهــم والـذي يـجــعـل مـن زوارهـم لا يــحـتـمــلـون الأمـر...، ( مـا عـلــيـك سـوى الإهـتــمـام بـســرعـة مـوقــعـك ) بــل وهـنــاك مــن لـديــه أخـطــاء فــي سـطــور CSS، فـطــريـقــة حــل هــذه الـمــشـاكــل ســأدونـهــا فــي خـطــوات :

1. (أولا) تــقــلــيـص أكـواد CSS، أو بـالأحـرى سـطـور CSS، وفـي هـذه الـمـرحـلـة لـديـك طـريـقـتـان لا ثـالـث لـهـمـا، وهـمـا إمـا بــاســتـعـمـال بـرامـج تـحـريـر الـنـصـوص ومـن أشـهـرهـا بـرنـامـج نـوتـبـاد ( NodPad ++ )، وبـرنـامـج ســوبـلـيـم ( Sublime Text ) الأول مـجـانــي أمــا الـثـانــي فـهــو تـجـريـبــي، أو بـرامــج أخــرى ( ســأعـتـبـرهــا طـريـقــة أخـرى إضـافــيـة لــلــمـوضـوع )، أمـا الــطــريـقـة الــثــانـيـة وهـي بــاسـتــعــمـال بــعـض الــمــواقـع الــخــاصـة والــتــي ســأضـعــهــا أســفــل الـمــوضــوع.


الـغـرض مـن إســتـعـمـال هـذه الـمـحـررات هـو الإضـافـات الــغــنـيــة الــخـاصــة بـهــا ( Plugins أو Modules )، حـيــث هـنــاك إضــافــات يـمـكــنــك بــهــا ضــغــط الأكــواد ك CSS, HTML, JS...، كــمــا فــي الــصــورة الـمــوجــودة بـالأسـفـل ( صـورة أوضـح فـيـهـا لإضـافـة تـقـوم بـضـغـط أكـواد CSS ) بــإســتـعـمـال بـرنـامـج Sublime Text والــعـديـد مـن الإضـافـات الأخـرى لا داعـي لــذكـرهـا كـي لا نـخـرج عــن هــذف الــتـدويـنــة.





بـالـنــســبـة لـلــمــواقـع الــخــاصـة بــضــغـط CSS فــإنــنـي أفــضـل اسـتـخــدامــهـا وذلـك لأنــهـا سـتـعــوضــنـا عـن إسـتــعــمـال الـبــرنــامـج وشـراء الـتــرخــيـص أو الــبــحـث عـن ذلـك فـي بــعــض الــمــواقــع الــتــي قــد يــصــيــبــك فــيــروس مــنــهــا ( لا أوجــه الأمــر لـلــخــبــيــريــن ) :
• https://csscompressor.com
• https://websiteplanet.com/ar/webtools/jscssminifier
• https://htmlcompressor.com/compressor
• https://cssminifier.com
• https://giftofspeed.com/css-compressor
• https://smallseotools.com/minify-css
• https://cleancss.com/css-minify
• https://minifier.org


2. ثانيا :
موقع CSS Lint يتيح لك  التحقق من مشاكل CSS التي توجد بمدونتك ويقوم بعرضها لك للعمل على تصحيحها، كما يمكنك اختيار الأخطاء والتحذيرات التي يجب إضهارها...
يمكنك زيارة الرابط من هنــا


3. طريقة أخرى إضافية للموضوع :
تحميل أداة NodeJS من الموقع الرسمي (إذا لا يكن منصبا مسبقا في حاسوبك) :
التحميل
قم بتثبيت الأداة (وهو أمر سهل لا داعي لشرح الأمر)
بعد تثبيتها، قم باتباع ما هو موضح في صورة:



اضــغـط عــلـى(3) command prompt ، وذلـك مـن خـلال الــضـغـط عـلـى شـعـار الــويـنـدوز (1)، ثـم الـبــحـث فـي الـقــائمـة عــلـى Node.js (2).


أكــتـب الأمـر الـتــالـي (الخاص بــتــنـصــيـب إضــافـة css-purge) فـي الـنــافـذة الــسـوداء والــتـي ســتـضــهـر أمــامـك :
npm install css-purge -g
بـعـد تــثـبــيـت الأداة (الإضافة)، أكــتـب الأمـر الـتــالـي فـي نــافـذة مــوجـه أوامـر cmd، مـع الإشـارة إلـى الــمــســار الــخــاص بــمــلــف CSS الــمــراد ضغطه، أيضا مــســار تــسـجــيــل الـمــلــف بــعــد ضغطه.
css-purge -i "Path_InputFileCSS" -o "Path_OutputFileCSS"
مثال :
css-purge -i "D:\CompressCSS\myCSSB4_teqniweb.css" -o "D:\CompressCSS\myCSSB4_teqniweb2.css"

مــمــبـزات الإضــافـة أنــهـا تــقـوم بــحـذف الـسـطـور الـمـكـررة الـخـاص بــتـعـريـف معين، لـكـن كـن حذرًا، سـيـؤدي أيـضـًا إلـى إزالـة الـتــعـلــيــقـات الــتـي لــديـك أيضا.

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!