ทำเว็บ WordPress ให้ผ่าน Core Web Vitals: วิธีแก้ LCP, INP, CLS

เว็บ WordPress จะ “ผ่าน” Core Web Vitals เมื่อ 75% ของผู้เข้าชมจริงได้ค่า LCP ไม่เกิน 2.5 วินาที, INP ไม่เกิน 200 มิลลิวินาที และ CLS ไม่เกิน 0.1 วิธีที่ได้ผลคือวัดก่อนว่าเว็บตกตัวไหน แล้วแก้ตามตัวนั้น เช่น LCP แก้ที่รูปหลักของหน้า INP แก้ที่ JavaScript และ CLS แก้ที่การจองพื้นที่ให้รูปกับฟอนต์

ผมเข้าใจว่าบทความแนวนี้มีเกลื่อนอินเทอร์เน็ตแล้ว แต่ส่วนใหญ่จะบอกให้ “เปลี่ยนโฮสต์ ลงปลั๊กอินแคช บีบรูป” แล้วก็จบ ซึ่งมันจริง แต่ไม่พอ เพราะพอทำครบแล้วหลายเว็บก็ยังติดแดงอยู่ดี บทความนี้เลยเล่าจากสิ่งที่เจอตอนปรับเว็บ eHowMe เอง โดยเฉพาะปัญหาที่ไม่มีใครบอกในบทความทั่วไป

Core Web Vitals วัดอะไรบ้าง และเกณฑ์ผ่านคือเท่าไหร่

Core Web Vitals คือชุดตัวชี้วัดที่ Google ใช้ดูว่าหน้าเว็บ “ใช้งานได้ลื่นแค่ไหน” ในมุมของคนที่เข้าเว็บจริง มี 3 ตัว

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

ตัวเลขที่ Google ใช้ตัดสินคือข้อมูลจากผู้เข้าชมจริง (field data) ที่เปอร์เซ็นไทล์ 75 ไม่ใช่คะแนน 100 จากการกดเทสต์ครั้งเดียว

วัดก่อนแก้ เพราะแต่ละเว็บติดคนละตัว

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

• รายงาน Core Web Vitals ใน Google Search Console เป็นข้อมูลผู้เข้าชมจริง บอกว่ากลุ่มหน้าไหนมีปัญหา แต่ต้องมีทราฟฟิกมากพอจึงจะมีข้อมูล
• ผลจาก PageSpeed Insights เป็นข้อมูลจำลองในห้องแล็บ ใช้ไล่หาสาเหตุเป็นรายหน้า ถ้ายังไม่คุ้นกับหน้าตารายงาน ลองอ่าน PageSpeed Insights คืออะไร ก่อน

ข้อควรระวังคือเครื่องมือห้องแล็บวัด INP โดยตรงไม่ได้ มันให้ค่า Total Blocking Time มาเป็นตัวแทน ดังนั้นถ้าเว็บคุณคะแนนห้องแล็บเขียวแต่ Search Console ยังแดงที่ INP นั่นไม่ใช่เรื่องแปลก

แก้ LCP: รูปหลักของหน้าคือตัวการเกือบทุกครั้ง

บนหน้าบทความ องค์ประกอบที่ใหญ่สุดมักเป็นรูปปก (Featured Image) ดังนั้นงานแก้ LCP ส่วนใหญ่คือทำให้รูปนี้มาถึงเร็วที่สุด เริ่มจากสามอย่างที่ได้ผลชัดสุด

1. อย่าให้รูปหลัก lazy-load Lazy-load เหมาะกับรูปที่อยู่ล่างลงไป แต่ถ้าไปใส่กับรูปบนสุด เบราว์เซอร์จะรอก่อนถึงโหลด ทำให้ LCP ช้าลงทันที
2. บอกเบราว์เซอร์ว่ารูปนี้สำคัญ ใส่ fetchpriority="high" ที่รูปหลัก และใช้ <link rel="preload"> ให้เริ่มดึงรูปตั้งแต่ต้นการโหลดหน้า
3. ส่งรูปขนาดที่ใช้จริง ไม่ใช่ไฟล์ 3000px ไปแสดงในกรอบ 800px และใช้ WebP หรือ AVIF

สิ่งที่ผมเจอกับ Elementor

ตรงนี้คือเรื่องที่ผมอยากเล่าที่สุด WordPress เวอร์ชันใหม่ๆ มีกลไกปิด lazy-load และใส่ fetchpriority ให้รูปแรกอัตโนมัติอยู่แล้ว แต่กลไกนั้นทำงานกับรูปที่อยู่ในเนื้อหาบทความ (the_content) พอใช้ Elementor วาง Featured Image ผ่านวิดเจ็ต วิดเจ็ตจะเรียก wp_get_attachment_image() ตรงๆ ข้ามกลไกนั้นไปเลย ผลคือรูปปกหน้าบทความโดนใส่ loading="lazy" ทั้งที่มันคือ LCP

ผมแก้ด้วยโค้ดสั้นๆ ที่ดักตอนที่ WordPress สร้างแอตทริบิวต์ของรูป ถ้าเป็นรูปปกของหน้านั้นก็บังคับให้โหลดทันที

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment) {
    if (is_singular()) {
        if ((int) $attachment->ID === (int) get_post_thumbnail_id()) {
            $attr['loading'] = 'eager';
            $attr['fetchpriority'] = 'high';
        }
    }
    return $attr;
}, 10, 2);

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment) {
    if (is_singular()) {
        if ((int) $attachment->ID === (int) get_post_thumbnail_id()) {
            $attr['loading'] = 'eager';
            $attr['fetchpriority'] = 'high';
        }
    }
    return $attr;
}, 10, 2);

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

Preload ที่ไม่ตรงกับไฟล์ที่แสดงจริง ไม่ได้ช่วยให้เร็วขึ้น มันแค่โหลดรูปเพิ่มอีกรอบ

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

TTFB และแคช

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

แก้ INP: ปัญหามักอยู่ที่ JavaScript ไม่ใช่รูป

INP แย่แปลว่าเบราว์เซอร์ยุ่งกับการรัน JavaScript จนไม่ว่างตอบสนองตอนผู้ใช้กด ซึ่งบนเว็บ WordPress ต้นเหตุที่เจอบ่อยคือ

• ปลั๊กอินที่โหลดสคริปต์ทุกหน้า ทั้งที่ใช้แค่หน้าเดียว เช่น ฟอร์มติดต่อ สไลเดอร์ แผนที่
• Page builder ที่โหลด JavaScript ก้อนใหญ่ แม้ในหน้าที่ใช้วิดเจ็ตไม่กี่ตัว
• สคริปต์ภายนอกอย่างแชตบอท ตัวติดตามโฆษณา และแท็กต่างๆ ที่ลงไว้แล้วลืม

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

แก้ CLS: จองพื้นที่ไว้ก่อนของจะมา

CLS เกิดเมื่อของบนหน้าถูกดันไปมาหลังจากเริ่มแสดงผลแล้ว วิธีแก้มีหลักเดียวคือ “บอกขนาดล่วงหน้า”

• รูปและวิดีโอต้องมี width และ height หรือ aspect-ratio เสมอ
• แบนเนอร์คุกกี้ โฆษณา และกล่องที่โผล่ทีหลัง ต้องจองพื้นที่ไว้ ไม่ใช่โผล่แล้วดันเนื้อหาลง
• ฟอนต์เว็บให้ตั้ง font-display: swap และถ้าเป็นไปได้ให้โฮสต์ฟอนต์เองแทนดึงจากภายนอก

เรื่องฟอนต์มีข้อควรรู้สำหรับเว็บภาษาไทย ไฟล์ฟอนต์ไทยมักใหญ่กว่าฟอนต์ละติน เพราะมีอักขระมากกว่า การโหลดช้าจึงเห็นได้ชัดกว่า ลองลดจำนวนน้ำหนักตัวอักษร (weight) ที่โหลดให้เหลือเท่าที่ใช้จริง เช่น ปกติกับตัวหนา ก็ช่วยได้พอสมควร

สิ่งที่หลายๆ คนมักพลาด

• ไล่แก้คะแนน 100 บน PageSpeed จนลืมดูข้อมูลผู้เข้าชมจริงใน Search Console
• ลงปลั๊กอินเร่งความเร็วหลายตัวพร้อมกัน แล้วตั้งค่าชนกันเอง จนหน้าเว็บพัง
• บีบรูปแรงเกินจนเบลอ แล้วคะแนนดีขึ้นแต่หน้าตาแย่ลง
• แก้ทีเดียวหลายอย่างโดยไม่วัดซ้ำ สุดท้ายไม่รู้ว่าอะไรได้ผล

ทุกครั้งที่แก้ ให้แก้ทีละอย่างแล้ววัดซ้ำ และรอข้อมูลจริงใน Search Console อัปเดตสักพัก เพราะมันใช้ข้อมูลย้อนหลัง 28 วัน ไม่ได้เปลี่ยนทันที

ความเร็วเว็บเกี่ยวกับ SEO และ AI Overview ยังไง

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

คำถามที่พบบ่อย