تقديم Discourse Splash - مُحمِّل مسبق مرئي يُعرض أثناء تحميل أصول الموقع

إعلانات
,
1

Discourse هو تطبيق Javascript أحادي الصفحة.

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

على مدى الأسابيع القليلة الماضية، كنا نعمل بنشاط ونختبر تحسينات محتملة للانتظار الأولي الذي يواجهه المستخدمون على الاتصالات/الأجهزة البطيئة. يسعدنا أن نعلن أنه بدءًا من هذا الالتزام، ستعرض مواقع Discourse الآن شاشة ترحيب أثناء تحميل أصول الموقع.

كيف يبدو؟

لقد قمنا بتمكين هذا على Meta لفترة من الوقت، لذلك ربما تكون قد رأيته بالفعل. إذا لم يكن الأمر كذلك، فإليك كيف يبدو.

كيف يعمل؟

إذا قام مستخدم بتحميل موقع Discourse الخاص بك، ولم يتم تحليل Discourse خلال الثواني القليلة القادمة، فإننا نعرض الشاشة الترحيبية. لذا، فهي تعتمد على وقت الاتصال + ثانيتين.

نحن لا نعرض الشاشة الترحيبية للمستخدمين على الأجهزة/الاتصالات السريعة.

كيف أحصل عليه؟

هذه ميزة في النواة، والإعداد ممكّن افتراضيًا الآن، لذا كل ما عليك فعله هو التحديث إلى الأحدث. إذا، لسبب ما، قمت بتجربة الإعداد الذي أضفناه ولا تراه، فتأكد من تمكين إعداد الموقع splash_screen.

ما هي الفوائد؟

بالإضافة إلى عرض شيء ما للمستخدمين على الأجهزة/الاتصالات البطيئة. هذه الميزة تقلل أيضًا من تأخيرات FCP/LCP على مواقع Discourse. لقد قمنا ببناء بعض الأدوات الداخلية لتتبع FCP/LCP على Meta، وإليك كيف تبدو النتائج

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

هل هناك أي شيء آخر يجب أن أعرف عنه؟

نص “جارٍ التحميل” الذي يظهر في الشاشة الترحيبية يعتمد على سلسلة الترجمة preloader_text. لقد كان مجتمعنا رائعًا، وقد تمت ترجمة هذا النص بالفعل إلى العديد من اللغات. إذا كنت تفضل أن يكون شيئًا مختلفًا، يمكنك تخصيص هذا النص ضمن /admin/customize/site_texts?q=preloader_text على موقعك.

الشاشة الترحيبية لا تؤخر موقعك بأي شكل من الأشكال وتظهر فقط أثناء تحميل أصول الموقع. بمجرد أن يصبح الموقع جاهزًا، تتم إزالة الشاشة الترحيبية على الفور. لا يوجد تأخير بين جاهزية الموقع وإزالة الشاشة الترحيبية.

67 إعجابًا
2

هل سيكون هناك اهتمام بمعرفة ما إذا كانت بياناتك الداخلية تتطابق مع البيانات التي لدى Google Search Console فيما يتعلق بـ CWV الخاصة بك.

6 إعجابات
3

نحن نستخدم مكتبة Web-Vitals الخاصة بجوجل للمقاييس الداخلية، لذا ستتطابق. الأمر هو أن المعلومات الموجودة في Search Console لديها حلقة تغذية راجعة أوسع، لذلك التقطنا تلك بأنفسنا من أجل تكرار الحل بشكل أسرع.

يمكنك أيضًا التحقق من قيم LCP الجديدة باستخدام أداة WebPageTest.

11 إعجابًا
4

هذا يبدو رائعًا!
أعلم أن هذا قد يبدو تفصيلاً مملًا، ولكن هل من الممكن تغيير ألوان الدوائر في شريط التحميل؟ :grin:

4 إعجابات
5

لمن يرغب في تعديل المُحمِّل، إليك الملف:

10 إعجابات
6

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

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

19 إعجابًا
7

أعتقد أنه بدلاً من تلك الرسوم المتحركة، يجب عرض مؤشر الدوران الافتراضي لـ Discourse من أجل الاتساق. مجرد رأي.

إعجابَين (2)
8

ميزة رائعة، لديّها الآن في آخر ترقية.

كنت أعتقد أن الأولوية قبل أن نقلق بشأن الديكور - هي أن تتزامن مع السمة الداكنة، انفجار مفاجئ للشاشة البيضاء بالكامل باستخدام السمة الداكنة، حسنًا هو هجوم مجنون على مستشعرات العين البصرية عند التواجد في غرفة مظلمة أيضًا! :face_with_spiral_eyes:

يرجى إضافة بعض :sunglasses: للحفاظ على الاتساق مع السمة الداكنة.

3 إعجابات
9

فهمي هو أننا نقوم بالفعل بمزامنة الخلفية الداكنة يا @Johani؟

المشكلة هي أن الأمر قد يستغرق بضع ثوانٍ حتى يخبرنا الخادم بأننا نتعامل مع سمة داكنة، يمكننا تحسين التحميل الثاني باستخدام حيل عامل الخدمة، ولكنها مشكلة صعبة للغاية للغاية.

4 إعجابات
10

لاحظت شيئًا منذ آخر مشاركة لي، للتوضيح - عند تسجيل الخروج، لاحظت أن discourse يلتقط سمة نظام التشغيل كوضع داكن، ويضبط موقع discourse كوضع داكن بالتوازي، وبالتالي تستخدم شاشة التحميل لون خلفية داكن لمزامنة التنسيق مع السمة.

ومع ذلك، عند تسجيل الدخول كمستخدم تم تمكين السمة الداكنة افتراضيًا له، فإنه يعود إلى شاشة تحميل بيضاء.

لذلك، قد أكون على حق في القول بأنها تعمل بالفعل بنسبة 50٪ كما هو متوقع. :disguised_face:

لم أختبرها، ربما قد يجربها شخص آخر.

إعجابَين (2)
11

نعم، لقد اختبرت هذا اليوم، هذه هي الطريقة التي يتصرف بها، يعمل عند تسجيل الخروج ثم يعود إلى الشاشة البيضاء عند تسجيل الدخول كمستخدم تم تعيين السمة الداكنة له، إذا كان بإمكانك جعله يتصرف بنفس الطريقة التي يتصرف بها عند اكتشاف السمة لسمة نظام التشغيل الداكنة، فسيكون ذلك كافيًا.

4 إعجابات
12

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

إليك الوضع الداكن. لاحظ أنه يبدأ داكنًا (iOS في انتظار الحصول على البيانات من الخادم)، ثم يومض باللون الأبيض (تحميل الصفحة الأولي لـ Discourse أعتقد)، ثم يقوم بتحميل السمة الداكنة التي قمت بتعيينها:

وهنا الوضع الفاتح. يبدأ باللون الأبيض (iOS في انتظار الحصول على البيانات من الخادم)، ثم يتحول إلى اللون الداكن (تحميل الصفحة الأولي لـ Discourse أعتقد)، ثم يبقى في السمة الداكنة التي قمت بتعيينها:

5 إعجابات
13

مثير للاهتمام! شكرًا على مقاطع الفيديو، سألقي @Johani نظرة وأبلغ عن النتائج.

7 إعجابات
14

نعم هذا هو، مثال مثالي مع الفيديو أيضًا!

كنت أعرف أنني لم أكن مجنونًا! :crazy_face:

3 إعجابات
17

@Johani لقد قمت بتحديث آخر تثبيت بما افترضت أنه الإصلاح، أو الإصلاح المأمول، ولكني لست متأكدًا مما إذا كان قد أحدث أي فرق (iOS، Safari / macOS Safari)

اتصالي جيد جدًا في الوقت الحالي لدرجة يصعب معها تكرار ذلك، دعني أبحث عن اتصال بطيء أو شيء من هذا القبيل… :rofl:

3 إعجابات
18

على سطح المكتب، يمكنك إبطاء اتصالك باستخدام أدوات المطور في متصفحك: How to perform Network Throttling in Chrome | BrowserStack

لا أعرف عن متصفحات الجوال.

3 إعجابات
19

شكراً، أنا لا أستخدم كروم ولكن سألقي نظرة على أدوات xCode وأقوم بضبط بعض الاختناقات.

لقد أتيحت لي المزيد من الوقت ويمكنني التأكيد على أنه لا يزال كما هو.

3 إعجابات
20

قد يكون هذا مرتبطًا بالومضات البيضاء، لذا سأقوم بنشره هنا.

iPhone في وضع الإضاءة، الشريط العلوي داكن. هذا متوقع لأنه يطابق تخطيط Discourse الداكن الذي أستخدمه.

image
image750×1334 137 KB

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

image
image750×1334 136 KB

4 إعجابات
21

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

لقد دفعت ببعض الإصلاحات

إذا كان المخطط العادي داكنًا، فاستخدمه. إذا كان فاتحًا، فاستخدم المخطط الفاتح لوضع نظام التشغيل الفاتح والمخطط الداكن لوضع نظام التشغيل الداكن (إذا تم تحديده)

المشكلة، وكذلك هذه المشكلة

يجب أن يتم إصلاحه الآن. شكرًا على التقارير :+1:

11 إعجابًا
22

:+1: رائع، أتطلع لتجربة هذا!

اقتراح - العلامة التجارية

هل من الممكن السماح بتخصيص شعار أساسي فوق النقاط المتحركة أو ملء “النقاط” بالشعار (صورة بحجم fav.ico) أو صورة ثابتة منخفضة الدقة بحجم ثابت (إذا كانت مشكلة التحميل والسرعة).

اقترح مستخدم آخر إعادة دائرة التحميل، وهي سمة مألوفة لـ discourse، والتي أعتقد أنها فكرة رائعة، من أجل الاتساق في واجهة المستخدم وتجربة المستخدم، وسيتم تعزيزها بالسماح بتحديد صورة/شعار ثابت للموقع الأساسي - فهي تبقي المستخدم موجهاً ومحدداً أثناء حالة التحميل المعلقة، مما يزيد من تجربة المستخدم وثقته.

للإضافة - فإن الحصول على الصورة من إعداد العلامة التجارية الحالي، fav.ico أو “الشعار الصغير” هو على الأرجح خيار افتراضي جيد.

6 إعجابات