🚀 AllWDbook — من الفكرة إلى الإطلاق
AllWDbook Build Journal
المشكلة التي جعلت AllWDbook يومض عند التحميل وكيف أصلحناها
دراسة تقنية حقيقية لمشكلة FOUC التي ظهرت عند تحميل الصفحة، وكيف أدى نقل CSS من styled-jsx إلى ملف مستقل إلى حلها.
من أكثر المشكلات إزعاجًا في واجهات الويب تلك التي لا تمنع الموقع من العمل، لكنها تجعل المستخدم يشعر فورًا أن هناك شيئًا غير مستقر.
هذا بالضبط ما حدث في الصفحة الرئيسية لـ AllWDbook. كانت الصفحة تفتح وتعمل، لكن عند التحميل كان يظهر وميض بصري قصير قبل استقرار التصميم. في بعض اللحظات كان المستخدم يرى المحتوى قبل أن تكتمل الهيئة البصرية النهائية للصفحة.
المشكلة لم تكن في الأدوات نفسها، ولا في نظام الدفع أو الوصول، ولا في البيانات. كانت مرتبطة بالطريقة التي يتم بها تحميل جزء كبير من CSS الخاص بالصفحة الرئيسية.
بدل إضافة طبقات من الحلول المؤقتة لإخفاء الوميض، رجعنا إلى بنية الصفحة نفسها. والنتيجة كانت إصلاحًا أبسط وأكثر استقرارًا: نقل CSS الكبير من styled-jsx داخل الصفحة إلى ملف CSS مستقل يتم استيراده بصورة مباشرة.
هذه المقالة توثق المشكلة، طريقة التفكير فيها، ولماذا كان إصلاح السبب الحقيقي أفضل من إضافة patch آخر فوق الأعراض.
ما الذي كان يراه المستخدم؟
المشكلة كانت قصيرة زمنيًا، لكنها واضحة بصريًا. عند فتح الصفحة الرئيسية، كان جزء من المحتوى يظهر للحظة قبل أن تستقر الألوان والمسافات وبعض عناصر التصميم في شكلها النهائي.
مثل هذا النوع من المشكلات يعرف غالبًا باسم Flash of Unstyled Content أو FOUC. الفكرة ببساطة هي أن المتصفح يستطيع إظهار جزء من HTML قبل أن تكون قواعد التنسيق المطلوبة جاهزة بالشكل المتوقع.
المستخدم لا يحتاج إلى معرفة الاسم التقني للمشكلة حتى يشعر بها. بالنسبة إليه، الموقع يومض أو يعيد ترتيب نفسه للحظة عند الفتح.
ومع أن الصفحة تصبح طبيعية بعد ذلك مباشرة، فإن الانطباع الأول يتأثر، خصوصًا في صفحة رئيسية يُفترض أن تكون مدخلًا مستقرًا لبقية المنصة.
لماذا كان وميض صغير مشكلة مهمة؟
من السهل تجاهل مشكلة تستمر جزءًا من الثانية، خاصة إذا كانت كل الوظائف تعمل بعد ذلك. لكن في واجهة رقمية، الاستقرار البصري جزء من جودة المنتج.
الصفحة الرئيسية في AllWDbook تحمل الشعار، الرسالة الأساسية، الوصول إلى الأدوات، والأزرار الرئيسية. أي اهتزاز أو وميض في هذه المنطقة يحدث في اللحظة التي يبني فيها الزائر أول انطباع عن المنصة.
كما أن المشكلة تصبح أكثر ملاحظة على بعض الهواتف أو الاتصالات التي تستغرق وقتًا أطول قليلًا في تحميل الموارد.
لذلك لم يكن الهدف جعل الاختبار التقني ينجح فقط. كان الهدف أن تبدأ الصفحة بالشكل الصحيح من أول إطار يراه المستخدم قدر الإمكان.
بدأنا من مكان التنسيق نفسه
عندما تظهر مشكلة أثناء التحميل، توجد أسباب كثيرة محتملة: JavaScript، الخطوط، الصور، المكونات، hydration، أو CSS. ولهذا فإن إضافة حل عشوائي قد تخفي العرض دون أن تفسر السبب.
في حالة AllWDbook كان من المهم النظر إلى الصفحة الرئيسية نفسها، لأنها كانت تحمل كمية كبيرة من التنسيق داخل المكون عبر styled-jsx global.
هذا يعني أن جزءًا كبيرًا من الشكل النهائي للصفحة كان مرتبطًا بكود المكون بدل أن يكون موجودًا في stylesheet مستقل يتم تحميله بصورة مباشرة ضمن بنية الصفحة.
هذه الملاحظة لم تعنِ تلقائيًا أن كل styled-jsx سيئ. المشكلة كانت في حجم واستخدام CSS عالمي كبير داخل صفحة رئيسية معقدة، وفي تأثير ذلك على لحظة ظهور الواجهة.
لم نرد إخفاء المشكلة بحل بصري آخر
هناك حلول يمكن أن تجعل الوميض أقل وضوحًا دون معالجة سببه، مثل إخفاء الصفحة حتى اكتمال التحميل، أو إضافة overlay، أو تأخير إظهار أجزاء من المحتوى.
هذه الحلول قد تعطي نتيجة سريعة، لكنها تضيف حالة تحميل جديدة فوق الصفحة. وإذا لم يكن السبب الحقيقي هو بطء البيانات، فإننا نكون قد أضفنا تعقيدًا جديدًا فقط لإخفاء مشكلة موجودة أصلًا في طريقة تقديم التنسيق.
في AllWDbook كان القرار هو تجنب إضافة شاشة انتظار لم نكن نحتاج إليها.
بدل ذلك، كان السؤال: هل يمكن جعل CSS الأساسي جزءًا أبسط وأكثر مباشرة من مسار تحميل الصفحة؟
الإصلاح: نقل CSS إلى ملف مستقل
تم استخراج تنسيقات الصفحة الرئيسية الكبيرة من styled-jsx global ووضعها في ملف مستقل باسم home.css داخل مجلد app.
بعد ذلك أصبحت الصفحة تستورد هذا الملف بصورة مباشرة، بدل حمل كتلة CSS عالمية كبيرة داخل المكون نفسه.
هذا التغيير لم يكن إعادة تصميم للصفحة. الألوان، الهوية، التخطيط، الأزرار والأدوات بقيت كما هي. الذي تغير هو مكان وطريقة تقديم قواعد التنسيق.
وهذه نقطة مهمة في الإصلاحات التقنية: عندما نستطيع حل مشكلة الأداء أو العرض دون تغيير تجربة المستخدم المستقرة، يكون نطاق التعديل أصغر ومخاطره أقل.
لماذا أدى هذا التغيير إلى نتيجة أفضل؟
ملف CSS المستقل يمكن لـ Next.js التعامل معه كجزء واضح من موارد الصفحة، بدل انتظار معالجة كتلة تنسيق مرتبطة بمكون كبير في الواجهة.
النتيجة العملية في AllWDbook كانت اختفاء الوميض الذي كان يظهر عند فتح الصفحة، وأصبحت الواجهة تصل إلى شكلها النهائي بصورة أكثر استقرارًا.
كما أصبح فصل المسؤوليات أوضح: page.js مسؤول بدرجة أكبر عن بنية الصفحة ومنطقها، بينما home.css يحمل تنسيق الصفحة الرئيسية.
هذا لا يحسن لحظة التحميل فقط، بل يجعل الصيانة لاحقًا أسهل لأن تعديلات الشكل لا تحتاج إلى البحث داخل كتلة ضخمة من JavaScript.
تنظيف ما حول الإصلاح كان مهمًا أيضًا
بعد نقل التنسيق الأساسي، كان من المهم ألا تبقى حلول قديمة أو قواعد مكررة تحاول حل المشكلة نفسها من أماكن متعددة.
تم الحفاظ على globals.css للقواعد العامة الحقيقية، بينما بقيت قواعد الصفحة الرئيسية في home.css. هذا الفصل يقلل احتمال وجود قواعد متنافسة أو تعديلات غير واضحة المصدر.
كما أن تجنب إعادة إضافة overlays أو ملفات انتقال غير ضرورية حافظ على مسار التحميل بسيطًا.
كلما كان لدينا مصدر واضح لكل نوع من التنسيق، أصبح تشخيص أي مشكلة مستقبلية أسهل.
تحسين السرعة دون العبث بوظائف المنتج
أحد المبادئ المهمة في هذا الإصلاح كان عدم توسيع نطاق التغيير إلى أجزاء لا علاقة لها بالمشكلة.
لم نكن بحاجة إلى تعديل الدفع أو نظام الوصول أو الأدوات أو API أو المحتوى. المشكلة كانت في الصفحة الرئيسية وتقديم CSS، لذلك بقي الإصلاح داخل هذا النطاق.
هذا النوع من الحدود مهم جدًا في مشروع يعمل فعليًا. كل تعديل إضافي غير ضروري يضيف فرصة جديدة لظهور خطأ بعيد عن المشكلة الأصلية.
الإصلاح الجيد ليس الأكبر. الإصلاح الجيد هو الذي يعالج السبب بأقل مساحة تغيير ممكنة مع نتيجة يمكن ملاحظتها والتحقق منها.
الدرس: شخّص قبل أن تضيف patch
هذه المشكلة أصبحت مثالًا مفيدًا داخل تطوير AllWDbook على الفرق بين معالجة العرض ومعالجة السبب.
لو أضفنا شاشة تحميل فوق الصفحة، ربما اختفى الوميض عن العين، لكن بنية تحميل CSS لم تكن ستتغير. كنا سنملك مشكلتين: التنسيق المتأخر وحالة تحميل إضافية.
عندما نقلنا CSS نفسه، استهدفنا الجزء المرتبط مباشرة بما يحدث في اللحظة التي تظهر فيها الصفحة.
لهذا أصبح التشخيص قبل التعديل قاعدة عملية: حدد أين يبدأ السلوك غير المرغوب، اختبر الفرضية، ثم غيّر أقل عدد ممكن من الأشياء.
ما الذي تعلمناه من مشكلة الوميض؟
المشكلات الصغيرة في الواجهة يمكن أن تكشف قرارات بنيوية أكبر. وميض يستمر لحظة واحدة قاد إلى تحسين طريقة تنظيم CSS في الصفحة الرئيسية.
كما أكد أن الأداء ليس دائمًا مسألة ضغط صور أو تقليل طلبات الشبكة فقط. أحيانًا تكون المشكلة في توقيت وصول التنسيق الأساسي إلى المتصفح.
والأهم أن إصلاح الأداء لا يحتاج إلى إعادة بناء المنتج بالكامل. في هذه الحالة، إعادة تنظيم مكان CSS كانت كافية لإحداث فرق واضح.
بالنسبة إلى AllWDbook، أصبحت النتيجة صفحة رئيسية أكثر ثباتًا عند الفتح، وبنية تنسيق أوضح يمكن البناء عليها في التطويرات القادمة.