Core Web Vitals คืออะไร (และคุณจะปรับปรุงได้อย่างไร)

เผยแพร่แล้ว: 2022-07-27

สารบัญ

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

    เพื่อช่วยผู้ดูแลเว็บเพิ่มประสิทธิภาพไซต์ของตนเพื่อความเร็ว Google ได้เปิดตัว Core Web Vitals ในเดือนพฤษภาคม 2020 ซึ่งเป็นชุดเมตริกที่วัดประสิทธิภาพของแง่มุมที่สำคัญของประสบการณ์ผู้ใช้ ในบทความนี้ เราจะมาดูกันว่า Core Web Vitals คืออะไรและคุณจะปรับปรุงได้อย่างไร

    มาดำน้ำกันเถอะ!

    เมตริก 3 Core Web Vitals คืออะไร

    Core Web Vitals เป็นความคิดริเริ่มของ Google ที่จะช่วยผู้เผยแพร่โฆษณาและเจ้าของเว็บไซต์ในการวัดคุณภาพประสบการณ์ผู้ใช้ (UX) และระบุจุดที่พวกเขาต้องปรับปรุง

    ความคิดริเริ่มนี้ประกอบด้วย Core Web Vitals สามรายการที่มุ่งเน้นไปที่การโหลด การโต้ตอบ และความเสถียรของภาพ: Largest Contentful Paint, Cumulative Layout Shift และ First Input Delay

    ระบายสีเนื้อหาที่ใหญ่ที่สุด

    Largest Contentful Paint (LCP) เป็นตัวชี้วัดประสิทธิภาพที่วัดระยะเวลาที่ใช้ในการโหลดเนื้อหาหลักของหน้าเว็บ โดยทั่วไปเนื้อหาหลักถูกกำหนดให้เป็นองค์ประกอบรูปภาพหรือข้อความที่ใหญ่ที่สุดในหน้า

    LCP เป็นหนึ่งในตัวชี้วัดหลายอย่างที่ Google ใช้ในการประเมินประสิทธิภาพของหน้าเว็บ

    โดยทั่วไป เพจที่มีเวลา LCP น้อยกว่า 2.5 วินาทีจะถือว่าทำงานได้ดี ในขณะที่หน้าที่มีเวลา LCP มากกว่า 4 วินาทีจะถือว่ามีประสิทธิภาพต่ำ หน้าที่มีเวลา LCP มากกว่า 10 วินาทีถือว่ามีประสิทธิภาพต่ำมาก

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

    เลื่อนเค้าโครงสะสม

    หลายคนเคยประสบกับปรากฏการณ์ที่น่าผิดหวังจากการพยายามคลิกลิงก์หรือปุ่มบนเว็บไซต์ เพียงเพื่อย้ายออกจากใต้เคอร์เซอร์ในวินาทีสุดท้าย

    ปรากฏการณ์นี้เรียกว่าการเปลี่ยนเลย์เอาต์สะสม (CLS) เป็นการวัดว่าเนื้อหาเปลี่ยนแปลงตำแหน่งมากน้อยเพียงใดเมื่อผู้ใช้โต้ตอบกับเพจ CLS เป็นปัญหาเพราะอาจทำให้ผู้ใช้คลิกที่สิ่งผิดหรือเพียงแค่ยอมแพ้และออกจากหน้าโดยสิ้นเชิง

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

    ความล่าช้าในการป้อนข้อมูลครั้งแรก

    First Input Delay (FID) คือการวัดระยะเวลาที่ผู้ใช้โต้ตอบกับเพจเป็นครั้งแรก เป็นตัวชี้วัดที่สำคัญสำหรับการวัดการตอบสนองของหน้าและประสบการณ์ของผู้ใช้โดยรวมบนเว็บไซต์

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

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

    เพื่อปรับปรุงคะแนน FID นักพัฒนาต้องให้ความสำคัญกับการลดเวลาดำเนินการ JavaScript

    นอกจากนี้ยังมี Vitals เพิ่มเติมอีกด้วย

    • Time To First Byte (TTFB) : Time to First Byte คือระยะเวลาที่เบราว์เซอร์ใช้เพื่อรับข้อมูลไบต์แรกจากเซิร์ฟเวอร์ เวลาที่ใช้อาจได้รับผลกระทบจากปัจจัยหลายประการ รวมถึงระยะห่างระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ ขนาดของแพ็กเก็ตข้อมูล และความเร็วของการเชื่อมต่อ
    • First Contentful Paint (FCP) : First Contentful Paint คือระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงเนื้อหาแรกจากหน้าเว็บ เนื้อหานี้อาจเป็นรูปภาพ ข้อความ หรือองค์ประกอบอื่นๆ กล่าวอีกนัยหนึ่งก็คือเวลาในการโหลดที่รับรู้
    • Total Blocking Time (TBT) : Total Blocking Time คือระยะเวลาที่เว็บไซต์ใช้จาก First Contentful Paint ให้มีการโต้ตอบอย่างสมบูรณ์
    • Time To Interactive (TTI) : Time To Interactive คือระยะเวลาที่ใช้ในการโต้ตอบกับเพจ ซึ่งรวมถึงความสามารถในการตอบสนองต่อการป้อนข้อมูลของผู้ใช้และโหลดเนื้อหาใหม่เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้

    Core Web Vitals อยู่ภายใต้เงื่อนไขของ Google Page Experience ซึ่งรวมถึงด้านอื่นๆ ด้วย:

    • ความเป็นมิตรกับมือถือ: หมายถึงความง่ายสำหรับผู้ใช้ในการโต้ตอบกับเว็บไซต์ของคุณบนอุปกรณ์มือถือ เว็บไซต์ที่ไม่เหมาะกับอุปกรณ์พกพาอาจใช้งานยากบนหน้าจอขนาดเล็ก และอาจป้องกันไม่ให้ผู้ใช้เข้าถึงคุณสมบัติบางอย่างได้
    • HTTPS: หมายถึงว่าเว็บไซต์ของคุณใช้การเชื่อมต่อที่ปลอดภัยหรือไม่ เว็บไซต์ที่ใช้ HTTPS มีโอกาสน้อยที่จะถูกบุคคลที่สามสกัดกั้น ดังนั้นจึงถือว่าปลอดภัยกว่า
    • โฆษณาคั่นระหว่างหน้าที่ล่วงล้ำ: นี่คือป๊อปอัปหรือรูปแบบการโฆษณาอื่นๆ ที่อาจเป็นการล่วงล้ำและก่อกวน โดยเฉพาะอย่างยิ่งบนอุปกรณ์เคลื่อนที่ มักจะปิดได้ยาก และอาจป้องกันไม่ให้ผู้ใช้เห็นเนื้อหาที่มีอยู่ที่กำลังมองหา
    Twitter จาก Jon Henshaw เกี่ยวกับ core Web Vitals

    Core Web Vitals ส่งผลต่อการจัดอันดับหรือไม่

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

    Core Web Vitals วัดความแตกต่างสองสามอย่าง ซึ่งทั้งหมดนี้รวมอยู่ใน Page Experience

    เหตุใด Core Web Vitals จึงมีความสำคัญ

    การเข้าชมแบบออร์แกนิกมากขึ้น

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

    UX .ที่เหนือกว่า

    ประสบการณ์ผู้ใช้ (UX) เป็นส่วนสำคัญของความสำเร็จของเว็บไซต์ใดๆ เป็นสิ่งที่กำหนดว่าผู้ใช้จะอยู่ในเว็บไซต์ของคุณหรือคลิกออกไปด้วยความหงุดหงิด

    จากข้อมูลของ HubSpot ลูกค้า 93% จะออกหากเว็บไซต์โหลดไม่เร็วพอ และ Core Web Vitals เป็นการวัดความเร็วของเพจโดยตรงและเป็นหนึ่งใน UX ทางอ้อม เมื่อพิจารณาถึงความสำคัญของ UX สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าไซต์ทั้งหมดของคุณรวดเร็วและตอบสนอง

    ปรับปรุงอัตราการแปลง

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

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

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

    ฉันจะตรวจสอบ Core Web Vitals บน Google ได้อย่างไร

    การวัด Core Web Vitals นั้นค่อนข้างง่าย

    ก่อนอื่น คุณสามารถเริ่มต้นด้วย Google Search Console:

    Google Search Console

    ในการเข้าถึง Core Web Vitals จาก GSC คุณต้องเข้าสู่แดชบอร์ดและคลิกที่นี่:

    สกรีนช็อตของตัวเลือก Core Web Vitals ใน Google Search Console

    คุณจะพบกับรายงานสองฉบับ รายงานฉบับหนึ่งสำหรับมือถือ:

    สกรีนช็อตของ Core Web Vitals สำหรับมือถือใน Google Search Console

    อื่น ๆ สำหรับเดสก์ท็อป:

    สกรีนช็อตของ Core Web Vitals สำหรับเดสก์ท็อปใน Google Search Console

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

    เมื่อคลิกที่รายละเอียด คุณจะเห็นว่า URL ใดที่ Google ถือว่าไม่เป็นมิตรกับผู้ใช้

    CWV ใน GSC: URL ใดที่ Google พิจารณาว่าไม่เป็นมิตรกับผู้ใช้

    นอกจากนี้ยังมีวิธีที่สองในการวัด Core Web Vitals ซึ่งก็คือผ่าน PageSpeed ​​Insights

    PageSpeed ​​Insights

    ข้อแตกต่างคือคุณสามารถเข้าถึงรายงานของไซต์ใดก็ได้ ไม่ใช่แค่ไซต์ที่คุณมีสิทธิ์เข้าถึง GSC แต่จะไม่แสดงว่า URL ใดทั่วทั้งโดเมนต้องปรับปรุง คุณต้องไปทีละคนซึ่งน่าเบื่อเกินไป PageSpeed ​​Insights นำเสนอแหล่งข้อมูลเดียวกัน รายงานประสบการณ์ผู้ใช้ Chrome

    PageSpeed ​​Insights ส่วนใหญ่จะใช้เพื่อดู URL ที่เฉพาะเจาะจงในเชิงลึกมากขึ้น เนื่องจาก Google Search Console จะแสดงให้คุณเห็นเฉพาะภาพที่ใหญ่ขึ้นว่าหน้าใดต้องแก้ไข

    Search Console จะนำคุณไปยัง PageSpeed ​​Insights:

    ภาพหน้าจอของ Page Speed ​​Index

    และนี่คือสิ่งที่ปรากฏขึ้นหลังจากเข้าสู่ไซต์:

    Core Web Vitals

    รายงานฉบับเต็มว่ามีอะไรผิดพลาด

    ภาพหน้าจอของสิ่งที่ผิดปกติกับ Core Web Vitals

    ยิ่งไปกว่านั้น คุณจะพบกับโอกาส:

    สกรีนช็อตของโอกาสสำหรับ Core Web Vitals

    PageSpeed ​​Insights ประมาณการว่าคุณจะได้รับผลตอบแทนเท่าใดเมื่อแก้ไขปัญหาที่นำเสนอ ยังคงเป็นการประมาณคร่าวๆ ตามหลักเกณฑ์สำหรับเว็บไซต์โดยเฉลี่ยตาม Google ไม่ได้สะท้อนถึงประสบการณ์ของผู้ใช้ทั้งหมด แต่อาจเป็นจุดเริ่มต้นที่ดีของการวิเคราะห์

    ด้านล่างคือการวินิจฉัย:

    ภาพหน้าจอของการวินิจฉัย Core Web Vitals

    และที่นี่ คุณสามารถดูองค์ประกอบที่แน่นอนในโค้ดที่ทำให้เกิดปัญหาได้

    เมื่อคุณรู้วิธีเข้าถึงแล้ว คุณอาจถามว่าจะปรับปรุง Core Web Vitals สำหรับไซต์ของคุณได้อย่างไร

    นี่คือสิ่งที่คุณสามารถทำได้!

    การเพิ่มประสิทธิภาพ Core Web Vitals คืออะไร

    การเพิ่มประสิทธิภาพ Core Web Vitals ทั้งหมดขึ้นอยู่กับเว็บไซต์และปัญหาเฉพาะของเว็บไซต์ อย่างไรก็ตาม เรามาพูดถึงเรื่องที่พบบ่อยที่สุดกันดีกว่าและ สิ่ง ที่แก้ไขได้

    ระบายสีเนื้อหาที่ใหญ่ที่สุด

    การเพิ่มประสิทธิภาพภาพ

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

    ปลั๊กอิน WP:

    • Optimus
    • Smush
    • เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW

    กำลังโหลดทรัพยากรล่วงหน้า

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

    ปลั๊กอิน WP:

    • เพิ่มประสิทธิภาพอัตโนมัติ
    • ผลงาน

    การปิดกั้นการแสดงผล

    Render-blocking เป็นคำที่ใช้อธิบายการกระทำขององค์ประกอบบางอย่างบนหน้าเว็บที่ป้องกันไม่ให้หน้าแสดงผลอย่างถูกต้อง องค์ประกอบเหล่านี้อาจรวมถึงไฟล์ JavaScript และ CSS เป็นต้น ปัญหาของการบล็อกการแสดงผลคืออาจทำให้หน้าโหลดช้าหรือไม่โหลดเลย

    มีสองสามวิธีในการแก้ไขการบล็อกการแสดงภาพ

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

    ปลั๊กอิน WP:

    • เพิ่มประสิทธิภาพอัตโนมัติ
    • WP Rocket
    • WP NitroPack

    เลื่อนเค้าโครงสะสม

    พื้นที่สำหรับการฝัง iframe และโฆษณา

    เมื่อเว็บไซต์มีเนื้อหา เช่น วิดีโอ รูปภาพ หรือโฆษณา การจัดสรรพื้นที่ว่างให้เพียงพอบนหน้าเป็นสิ่งสำคัญ เพื่อให้แน่ใจว่าเค้าโครงหน้าจะไม่หยุดชะงักเมื่อเนื้อหาถูกโหลด และช่วยป้องกันสิ่งที่เรียกว่า Cumulative Layout Shift (CLS) CLS เป็นการวัดว่าหน้า 'กระตุก' มากเพียงใดเมื่อมีการโหลดเนื้อหา และอาจทำให้ผู้ใช้ดูไม่น่าเชื่อถือ ด้วยการสงวนพื้นที่สำหรับเนื้อหาล่วงหน้า นักพัฒนาเว็บสามารถช่วยลด CLS และสร้างประสบการณ์ที่ราบรื่นและมุ่งเน้นผู้ใช้มากขึ้น

    เพิ่มมิติให้กับภาพ

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

    โหลดฟอนต์ล่วงหน้า

    แม้แต่เว็บไซต์ที่ออกแบบมาดีที่สุดก็อาจประสบปัญหา Cumulative Layout Shift (CLS) กรณีนี้มักเกิดขึ้นเมื่อโหลดฟอนต์ของเว็บไม่ถูกต้อง ส่งผลให้ 'แฟลชข้อความที่ไม่ได้จัดรูปแบบ' (FOUT) หรือ 'แฟลชข้อความที่มองไม่เห็น' (FOIT) แม้ว่าโดยทั่วไปแล้ว FOUT จะถูกมองว่าเป็นการรบกวนด้านสุนทรียภาพมากกว่า แต่ FOIT อาจเป็นอันตรายต่อประสบการณ์ของผู้ใช้มากกว่า เนื่องจากอาจส่งผลให้มีการจัดเรียงเนื้อหาใหม่บนหน้า การโหลดแบบอักษรล่วงหน้าช่วยหลีกเลี่ยงทั้ง FOUT และ FOIT โดยตรวจสอบให้แน่ใจว่าได้โหลดแบบอักษรของเว็บก่อนที่จะมีความจำเป็น ซึ่งไม่เพียงแต่ปรับปรุงความเสถียรของภาพในหน้าเท่านั้น แต่ยังช่วยลดโอกาสที่เนื้อหาจะถูกเลื่อนไปมาระหว่างการโหลด

    ความล่าช้าในการป้อนข้อมูลครั้งแรก

    งานแบบอะซิงโครนัส

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

    ขี้เกียจโหลด

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

    เนื้อหาฝั่งเซิร์ฟเวอร์

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

    รหัสบุคคลที่สาม

    โค้ดของบริษัทอื่นอาจมีผลกระทบอย่างมากต่อ First Input Delay (FID) เนื่องจากโค้ดของบุคคลที่สามมักจะดำเนินการพร้อมกัน ซึ่งสามารถบล็อกเธรดหลักและทำให้การประมวลผลอินพุตล่าช้า นอกจากนี้ โค้ดของบริษัทอื่นยังสามารถแนะนำการขึ้นต่อกันของ JavaScript ใหม่ที่ต้องโหลดและแยกวิเคราะห์ก่อนจึงจะสามารถดำเนินการได้ สิ่งนี้อาจทำให้การประมวลผลอินพุตล่าช้าและเพิ่ม FID สุดท้าย โค้ดของบริษัทอื่นบางตัวอาจใช้อัลกอริธึมที่ไม่มีประสิทธิภาพซึ่งใช้ทรัพยากรจำนวนมาก และทำให้เธรดหลักต้องหยุดชะงัก นอกจากนี้ยังสามารถนำไปสู่ ​​FID ที่เพิ่มขึ้น แทนที่จะใช้ทรัพยากรของบุคคลที่สาม ให้จัดลำดับความสำคัญของคุณเองเสมอ

    บทสรุป

    การเพิ่มประสิทธิภาพเว็บเป็นการกระทำที่สมดุลระหว่างเสาหลักสามประการของ SEO: เนื้อหา SEO ทางเทคนิค และประสบการณ์ผู้ใช้ ความคิดริเริ่ม Core Web Vitals ใหม่ของ Google นำประสบการณ์ของผู้ใช้มาสู่แถวหน้าในฐานะปัจจัยสำคัญในการจัดอันดับ

    Core Web Vitals คือชุดเมตริกที่วัดความเร็วและความเสถียรของเว็บไซต์ Google ได้กล่าวว่าตัวชี้วัดเหล่านี้ได้กลายเป็นปัจจัยสำคัญในการจัดอันดับในเดือนพฤษภาคม 2021 ในขณะที่เว็บมาสเตอร์บางคนกำลังดิ้นรนเพื่อทำการเปลี่ยนแปลงในเว็บไซต์ของตน แต่คนอื่น ๆ ก็ใช้แนวทางที่ผ่อนคลายมากขึ้น

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