All Articles

إزاي الاداء السيئ بيخسرك فلوس | Performance Tips

performance-tips-quote

السلام عليكم ورحمة الله وبركاته 👋

الـ Performance بقا شئ أساسي ومهم دلوقتي وخصوصا للشركات اللي بتعتمد على المواقع والتطبيقات بتاعتها في تقديم خدماتها زي سوق وأمازون وعلي بابا وغيرهم من الشركات اللي بتقدم خدمات اونلاين. لان الشركات دي بيعتمدوا على المواقع بتاعتهم في تقديم خدماتهم للناس فمهم جدا انهم يقدموا تجربة جيدة لزوار المواقع بتاعتهم وان الناس متواجهش أي بطء أو مشاكل تقنية خلال تصفحهم للموقع. لان ده لو حصل، فمعناه ان كتير من الناس مش هيكملوا تصفحهم للموقع وبالتالي الشركة هتخسر فلوس 💸.

فخولنا نشوف إيه الخطوات اللي ممكن تعلمها عشان تزود الـ performance بتاع أي موقع؟

Image optimization

أول خطوة معانا وتعتبر أشهرهم وهي الـ Image optimization. طبعا كلنا عارفين أهمية الصور لاي موقع خصوصا لو بتعرض منتجات للناس زي سوق وأمازون، وتلاقي الصفحة فيها عدد كبير من المنتجات بالصور بتاعتها وطبعا لازم الصور دي تبقي بجودة عالية وده معناه ان حجمها هيبقي كبير. وللأسف ده هيأثر جدا على أداء الصفحة والوقت اللي هتحتاجه عشان تحمل.

وهنا بقا، عندك أكتر من حل ممكن تنفذهم عشان تحل المشكلة دي:

  • اول حل هو الـ image compression:

    وده معناه إنك تضغط الصور بتاعتك بدون ماتفقد أي شيء من جودتها، وأحيانا العملية دي بتخلي حجم الصورة ينزل للنص أو أكتر كمان ودي حاجة عظيمة جدا وهتفرق جدا في أداء الموقع بتاعك. وبالنسبة للطريقة اللي تعمل بيها العملية دي فتقدر تروح ببساطة لعم جوجل وتقولة compress image وهتلاقية جابلك مواقع كتير بتقوم بالعملية دي وببلاش وتقدر تستخدم أي واحد منهم مدام بيأدي الغرض. Image

  • الحل التاني هو الـ Lazy loading:

    ولو انت اول مرة تسمع عن التكنيك ده فهو ببساطة بيعمل load فقط للجزء الظاهر من الشاشة للـ user بمعني ان انت لو الصفحة بتاعتك فيها ٦٠ منتج مثلا بتقوم محمل بس الصور بتاعة المنتجات اللي ظاهرة اللـ user على الشاشة بدل ما تحمل الـ ٦٠ منتج دول بالصور بتاعتهم مره واحدة اول مال user يفتح الصفحة. والتكنيك ده هتلاقية بيستخدمه أغلب مواقع الـ e-commerce. وبالنسبة لطريقة تنفيذه فالميزة دي موجودة فالـ html وتقدر تستخدم الـ attribute اللي اسمة loading بالشكل ده:

    <img loading="lazy" />

    Image

  • الحل التالت هو الـ media-query:

    بحيث إنك تظهر الصور بابعاد مناسبة لاحجام الشاشات المختلفة وده تقدر تعملة باستخدام الـ html tag اللي اسمها picture وبتحط جواها الصور المختلفة بتاعتك وحجم الشاشة بتاع كل صورة فيهم وكمان بتحط صور مخصصة للشاشات اللي الـ resolution بتاعها عالي. Image

Minimize the number of files

بمعني, ان المشروع بتاعك وخصوصا لو كان كبير بيبقي فيه ملفات CSS وجافاسكريبت كتير, وده معناة ان المتصفح هيحتاج يعمل http requests كتير عشان يعمل load لكل ملف منهم وبالتالي هيأثر بالسلب علي الوقت اللي هتحمل فيه الصفحة. وكحل للمشكلة دي، فانت المفروض تدمج الملفات دي مع بعض وتقلل عددهم علي قد ما تقدر وده ممكن تعملة باستخدام أدوات زي webpack و rollup و gulp. الادوات دي بتستخدمها عشان تعمل minify للملفات بتاعتك وتقلل حجمها وكمان بتعمل bundle ليها بحيث تدمج ملفات الـ css مع بعضها وملفات الجافاسكريبت مع بعضها ويطلعلنا أقل عدد ممكن من الملفات وبالتالي أقل عدد ممكن من ال http requests وده معناه تحميل أسرع للصفحة 🎉 🏎Image

دي كانت مجموعة من الخطوات اللي ممكن تنفذها لتحسين أداء أي موقع ولو حابب تتعرف على خطوات أكتر فتقدر تشوفها فالفيديو: