การพัฒนากลยุทธ์ Core Web Vitals โดยใช้ Cloudflare และ WebpageTest

ในคู่มือกลยุทธ์ Core Web Vitals ของเราโดยใช้ Cloudflare และ WebpageTest เราได้สรุปข้อกำหนดพื้นฐานสำหรับการใช้ Cloudflare เป็นพร็อกซีย้อนกลับสำหรับการทดสอบการเปลี่ยนแปลง HTML เชิงกลยุทธ์ด้วย WebpageTest แบบทดสอบของเรามีความเรียบง่ายขึ้นจากแนวคิดดั้งเดิมของ Patrick Meenan ซึ่งใช้ HTMLRewriter() เพื่อเลือกองค์ประกอบและแก้ไขโค้ด

เราจะลงลึกในบทช่วยสอนนี้ แต่ถ้าคุณกำลังมองหาสคริปต์ Cloudflare Worker คุณสามารถค้นหาได้ที่นี่

งวดแรกของเราตั้งข้อสังเกตว่าจะไม่ติดตามการเปลี่ยนแปลงที่ Search Engine Land LCP ได้รับการฮาร์ดโค้ดและเราต้องการให้มีการโต้ตอบกับเพจแบบไดนามิกและค่าของเพจ ในขณะที่ WebpageTest มี แผนภูมิน้ำตกที่คิดออกมาดีที่สุดและมีรายละเอียดมากกว่าที่คุณจะจินตนาการได้ แต่ก็ไม่ใช่วิธีที่เร็วที่สุดเพื่อให้ได้ผลลัพธ์

ประภาคารจาก Command Line

การรันโปรแกรม 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

วิวัฒนาการของ Testbed ของเรา

เป้าหมายของเราคือแสดงให้เห็นถึงวิวัฒนาการจากแนวคิดดั้งเดิมสำหรับห้องทดสอบไปจนถึงโครงการที่เหมาะสมสำหรับงานกิจกรรมและบทความในอนาคตของเรา เตียงทดสอบไม่ควรจำกัดอยู่เพียงการดำเนินการประเมินประสิทธิภาพ นั่นคือจุดเริ่มต้นของเรา แต่ต้องทำงานได้ดีสำหรับสถานการณ์ต่างๆ กับเว็บไซต์ และสิ่งนี้สามารถพิสูจน์ได้ค่อนข้างยาก เราจะจัดหาวิธีการที่จะช่วย

ตัวอย่างเช่น ไซต์มักใช้เส้นทางสัมพัทธ์ไปยังทรัพยากรของเนื้อหา แทนที่จะใช้แบบสัมบูรณ์ (ด้วยโปรโตคอล HTTP และทั้งหมด) เราจะจัดหาบล็อกให้ตรงกับสิ่งเหล่านี้ เพื่อให้ HTML ใช้งานได้โดยทั่วไป หลังจากใช้สิ่งนี้แล้ว เมื่อสิ่งต่างๆ ยังคงใช้งานไม่ได้ การสลับการอ้างอิงที่ยุ่งยากระหว่างชื่อโฮสต์ของหัวข้อการทดสอบและการทดสอบมักใช้ได้ผล แม้แต่กับการละเมิดนโยบาย CORS

นั่นคือจุดที่สวยงามของ HTMLRewriter() ของ Cloudflare เนื้อหาทั่วทั้งไซต์มักจะโหลดเป็นองค์ประกอบย่อยของหน้า HEAD ด้วยการจับคู่ที่ยืดหยุ่น เช่น 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); } } })

เรากำลังใช้ประโยชน์จากพลัง (และความคุ้มค่า) ของ Edge Computing เพื่อทำการทดสอบที่เป็นประโยชน์อย่างยิ่ง แก้ไขส่วนหัวคำขอ x-host เพื่อโหลดไซต์ต่างๆ ในเบดทดสอบและเปิด DevTools อาจไม่จำเป็นต้องทำการเปลี่ยนแปลง แต่ระยะทางของคุณจะแตกต่างกันไป ประสบการณ์ส่วนหน้าช่วยให้คุณสัมผัสได้

การบล็อกความคิดเห็นเช่นสวิตช์จะล้มเหลวและต้องมีการทดลองเล็กน้อย (ซึ่งอาจเป็นเพียงสิ่งที่คุณต้องการ) ตัวอย่างเช่น การอ้างอิงเนื้อหาบางรายการอาจสะกดโดยไม่มีโคลอน HTTP คุณจะต้องเขียนเงื่อนไขอื่นเพื่อตรวจสอบเส้นทางที่ href หรือ src เริ่มต้นด้วย “//” จากนั้นแก้ไขค่าองค์ประกอบที่เลือกในสคริปต์ พยายามจบลงโดยไม่มีข้อผิดพลาดของคอนโซลที่ไซต์จริงไม่มี

ประภาคารให้ LCP . แก่คุณ

ค่อนข้างง่ายในการดึงข้อมูลอ้างอิง LCP โดยใช้ Lighthouse, PageSpeed ​​Insights หรือ WebpageTest สมมติว่า LCP มีคุณสมบัติสำหรับการโหลดล่วงหน้า เช่น เมื่อไม่ใช่ <div> หรือ <p> และเมื่อยังไม่ได้โหลดล่วงหน้า ให้ระบุค่า href ของสคริปต์ตามโครงสร้าง 'query param' ของ URL (หรือส่งคืน HTML ด้วย แบบฟอร์ม) เพื่อทดสอบการเปลี่ยนแปลงเวลา LCP ของหน้าที่มีการโหลดล่วงหน้า

ผู้ปฏิบัติงานด้านเทคนิค SEO ส่วนใหญ่มีประโยชน์ในการแก้ไขพารามิเตอร์การค้นหาคำขอเพื่อประมวลผลสิ่งต่าง ๆ ในโปรแกรมฝั่งเซิร์ฟเวอร์ เช่น ผลการค้นหาของ 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 เพื่อความปลอดภัยเมื่อใช้ Workers กับ HTMLRewriter() API ที่เขียน 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 ภายใต้ผู้ปฏิบัติงาน

เมื่อคุณสร้างเนมสเปซ (“SEL” ถูกใช้ในตัวอย่างข้างต้น) ให้ใช้ UI แดชบอร์ด KV เพื่อสร้างคีย์แรกของคุณ (' ตัว counter ' ในกรณีข้างต้น) และกำหนด value เริ่มต้น เมื่อตั้งค่าแล้ว ให้กลับไปที่แดชบอร์ดของผู้ปฏิบัติงานสำหรับอินเทอร์เฟซที่จำเป็นสำหรับผูกเนมสเปซ KV ใหม่ของเรากับ Cloudflare Workers เพื่อให้สามารถเข้าถึงคีย์และค่าที่เก็บไว้ที่เกี่ยวข้องได้

ผูกเนมสเปซ KV กับผู้ปฏิบัติงาน

เลือกผู้ปฏิบัติงานที่คุณต้องการผูกและคลิกเมนูการตั้งค่าเพื่อค้นหาเมนูย่อยสำหรับตัวแปร (โดยตรงภายใต้ทั่วไป) ขอให้สังเกตว่าคุณสามารถกำหนดตัวแปรสภาพแวดล้อม การเชื่อมโยงวัตถุที่ทนทาน (ซึ่งเราจะสำรวจในงวดต่อๆ ไป) และสุดท้าย KV Namespace Bindings คลิกแก้ไขตัวแปรและเพิ่มตัวแปรที่คุณต้องการใช้ในสคริปต์

ในกรณีต่อไปนี้ คุณสามารถดูตัวแปร ' KV ' ที่ซ้ำซ้อนซึ่งเราจะใช้ในสคริปต์ผู้ปฏิบัติงานที่เกี่ยวข้อง ซึ่งเป็นตัวแปรที่เรานำทาง การใช้ ' KV ' ของเราได้รับการตั้งชื่อเพื่อการอธิบาย เลือกจากเมนูดร็อปดาวน์ บันทึก แล้วคุณจะสามารถใช้ variable ของคุณในสคริปต์ได้ทันที สร้างสคริปต์และการรวมเนมสเปซ KV ได้มากเท่าที่คุณต้องการ

เคล็ดลับคือการไม่ผูกมัดตัวแปรที่คุณต้องการใช้ในผู้ปฏิบัติงาน มันยืดหยุ่นได้มากจนคุณรู้สึกอิสระที่จะครุ่นคิดและทำเรื่องยุ่งในตอนแรก คุณอาจจะสามารถจัดระเบียบมันเป็นสิ่งที่เหนียวแน่นในภายหลัง ซึ่งเป็นสิ่งที่คุณต้องการเพื่อให้สามารถสร้างแอปพลิเคชันต้นแบบหรือสร้าง Microservices เพื่อใช้ในแอปพลิเคชันของคุณ

เมื่อคุณได้รับบริการ KV และตั้งค่าเริ่มต้นแล้ว ให้กลับไปที่ Worker และเปิด "Quick Edit" ในตัว แทนที่สิ่งที่มีด้วยส่วนสำคัญที่อัปเดตนี้ ซึ่งรวมถึงตัวนับจำนวนการเข้าชม และทุกอย่างอื่นที่เขียนถึงในโพสต์นี้ คลิก "บันทึกและปรับใช้" และคุณควรมีบริการและทำงานที่ URL สาธิตของ Workers ที่เผยแพร่ต่อสาธารณะ

ทำไมเราถึงสนใจ

คู่มือฉบับดั้งเดิมของเรามีขึ้นเพื่อกระตุ้นความอยากอาหารของคุณ ทำให้คุณรู้สึกตื่นเต้นที่จะเริ่มต้นและตื่นเต้นกับการเรียนรู้ที่มีคุณค่ามากขึ้น เพื่อให้เป็นไปตามนั้น เรามีแพลตฟอร์มฟรีและชุดโค้ดที่เข้าใจง่ายพอที่จะเข้าใจได้เอง ควบคู่ไปกับกระบวนการที่น่าจะง่ายพอที่จะปฏิบัติตามและบรรลุผลการทดสอบ

การทดสอบเว็บไซต์ที่ได้มาตรฐานเพื่อแสดง SEO แก่นักพัฒนาซอฟต์แวร์ไม่ควรต้องการโค้ดที่เข้าใจเมื่อคุณสามารถคัดลอกและวางสคริปต์ลงใน Cloudflare ทำตามขั้นตอนและทดสอบกลยุทธ์ SEO บางอย่างได้ การทดสอบ Core Web Vitals มีความน่าเชื่อถือพอๆ กับที่เราจะได้รับจากการปรับปรุงคะแนนประสิทธิภาพ RUM (ตัวชี้วัดผู้ใช้จริง) เพื่อเพิ่มอันดับในการจัดอันดับ โดยพิจารณาว่าเมตริกนั้นขึ้นอยู่กับมันอย่างไร

ต้องการ SEO เพิ่มเติมสำหรับนักพัฒนาหรือไม่ เข้าร่วมการฝึกอบรม SMX Master Class นำโดย Detlef Johnson ในวันที่ 8-9 มีนาคม 2022