تطوير تكتيكات Core Web Vitals باستخدام Cloudflare و WebpageTest

في دليلنا إلى تكتيكات Core Web Vitals باستخدام Cloudflare و WebpageTest ، حددنا المتطلبات الأساسية لاستخدام Cloudflare كوكيل عكسي لاختبار تغييرات HTML التكتيكية باستخدام WebpageTest. تم تبسيط نسختنا من الاختبار من المفهوم الأصلي لباتريك مينان ، والذي يستخدم HTMLRewriter() لتحديد عنصر وتعديل الكود.

نحن نتعمق في هذا البرنامج التعليمي ، ولكن إذا كنت تبحث فقط عن البرنامج النصي Cloudflare Worker ، فيمكنك العثور عليه هنا.

أشارت الدفعة الأولى لدينا إلى أنها لن تواكب التغييرات في Search Engine Land. كان LCP مشفرًا بشكل ثابت وسنحتاج إليه للتفاعل مع صفحة ديناميكية وقيمها. بينما يحتوي WebpageTest ، في وقت النشر ، على مخطط شلال مدروس جيدًا وتفاصيل أكثر مما تتخيل ، إلا أنه ليس أسرع طريقة للحصول على النتائج.

منارة من سطر الأوامر

يتيح لنا تشغيل برنامج Lighthouse CLI (Command Line Interpreter) مع خيارات --extra-headers اللازمة للاختبار إمكانية محاكاة الإعدادات القياسية لـ Core Web Vitals بالطريقة التي فعلناها مع WebpageTest. ستحتاج إلى العمل من خلال محاكي طرفي.

أسهل طريقة لتثبيت Lighthouse هي باستخدام NPM (Node Package Manager). بمجرد التثبيت ، قم بتشغيل العبارة التالية:

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

تطور اختبارنا

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

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

هذا هو المكان الذي يتألق فيه جمال HTMLRewriter() الخاص بـ Cloudflare حقًا. يتم عادةً تحميل الأصول على مستوى الموقع كعناصر فرعية لعنوان الصفحة. من خلال المطابقة المرنة مثل jQuery ، وحتى البنية المماثلة ، يمكننا تحديد العناصر الفرعية لـ HEAD عند الضرورة. يمكنك استخدام محددات XPath والتعبيرات العادية. دعنا نجعل الأمر بسيطًا ونبحث عن المسارات النسبية التي تبدأ بـ "/" لسمات src أو href :

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

نحن نستفيد من قوة (وفعالية التكلفة) للحوسبة الطرفية لإجراء اختبارات مفيدة للغاية. قم بتعديل رأس طلب x-host لتحميل مواقع مختلفة في الاختبار وافتح DevTools. قد لا تكون هناك حاجة إلى التحولات ، لكن الأميال التي قطعتها ستختلف. تمنحك تجربة الواجهة الأمامية شعوراً بذلك.

ستفشل كتل التعليقات مثل المفاتيح وتتطلب القليل من التجارب (والتي قد تكون كل ما تحتاجه). على سبيل المثال ، قد تتم كتابة بعض مراجع مواد العرض بدون نقطتين HTTP. قد تحتاج إلى كتابة شرطي آخر للتحقق من المسارات التي يبدأ فيها href أو src بـ "//" ثم تعديل قيمة العنصر المحدد في البرنامج النصي. حاول أن ينتهي بك الأمر بدون أخطاء في وحدة التحكم لا يحتويها الموقع الفعلي.

تمنحك المنارة LCP

من السهل نسبيًا استرداد مراجع LCP باستخدام Lighthouse أو PageSpeed ​​Insights أو WebpageTest. بافتراض أن LCP مؤهل للتحميل المسبق ، على سبيل المثال عندما لا يكون <div> أو <p> ، وعندما لا يتم تحميله مسبقًا بالفعل ، قم بتوفير قيمة href من خلال بنية "معلمات الاستعلام" لعنوان URL (أو قم بإرجاع HTML مع form) لاختبار التغييرات التي تم إجراؤها على توقيت LCP للصفحة مع التحميل المسبق.

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

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

تأخذ الوظيفة addPreloadAfter() قيمة "lcpHref" من searchParams.get() كـ "href" لإنشاء HTML.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

لاحظ الخيار "html: true"؟ هذا هو إعداد الخيار الذي يتطلبه Cloudflare للسلامة عند استخدام أساليب واجهة برمجة تطبيقات العمال باستخدام HTMLRewriter() التي تكتب HTML. سترغب في معرفة قدراتها وقيودها على ترميز الاختبارات الخاصة بك.

KV في Cloudflare

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

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

ابحث عن عنصر قائمة تنقل KV ضمن العمال.

بمجرد إنشاء Namespace (يتم استخدام "SEL" في المثال أعلاه) ، استخدم واجهة مستخدم لوحة معلومات KV لإنشاء مفتاحك الأول (" counter " في الحالة أعلاه) وتعيين value البداية. بمجرد الإعداد ، انتقل مرة أخرى إلى لوحة معلومات العامل للواجهة المطلوبة لربط KV Namespace الجديد الخاص بنا مع Cloudflare Workers حتى يتمكنوا من الوصول إلى المفاتيح والقيم المخزنة المرتبطة بها.

ربط مساحات الأسماء KV بالعاملين

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

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

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

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

لماذا نهتم

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

يجب ألا يتطلب توحيد اختبار موقع الويب لإثبات تحسين محركات البحث للمطورين فهم الكود عندما يمكنك نسخ البرنامج النصي ولصقه في Cloudflare ، واتبع الخطوات واختبر بعض أساليب تحسين محركات البحث (SEO). تعد اختبارات Core Web Vitals موثوقة بقدر ما سنحصل عليه لتحسين نتائج RUM (مقاييس المستخدم الحقيقي) لزيادة التصنيف ، بالنظر إلى مدى اعتماد المقاييس عليها.

هل تريد المزيد من تحسين محركات البحث للمطورين؟ انضم إلينا للحصول على تدريب SMX Master Class ، بقيادة ديتليف جونسون ، في 8-9 مارس 2022.