ฟังก์ชันสำหรับ Core Web Vitals Tactics ด้วย HTMLRewriter ของ Cloudflare

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

เราไม่ต้องทำอย่างนั้นอีกต่อไป

การตั้งค่าพร็อกซีย้อนกลับและซอฟต์แวร์การเขียนสำหรับการทำ SEO เมื่อ 20 ปีที่แล้ว จำกัดเฉพาะบริษัทเล็กๆ ที่สร้างและโฮสต์โครงสร้างพื้นฐานเอง ตอนนี้ Cloudflare มอบโซลูชันแบบเบ็ดเสร็จให้กับเรา คุณสามารถเริ่มต้นใช้งานได้โดยใช้บัญชีฟรี หากต้องการเปลี่ยนโค้ดส่วนหน้า ให้ใช้ HTMLRewriter() JavaScript API ของ Cloudflare

รหัสค่อนข้างเข้าใจง่าย

ด้วย Core Web Vitals ความฉับไว ความต้องการที่รับรู้ และความรวดเร็วของความสามารถในการวนรอบการทดสอบต่างๆ ที่แสดงคุณค่าและความประทับใจในท้ายที่สุด แพลตฟอร์มพื้นฐานพร้อมให้คุณใช้งานตามขั้นตอนที่อธิบายไว้ในคู่มือของเรา เราจะเขียนฟังก์ชันสำหรับการเปลี่ยนแปลงทั่วไป เพื่อให้คุณสามารถเริ่มทดสอบยุทธวิธีจริงได้ทันที

HTMLRewrite()

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

HTMLRewriter() API ช่วยให้เราใช้ตัวเลือกองค์ประกอบสไตล์ jQuery เพื่อแนบกับองค์ประกอบ HTML ในแหล่งที่มาของหน้าดิบเพื่อเรียกใช้ JavaScript จากที่ตั้งหลักนั้น คุณจะสามารถแก้ไของค์ประกอบ กลุ่มขององค์ประกอบทั้งหมด หรือแม้แต่เอกสารฐานได้อย่างมีประสิทธิภาพ คุณสามารถแก้ไขชื่อเพจได้ ตัวอย่างเช่น ในการผลิต การแก้ไขของคุณ จะกลายเป็น ชื่อและเป็นสิ่งที่ได้รับการจัดทำดัชนีที่ Google และ Bing

ความซับซ้อนอย่างหนึ่งที่คุณจะพบคือคุณสามารถแก้ไขแหล่งข้อมูลดิบเท่านั้น ไม่ใช่ Document Object Model (DOM) ที่ไฮเดรท วิธีหนึ่งที่รวดเร็วในการดูแหล่งข้อมูลดิบคือการใช้ฟังก์ชันการดูแหล่งที่มาในตัวของเบราว์เซอร์ ด้วย Firefox มุมมองแหล่งที่มาจะเน้นข้อผิดพลาดในการตรวจสอบความถูกต้องด้วยสีแดง เป็นต้น แม้ว่าเบราว์เซอร์จะ "แก้ไข" HTML ที่ใช้งานไม่ได้ แต่สิ่งนี้ก็สามารถแก้ไขได้ด้วยพนักงานของเรา

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

ตัวเลือกองค์ประกอบ

เมื่อคุณพบบางสิ่งที่คุณต้องการแก้ไขด้วย HTMLRewriter() คุณจะต้องจำกัดการเปลี่ยนแปลงให้แคบลงและแยกองค์ประกอบออกเพื่อหลีกเลี่ยงการเปลี่ยนแปลงโค้ดมากกว่าที่คุณตั้งใจ ใช้ตัวเลือกที่พิเศษสุดซึ่งทำได้ง่ายมากเมื่อองค์ประกอบมี ID ที่ไม่ซ้ำกัน มิฉะนั้น ให้ค้นหาป้ายบอกเล่า เช่น การอ้างอิงถึงตำแหน่งที่ไม่ซ้ำกันใน href หรือ src

คุณจะพบกับความสามารถในการใช้อักขระตัวแทนและ "โหมดคำสั่ง" นิพจน์ทั่วไปสไตล์ 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 ใหม่สำหรับอ็อบเจ็กต์ที่กำหนดไว้ก่อนหน้านี้ ซึ่งในบริบทนี้ อาจมีการทำวิศวกรรมมากเกินไป

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

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

โดยสรุป บล็อกนี้กำหนดตัวแปร "el" โดยอ้างอิงถึงอินสแตนซ์ขององค์ประกอบ และบล็อกโค้ดจะเรียกใช้เมธอดองค์ประกอบ remove() ในตัว ซึ่งคุณจะพบรายละเอียดในเอกสารประกอบที่เกี่ยวข้อง วิธีการองค์ประกอบ HTMLRewriter() ทั้งหมดพร้อมให้คุณใช้กับอินสแตนซ์ของการจับคู่องค์ประกอบของคุณ การนำองค์ประกอบออกเป็นหนึ่งในองค์ประกอบที่เข้าใจง่ายกว่า

เลิกบล็อกการบล็อกทรัพยากรการเรนเดอร์

การเลิกบล็อกองค์ประกอบ script ทำได้ง่ายกว่าการเลิกบล็อกทรัพยากรของสไตล์ชีต โชคดีที่เรามีแอตทริบิวต์บูลีนสำหรับส่งสัญญาณให้เบราว์เซอร์ทราบว่าเราต้องการโหลดสคริปต์แบบอะซิงโครนัสหรือเลื่อนออกไปทั้งหมด (เมื่อมีเวลาว่าง) ที่เหมาะ! ในทางกลับกัน สไตล์ชีตต้องการ "แฮ็ก" เล็กน้อยเพื่อปลดบล็อก — พวกเขาต้องการ Javascript แบบอินไลน์

โดยพื้นฐานแล้ว เราเปลี่ยนการอ้างอิงองค์ประกอบลิงก์ของสไตล์ชีตเป็นการโหลดล่วงหน้าเพื่อเลิกบล็อก แต่นั่นเปลี่ยนลักษณะขององค์ประกอบลิงก์เป็นแบบที่กฎของสไตล์จะไม่ถูกนำไปใช้ โหลดล่วงหน้าดาวน์โหลดทรัพยากรเพื่อเก็บไว้ในแคชในเครื่อง พร้อมเมื่อจำเป็น แต่นั่นแหล่ะ DevTools จะเตือนคุณเมื่อมีการโหลดทรัพยากรไว้ล่วงหน้าและไม่ได้ใช้อย่างเหมาะสม นั่นคือเมื่อคุณรู้ว่าคุณสามารถลบออกได้!

การโหลดล่วงหน้าแล้วใช้แอตทริบิวต์ onload เพื่อเรียกใช้ JavaScript เพื่อเปลี่ยนกลับจากการโหลดล่วงหน้าเป็นสไตล์ชีตคือ "แฮ็ก" ของ CSS เพื่อปลดบล็อกสิ่งที่เป็นอย่างอื่นคือทรัพยากรการบล็อกการแสดงผลตามธรรมชาติ การใช้คีย์เวิร์ด this ของ JavaScript ทำให้คุณสามารถเปลี่ยนคุณสมบัติของมันได้ รวมถึงแอตทริบิวต์ rel (และแอตทริบิวต์ onload เอง) รูปแบบนี้มีโฆษณาทดแทนสำหรับเซสชันที่ไม่ใช่ JavaScript เช่นกัน

นี่คือ 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 ที่ทรงพลังกว่าและโหลดด้วยความเร็วเคเบิลโมเด็มหรือเร็วกว่า เป็นไปได้ที่คุณจะพลาดข้อผิดพลาดร้ายแรง คำขอได้รับการเว้นระยะห่างอย่างดีเช่นกัน

นี่คือฟังก์ชันของเราที่เปลี่ยนแปลงหรือเพิ่มแอตทริบิวต์ async และ defer

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

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

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

แอตทริบิวต์ Alt สำหรับ SEO

ดังที่กล่าวไว้ คู่มือกลยุทธ์ A/B Core Web Vitals ของเราได้รับการออกแบบมาเพื่อให้เรามี Edge Computing ที่ทำงานได้อย่างสมบูรณ์ทดสอบและใช้งานเพื่อแสดงเนื้อหาที่มี SEO ในอนาคตสำหรับบทความของ Developers และกิจกรรมในอนาคต ระหว่างงาน 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 Performance Optimization ที่หลากหลายนั้นน่าประทับใจอย่างเหลือเชื่อสำหรับเจ้าของเว็บไซต์ คุณควรมีความสามารถนี้ในคลังแสงเอเจนซี่ของคุณ การจัดอันดับของ Google ที่เพิ่มขึ้นเล็กน้อยด้วยคะแนนที่ดีนั้นทั้งสามารถวัดผลได้และส่วนใหญ่สามารถทำได้สำหรับไซต์ส่วนใหญ่ผ่านกลยุทธ์ที่เราจะพูดคุยและสาธิต ติดตามชมการแสดงสด 8-9 มี.ค.

ช่างเทคนิค SEO ได้แนะนำการปรับปรุงประสิทธิภาพมาเป็นเวลานานสำหรับการจัดอันดับของเครื่องมือค้นหา ประโยชน์ของการจัดอันดับไม่เคยชัดเจน Google กำหนดเมตริกและเผยแพร่เกี่ยวกับผลกระทบอย่างแท้จริง เรามี Cloudflare Workers เพื่อใช้การแก้ไข Edge SEO ดังที่แสดงไว้ที่นี่พร้อมแอตทริบิวต์ alt สำหรับรูปภาพ การทดสอบพร็อกซีย้อนกลับของเราโดยอาศัย Cloudflare กำหนดเวทีสำหรับการสื่อสารที่หลากหลายกับนักพัฒนา