التحسين (Optimize)

استيرادات Sass المختصرة

عند استخدام الـ Sass في مسار الأصول الخاص بك، تأكد من تحسين الـ Bootstrap عن طريق استيراد (@import) المكونات التي تحتاجها فقط. من المرجح أن تأتي أكبر التحسينات من قسم Layout & Components في ملف bootstrap.scss الخاص بنا.

// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

JavaScript المختصر

يتضمن الـ JavaScript الخاص بـ Bootstrap كل مكون في ملفات التوزيع الأساسية لدينا (bootstrap.js و bootstrap.min.js)، وحتى التبعية الأساسية لدينا (Popper) مع ملفات الحزمة (bootstrap.bundle.js و bootstrap.bundle.min.js). بينما تقوم بالتخصيص عبر الـ Sass، تأكد من إزالة الـ JavaScript ذي الصلة.

على سبيل المثال، بافتراض أنك تستخدم مجمّع JavaScript خاص بك مثل Webpack أو Parcel أو Vite، فستقوم فقط باستيراد الـ JavaScript الذي تخطط لاستخدامه. في المثال أدناه، نوضح كيفية تضمين الـ JavaScript الخاص بالـ modal فقط:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

بهذه الطريقة، لن تقوم بتضمين أي JavaScript لا تنوي استخدامه للمكونات مثل الأزرار، والـ carousels، والـ tooltips. إذا كنت تستورد الـ dropdowns أو الـ tooltips أو الـ popovers، فتأكد من إدراج تبعية Popper في ملف package.json الخاص بك.

import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

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

CSS غير المستخدم (Unused CSS)

مطلوب مساعدة في هذا القسم، يرجى التفكير في فتح PR. شكراً!

بينما ليس لدينا مثال جاهز لاستخدام PurgeCSS مع Bootstrap، هناك بعض المقالات والشروحات المفيدة التي كتبها المجتمع. إليك بعض الخيارات:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

أخيراً، يوضح مقال CSS Tricks حول الـ CSS غير المستخدم كيفية استخدام PurgeCSS وأدوات مشابهة أخرى.

التصغير والضغط (Minify and gzip)

كلما كان ذلك ممكناً، تأكد من ضغط جميع الأكواد التي تقدمها لزوارك. إذا كنت تستخدم ملفات توزيع Bootstrap، فحاول الالتزام بالإصدارات المصغرة (التي يشار إليها بامتدادات .min.css و .min.js). إذا كنت تبني Bootstrap من المصدر باستخدام نظام بناء خاص بك، فتأكد من تنفيذ أدوات التصغير الخاصة بك لـ HTML و CSS و JS.

الملفات غير المعيقة (Non-blocking files)

بينما قد يبدو التصغير واستخدام الضغط كافيين، فإن جعل ملفاتك غير معيقة (non-blocking) هو أيضاً خطوة كبيرة في جعل موقعك محسناً جيداً وسريعاً بما يكفي.

إذا كنت تستخدم إضافة Lighthouse في Google Chrome، فقد تكون قد صادفت FCP. يقيس مقياس The First Contentful Paint الوقت من بدء تحميل الصفحة حتى يتم عرض أي جزء من محتوى الصفحة على الشاشة.

يمكنك تحسين FCP عن طريق تأجيل الـ JavaScript أو الـ CSS غير الحرج. ماذا يعني ذلك؟ ببساطة، الـ JavaScript أو أوراق الأنماط (stylesheets) التي لا تحتاج إلى أن تكون موجودة عند أول رسم لصفحتك يجب تمييزها بسمات async أو defer.

يضمن ذلك تحميل الموارد الأقل أهمية لاحقاً وعدم إعاقة الرسم الأول. من ناحية أخرى، يمكن تضمين الموارد الحرجة كـ scripts أو styles مضمنة (inline).

إذا كنت تريد معرفة المزيد عن هذا، فهناك بالفعل الكثير من المقالات الرائعة حول ذلك:

• https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/
• https://web.dev/articles/defer-non-critical-css

استخدم HTTPS دائماً

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

المواقع التي يتم تقديمها عبر HTTPS يجب أن تصل أيضاً إلى جميع أوراق الأنماط (stylesheets) والـ scripts والأصول الأخرى عبر اتصالات HTTPS. خلاف ذلك، ستكون بصدد إرسال محتوى نشط مختلط للمستخدمين، مما يؤدي إلى ثغرات محتملة حيث يمكن اختراق الموقع عن طريق تغيير تبعية ما. يمكن أن يؤدي هذا إلى مشكلات أمنية وتحذيرات تظهر للمستخدمين في المتصفح. سواء كنت تحصل على Bootstrap من CDN أو تقدمه بنفسك، تأكد من الوصول إليه فقط عبر اتصالات HTTPS.