คำแนะนำของคุณเกี่ยวกับกลยุทธ์ Core Web Vitals โดยใช้ Cloudflare และ WebpageTest

เผยแพร่แล้ว: 2022-01-12

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

เราใช้ชุดสาธิตที่ดีใน Core Web Vitals Site Clinic เมื่อเดือนธันวาคมปีที่แล้วใน SMX Build: SEO สำหรับนักพัฒนา เราจะใช้สิ่งนี้ต่อไปในการฝึกอบรม SMX Master Class ที่กำลังจะมีขึ้น และจากนี้ไปพร้อมกับโพสต์ชุด SEO สำหรับนักพัฒนาซอฟต์แวร์ของเรา

ต่อไปนี้คือวิธีทดสอบคะแนน Core Web Vitals และการเปลี่ยนแปลงโค้ดโดยใช้ Cloudflare Workers เป็น reverse proxy และ WebpageTest บริการทั้งหมดเหล่านี้ฟรี และแน่นอนว่าเราไม่ใช่คนแรกที่ใช้บริการ Patrick Meenan ผู้พัฒนา WebpageTest คิดขึ้นแล้ว เราจะสรุปวิธีการเริ่มต้นโดยไม่ต้องยกของหนัก

Cloudflare และการทดสอบหน้าเว็บ

แอป Cloudflare Workers ช่วยให้เราทดสอบพร็อกซีย้อนกลับและแปลงรหัสโดยใช้สภาพแวดล้อมพร็อกซี่ แม้ว่าจะมีสนามเด็กเล่นที่ cloudflareworkers.com แต่ URL ที่กระจัดกระจายตามที่อยู่นั้นทำให้เราไม่สามารถทดสอบได้โดยไม่ต้องใช้บัญชี Cloudflare (ใช้งานได้ฟรี) คุณไม่จำเป็นต้องมีบัญชี WebpageTest

เมื่อคุณมีบัญชี Cloudflare แล้ว ให้ไปที่ Workers แล้วคลิกเพื่อสร้างพนักงานใหม่ด้วยปุ่ม Create a Service สิ่งนี้จะเติมตัวอย่างผู้ปฏิบัติงาน JavaScript ด้วยตัวแก้ไข UI ที่คุณสามารถเข้าถึงได้ด้วยปุ่มแก้ไขด่วน ผู้ปฏิบัติงานแต่ละคนที่คุณสร้างจะได้รับ URL ที่ไม่ซ้ำกัน คุณสามารถเปลี่ยนชื่อได้ตลอดเวลา เราตั้งค่าไว้ที่: https://sel.deckart.workers.dev เพื่อจุดประสงค์นี้

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

นำทางการทดสอบด้วย ModHeader

เราจะใช้ ModHeader ซึ่งรองรับเบราว์เซอร์หลักๆ ในกรณีของเรา เราได้ติดตั้งส่วนขยายของ Chrome และเพิ่มส่วนหัวที่กำหนดเองสองรายการดังที่แสดงด้านล่าง ส่วนหัว x-host จัดเตรียมโฮสต์ที่เราต้องการพร็อกซี่สำหรับการทดสอบของเรา และส่วนหัว x-bypass-transform จะเปิดและปิดการแปลงเพื่อให้เราสามารถทดสอบความแตกต่างได้

เมื่อตั้งค่า x-bypass-transform เป็นค่า "จริง" การแปลงจะปิด จากนั้นเราสามารถดูแหล่งที่มาเพื่อค้นหากลวิธีในการทดสอบ ด้วยส่วนหัว x-host ตามที่แสดงด้านบน คุณสามารถนำทางไปยัง URL ของผู้ปฏิบัติงาน และคุณควรจะสามารถเห็นหน้าแรกของ Search Engine Land ดูซอร์สโค้ดของมัน และเปิด DevTools

การตั้งคนงานของคุณเอง

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

URL ของพร็อกซีที่ใช้ค่าส่วนหัว x-host
เปลี่ยนคำขอที่มี ค่าส่วนหัวที่ยอมรับด้วย “text/html” ในสตริง
ข้ามการแปลงเมื่อค่าส่วนหัว x-bypass-transform เป็นจริง
แปลง HTML เมื่อส่วนหัว x-bypass-transform หายไปหรือค่าเป็นเท็จ

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

การตั้งค่า WebpageTest สำหรับการเปรียบเทียบ

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

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

จุดเริ่มต้นของเราคือ WebpageTest ที่มี URL (และไม่ใช่ reverse proxy) เนื่องจาก URL ของ Cloudflare Worker มีเงื่อนไขที่แตกต่างจากผู้ให้บริการโฮสต์ต้นทาง ตัวอย่างเช่น โฮสต์อาจทำงานโดยใช้โปรโตคอล HTTP/1.1 รุ่นเก่า ในขณะที่ Cloudflare จะอัปเกรดเป็น HTTP/2 โดยเป็นส่วนหนึ่งของบริการ ควรใช้รายงาน WebpageTest ฉบับแรกเพื่อพัฒนากลยุทธ์

ต่อไป เราจะเรียกใช้การทดสอบสคริปต์ที่ WebpageTest เพื่อจัดหาส่วนหัวที่กำหนดเองซึ่งจำเป็นสำหรับการทดสอบ A/B การเปลี่ยนแปลงของเราโดยใช้ reverse proxy URL ในการจำลองเงื่อนไข Core Web Vitals WebpageTest มีปุ่มที่ง่ายต่อการค้นหา เป็นเรื่องปกติที่จะใช้สิ่งนี้สำหรับการทดสอบครั้งแรก คุณจะต้องแก้ไขการตั้งค่าในการทดสอบครั้งต่อๆ ไป และหน้าปุ่ม Core Web Vitals ไม่มี UI สำหรับสิ่งนั้น

ให้ใช้การทดสอบหน้าแรกที่เป็นค่าเริ่มต้นและใส่ URL ต้นทางในฟิลด์อินพุตทดสอบแทน เปลี่ยนเมนูดรอปดาวน์ของเบราว์เซอร์เพื่อเลือก “Motorola G (gen 4)” เปิดกล่องโต้ตอบการตั้งค่าขั้นสูงและเปลี่ยนเมนูดรอปดาวน์การเชื่อมต่อเพื่อเลือก “4G (9 Mbps, 170ms RTT)” คลิกไปที่แท็บ "ขั้นสูง" และมองหาฟิลด์ส่วนหัวที่กำหนดเองซึ่งเราจะเพิ่มส่วนหัวต่อไปนี้

เราจะไม่ข้ามการแปลงในขณะนี้ ดังนั้นเราจึงตั้งค่าเป็นเท็จ ต่อไปเราต้องสคริปต์การทดสอบเพื่อให้ WebpageTest ไม่สนใจว่าเราใส่ https://searchengineland.com ในช่องทดสอบและจะดึงจาก reverse proxy ซึ่งจำเป็นเพื่อให้การทดสอบสามารถสลับโฮสต์ได้อย่างถูกต้อง เอกสาร HTML พื้นฐาน สลับไปที่แท็บสคริปต์และเพิ่มสิ่งต่อไปนี้

คุณจะต้องการแทนที่สตริง URL ทั้งหมดเพื่อให้ตรงกับการทดสอบของคุณเอง เมื่อคุณตั้งค่า Cloudflare แล้ว การรันการทดสอบตามสคริปต์ คุณจะสามารถได้รับคิวคำขอแบบทีละขั้นพร้อมการกำหนดเวลาและรายละเอียดมากเกินพอที่จะพัฒนากลวิธีในการปรับปรุง Core Web Vitals กับหน้าเว็บเกือบทั้งหมด หน้าเว็บส่วนใหญ่มีพร็อกซี่ได้ง่าย แต่ระยะของคุณอาจแตกต่างกันไป

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

Core Web Vitals เป็นปัจจัยในการจัดอันดับประสบการณ์ผู้ใช้ Google อาจไม่ใช่การเพิ่มประสิทธิภาพที่แข็งแกร่งที่สุดในอันดับของคุณถัดจากการเพิ่มประสิทธิภาพชื่อหน้า Google บันทึกไว้ว่าจะช่วยปรับปรุงอันดับของคุณโดยขึ้นอยู่กับคะแนนของคุณ พวกเขาระบุว่าคุณไม่จำเป็นต้องให้ Vitals ทั้งหมดทำคะแนนดีเพื่อที่จะได้รับผลประโยชน์ คะแนนที่เหมาะสมที่สุดของคุณคือ 90+ และเมื่อคุณถึงเกณฑ์แล้ว คะแนน 90s ที่สูงกว่านั้นไม่ได้ดีไปกว่าตัวมันเอง 90