بناء مواقع ويب ذات أداء عالي وطرق فحص وإصلاح البطء بالأداء

آه وماذا عن الـAccessbility؟ أيهما أسهل وأسرع للمستخدم والمطور؟ تحميل نص المقال مع HTML وإرساله للمتصفح أم تحميل HTML وكل ما فيها ثم طلب نص المقال ثم اعتماد خدمة خارجية لتعود بنا إلى الحالة السابقة؟

لست مهتمًّا بمساعدة المطورين، اعتبرني مستخدمًا يشتكي من بطء أداء الموقع... هل المشروع مهم للمستخدمين أم أنه خاص بمن يريد أن يساهم بتطويره؟

هل تعلم شيئًا؟ لم أقرأ المقال قبل كتابة الرد! هل تعلم لماذا؟ لأنني سئمت انتظار وأنا أحدق في شاشة تحوي روابط زرقاء فيها {{username}}! حسبت أن المقال يتحدث عن تحسين المواقع بشكل عام وليس منشر بحد ذاته، وأنا مدين لكم باعتذار... لكنني ما زلت أرى أن ادعاءاتي صحيحة... أول تجربة للمستخدم على الموقع هي لحظة حرجة... هل أنت مستعدّ لتضحّي بهذه اللحظة؟

أنا أعرف أن Angular مُغرية للاستخدام لأنها تبدو cool وهناك الكثير من الضجة حولها، كما أنّها سهلة للغاية، لكنّها تشجعّك على تصميم الموقع بطريقة تنسى فيها التفكير بالأداء، وبعدها تجد أن عليك العودة وتحسين الأداء السيئ الذي سببته Angular! ليس فقط لأنّها تعتمد على أشياء مثل dirty checking وإغراق حلقة الأحداث بمئات المُراقبات (watches) فضلًا عن استهلاك الذاكرة الخرافي، بل لأنّها تدفعك لتبني نمط تصميم يُركّز على التفاعل بين العناصر بطريقة سحرية ناسيًا حدود قدرات المتصفح والجهاز الذي يستخدمه مستخدمك.

أنتم تُصمّمون موقع ويب، ليس تطبيق ويب... ليس كل موقع على الويب يحتاج أن يكون تطبيق ويب فقط لأنها the next big cool thing! لو كان موقعكم مثلًا تطبيقًا لإدارة مهام، أو نظام تدوين متكامل فيه لوحة إدارة والحاجة لمراقبة التعليقات وما إلى ذلك، لربّما احتجتم إلى إطار عمل بهذا التعقيد.

أما أن تزيدوا تعقيد الأمور ببناء الموقع بالكامل، بما فيه طلب نص التدوينة من خلال XHR فهذا ليس أمرًا جيًّدا، لا من ناحية الأداء ولا من ناحية الـAccessibility، افترض هذا السيناريو، وهو ليس خياليًّا على الإطلاق: فتحت مقالًا على منشر، ليس لدي وقت، رميته في Pocket ثم انقطع اتصالي بالإنترنت، فتحت المقال لأجد أنه فارغ... لمَ؟ لأنّ الموقع مصمم بطريقة سحرية تحتاج JavaScript، وPocket يستخرج المقال من الصفحة دون JavaScript، هذا ليس خطأ Pocket بالطبع! حتى محركات البحث ما زالت فتيّة في دعمها لاستخراج المحتوى بعد تحميل JavaScript، ولربما Google هو الوحيد الذي يفعل ذلك، وما زال بدائيًا!

هل نظرتم إلى Medium؟ هل قارنتم الفرق في الأداء والـAccessibility؟

أقل شيء ممكن عمله، وربّما أكثر شيء سيحسن من أداء الموقع، هو أن يكون محتوى المقال جاهزًا بعد انتهاء تحميل الـHTML، أي بدون انتظار تحميل Angular وكل الـbells and whistles... المحتوى هو أهم شيء في الموقع وهو ما سيجذب القارئ... لم لا تعطونه الأهمية المناسبة؟

أنا لا أقول تخلوا عن Angular (وإن كان هذا جيدًا!)، ولكن على الأقل اجعلوا المقال ضمن HTML.

هنالك أسباب لعدم تجميع بعض الملفات. اخترنا تحميل بعض الملفات من شبكات تسليم المحتوى (CDN) والتي العديد من الأشخاص يشجعون عليها لأن المستخدم في معظم الأحيان لديه نسخة مخزنة (Cached) في المتصفح من مواقع أخرى.

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

المقالات تحتاج جافاسكربت لتحمل، وتستخدم Angular (أسوأ اختيار من حيث الأداء)

يمكن لازم توضح لماذا قلت انها اسوأ اختيار؟ لا تستطيع أن تقول هذا اسوأ وهذا أفضل بالمطلق! كل تطبيق يتم دراسته وما تحتاج له ثم اختيار الframwork التي تعتقد انها الافضل لما تحاول بناؤه. هنا في السيليكون فالي مثلا تعد الangular واحدة من اشهر الframeworks وبالطبع هي جديدة وفي طور التطوير وبالتأكيد لا شيء موجود يعد مثالي، كل شيء له مشاكله. وبالطبع الangular ايضا لها محبوها ولها كارهوها، البعض يعتقد انها افضل شيء موجود والاخر يعارض تماما. ولكن عندما تقول عن شيء انه الاسوأ اعتقد انه عليك بتقديم حجج لماذا تعتقد ذلك، ولماذا تعتقد مثلا انها غير مناسبة لمشروع مثل منشر. بالنهاية انا افكر ف الموضوع على اساس انك تريد افادة الناس بتعليقاتك وليس المهاجمة، وطبعا منشر يحتاج للكثير من العمل لتحسينه. حيث انه ما زال نسخة تجريبية ونحتاج طبعا لأشخاص ينتقدوا المشروع لأجل التحسين

الأسوأ من ذلك أنّ الملفات غير مجموعة (concatenated)، عشرات طلبات HTTP فقط لإظهار محتوى الصفحة!

لا يهمني المساعدة في تحسين الموقع، أنا مستخدم فقط... هل المستخدمون مهمون بالنسبة لموقعكم أم أنكم تشترطون أن يكون مساهمًا قبل زيارة الموقع؟

لم أدخل في هراء من نوع Angular أسوأ، React أفضل شيء في الكون... كما أن "PHP مستخدمة في فيسبوك وويكيبيديا" هي من نفس النوع من الهراء.

اقرأ ردودي على محمد الخطيب وأحمد عيسى. لدي بضع نقاط جادة، الأمر ليس استهزاءً.