กลยุทธ์การตลาดดิจิทัล (Digital marketing)

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

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

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

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

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

การรันโปรแกรม Lighthouse CLI (Command Line Interpreter) พร้อมตัวเลือก -- ส่วนหัวพิเศษ ที่จำเป็นสำหรับการทดสอบช่วยให้เราจำลองการตั้งค่ามาตรฐานสำหรับ Core Web Vitals ได้เช่นเดียวกับที่เราทำ ด้วยการทดสอบหน้าเว็บ คุณจะต้องทำงานจากโปรแกรมจำลองเทอร์มินัล

วิธีที่ง่ายที่สุดในการติดตั้ง Lighthouse คือการใช้ NPM (Node Package Manager) เมื่อติดตั้งแล้ว ให้รันคำสั่งต่อไปนี้:

$ ประภาคาร https://sel.deckart.workers.dev
--พิเศษ -headers "{"x-host":"searchengineland.com", "x-bypass-transform":"false"}"
--form-factor=mobile
--throttling.cpuSlowdownMultiplier=4
--only-categories=performance
--ดู

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

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

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

นั่นคือสิ่งที่สวยงามของ HTMLRewriter() ของ Cloudflare เนื้อหาทั่วทั้งไซต์มักจะโหลดเป็นองค์ประกอบย่อยของหน้า HEAD ด้วยการจับคู่ที่ยืดหยุ่น เช่น jQuery แม้แต่รูปแบบที่คล้ายกัน เราสามารถเลือกองค์ประกอบย่อยของ HEAD ได้เมื่อจำเป็น คุณสามารถใช้ตัวเลือก XPath และนิพจน์ทั่วไปได้ ให้มันง่ายและค้นหาเส้นทางสัมพัทธ์ที่ขึ้นต้นด้วย “/” สำหรับแอตทริบิวต์ src หรือ href:

  ส่งคืน HTMLRewriter ใหม่ () .on ('link', { องค์ประกอบ: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on( 'script', { องค์ประกอบ: el => { const script_src = el.getAttribute ('src'); if (script_src && script_src.startsWith ('/')) { el.setAttribute ('src', 'https:// ' + host + script_src); } } }) .on('img', { องค์ประกอบ: 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 ขึ้นต้นด้วย “//” และ จากนั้นแก้ไขค่าองค์ประกอบที่เลือกในสคริปต์ พยายามที่จะจบลงโดยไม่มีข้อผิดพลาดของคอนโซลที่ไซต์จริงไม่มี

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

ผู้ปฏิบัติงานด้านเทคนิค SEO ส่วนใหญ่มีประโยชน์ในการแก้ไขพารามิเตอร์การค้นหาคำขอเพื่อประมวลผลสิ่งต่าง ๆ ในโปรแกรมฝั่งเซิร์ฟเวอร์ เช่น ผลการค้นหาของ Google การใช้อินเทอร์เฟซเดียวกัน สคริปต์ของเราจะโหลด LCP ล่วงหน้าโดยใช้พาธที่คุณใช้ในค่าพารามิเตอร์ “lcp” และส่งผ่านไปยังฟังก์ชันที่เรียกว่า addPreloadAfter() สำหรับการสอดแทรก HTML สำหรับการทดสอบ

  ฟังก์ชัน async handleRequest (คำขอ) { const { searchParams } = URL ใหม่ (request. url);  ให้ lcpHref = searchParams.get("lcp");  ส่งคืน HTMLRewriter ใหม่() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse);  }

ฟังก์ชัน addPreloadAfter() ใช้ค่า “lcpHref” ของเราจาก searchParams.get() และประมวลผลเป็น ” href” เพื่อสร้าง HTML.

const addPreloadAfter = (href) => ({ องค์ประกอบ: (el) => { el.after(``, { html: true }); } });

สังเกตตัวเลือก “html: true”? นี่คือตัวเลือกการตั้งค่า Cloudflare ที่จำเป็นสำหรับความปลอดภัยเมื่อใช้ Workers กับ HTMLRewriter() เมธอด API ที่เขียน HTML คุณจะต้องการเรียนรู้ความสามารถและข้อจำกัดของมันในการเขียนโค้ดการทดสอบของคุณเอง

KV ของ Cloudflare

หากเราจะทำสิ่งที่น่าสนใจจากระยะไกล เราจำเป็นต้องมีวิธีจัดเก็บข้อมูลถาวรระหว่างการดำเนินการของสคริปต์ โชคดีที่ Cloudflare ยังมีกลไกการจัดเก็บข้อมูลขนาดเล็กที่เรียกว่า KV ซึ่งเราสามารถผูกกับพนักงานของเราเพื่อจัดเก็บข้อมูลขนาดเล็ก ฟิลด์ 'value' สามารถเข้าถึงได้โดยคีย์ '' เข้าใจและนำไปใช้ได้ง่ายอย่างน่าประหลาดใจ เพื่อสาธิตวิธีใช้งาน เราจะเขียน hit counter เล็กๆ น้อยๆ

const counter = parseInt( รอ KV.get('เคาน์เตอร์') || 0);  if (!host || ตัวนับ > 1000) { ส่งคืนการตอบสนองใหม่ ('เกินขีด จำกัด จำนวนหรือ x-host หายไป' {สถานะ: 403});  } อื่น ๆ { รอ KV.put ("ตัวนับ" ตัวนับ + 1);  }

ค้นหารายการเมนูการนำทาง KV ภายใต้ Workers.

เพิ่ม KV Namespace และตัวแปรตัวนับที่มีค่าศูนย์สำหรับค่าเริ่มต้น

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

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

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

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

KV Namespace Bindings.

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

เมื่อคุณได้รับบริการ KV และตั้งค่าเริ่มต้นแล้ว ให้กลับไปที่ Worker และเปิด “Quick Edit” ในตัว แทนที่สิ่งที่มีด้วย

ส่วนสำคัญที่อัปเดตนี้ ซึ่งรวมถึงตัวนับ Hit และทุกอย่างอื่นที่เขียนถึงในโพสต์นี้ คลิก “บันทึกและปรับใช้” และคุณควรมีบริการและทำงานที่ URL สาธิตของ Workers ที่เผยแพร่ต่อสาธารณะ

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

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

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

ต้องการ SEO เพิ่มเติมสำหรับนักพัฒนาหรือไม่ เข้าร่วมกับเราสำหรับ

    การฝึกอบรม SMX Master Class นำโดย Detlef Johnson on 8-9 มีนาคม 2022.

    34380111 หน้าแรก

  • 378645

Back to top button