Web

Core Web Vitals ตกแก้ยังไง

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Core Web Vitals คืออะไร? ทำไมถึงสำคัญ?

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

ทำไมถึงสำคัญ? เพราะ CWV มีผลต่ออันดับใน Google Search! เว็บที่คะแนนดี Google ก็จะดันขึ้นไปอยู่หน้าแรกๆ คนก็เห็นเยอะขึ้น ยอดขายก็เพิ่มขึ้นไงล่ะ ลองคิดดูดิ เว็บโหลดช้า ใครมันจะอยากอยู่! SiamCafe Blog เราก็ให้ความสำคัญกับเรื่องนี้มากๆ

CWV มีอะไรบ้าง?

CWV หลักๆ มี 3 ตัว:

1. Largest Contentful Paint (LCP): วัดว่าส่วนที่ใหญ่ที่สุดของหน้าเว็บโหลดเสร็จเมื่อไหร่ ยิ่งเร็วยิ่งดี
2. First Input Delay (FID): วัดว่าเว็บตอบสนองต่อการคลิกครั้งแรกของผู้ใช้ได้เร็วแค่ไหน
3. Cumulative Layout Shift (CLS): วัดว่าเลย์เอาต์ของเว็บมีการขยับไปมาเองโดยไม่ตั้งใจมากแค่ไหน

วิธีแก้ปัญหา Core Web Vitals แต่ละตัว

แต่ละตัวมีวิธีแก้ปัญหาที่แตกต่างกันไป มาดูกันทีละตัวเลย

แก้ปัญหา Largest Contentful Paint (LCP)

LCP คือตัวที่บอกว่าส่วนที่ใหญ่ที่สุดของหน้าเว็บเราโหลดเสร็จเมื่อไหร่ ถ้า LCP ช้า แสดงว่าเว็บเราโหลดรูปภาพ, วิดีโอ หรือ element อื่นๆ ช้าเกินไป

วิธีแก้ LCP:

1. Optimize รูปภาพ: บีบอัดรูปภาพให้มีขนาดเล็กลงโดยไม่เสียคุณภาพมากนัก ใช้ format ที่เหมาะสม เช่น WebP (ถ้า browser รองรับ)
2. Lazy-load รูปภาพ: โหลดรูปภาพเฉพาะเมื่อผู้ใช้เลื่อนลงมาเห็นเท่านั้น

   <img src="image.jpg" loading="lazy" alt="My Image">

   สมัยผมทำร้านเน็ต ADSL ยังไม่แรงเท่านี้ Lazy Load ช่วยได้เยอะ!
3. ใช้ CDN (Content Delivery Network): กระจายไฟล์เว็บเราไปไว้บน server ทั่วโลก ทำให้ผู้ใช้โหลดไฟล์จาก server ที่อยู่ใกล้ที่สุด
4. Optimize CSS และ JavaScript: ลดขนาดไฟล์, Minify และ Defer JavaScript

แก้ปัญหา First Input Delay (FID)

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

วิธีแก้ FID:

1. ลด JavaScript execution time: หา JavaScript ที่ทำงานนานๆ แล้ว optimize หรือเอาออก
2. Break up long tasks: แบ่ง task ที่ทำงานนานๆ ออกเป็น task ย่อยๆ เพื่อให้ browser มีเวลาตอบสนองต่อการคลิก

   // Before
   function longTask() {
     // ... long running code ...
   }
   
   // After
   function longTask() {
     setTimeout(() => {
       // ... long running code ...
     }, 0);
   }
     

   เคยเจอเคสนี้ client-side rendering หนักไป พอแบ่ง task แล้วดีขึ้นเยอะเลย
3. Use a web worker: ย้าย JavaScript ที่ทำงานหนักๆ ไปทำงานบน web worker เพื่อไม่ให้กระทบ main thread

แก้ปัญหา Cumulative Layout Shift (CLS)

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

วิธีแก้ CLS:

1. ระบุขนาดของรูปภาพและวิดีโอ: ใส่ width และ height ให้กับ tag <img> และ <video> เพื่อให้ browser จองพื้นที่ไว้ก่อน

   <img src="image.jpg" width="640" height="480" alt="My Image">

2. Reserve space for ads: จองพื้นที่สำหรับโฆษณาไว้ก่อนที่จะโหลดโฆษณา
3. Avoid inserting new content above existing content: หลีกเลี่ยงการแทรก content ใหม่ๆ เหนือ content เดิมที่โหลดไปแล้ว

เครื่องมือที่ใช้ตรวจสอบ Core Web Vitals

มีเครื่องมือหลายตัวที่เราสามารถใช้ตรวจสอบ CWV ได้

• Google PageSpeed Insights: เครื่องมือฟรีจาก Google ที่บอกคะแนน CWV และให้คำแนะนำในการปรับปรุง
• Google Search Console: รายงาน CWV ของเว็บเราจากข้อมูลจริงของผู้ใช้
• WebPageTest: เครื่องมือที่ให้รายละเอียดเกี่ยวกับ performance ของเว็บเรา

ตารางเปรียบเทียบ Core Web Vitals

Metric	What it measures	Good score	Needs improvement	Poor score
LCP	Loading performance	0-2.5 seconds	2.5-4 seconds	Over 4 seconds
FID	Interactivity	0-100 milliseconds	100-300 milliseconds	Over 300 milliseconds
CLS	Visual stability	0-0.1	0.1-0.25	Over 0.25

อย่าลืมว่า Core Web Vitals เป็นแค่ส่วนหนึ่งของการทำ SEO นะครับ ที่ SiamCafe Blog เรามีบทความอื่นๆ ที่น่าสนใจอีกเยอะเลย ลองเข้าไปอ่านดูได้

Best Practices / เคล็ดลับจากประสบการณ์

Optimize รูปภาพให้ถูกวิธี

สมัยผมทำร้านเน็ตเมื่อ 20 กว่าปีก่อน เรื่องรูปภาพนี่สำคัญสุดๆ เพราะ bandwidth มันจำกัด ถ้าใครโหลดรูปเยอะๆ นี่คนอื่นเล่นเกมกระตุกหมด ผมเลยต้องคอยสอนเด็กๆ เรื่องการ optimize รูปภาพเสมอ

หลักการง่ายๆ คือ เลือก format ให้เหมาะสม JPEG สำหรับรูปถ่ายทั่วไป, PNG สำหรับรูปที่มี transparency, และ WebP สำหรับรูปที่ต้องการคุณภาพสูงแต่ขนาดไฟล์เล็ก ลองใช้เครื่องมือ online ช่วยบีบขนาดไฟล์ดู พวก TinyPNG, ImageOptim อะไรพวกนี้ช่วยได้เยอะ

<img src="image.jpg" alt="Image description" width="600" height="400" loading="lazy">

อย่าลืมใส่ width และ height ใน tag img ด้วยนะ Browser จะได้ reserve พื้นที่ไว้ก่อน ไม่ต้อง layout shift ทีหลัง

Minify CSS และ JavaScript

Code ที่เราเขียนบางทีมันมีช่องว่าง มี comment ที่ไม่จำเป็น พวกนี้ทำให้ไฟล์มันใหญ่โดยใช่เหตุ ลองใช้เครื่องมือ minify ช่วยลดขนาดไฟล์ดูสิ พวก UglifyJS, CSSNano อะไรพวกนี้ใช้ดีเลย

<link rel="stylesheet" href="style.min.css">
<script src="script.min.js"></script>

พอ minify เสร็จแล้วก็ gzip ไฟล์พวกนี้ด้วยนะ Apache หรือ Nginx ทำได้หมด ช่วยลดขนาดไฟล์ได้อีกเยอะเลย

Leverage Browser Caching

พวกไฟล์ static อย่างรูปภาพ, CSS, JavaScript พวกนี้เราสามารถบอก browser ให้ cache ไว้ได้เลย เวลา user เข้ามาใหม่จะได้ไม่ต้องโหลดซ้ำ ช่วยลดเวลาโหลดได้เยอะ

Config cache headers ใน server ของเรา เช่น

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(js|css|swf)$">
  Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm)$">
  Header set Cache-Control "max-age=600"
</FilesMatch>

ใช้ Content Delivery Network (CDN)

ถ้าเว็บเรามีคนเข้าจากทั่วโลก การใช้ CDN จะช่วยให้เว็บโหลดเร็วขึ้น เพราะ CDN จะ cache ไฟล์ของเราไว้ใน server ที่อยู่ใกล้ user มากที่สุด iCafeForex เองก็ใช้ CDN เพื่อให้ลูกค้าเทรดได้เร็วที่สุด

สมัยผมทำร้านเน็ต ก็เคยลองใช้ CDN เหมือนกัน แต่ตอนนั้นมันแพงมาก สู้ไม่ไหว แต่สมัยนี้มี CDN ฟรีๆ ให้ใช้เยอะแยะ Cloudflare, jsDelivr อะไรพวกนี้ลองศึกษาดู

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

ทำไม LCP มันไม่ดี ทั้งๆ ที่รูปภาพก็ optimize แล้ว?

บางที LCP มันไม่ได้เกี่ยวกับรูปภาพอย่างเดียว มันอาจจะเป็น font ที่โหลดช้า หรือ JavaScript ที่ render ช้า ลอง inspect ดูดีๆ ว่าอะไรเป็น element ที่ใหญ่ที่สุดที่ browser ต้อง render แล้ว optimize ตรงนั้น

CLS มันเกิดจากอะไร?

CLS ส่วนใหญ่เกิดจาก layout shift ที่ไม่ได้ตั้งใจ เช่น รูปภาพไม่มี width/height, โฆษณาที่โหลดแล้วดัน content อื่นๆ ลงไป, หรือ font ที่โหลดแล้วขนาดเปลี่ยน ลอง fix พวกนี้ดู CLS น่าจะดีขึ้น

FID นี่แก้ยังไง?

FID ส่วนใหญ่เกิดจาก JavaScript ที่ทำงานนานเกินไป ทำให้ browser ไม่สามารถตอบสนองต่อ user ได้ ลอง code splitting, lazy loading, หรือ optimize code ให้มันทำงานเร็วขึ้น

First Contentful Paint (FCP) ต่างกับ Largest Contentful Paint (LCP) อย่างไร?

FCP คือเวลาที่ browser เริ่ม render content ชิ้นแรก (เช่น text หรือ image) ส่วน LCP คือเวลาที่ browser render content ที่ใหญ่ที่สุดที่มองเห็นได้ใน viewport ทั้งสอง metric นี้สำคัญ แต่ LCP จะบ่งบอกประสบการณ์ผู้ใช้ได้ดีกว่า

สรุป

Core Web Vitals มันเป็นเรื่องที่ต้องใส่ใจ ถ้าอยากให้เว็บเราติดอันดับดีๆ และ user experience ดีๆ ก็ต้อง optimize อย่างสม่ำเสมอ อย่าท้อแท้! ค่อยๆ ปรับ ค่อยๆ แก้ไป เดี๋ยวก็ดีขึ้นเอง

ถ้าอยากอ่านบทความเกี่ยวกับ IT, Network, หรือเรื่องราวสมัยร้านเน็ต ลองเข้าไปดูที่ SiamCafe Blog นะครับ