وظائف لـ Core Web Vitals Tactics مع Cloudflare's HTMLRewriter

شرح دليلنا لاختبار A / B لـ Core Web Vitals سلسلة من الخطوات الصغيرة مع خدمتين وامتداد متصفح لكتابة اختبارات لتكتيكات كود الواجهة الأمامية. قبل ثلاثين عامًا ، كنا ننسخ المصدر الأولي لصفحة ما لتشغيل عمليات البحث والاستبدال حتى نتمكن من إدارة نسخة طبق الأصل من صفحة تم وضعها في مجلد ممكّن للويب لعرض نفس أنواع التوصيات.

ليس علينا أن نفعل ذلك بعد الآن.

كان إعداد وكيل عكسي وكتابة برنامج لإجراء تحسين محركات البحث قبل عشرين عامًا مقصورًا على مجموعة صغيرة من الشركات التي قامت ببناء واستضافة البنية التحتية بأنفسهم. تقدم لنا Cloudflare الآن حلاً جاهزًا. يمكنك بدء التشغيل باستخدام حساب مجاني. لتغيير كود الواجهة الأمامية ، استخدم واجهة برمجة تطبيقات JavaScript HTMLRewriter() الخاصة بـ Cloudflare.

الشفرة سهلة الفهم نسبيًا.

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

كاتب HTML ()

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

تمنحنا واجهة برمجة تطبيقات HTMLRewriter() القدرة على استخدام محددات عنصر jQuery-style للإرفاق بعناصر HTML في مصدر الصفحة الأولية لتشغيل JavaScript من موطئ القدم هذا. ستتمكن من تعديل العناصر أو مجموعة كاملة من العناصر أو حتى المستند الأساسي بطرق فعالة. يمكنك تحرير عنوان الصفحة ، على سبيل المثال. في الإنتاج ، يصبح تعديلك هو العنوان وهو ما تتم فهرسته في Google و Bing.

أحد المضاعفات التي ستواجهها هو أنه يمكنك فقط تحرير المصدر الخام ، وليس نموذج كائن المستند المائي (DOM). تتمثل إحدى الطرق السريعة لعرض المصدر الأولي في وظيفة مصدر العرض المضمنة في المتصفح. باستخدام Firefox ، يبرز مصدر العرض أخطاء التحقق باللون الأحمر ، على سبيل المثال. حتى عندما تقوم المتصفحات "بإصلاح" HTML المعطل ، يمكن عادةً إصلاح ذلك مع العامل لدينا.

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

محددات العنصر

عندما تكتشف شيئًا ما تريد إصلاحه باستخدام HTMLRewriter() ، ستحتاج إلى تضييق التغييرات وعزل العنصر لتجنب تغيير رمز أكثر مما تنوي. استخدم المحدد الأكثر تميزًا ، والذي يمكن أن يكون سهلاً للغاية عندما يكون للعناصر معرّفات فريدة. وإلا ، فابحث عن علامة الحكاية ، مثل مرجع لموقع فريد في سمات href أو src .

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

مثال يطابق أحرف البدل "fonts.g" عناصر ارتباط الجلب المسبق لإزالة تلك العناصر لـ: fonts.googleapis.com.

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

مثال يظهر مطابقتين لسمة href ، مما يؤدي إلى تضييق ملف واحد من بين العديد.

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

يستخدم المثال الأول أعلاه تطابق حرف البدل حيث يمكن أن تظهر السلسلة "fonts.g" في أي مكان في سمة href لعناصر الارتباط. إنه مثال على المطابقة التقريبية التي قد يتم إرفاقها بأكثر من عنصر رابط لإجراء مناسب ، مثل إزالة العنصر (العناصر) المطابقة ، إن وجدت.

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

عناصر الارتباط

عناصر الارتباط متعددة الأوجه بحكم سماتها المتعددة. وبالتالي ، يمكنهم خدمة عدد من الأغراض. لا ينبغي الخلط بينه وبين الروابط (كما هو الحال في الارتساء) ، فعادة ما تكون عناصر الارتباط هي المكان الذي تبدأ فيه البحث عن استراتيجيات أداء سريعة الضربات. قد تكون بعض عناصر ارتباط التحميل المسبق والاتصال المسبق تعيق الطريق بالفعل أو ربما تكون غير ضرورية تمامًا.

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

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

إزالة العناصر

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

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

 element: (el) => { el.remove(); }

باختصار ، تحدد هذه الكتلة المتغير "el" بالإشارة إلى مثيل العنصر وتستدعي كتلة التعليمات البرمجية طريقة عنصر remove() ، والتي ستجدها مفصلة في الوثائق المقابلة. جميع طرق عناصر HTMLRewriter() متاحة لك للاستخدام مع مثيلات العناصر المتطابقة. تعد إزالة العناصر من أبسط العناصر التي يجب فهمها.

الافراج عن منع عرض الموارد

يعد إلغاء حظر عناصر script أسهل بكثير من إلغاء حظر موارد ورقة الأنماط. لحسن الحظ ، لدينا سمة منطقية للإشارة إلى المتصفح أننا نريد تحميل نص برمجي بشكل غير متزامن أو تأجيله تمامًا (لأنه عندما يكون هناك وقت خمول). هذا مثالي! من ناحية أخرى ، تحتاج أوراق الأنماط إلى القليل من "الاختراق" لإلغاء حظرها - فهي تتطلب بعض جافا سكريبت المضمنة.

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

التحميل المسبق ثم استخدام سمة onload لتشغيل JavaScript لتغييرها مرة أخرى من التحميل المسبق إلى ورقة الأنماط هو "اختراق" CSS لإلغاء حظر ما هو خلاف ذلك مورد حظر العرض الطبيعي. يتيح لك استخدام this الكلمة الأساسية في JavaScript تغيير خصائصها ، بما في ذلك سمة rel ( onload نفسها). يحتوي النمط أيضًا على إعادة تعبئة للجلسات التي لا تستخدم جافا سكريبت.

هذه هي وظيفة unblockCSS() بنا والتي تنفذ الإستراتيجية باستخدام طرق العناصر الجاهزة.

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

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

تعمل الوظيفة ككتلة تعليمات برمجية قابلة لإعادة الاستخدام. قم بتبديل تحديدات العناصر الخاصة بك باستخدام HTMLRewriter() واختبر الاختلاف في إلغاء حظر أوراق CSS واحدة تلو الأخرى ، أو في مجموعات ، اعتمادًا على أسلوبك. استخدم التكتيك لتحقيق استراتيجية شاملة لإلغاء الحظر بقدر ما تستطيع. ومع ذلك ، تذكر دائمًا البحث عن المشكلات الناتجة عن التغييرات التي تطرأ على موارد CSS و Script.

أولويات البرنامج النصي

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

أفضل طريقة للتحقق من المشكلات هي مشاهدة درج وحدة التحكم ومحاكاة اتصالات الشبكة البطيئة. يمكن أن يؤدي هذا إلى تضخيم المشكلات إلى الحد الذي يجب أن تظهر فيه في DevTools. إذا تمت معالجة موارد البرنامج النصي باستخدام وحدات المعالجة المركزية (CPU) الأكثر قوة وتحميلها عبر سرعة مودم الكبل ، أو بشكل أسرع ، فمن المحتمل أن يفوتك خطأ فادح. يتم توزيع الطلبات بشكل جيد أيضًا.

ها هي وظيفتنا تتغير ، أو تضيف ، سمات غير متزامنة ومؤجلة.

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

إذا كان البرنامج النصي لا يحتوي في الأصل على غير متزامن أو مؤجل ، فمن غير الضار تشغيل طريقة عنصر removeAttribute() برمجية أكثر قابلية لإعادة الاستخدام. يمكنك تجاهل هذا بأمان إذا كنت تعمل بسرعة في مشروع لمرة واحدة حيث قد تكتب هذا بشكل مضمّن بدلاً من استدعاء دالة قمت بتعريفها مسبقًا في البرنامج النصي.

سمات البديل لكبار المسئولين الاقتصاديين

كما ذكرنا ، كان دليلنا إلى تكتيكات A / B Core Web Vitals ، حسب التصميم ، مخصصًا لنا للحصول على اختبار Edge Computing يعمل بكامل طاقته وتشغيله لإثبات المحتوى مع تحسين محركات البحث المستقبلية لمقالات المطورين والأحداث المستقبلية. خلال حدث SMX West العام الماضي (2021) ، أظهرنا استخدام Cloudflare Workers لموقع ويب ، وحققنا ألعاب Lighthouse النارية (سجلت 100 في جميع اختباراتها).

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

فيما يلي وظيفة تستخرج النص من سمات img src إلى نص alt فعال من أسماء الملفات ذات الواصلات.

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

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

اختبار لأداء أفضل ورؤية أكبر

إن الحصول على اختبار لتجربة أساليب تحسين أداء Core Web Vitals أمر مثير للإعجاب بشكل لا يصدق لأصحاب المواقع. يجب أن يكون لديك هذه القدرة في ترسانة وكالتك. إن التعزيز الطفيف لتصنيفات Google مع الدرجات الجيدة يمكن قياسه ويمكن تحقيقه إلى حد كبير لمعظم المواقع من خلال التكتيكات التي سنناقشها ونوضحها. شاهد العرض الحي في الفترة من 8 إلى 9 آذار (مارس).

يوصي فنيو تحسين محركات البحث (SEO) منذ فترة طويلة بتحسينات في الأداء لترتيب محرك البحث. لم تكن الفائدة من التصنيف أكثر وضوحًا من أي وقت مضى. حددت Google المقاييس حرفيًا وتنشر حول تأثيرها. لدينا عمال Cloudflare لتنفيذ علاجات Edge SEO ، كما هو موضح هنا بسمات alt للصور. لدينا اختبار الوكيل العكسي بفضل Cloudflare يمهد الطريق للتواصل الثري مع المطورين.