بساطة التصميم Simplicity
كلما كان التصميم بسيطا كلما كان التصميم سريعا والمقصود بالبساطة هنا هي عدم التعقيد وليس البساطة في جمال الموقع. حيث أنه يمكنك الإبداع كما تريد مع الإحتفاظ بالبساطة وعدم التعقيد والبعد عن وضع عناصر غير مطلوبة وزيادات يمكنك الاستغناء عنها. كما أن استخدام ال Animation بشكل سيء وغير مدروس يمكن أن يضر بسرعة موقعك وأدائه كثيرا ولذلك استخدم ال Animation في الحدود المسموح بها ولا تكثر منه في كل مكان حتى لا تكلف المتصفح من ناحية السرعة والأداء.
تصغيير حجم الأكواد Minification
يجب عليك تصغير حجم أكواد ال Js, Css حيث أنها ستوفر لك الكثير من سرعة الموقع. ففي بعض التصاميم المتقدمة يمكنك توفير أكثر من 500kb من موقعك في حالة فقط قمت بتصغير حجم الكود ولذلك اهتم بهذه النقطة فهي مهمة جدا ولا تقلق من التعديل على الملفات فعندما تتعلم اي Task Runner أو كنت تعمل بلغة SASS فانك تقوم بكتابة الكود بطريقة عادية جدا والمنتج الذي تخرجه اللغة يكون مصغر Minified لذلك النسخة المصغرة لن تتعامل أنت مها أبدا ستكون للمتصفح فقط ولكن نسختك ستكون متاحة للتعديل بكل سهولة وبساطة وأيضا هناك الكثير من الأدوات Online تقوم بعمل Minify للكود الخاص بك فقط ابحث في جوجل عن Minify Code وجرب الأدوات كلها.
ضغط الصور Compress Images
الصور هي أهم عامل في موقعك يمكن أن يبطأ موقعك كثيرا لو لم تكن تهتم بضغط الصور فهناك الكثير من المواقع التي اختبرتها بنفسي بعد ضغط الصور في الصفحة الرئيسية فقط سوف يوفر أكثر من 2mb تخيل معي اثنين ميجابايت كاملة من توفير الصور فقط وتخيل معي سرعة الموقع بعد ضغط الصور ولذلك اهتم بهذه النقطة جدا فهي من أهم النقاط. وهناك الكثير من الطرق لضغط الصور سواء كنت تعمل بأي Task Runner أو تستخدم أداة Online لضغط الصور أو تستخدم برنامج مثل ال Photoshop وتقوم بعمل Action لحفظ الصور مضغوطة مباشرة. المهم هو ان تضغط الصور في تصميمك بغض النظر عن الوسيلة. ولا تنسى تحديد أبعاد الصورة حتى توفر على المتصفح حساب الأبعاد بنفسه.
استخدام أيقونات بدل الصور Font Icons
في حالة كان لديك أيقونات عبارة عن صور ويوجد بديل لها في مكتبات ال Icon Fonts المشهورة فالأحسن هو استخدام ال Font Icon ليس فقط بسبب أنك تستطيع التعديل عليها بسهولة شديدة ويمكنك تكبيرها لأقصى مدى ولكن لان حجمها سوف يكون اصغر بكثير وسوف توفر الإستعلامات التي يتم عملها على الخادم ( Server ) لذلك لا غنى عن استخدام ال Font Icons الآن في تصميمك.
تقليل الإستعلامات Reduce HTTP Server Requests
المزيد من الاستعلامات يعني المزيد من البطأ في تحميل موقعك ولذلك يجب عليك التقليل من الاستعلامات التي تتم على الخادم بقدر الامكان فمثلا في حالة كان لديك أيقونات كثيرة ويمكنك استبدالها كما قلنا بمكتبات Icon Font فافعل ذلك فورا اما في حالة عندك الكثير من الايقونات وتحتاج ان تكون صور فعلا فقم بعملها داخل Sprite Sheet فبدلا من وجود عشر أيقونات تؤدي الى عشر استعلامات قم بعملهم في Sheet واحد ليكون هناك استعلام واحد فقط بدلا من عشرة. ومثلا في حالة لديك الكثير من ملفات ال JavaScript وكل واحد فيه سطر او اثنين قم بدمجهم في ملف واحد لتوفير عدد الاستعلامات التي يتم عملها لجلب هذه الملفات. ولمعرفة عدد ال Requests التي تتم في صفحتك يمكنك من متصفح Chrome ان تضغط على F12 وتختار التبويب الخاص بال Network وسوف ترى عدد ال Requests في موقعك كاملة لتعرف كيف تقوم بتوفيرها.
تقليل استخدام المكتبات Libraries
في بعض الحالات تحتاج لشيء بسيط جدا يمكن عمله بكود من سطر واحد او سطرين فلا تذهب وتستدعي مكتبة كاملة تفيدك في عمل هذا الشيء لأنك في معظم الحالات لا تحتاج لك الخيارات الموجودة في هذه المكتبة وعلى سبيل المثال تخيل معي انك تريد عمل زر الذهاب للإعلى الذي يظهر للشخص عند النزول لأسفل الموقع وهناك الكثير من المكتبات التي تقوم بعمل هذه الفكرة وفيها الكثير من الخيارات ولكن هل أنت تحتاجها فعلا ؟ معظم الناس تحتاج فقط خاصية ظهور الزر والضغط عليه ليذهب للأعلى فقط ولذلك يجب عليك أن تعرف هل أنت تحتاج هذه المكتبة حقا أم لا حتى تستطيع توفير مساحة هذه المكتبة وتوفير الإستعلام الذي ينتج عن استدعاء ملفات المكتبة. ومثال آخر على مكتبة UI Kit كاملة تقوم بإستدعائها حتى تستخدم منها زر واحد فقط أو عنصر واحد فقط وهذا أكبر خطأ تحميل التصميم كل هذه الأكواد التي لن تحتاجها ولذلك يمكنك عمل الزر بنفسك.
جودة الكود Code Quality
يجب عليك أن تعرف كيف تقوم بتوزيع العناصر بطريقة صحيحة وكيف تقوم بتنسيقها بالطريقة الصحيحة وكيف تقوم بالتعامل مع ال Events في لغة JavaScript وفي أي اطار عمل تعمل به وليكن مثلا Angular وكيف لا يحدث تداخل او تعطيل للصفحة ودائما اهتم بكل Function تقوم بكتابتها وقم بقياس قوة أدائها وسرعتها ولا تقم بكتابة Function موجودة أساسا في اللغة لأن الموجودة في اللغة سوف تكون اسرع بكثير. وهنا بعض النصائح التي تساعدك في تنفيذ هذه الخطوات.
- دائما ضع وسم ال Script قبل نهاية قفلة ال Body حتى لا يعيق تحميل الصفحة
- حاول بقدر الإمكان ألا تضع وسم Script أو Style داخل الصفحة وضعهم في مكانهم السليم اما داخل Head أو قبل نهاية Body
- حاول بقدر الإمكان عدم كتابة أكواد JavaScript داخل الصفحة واكتبهم في ملف Js خارجي. ونفس الحال لل Css
- تجنب كتابة ال Inline Style وحاول دائما ان تكون جميع ال Selectors الخاصة بك في ملف Css خارجي
- إذا كان لديك ملفات Css كثيرة ولا يوجد سبب منطقي لفصلهم قم بدمجهم في ملف واحد لتوفر الإستعلامات التي تتم
- في حالة كان لديك صورة وتريد عملها بال Css وكتبت الكثير من الأكواد لتصل لشكل الصورة فلا داعي لذلك حتى لا تدخل في مشاكل التوافق مع المتصفحات وكثيرة الأكواد ويستحسن أن تضعها صورة كما هي.
المواقع التي تقيس سرعة موقعك
هنا قائمة بأسماء المواقع التي تقيس سرعة وأداء موقعك وتساعدك في تحسينه.
0 تعليقات