الدرس الرابع والعشرون: تحسين أداء المواقع باستخدام Bootstrap
في هذا الدرس، سنتعرف على كيفية تحسين أداء المواقع باستخدام Bootstrap. سنركز على طرق لتقليل حجم الملفات وتحسين سرعة تحميل الموقع عبر استخدام Minified، CDN، وأدوات مثل PurgeCSS. هذه الأساليب تساعد في جعل موقعك أسرع وأكثر كفاءة.
1. استخدام Bootstrap Minified (النسخة المضغوطة)
عند تضمين Bootstrap في موقعك، يمكنك استخدام النسخة minified من الملفات (أي الملفات المضغوطة)، حيث تحتوي هذه النسخ على نفس الوظائف ولكن بحجم أصغر لأن التعليقات والمسافات البيضاء قد تم إزالتها.
الفرق بين النسخة العادية والنسخة minified:
- النسخة العادية تحتوي على تعليقات وبيضاء مما يجعل حجم الملف أكبر ويكون أكثر قابلية للقراءة.
- النسخة minified تحتوي فقط على الأكواد الضرورية مما يجعل حجم الملف أصغر ويسهم في تحميل أسرع.
مثال: تضمين النسخة minified من Bootstrap عبر CDN
<!-- رابط إلى CSS minified الخاص بـ Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- رابط إلى JavaScript minified الخاص بـ Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
استخدام minified يقلل من حجم الملفات ويزيد من سرعة تحميل الصفحة، مما يحسن من أداء الموقع بشكل عام.
2. استخدام CDN لتحسين الأداء
CDN (شبكات توزيع المحتوى) هي خوادم متوزعة جغرافيًا تقدم الملفات بسرعة أكبر للمستخدمين بناءً على الموقع الجغرافي لهم. باستخدام CDN، يتم تحميل Bootstrap أو أي مكتبة خارجية من أقرب خادم للمستخدم، مما يقلل من الزمن اللازم لتحميل الصفحة.
مزايا استخدام CDN:
- تقليل الزمن اللازم لتحميل الصفحات: الملفات يتم تحميلها من خوادم قريبة من المستخدم.
- تسريع الأداء: التحميل من CDN أسرع لأنه يتم توزيع المحتوى على العديد من الخوادم.
- الاستفادة من التخزين المؤقت: في حال كان المستخدم قد زار مواقع أخرى تستخدم نفس المكتبات (مثل Bootstrap)، يمكنه تحميلها من التخزين المؤقت للمتصفح بدلاً من تحميلها من جديد.
مثال: استخدام CDN لملفات Bootstrap
<!-- رابط إلى CSS الخاص بـ Bootstrap عبر CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- رابط إلى JavaScript الخاص بـ Bootstrap عبر CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
3. استخدام PurgeCSS لتقليل حجم ملفات CSS
PurgeCSS هي أداة تُستخدم لإزالة الأكواد غير المستخدمة من ملفات CSS. إذا كنت تستخدم Bootstrap بشكل موسع أو تقوم بإنشاء موقع يحتوي على العديد من الصفحات أو العناصر التي لا تستخدم كل مكونات Bootstrap، يمكن أن يساعد PurgeCSS في إزالة الأنماط غير المستخدمة مما يقلل من حجم ملف CSS بشكل كبير.
كيفية استخدام PurgeCSS:
- تثبيت PurgeCSS عبر npm: إذا كنت تستخدم npm في مشروعك، يمكنك تثبيت PurgeCSS باستخدام الأمر التالي:
npm install @fullhuman/postcss-purgecss --save-dev - إعداد PurgeCSS في ملف PostCSS: بعد تثبيت الأداة، يمكنك إعداد PurgeCSS في ملف postcss.config.js على النحو التالي:
module.exports = { plugins: [ require('autoprefixer'), require('@fullhuman/postcss-purgecss')({ content: ['./**/*.html', './**/*.js'], // تحديد الملفات التي تحتوي على أكواد CSS safelist: ['safe-class'], // إضافة الفئات التي يجب الحفاظ عليها حتى إذا لم تُستخدم في الأكواد }), ], }; - تشغيل PurgeCSS: بعد إعداد PurgeCSS، يمكن تشغيل الأداة من خلال أداة build الخاصة بك. في الغالب، سيقوم PurgeCSS بحذف الأكواد غير المستخدمة في ملفات CSS، مما يؤدي إلى تقليل حجم الملف.
مثال: استخدام PurgeCSS مع Bootstrap:
إذا كنت تستخدم Bootstrap مع PurgeCSS، ستتمكن من التخلص من أي فئات غير مستخدمة في المشروع. على سبيل المثال، إذا كنت تستخدم بعض مكونات Bootstrap فقط (مثل buttons و navbar)، ستقوم PurgeCSS بإزالة الفئات التي لم تستخدمها (مثل الفئات الخاصة بالأشكال أو الجداول).
4. استخدام الصور المحسّنة (Optimized Images)
تحسين الصور هو جزء أساسي من تحسين الأداء. استخدم الأدوات مثل TinyPNG أو ImageOptim لتقليل حجم الصور دون التأثير الكبير على جودتها. الصور الثقيلة تؤدي إلى زيادة زمن التحميل، لذلك يُنصح باستخدام الصور ذات الجودة العالية التي تم تقليل حجمها.
تطبيق تقنيات تحميل الصور المتجاوبة:
- يمكنك استخدام خاصية srcset لتحميل صور بأحجام مختلفة بناءً على حجم الشاشة.
<img src="image.jpg" srcset="image-500w.jpg 500w, image-1000w.jpg 1000w" alt="وصف الصورة" class="img-fluid">
مزايا الصور المحسنة:
- تحسين سرعة تحميل الصفحة.
- تقليل استخدام النطاق الترددي.
- تقديم تجربة أفضل للمستخدم، خاصة في الأجهزة المحمولة.
5. تقليل عدد الطلبات (HTTP Requests)
من أفضل الممارسات في تحسين الأداء هو تقليل عدد الطلبات التي يتم إرسالها إلى الخادم. يمكنك دمج ملفات CSS و JavaScript في ملف واحد لتقليل عدد الملفات المطلوبة. على سبيل المثال:
- دمج ملفات CSS (مثل ملف Bootstrap مع ملفات CSS أخرى).
- دمج ملفات JavaScript مثل Bootstrap و jQuery في ملف واحد.
استخدام أدوات مثل Webpack أو Parcel يمكن أن يساعدك في دمج الملفات وتحسين أدائها.
6. تحسين الأداء باستخدام التخزين المؤقت (Caching)
التخزين المؤقت يسمح للمستخدمين بتخزين ملفات الموقع في متصفحهم لفترة أطول، مما يقلل من الحاجة إلى إعادة تحميل نفس الملفات في الزيارات المستقبلية.
استخدام التخزين المؤقت في الخادم:
يمكنك إعداد التخزين المؤقت في الخادم باستخدام رؤوس HTTP لتحديد مدة تخزين الملفات في المتصفح.
Cache-Control: public, max-age=31536000
النتيجة النهائية
بتطبيق هذه الأساليب لتحسين أداء الموقع باستخدام Bootstrap:
- ستتمكن من تقليل حجم ملفات CSS و JavaScript، مما يؤدي إلى تحميل أسرع.
- ستستفيد من CDN لتقليل الزمن اللازم لتحميل الملفات.
- ستستخدم أدوات مثل PurgeCSS لتحسين استخدام الأكواد وإزالة غير الضروري.
- ستكون قد حسّنت أداء الصور والملفات بشكل كبير.
تطبيق هذه الممارسات سيسهم في تحسين تجربة المستخدم بشكل ملحوظ ويزيد من سرعة تحميل الموقع، مما يعود بالنفع على تصنيف محركات البحث وأداء الموقع بشكل عام.
