كيفية تصغير CSS و HTML و Javascript لموقع الويب الخاص بك

عندما تقوم بتقليل ملفات CSS و HTML و Javascript لموقعك على الويب ، يمكنك تقليل بعض الوقت الثمين من سرعة تحميل صفحة موقعك. نحن الآن لا نتحدث عن خفض سرعة تحميل صفحتك إلى النصف أو أي شيء آخر ، ولكن عندما يتعلق الأمر بسرعة موقع الويب الخاص بك ، فإن أي شيء يساعد. إن سرعة تحميل موقعك ليست مهمة فقط للزائرين لأول مرة ، ولكنها مهمة أيضًا لتحريك تصنيف محرك البحث.

مصطلح "تصغير" هو لغة البرمجة التي تصف عمليات إزالة الأحرف غير الضرورية في التعليمات البرمجية المصدر. تتضمن هذه الأحرف المسافات البيضاء وفواصل الأسطر والتعليقات ومحددات الكتل التي تكون مفيدة لنا كبشر ولكنها غير ضرورية للآلات. نقوم بتصغير ملفات موقع الويب الذي يحتوي على كود CSS و HTML و Javascript حتى يتمكن متصفح الويب الخاص بك من قراءتها بشكل أسرع.

فيما يلي مثال لما يبدو عليه تصغير CSS.

CSS قبل التصغير

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

CSS بعد التصغير

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

من الواضح أن هذا مجرد مثال صغير يستخدم مقتطفًا من كود CSS ، ولكن يمكنك تخيل مقدار المساحة التي سيوفرها هذا عند تصغير آلاف الأسطر من التعليمات البرمجية. لذا ، إذا أردت القيام بذلك يدويًا ، يمكنك تقنيًا. لكنك ستواجه مخاطر عالية للخطأ وتحلق دون داع إجازة ثمينة أو حياتك!

خذ نصيحتي واستخدم الأدوات المتاحة لك.

أدوات عبر الإنترنت لتقليل ملفاتك يدويًا

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

فيما يلي قائمة ببعض الأدوات المفيدة للبدء. نظرًا لأن العديد من هذه العناصر يمكنها تصغير أكثر من نوع رمز واحد ، فقد قمت بتضمين خيارات نوع الكود بين قوسين.

• Closure Compiler (JS only) - Closure Compiler هو جزء من Closure Tools ، وهي مجموعة من الأدوات من Google Developers. يسمح لك بتقليل Javascript الخاص بك إلى جانب تحسينات مفيدة أخرى. يمكنك سحب Javascript الخاص بك باستخدام عن طريق إدخال عنوان URL لموقع ملف js ثم اختيار الطريقة التي تريد أن يتم بها تحسين التعليمات البرمجية وتنسيقها. على سبيل المثال ، اخترت تحسين التعليمات البرمجية الخاصة بك لـ Whitespace فقط إذا كنت تريد ذلك. بمجرد أن تضغط على زر الترجمة ، فإنه سيقلل (أو يجمع) الشفرة نيابة عنك ، كما يتحقق من الكود الخاص بك بحثًا عن أي أخطاء.
• cssminifier.com و javascript-minifier.com (CSS و JS) - هذان المصغران من تأليف أندرو شيلتون سهل الاستخدام. ما عليك سوى لصق التعليمات البرمجية الخاصة بك ثم النقر فوق الزر "تصغير" لإخراج الرمز المصغر. يمكنك حتى تنزيل كود الإخراج كملف للراحة.
• csscompressor.net (CSS فقط) - ضاغط CSS عبر الإنترنت سريع وسهل ومجاني للاستخدام.
• jscompress.com (JS فقط) - تسمح لك أداة ضغط JavaScript هذه بضغط كود JavaScript عبر Copy and Paste ولكن يمكنك أيضًا تحميل ملفات JavaScript متعددة في وقت واحد. يعد هذا أمرًا رائعًا لدمج ملفات JavaScript في ملف واحد لتحسين سرعة تحميل الصفحة.
• Refresh-sf.com (HTML و CSS و JS) - سيقلل هذا الضاغط من أنواع أكواد JavaScript و CSS و HTML. يتضمن أيضًا جميع خيارات الضاغط لكل نوع رمز إذا كنت بحاجة إليها.
• htmlcompressor.com (HTML و CSS و JS) - تدعم أداة الضاغط / المصغر عبر الإنترنت أنواع أكواد HTML و CSS و JS. حتى أنه يدعم مجموعة مختلفة من أنواع الأكواد مثل CSS + PHP و JavaScript + PHP. ويمكنك أيضًا التحقق من وجود أخطاء في التعليمات البرمجية المضغوطة.
• minifycode.com (HTML و CSS و JS) - يقدم هذا الموقع مصغرات لجافا سكريبت و CSS و HTML بواجهة مستخدم بسيطة ونظيفة تعمل على تصغير الكود الخاص بك بنقرة واحدة على زر. يتضمن أيضًا أداة "التجميل" لفك ضغط الشفرة المصغرة لتسهيل قراءتها (بشكل أساسي عكس عملية التصغير).
• Dan's Tools - Dan's Tools تقدم CSS Minifier و JavaScript Minifier. تحتوي كلتا الأداتين على واجهة مستخدم نظيفة حقًا وسهلة الاستخدام. لا يقدمون أي خيارات متقدمة ولكنه مثالي لأغراض التصغير الشائعة.

إذا كنت تبحث عن بعض الأدوات غير المتصلة بالإنترنت لتقليل HTML CSS أو JavaScript محليًا ، فإليك بعض الخيارات:

• أصغر (HTML و CSS و JS)
• phpied.com/cssmin-js/ (CSS فقط)
• yui.github.io/yuicompressor (JS و CSS)

كيفية تصغير CSS و HTML و Javascript لموقع الويب الخاص بك

اشترك في قناتنا على اليوتيوب

كيفية تصغير HTML و CSS و JavaScript باستخدام أداة عبر الإنترنت

العديد من هذه الأدوات عبر الإنترنت لها عملية مماثلة تتضمن الخطوات التالية:

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

في هذا المثال ، سأستخدم أدوات تصغير من minifycode.com.

أولاً ، حدد موقع ملف css (المعروف باسم style.css) في ملفات موقعك وافتح الملف باستخدام محرر الصفحة. ثم انسخ كود css بالكامل إلى الحافظة الخاصة بك.

انتقل إلى minifycode.com وانقر فوق علامة التبويب مصغر CSS. ثم الصق كود CSS في مربع الإدخال وانقر على زر Minify CSS.

بعد إنشاء الكود المصغر الجديد ، انسخ الكود.

ثم ارجع إلى ملف css لموقعك على الويب واستبدل الكود بالإصدار الجديد المصغر.

هذا كل شيء!

كرر نفس العملية لتقليل ملف (ملفات) JavaScript و Html لموقعك أيضًا.

كيفية تصغير HTML و CSS و JavaScript في WordPress باستخدام الإضافات

أسهل طريقة لتقليل HTML و CSS و JavaScript في WordPress هي استخدام مكون إضافي. يتيح لك ذلك تحسين ملفات موقع WordPress الخاصة بك لتقليل أوقات تحميل الصفحة تلقائيًا ببضع نقرات على الزر.

هناك الكثير من المكونات الإضافية التي ستؤدي المهمة ، لكنني سأذكر بإيجاز بعض الميزات البارزة.

تحسين تلقائي (مجاني)

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

لاستخدام التحسين التلقائي ، يمكنك تنزيل البرنامج المساعد وتثبيته وتنشيطه من لوحة معلومات WordPress ضمن البرنامج المساعد> إضافة جديد.

بمجرد تنشيط المكون الإضافي ، انتقل إلى الإعدادات> التحسين التلقائي. ثم ضمن علامة التبويب "الإعدادات الرئيسية" ، تحقق من الكود الذي ترغب في تحسينه (HTML و / أو CSS و / أو JavaScript) وانقر فوق حفظ التغييرات.

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

هذا عن ذلك! بسيطة جدا وقوية.

تصغير السرعة السريعة (مجانًا)

Fast Velocity Minify هو مكون إضافي آخر شائع ومجاني وقوي لـ WordPress يقوم بأكثر من مجرد تصغير. إنه يصغر ويجمع بين CSS و Javascript لتقليل طلبات HTTP إلى الخادم الخاص بك ، وبالتالي الارتقاء إلى مستوى اسمه لمنحك أوقات تحميل سريعة للصفحة. تتوفر خيارات تحسين إضافية ولكن الإعدادات الافتراضية تعمل بشكل جميل لمعظم المواقع.

لاستخدام المكون الإضافي ، قم أولاً بتثبيته وتنشيطه من لوحة تحكم WordPress بالانتقال إلى الإضافات> إضافة جديد. ثم ابحث عن "تصغير السرعة السريعة" وبمجرد ظهوره في نتائج البحث ، انقر لتثبيته وتنشيطه.

بمجرد تنشيط المكون الإضافي ، سيتم تصغير ملفاتك تلقائيًا وتحسينها للحصول على أفضل أداء. كان ذلك سهلا!

انتقل إلى صفحة إعدادات البرنامج المساعد (الإعدادات> Fast Velocity Minify) لمشاهدة جميع الخيارات المتاحة. ضمن علامة التبويب الحالة ، يمكنك رؤية قائمة مفيدة بملفات JavaScript و CSS التي تمت معالجتها.

ضمن علامة التبويب "الإعدادات" ، يمكنك تخصيص الطريقة التي يتم بها تحسين ملفاتك. نظرًا لأن تصغير HTML و CSS و JavaScript نشطة بالفعل ، يمكنك استخدام هذه الإعدادات لضبط الخيارات الافتراضية أو تعطيل التصغير لأنواع معينة من الرموز. هناك أيضًا خيارات لتحسين خطوط Google و Font Awesome.

هذا كل شيء!

W3 Total Cache (مجانًا)

W3 Total Cache هو مكون إضافي رائع للتخزين المؤقت يتضمن خيار تصغير HTML و JS و CSS.

WP Fastest Cache (مجانًا)

WP Fastest Cache - هذه الإضافات المجانية للتخزين المؤقت في WordPress تحظى بشعبية كبيرة مع التقييمات العالية. يقوم المكون الإضافي بإجراء تحسينات متنوعة للأداء بما في ذلك دمج وتقليل HTML CSS و JavaScript للحصول على أداء أفضل.

بمجرد تثبيت المكون الإضافي ، ما عليك سوى النقر فوق علامة التبويب WP Fastest Cache في الشريط الجانبي لـ WordPress Dashboard (الذي يحتوي على أيقونة الفهد المذهلة). ضمن علامة التبويب "الإعدادات" ، ستجد خيارات لدمج ملفات HTML و CSS وتصغيرها. على الرغم من أن تصغير JavaScript متاح فقط في الإصدار المحترف.

افكار اخيرة

إذا كنت تريد أوقات تحميل أسرع للصفحات ونقاط أداء أفضل ، فستحتاج إلى تصغير ملفات HTML و CSS و Javascript. مع جميع الأدوات المتاحة عبر الإنترنت ، يمكنك بسهولة تصغير الكود الخاص بك لأي موقع ويب. وبالنسبة لمستخدمي WordPress ، هناك بعض المكونات الإضافية القوية المتاحة لتقليل تلك الملفات تلقائيًا ببضع نقرات. المكونات الإضافية المذكورة أعلاه ليست سوى عدد قليل من المكونات الإضافية الرائعة التي تتعامل مع التصغير من بين تحسينات الأداء الأخرى. في الواقع ، قد يكون لديك بالفعل مكون إضافي من نوع الأداء يحتوي على تصغير متاح بالفعل. على سبيل المثال ، تشتمل العديد من مكونات التخزين المؤقت الإضافية على خيار التصغير. آمل أن يساعدك هذا المنشور في تحديد الخيار الأفضل لك.

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!