هذا المقال القصير سيتحدث عن الاستخدام غير المحسوب في مكتبات الويب والأطر العمل وما إلى ذلك
خصوصا في أمر JQuery و أطر العمل مثل Bootstrap وخطوط الأيقونات مثل FontAwesome
لابد أنك لاحظت ثقل بعض مواقع الويب الغريب واختلافها عن بعضها. في زمن حيث السرعة هي كل شيء، أكره أن أنتظر أكثر من 7 ثواني لتظهر صفحة ما
السبب وراء هذا قد يكون أحيانا التطوير غير العقلاني، أو ما أقصده. غير المحسوب.
لنضرب مثالا بBootstrap :
إطار عمل CSS الأول في الانترنت، بكل ما يقدمه من مزايا وخواص. ولكن قد تكون هذه نقطة سلبية في حقه.
فبما أنه يقدم العديد من المزايا، فحجمه نظريا كبير (256 كيلو بايت في عالم تطوير الانترنت كبيرة) والأغلب أن المطورين لن يحتاجوا كل المزايا
ما أشاهده في العديد من المواقع العربية (التي أصبحت تفتقر للهوية) هي استعمال كامل إطار العمل في أمور بسيطة. خذ مثلا نظام Grid المتطور الموجود فيه. معظم المواقع تستعمل هذا النظام فحسب، والذي حسب قياساتي يمثل 11 كيلوبايت فحسب. إضافة إلى استعمالهم أزراره الجاهزة وكل مافيه (أصبحت كل المواقع تشبه بعضها البعض).
المشكلة في الأمر هو أن الحجم الإضافي الكامل للإطار أصبح بلا فائدة، ولكن سيتم تحميله على كل حال. لا تنسى أن معظم العرب يستعملون نسخة bootstrap-rtl والتي هي بحد ذاتها 80 كيلوبايت إضافية.
نأتي هنا إلى نقطة كسل المطورين في اختزال وتنظيف ملفات CSS الخاص بهم، بحيث أن المطور قد يحتاج إلى 15Kb من إطار العمل، فهو ينتهي بتحميل 300kb أيّ أكثر ب20 مرة من الذي يحتاجه
موقع bootstrap يوفر خاصية "تقليم" الملف[1]، أي خذ ما تحتاج وأترك مالا تحتاجه. شيء عادة لا يستخدمه العديد من مطوري الويب
فأنا أدعو كل مطور في مشروعه القادم، أن يحاول على الأقل، التقليل إلى الحد الأقصى من حجم الإطار. وترك كل مالا تحتاجه. وحذف الأمور المتكررة بين bootstrap و bootstrap-rtl
نأتي لنقطة ثانية في نفس السياق وهي في استعمال JQuery
حجم نسخة Jquery هو 80 كيلوبايت (دعنا لا نتكلم عن أولائك المجرمين الذين يستعملون النسخة العادية ذات 250 كيلوبايت)
لن أنكر، Jquery مكتبة رائعة جدا وتسهل علينا الكثير من العمل. ولكن هل يجب فعلا استخدامها دوما؟
تحجج بعض الناس أن ما يمكنك عمله في 20 سطرا من جافاسكربت تستطيع عمله في 3 أسطر من JQuery
لن أنكر هذا، ولكن هل حقا تريد إدراج مكتبة Jquery من أجل القيام بتأثير بسيط (عادة يمكنك القيام به بواسطة CSS فحسب) أو القيام بعمل بسيط (عادة تستطيع القيام به فالجافاسكربت وبنفس عدد الأسطر)
مشكلة المطورين اليوم أنهم يستعملون Jquery لأتفه الأسباب، البعض مازال يستعملها في تأثيرات hover والبعض الآخر يريد تنفيذ دالة جافاسكربت على عنصر ما ولكن لايعرف كيف يحدده بواسطة جافاسكربت فيستخدم Jquery لتحديد عنصر (حيث يمكنك استعمال نفس خاصية التحديد مع sizzle [2] بحجم ب15 كيلوبايت فحسب)
هناك بعض المواقع قدمت حلولا مغايرة لبعض الأمور في Jquery
فJquery هي نفسها جافاسكربت ولكن أبسط. لذا المرة القادمة، إذا كان هناك شيء بسيط تريد القيام، فكر في إلقاء نظرة على هذا الموقع[3]
نأتي لثالث شيء نلاحظه كل يوم وهو استعمال خط الأيقونات،
حجم FontAwesome اكثر من 80 كيلوبايت و250 كيلوبايت لنسخة SVG (التي تستعملها الهواتف!)
يحتوي الخط على 439 أيقونة، أشك كثيرا أن أي أحد قد يستعملها كلها
معظم المواقع تستعمل ما بين 5 أيقونات إلى 25 أيقونة. هذا أقل ب410 أيقونة
تخيل الحجم الذي تستطيع كسبه من حذف الأيقونات، هذا شيء لا يقوم به معظم مطوري الويب. حيث يستعملون الخط كما هو (439 أيقونة/80 كيلوبايت)
هناك بعض المواقع[4] تقوم بعمل رائع جدا، وهو اختزال الأيقونات التي لا تريد، أيّ بالتحديد. اختر الأيقونات التي تريدها فحسب
سبق واستعمل الموقع، وبدل أن تكون محصورا بمجموعة أيقونات واحدة، لديك عدد كبير لتختار منه. تقلص حجم الخط من 80 كيلوبايت إلى 3 كيلوبايت،
لا داعي لأشير على الفائدة الكبيرة المكتسبة
كما نرى، فإن الاستخدام العقلاني لهذه الأمور قد يخفض 500 كيلوبايت إلى 15 كيلوبايت
نصيحة أخرى، إذا وجدت نفسك عنيدا كفاية لمخالفة كل ما ذكر فوق. حاول أن تفكر بشكل سليم
FontAwesome / Bootstrap / Jquery
إذا وجدت نفسك ملزما باستعمال أحد منها كما هو بلا تعديل. فربما تستطيع الاستفادة من الأمر، وتقليص الحجم إلى 0
كيف هذا؟
كل ما ذكر مسبقا هم مشاريع عالمية، وفي كل واحد منهم، يوجد رابط CDN لربطه بموقعك. هذا يعني نفس الملف من نفس المصدر في العديد من المواقع. سيكون هناك احتمال كبير جدا بأن الزائر قد ذهب إلى موقع آخر يحتوي على نفس العنصر من نفس المصدر وسيقوم المتصفح بتخزينه تلقائيا في cache
وإذا زار موقعك فلن يحمل شيئا. مما يعني 0
كل هذه كانت مجموعة نصائح تعلمتها أنا مع الوقت، وأجدها مفيدة جدا لمواقعك أو مواقع عملائكم
[1]
http://getbootstrap.com/cus...[2]
http://sizzlejs.com[3]
http://youmightnotneedjquer...[4]
http://icomoon.io/app/#/select
التعليقات