بناء مواقع ويب ذات أداء عالي وطرق فحص وإصلاح البطء بالأداء
يا ريت يا محمود تشارك بكتابة المقالات والمساعدة على نشر المنصة، أعلم أن لك شعبية جارفة :D
شعورك لواحده مش كفاية، اتبرع ولو بشير :)
محمد بنكون كتير سعيدين لو استخدمت منشر لكتابة مدونة واعطيتنا تعليقاتك وكيف بتشوف ممكن يكون تجربة منشر احسن وتحكيلنا المشاكل اللي واجهتك في استخدامه :-)
(مع العلم انه منشر ما زال نسخة تجريبية)
عجبني موقعكم وبساطته في عرض المقالات ^_^
بالرغم ان الموقع لايحوي صور كثيرة ومحاولتكم لتسحين الاداء، إلا ان سرعة الموقع 85% حسب تقييم موقع gtmetrix
هذا ما يسمى Irony
مقال عن تحسين أداء المواقع على موقع يستغرق عدة دقائق ليظهر.
المقالات تحتاج جافاسكربت لتحمل، وتستخدم Angular (أسوأ اختيار من حيث الأداء)
ذكرت مرة أنكم تقومون بإنشاء نسخة أخرى معالجة مسبقا للصفحات من أجل فهرستها في Google. لم هذا العناء؟ بحق الله عالجوا المقال على الأقل على الخادم، قراءة مقال مهمة أبسط من أن تحتاج JavaScript.
مقال عن تحسين أداء المواقع على موقع يستغرق عدة دقائق ليظهر.
دقائق يا رجل
تستخدم Angular (أسوأ اختيار من حيث الأداء)
اذا هي الاسوأ حسب رايك اخبرني ما هي الافضل
ذكرت مرة أنكم تقومون بإنشاء نسخة أخرى معالجة مسبقا للصفحات من أجل فهرستها في Google. لم هذا العناء؟
يقوم بانشاء snapshot من الصفحات بشكل اوتوماتيكي بدون تدخل المبرمج يعني لا يوجد اي عناء ابدا
كما ان المشروع مفتوح المصدر ومن اهم اهدافه تشجيع على الكتابة .
فلم هذا التبذر ... اذا اردت تحسين اذهب وشاركهم بتطوير وفعها بحب وليس بهجومية
ملاحظة ...
ما كتبته لا يعبر عن مجتمع منشر ولا اصحابه انما هو رأي وانا اتحمل مسؤوليته
آه وماذا عن الـAccessbility؟ أيهما أسهل وأسرع للمستخدم والمطور؟ تحميل نص المقال مع HTML وإرساله للمتصفح أم تحميل HTML وكل ما فيها ثم طلب نص المقال ثم اعتماد خدمة خارجية لتعود بنا إلى الحالة السابقة؟
لست مهتمًّا بمساعدة المطورين، اعتبرني مستخدمًا يشتكي من بطء أداء الموقع... هل المشروع مهم للمستخدمين أم أنه خاص بمن يريد أن يساهم بتطويره؟
محمد شكراً لأخذك الوقت لإعطاء أفكار لتحسين تطوير منشر، برأيي هذا بحد ذاته مشاركة في بناء منشر (بغض النظر عن اللغة التهكمية المستخدمة).
أذكر بأول وبآخر المقال أننا ما زلنا نقوم بتحسين سرعة المنصة شيئاً فشيئاً. كل الأشياء تحتاج إلى دراسة وتقييم المقايضات (Tradeoffs) لاستخدام أو بناء شيء على الآخر.
بالبداية تم اختيار آنجيولار لبناء الموقع لأنها أكثر أشهر منصة عمل للجافاسكربت. نحن على علم بالمقايضات بين معالجة الصفحات على الخادم أو على المتصفح - ما زال هنالك نقاش كبير بالموضوع والموضوع ليس مقرر أن أحدهما هو الأفضل نهائياً عن الآخر. مرة أخرة مقايضات.
كما ذكر أحمد نستخدم حالياً أداة لعرض الملفات لمحركات البحث وغيرها.
نقاطك في محلها، ودائماً نرحب بالاقتراحات وطلبات السحب على مستودع المشروع المفتوح المصدر.
والنقطة من المقال كان توضيح المصاعب والمشاكل التي حللناها والمشاكل التي لا زالت تواجهنا في منشر لتحسين الأداء بشكل أفضل. أعتقد ان من تابع منشر منذ البداية سيرى أن الموقع تحسن بشكل كبير، ونحن على دراية أنه ما زال يحتاج للعديد من العمل :-)
هل تعلم شيئًا؟ لم أقرأ المقال قبل كتابة الرد! هل تعلم لماذا؟ لأنني سئمت انتظار وأنا أحدق في شاشة تحوي روابط زرقاء فيها {{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.
الأسوأ من ذلك أنّ الملفات غير مجموعة (concatenated)، عشرات طلبات HTTP فقط لإظهار محتوى الصفحة! عدا عن Flash of unstyled content.
هذا تقييم Google PageSpeed Insights لموقعكم!
36 نقطة من 100 على الجوال
46 نقطة من 100 على الهاتف المحمول!
هنالك أسباب لعدم تجميع بعض الملفات. اخترنا تحميل بعض الملفات من شبكات تسليم المحتوى (CDN) والتي العديد من الأشخاص يشجعون عليها لأن المستخدم في معظم الأحيان لديه نسخة مخزنة (Cached) في المتصفح من مواقع أخرى.
شكراً لإرسال الرابط لفحص السرعة، سنعمل على استخدام هذه الأداة لتحسين سرعة الموقع.
المقالات تحتاج جافاسكربت لتحمل، وتستخدم Angular (أسوأ اختيار من حيث الأداء)
يمكن لازم توضح لماذا قلت انها اسوأ اختيار؟ لا تستطيع أن تقول هذا اسوأ وهذا أفضل بالمطلق! كل تطبيق يتم دراسته وما تحتاج له ثم اختيار الframwork التي تعتقد انها الافضل لما تحاول بناؤه. هنا في السيليكون فالي مثلا تعد الangular واحدة من اشهر الframeworks وبالطبع هي جديدة وفي طور التطوير وبالتأكيد لا شيء موجود يعد مثالي، كل شيء له مشاكله. وبالطبع الangular ايضا لها محبوها ولها كارهوها، البعض يعتقد انها افضل شيء موجود والاخر يعارض تماما. ولكن عندما تقول عن شيء انه الاسوأ اعتقد انه عليك بتقديم حجج لماذا تعتقد ذلك، ولماذا تعتقد مثلا انها غير مناسبة لمشروع مثل منشر. بالنهاية انا افكر ف الموضوع على اساس انك تريد افادة الناس بتعليقاتك وليس المهاجمة، وطبعا منشر يحتاج للكثير من العمل لتحسينه. حيث انه ما زال نسخة تجريبية ونحتاج طبعا لأشخاص ينتقدوا المشروع لأجل التحسين
الأسوأ من ذلك أنّ الملفات غير مجموعة (concatenated)، عشرات طلبات HTTP فقط لإظهار محتوى الصفحة!
برأيي أهم لحظة حاسمة في نجاح الموقع هي عند فتحه لأول مرة، بعدها سيقرر المستخدم إن كان سيعود إليه أم لا.
ما احتمال أن تكون الملفات التي طلبها المتصفح من CDN مُخزّنة مؤقتًا؟ إلى أي حد يمكن الاعتماد على هذا الاحتمال؟
على فرض أنّها كانت موجودة، فلا يمكن الاعتماد على كل شيء في CDN، هناك بعض الملفات التي ستكون خاصة بالموقع ذاته، كملفات logic والتنسيق... ربّما الآن أصبحنا نطلب 8 طلبات HTTP من مصادر مختلفة (مع ما يكلفه كل طلب من DNS resolving ومعالجة أو اكتشاف من Cache على القرص). سيحمل المتصفح في حالة منشر HTML ويفسرها ليكتشف ما تحويه من ملفات JavaScript وCSS ويبدأ بجلبها، وينتظر حتى ينتهي كل طلبات JavaScript التي تُقدّم Angular وتوابعها (sanitize وresource...) ثم ملفات JavaScript الخاصة بlogic الموقع ذاته، ليكتشف أن عليه الآن جلب محتوى المقال (الذي هو أهم شيء!).
من الأفضل عدم دمج الملفات في ملف واحد فستزيد مدة الإستجابة فمثلا إذا كان الأمر المستعمل موجود في أسفل الملف و كنت قد دمجت جميع الملفات في ملف واحد فهذه مشكلة فسيضطر المتصفح كل مرة إلى قراءة كل الملف حتى يجد الأمر المطلوب و سيحدث العكس إذا استعملت عدة ملفات فستكون السرعة كبيرة لأن المتصفح سيبحث مباشرة عن الأمر في الملف الفرعي و الذي بدوره سيكون حجمه صغيرا مما يزيد سرعة الإستجابة.
هذا ما يسمى بنظرية البرنس،
بدلًا من التهكم ساعد على الأقل بإظهار الأجزاء السيئة بدلًا من التناطح في انه Angular سيئة و Ruby سيئة ، GoLang أفضل و React أفضل !
يعني أعتقد انه لو ساعدت حتى في تحسين الخدمة سيكون أفضل، أنا نفسي رحت أكتب هناك ولما لقيت الوضع محتاج تحسين شمرت واشتغلت مع الناس.
لا أعتقد انك خبير في Angular حتى الأن لم تفند أسباب سوء اختيار Angular، للعلم php is a bitch وفيس بوك ما زال يستخدمها :)
ناهيك عن ال debates المنتشرة بين المنصات المختلفة أيهم أحسن وأيهم أسوأ.
لم أر مساهتمك في المشروع حتى الآن، الكثير من الطق حنك.
شكرًا لك على الرغم من ذلك وجودك يساهم في رقاء البشرية بشكل أو بآخر.
Disclaimer : رأيي يعبر عني بشخصي وشحمي ولحمي ولا يعبر مطلقًا عن منشر أو الجهة اللتي لم أعمل بها حتى الآن لأني عاطل عن العمل.
لا يهمني المساعدة في تحسين الموقع، أنا مستخدم فقط... هل المستخدمون مهمون بالنسبة لموقعكم أم أنكم تشترطون أن يكون مساهمًا قبل زيارة الموقع؟
لم أدخل في هراء من نوع Angular أسوأ، React أفضل شيء في الكون... كما أن "PHP مستخدمة في فيسبوك وويكيبيديا" هي من نفس النوع من الهراء.
اقرأ ردودي على محمد الخطيب وأحمد عيسى. لدي بضع نقاط جادة، الأمر ليس استهزاءً.
التعليقات