أضف سمات defer إلى جميع ملفات جافاسكريبت إن أمكن. تأجيل تحميل وتنفيذ جافاسكريبت يسمح للمتصفح ببدء تحليل HTML وعرضه ورسمه.
لذلك، قد يتم عرض بعض المحتوى المؤقت الثابت مبكرًا جدًا في (أو حتى قبل) عملية تشغيل Discourse. يجب أن يكون هذا كافيًا لزيادة سرعة تحميل الصفحة المتصورة للمستخدم عند التحميل الأول للصفحة.
اعتبارًا من Chrome 88، لم يعد هذا صحيحًا لحسن الحظ!
لم أكن أعرف بهذا الأمر حتى الآن. :))
“قبل هذا التغيير، كان إزالة عنصر ما يتسبب في عدم اعتباره مرشحًا صالحًا لـ LCP. […] بعد هذا التغيير، لا يزال العنصر الذي تمت إزالته يعتبر مرشحًا صالحًا لـ LCP.”
“سيؤدي التغيير لتضمين المحتوى الذي تمت إزالته لاحقًا من DOM كأكبر طلاء محتوى محتمل إلى تحسين أوقات أكبر طلاء محتوى للمواقع التي تحتوي على صور [لـ Discourse:عناصر نصية] بنفس الحجم يتم إدراجها عدة مرات. هذا نمط شائع للكاروسيلات، بالإضافة إلى بعض أطر عمل JavaScript التي تقوم بـ العرض من جانب الخادم.”
0 ثوانٍ - ثانيتان - شاشة فارغة:
يتجاهل WebPageTest defer لـ JavaScript ويقوم بتنزيل جميع نصوص JavaScript البرمجية قبل إجراء أول رسم - وهذا يعمل بشكل صحيح على جهاز حقيقي.
2.5 ثانية - LCP: محتوى ثابت من عرض الخادم
3.5 ثوانٍ - تغيير مرئي: تم تحميل الشعار
6.5 ثوانٍ - تغيير مرئي: محتوى من عرض EmberJs
7 ثوانٍ - اكتمال مرئي
PageSpeed Insights
عنصر أكبر رسم محتوى (Largest Contentful Paint)
يحدد PageSpeed بشكل صحيح عقدة النص الثابتة من عرض الخادم كعنصر FCP LCP: div.row > div.topic-body > div.post > p
عقدة النص المعروضة بواسطة EmberJs: div.row > div.topic-body > div.regular.contents > div.cooked > p
ملاحظة حول تأخير الإدخال الأول: هنا نقرت على الخلفية فور ظهور المحتوى الثابت لأول مرة. أضف وقت رد فعلي فوق هذا التأخير في الإدخال الأول.
ملاحظة إضافية حول النسب المئوية أسفل الأشرطة في هذه الرسوم البيانية:
النسب المئوية ليست ذات صلة كبيرة لأنها تقارن فقط القيم المقاسة بالقيم الأصلية. الأصل هو صفحة ويب TYPO3 مع تثبيت مجلد فرعي لـ Discourse.
أتفق تمامًا أن Discourse هو تطبيق ويب بطيء جدًا وثقيل على JavaScript، إذا كان بإمكاننا تأجيل ملفات CSS/JS، فسيساعد ذلك بشكل كبير في تسريع LCP و FCP و FID و CLS.
سيساعد حقًا رؤية هذا الأمر يتم تطبيقه، فنحن والعديد من الأشخاص الآخرين نواجه هذه المشكلة. جميع مواقع Discourse تفشل في Core Web Vitals. إذا قمنا بتقديم صفحة HTML ثابتة سريعة للمستخدمين في المرة الأولى و/أو أجلنا كل منطق JS/CSS في التحميل الأولي الأول، وبهذه الطريقة يمكننا تسريع جميع الصفحات وتجاوز درجات CWV! متحمس لرؤية هذا الأمر في تحديث Discourse الأساسي.
جميع مواقع Discourse تشهد انخفاضًا في تصنيفات Google بسبب فشل المواقع في اجتياز Core Web Vitals.
نحن منفتحون على التجريب في هذا الأمر في النواة. يمكن أن تكون “ومضة” المحتوى ذي الأنماط المختلفة مزعجة بعض الشيء، لذلك نود البدء بها خلف إعداد موقع “تجريبي” معطل افتراضيًا للبدء. بهذه الطريقة، يمكن لمسؤولي الموقع اختيار تمكينه إذا كانوا يريدون ذلك.
هل يمكنك محاولة إضافة إعداد موقع في طلب السحب الخاص بك @rrit؟ سيكون من الجيد أيضًا إضافة بعض اختبارات RSpec للتحقق من السلوك مع تمكين / تعطيل الإعداد.
ألا يعني هذا أنه يمكننا ببساطة وضع مؤشر دوران بملء الشاشة (بعرض 100% وارتفاع 100%) على الصفحة التي يعرضها الخادم، واستبداله بتطبيق Ember عندما يتم تشغيله أخيرًا للحصول على LCP منخفض للغاية؟
يمكننا جعل مؤشر الدوران هذا بتنسيق SVG يحاكي واجهة مستخدم Discourse لجعل الانتقال أكثر سلاسة وأقل شبهاً بـ FOUC.
اضطررت إلى تعطيل علامة التأجيل لمشغل اختبار QUnit: app/views/qunit/index.html.erb
قبل ذلك، كانت اختبارات QUnit لا تزال تعمل مع علامة الميزة "javascript defer" = false. والآن تعمل الاختبارات أيضًا مع "javascript defer" = true.
بالنسبة لعناصر النص، يتم النظر فقط في حجم عقد النص الخاصة بها (أصغر مستطيل يحيط بجميع عقد النص).
بالنسبة لجميع العناصر، لا يتم النظر في أي هوامش أو حشو أو حدود مطبقة عبر CSS.
لهذا السبب يجب عرض عقدة النص الثابتة بنفس حجم عقدة نص EmberJs بالضبط.
أو حتى أكبر قليلاً عن طريق زيادة line-height.
على سبيل المثال، إذا كان عرض عقد النص غير متطابق، فهناك العديد من الحالات الهندسية التي تنشأ عن فواصل الأسطر المختلفة حيث تصبح عقدة النص الثابتة أصغر من عقدة EmberJs.
في إثبات المفهوم، تم دمج ميزتين - هل نقسمهما إلى علامتي ميزة تجريبيتين؟
جافا سكريبت مع علامة تأجيل (علامة ميزة في لوحة تحكم الإعدادات)
~~ (علامة ميزة مخفية حيث يلزم إعادة بناء الحاوية أو مسح ذاكرة التخزين المؤقت للموضوع لهذا الغرض) ~~ ← إصلاح: التبديل السريع مع ذاكرة التخزين المؤقت
عرض محتوى ثابت في عرض الموضوع (علامة ميزة في لوحة تحكم الإعدادات)
بالطبع، يتم تحقيق التأثير الكامل على LCP فقط باستخدام كليهما: FCP: محتوى ثابت
قد تكون هناك مثيلات Discourse حيث تفشل المكونات الإضافية أو مكونات السمات في تأجيل جافا سكريبت. من خلال تقسيم هذه الميزات، يمكن أن يكون لديهم مكسب صغير على المحتوى الثابت دون تأجيل جافا سكريبت: FCP: محتوى ثابت بدون تأجيل جافا سكريبت
دعونا ننتظر 7-14 يومًا أخرى لنأمل في رؤية المزيد من التحسينات لصفحات الجوال حيث يتم حساب القيم في المتوسط على مدار الـ 28 يومًا الماضية - يتم حساب 12 يومًا فقط مع تطبيق POC حاليًا.
تم تطبيق إثبات المفهوم منذ 2022-01-30 واستغرق +4 أسابيع للتأثير على جميع الصفحات في تقرير “Core Web Vitals” الخاص بـ Google Search Console - بناءً على بيانات CrUX.
جميع صفحات الموضوعات في المنطقة الخضراء لـ LCP (مقاسة بواسطة CrUX):
سطح المكتب: LCP 1.7 ثانية
الجوال: LCP 2.0 ثانية
بيانات LCP: Google Search Console/CrUX
انطباع من Google Search Console مع تطبيق إثبات المفهوم منذ 2022-01-30:
@rrit شكراً لمشاركة البيانات من موقعك! لقد ناقشنا هذا داخليًا، وأخشى أننا لن نضيف هذه الوظيفة إلى Discourse الأساسي في الوقت الحالي.
بينما تعد مقاييس Web Vital التي شاركتها مثيرة للإعجاب للغاية، فإن وميض محتوى “عرض الزاحف” لا يوفر تجربة مستخدم رائعة. تساعد تغييرات التنسيق التي أجريتها بالتأكيد، ولكن ستحتاج إلى تعديلها لكل موقع Discourse يحتوي على تنسيق مخصص.
هدفنا طويل الأجل هو تنفيذ عرض من جانب الخادم حقيقي باستخدام شيء مثل Ember FastBoot. من الناحية النظرية، سيوفر ذلك نفس التحسينات الإحصائية التي قمت بقياسها، مع توفير تجربة مستخدم سلسة أيضًا. نفضل تركيز جهودنا نحو هذا الهدف.
كل ما سبق، Discourse قابل للتوسيع بشكل كبير، لذلك أعتقد أنه من الممكن تمامًا تنفيذ فكرتك في إضافة Discourse ومشاركتها هنا في Plugin.
أكبر تغيير قمت به في طلب السحب الأساسي هو إضافة السمة defer إلى علامات script. سيكون تجاوز كل هذه الأماكن من إضافة أمرًا صعبًا للغاية. ومع ذلك، أعتقد أنه يمكن تحقيق نفس النتيجة من خلال نهج قائم على البرمجيات الوسيطة. وجدت هذه المقالة التي تصف مشكلة مماثلة:
باستخدام هذه التقنية، يمكنك كتابة برنامج وسيط يتحقق من استجابات text/html، ويقوم بتحليلها، ثم يضيف سمات defer عند الضرورة.
يمكن إضافة البرمجيات الوسيطة من إضافة على النحو التالي:
# name: my-plugin
# about: وصف إضافتي
# version: 1.0
# url: https://example.org
require_relative "lib/script_defer_middleware"
on(:after_initializers) do
Rails.configuration.middleware.use(ScriptDeferMiddleware)
end
إذا واجهت أي عقبات مع نهج قائم على الإضافات، فلا تتردد في النشر هنا وسيسعدنا محاولة توجيهك في الاتجاه الصحيح.
فوق هذا التأخير في الإدخال الأول.
