Web

Web Performance Core Web Vitals

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

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

น้องๆ เคยเจอปัญหาเว็บโหลดช้ากันไหม? พี่ว่าทุกคนต้องเคยเจอแหละ สมัยพี่ทำร้านเน็ต SiamCafe เนี่ย (ตั้งแต่ปี 97 นู่น!) ลูกค้าบ่นประจำเลยว่า "พี่บอม เว็บมันอืด!" นั่นแหละคือปัญหา Web Performance ที่เราต้องแก้

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

Core Web Vitals (CWV) คือชุดตัวชี้วัดที่ Google คิดว่าสำคัญมากๆ ต่อประสบการณ์การใช้งานเว็บที่ดี CWV มี 3 ตัวหลักๆ คือ

• Largest Contentful Paint (LCP): วัดว่าส่วนที่ใหญ่ที่สุดของหน้าเว็บโหลดเสร็จในกี่วินาที (ควรต่ำกว่า 2.5 วินาที)
• First Input Delay (FID): วัดว่าเว็บตอบสนองต่อการคลิกครั้งแรกของผู้ใช้ได้เร็วแค่ไหน (ควรต่ำกว่า 100 มิลลิวินาที)
• Cumulative Layout Shift (CLS): วัดว่า Layout ของเว็บมีการขยับไปมามากแค่ไหนขณะโหลด (ควรต่ำกว่า 0.1)

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

พื้นฐานที่ต้องรู้

HTML, CSS, JavaScript

พื้นฐานสุดๆ เลยน้องๆ ถ้าจะทำเว็บ ก็ต้องรู้ HTML, CSS, JavaScript ให้แม่น HTML ใช้สร้างโครงสร้างเว็บ CSS ใช้ตกแต่งหน้าตาเว็บ และ JavaScript ใช้เพิ่มลูกเล่นให้เว็บ

HTTP Protocol

HTTP คือ Protocol ที่ใช้ในการสื่อสารระหว่าง Browser กับ Server เวลาเราเข้าเว็บ Browser จะส่ง Request ไปยัง Server Server ก็จะส่ง Response กลับมา Response ก็คือพวก HTML, CSS, JavaScript นั่นแหละ

Browser Rendering

Browser Rendering คือกระบวนการที่ Browser แปลง HTML, CSS, JavaScript ให้กลายเป็นภาพที่เราเห็นบนหน้าจอ Browser จะดาวน์โหลดไฟล์ต่างๆ จาก Server แล้ว Parse HTML สร้าง DOM Tree Parse CSS สร้าง CSSOM Tree แล้วรวม DOM Tree กับ CSSOM Tree เข้าด้วยกันเป็น Render Tree จากนั้นก็จะคำนวณ Layout และ Paint หน้าเว็บ

วิธีใช้งาน / เริ่มต้นยังไง

เอาล่ะน้องๆ ทีนี้เรามาดูวิธีใช้งาน CWV กันบ้าง เริ่มต้นง่ายๆ เลย คือใช้ Google PageSpeed Insights

ขั้นตอนปฏิบัติจริง

ใช้ Google PageSpeed Insights

เข้าไปที่ Google PageSpeed Insights แล้วใส่ URL ของเว็บเราลงไป Google จะวิเคราะห์ Performance ของเว็บเรา แล้วให้คะแนน CWV พร้อมทั้งบอกว่าเราควรปรับปรุงตรงไหนบ้าง

สมัยพี่ทำร้านเน็ต พี่จะเช็ค PageSpeed Insights ทุกวันเลย เพราะมันสำคัญมาก ถ้าเว็บร้านช้า ลูกค้าก็จะไปเล่นร้านอื่น

ปรับปรุงตามคำแนะนำของ PageSpeed Insights

PageSpeed Insights จะให้คำแนะนำในการปรับปรุง Performance ของเว็บเรา เช่น

• Optimize Images: บีบอัดรูปภาพให้มีขนาดเล็กลง
• Minify CSS/JavaScript: ลดขนาดไฟล์ CSS/JavaScript
• Leverage Browser Caching: กำหนดให้ Browser Cache ไฟล์ต่างๆ เพื่อไม่ต้องดาวน์โหลดซ้ำ
• Reduce Server Response Time: ปรับปรุงประสิทธิภาพของ Server

ตัวอย่างการ Minify JavaScript ด้วย Terser:

npm install -g terser
terser input.js -o output.min.js

Monitor Performance อย่างสม่ำเสมอ

Performance ของเว็บเราอาจเปลี่ยนแปลงได้ตลอดเวลา ดังนั้นเราควร Monitor Performance อย่างสม่ำเสมอ เพื่อให้แน่ใจว่าเว็บเรายังคงมี Performance ที่ดีอยู่ เราสามารถใช้ Google Analytics หรือเครื่องมืออื่นๆ ในการ Monitor Performance ได้

เปรียบเทียบกับทางเลือกอื่น

นอกจาก CWV แล้ว ก็ยังมีเครื่องมืออื่นๆ ที่ใช้ในการวัด Web Performance อีกมากมาย เช่น WebPageTest, GTmetrix แต่ละเครื่องมือก็มีข้อดีข้อเสียแตกต่างกันไป

WebPageTest จะละเอียดกว่า PageSpeed Insights สามารถดู Waterfall Chart ได้ ทำให้เห็นว่าไฟล์ไหนโหลดช้า GTmetrix ก็คล้ายๆ กับ WebPageTest แต่มี Interface ที่ใช้งานง่ายกว่า

เครื่องมือ	ข้อดี	ข้อเสีย	เหมาะสำหรับ
Google PageSpeed Insights	ใช้งานง่าย ฟรี ให้คำแนะนำที่ชัดเจน	ข้อมูลอาจไม่ละเอียดเท่าเครื่องมืออื่น	ผู้เริ่มต้น
WebPageTest	ข้อมูลละเอียดมาก สามารถดู Waterfall Chart ได้	ใช้งานยากกว่า	ผู้เชี่ยวชาญ
GTmetrix	ใช้งานง่าย มี Interface ที่สวยงาม	ข้อมูลอาจไม่ละเอียดเท่า WebPageTest	ผู้ใช้งานทั่วไป

สรุปคือ เลือกใช้เครื่องมือที่เหมาะกับความต้องการของเรา ถ้าเพิ่งเริ่มต้น ก็ใช้ PageSpeed Insights ก่อนก็ได้ แต่ถ้าต้องการข้อมูลที่ละเอียดขึ้น ก็ลองใช้ WebPageTest หรือ GTmetrix ดู

อย่าลืมเข้าไปอ่านบทความอื่นๆ ใน SiamCafe Blog นะ มีเรื่อง IT อีกเยอะแยะที่น่าสนใจ!

สมัยพี่ทำ SiamCafe พี่จะเน้น Performance เป็นพิเศษ เพราะรู้ว่าลูกค้าไม่ชอบรออะไรนานๆ ถ้าเว็บร้านช้า ลูกค้าก็หนีหมด! เว็บ Performance ดี มีชัยไปกว่าครึ่ง!

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

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

จำไว้เลยว่า User Experience (UX) คือหัวใจหลัก เว็บเร็ว โหลดไว คนก็อยากอยู่ต่อ อยากซื้อของ อยากอ่าน content เรา ถ้าช้า... ไปแน่นอน

3-4 เทคนิคที่ใช้ได้จริง

1. บีบอัดรูปภาพให้เล็กที่สุด

สมัยก่อนผมใช้โปรแกรม Photoshop บีบรูปจนแทบไม่เห็นรายละเอียด แต่เดี๋ยวนี้มีเครื่องมือออนไลน์เยอะแยะ ที่บีบรูปได้เนียนกว่าเยอะ ลองใช้ดูครับ

<img src="my-image.jpg" alt="My Image" width="500" height="300">

แล้วก็ใส่ width กับ height ใน tag img ด้วยนะ Browser จะได้ reserve พื้นที่ไว้ก่อน ไม่ต้อง layout ใหม่ตอนโหลดรูปเสร็จ

2. ลด HTTP Requests

ทุกครั้งที่ Browser ร้องขอไฟล์จาก Server มันคือ HTTP Request สมัยก่อน CSS กับ JavaScript แยกไฟล์กันหมด ผมจับมันมารวมเป็นไฟล์เดียวซะเลย ลด Request ไปได้เยอะ

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

เดี๋ยวนี้มี Webpack, Parcel, Rollup ช่วย Bundle ไฟล์ให้เราง่ายขึ้นเยอะ ลองศึกษาดูครับ

3. ใช้ Content Delivery Network (CDN)

CDN เหมือนมี Server กระจายอยู่ทั่วโลก เวลามีคนเข้าเว็บเราจากต่างประเทศ มันจะโหลดไฟล์จาก Server ที่อยู่ใกล้เคียงที่สุด เร็วกว่าโหลดจาก Server หลักของเราเยอะ

Cloudflare, AWS CloudFront, Akamai พวกนี้คือ CDN ที่นิยมใช้กัน

4. Enable Browser Caching

Browser Cache คือการที่ Browser เก็บไฟล์บางอย่าง (เช่น รูปภาพ, CSS, JavaScript) ไว้ในเครื่องของ User พอ User เข้ามาใหม่ Browser จะโหลดไฟล์จากเครื่องตัวเอง ไม่ต้องไปโหลดจาก Server อีกรอบ เร็วกว่าเดิมเยอะ

ต้อง Config ที่ Server ให้ส่ง Header ที่ถูกต้อง Browser ถึงจะ Cache ไฟล์ได้

iCafeForex

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

ทำไมเว็บผมโหลดช้า ทั้งๆ ที่ใช้ Hosting แพงแล้ว?

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

Lazy Loading จำเป็นไหม?

จำเป็นสิครับ! Lazy Loading คือการโหลดรูปภาพเฉพาะตอนที่ User Scroll ลงมาถึงเท่านั้น รูปไหนยังไม่เห็น ก็ยังไม่ต้องโหลด ช่วยลด Initial Load Time ได้เยอะมาก

ควรใช้ Framework อะไรดี ที่ทำให้เว็บเร็ว?

Framework แต่ละตัวก็มีข้อดีข้อเสียต่างกันไป แต่โดยรวม React, Vue, Angular พวกนี้ Optimize มาดีพอสมควร แต่สำคัญกว่าคือการเข้าใจหลักการ Optimize ของแต่ละ Framework และเขียน Code ให้มีประสิทธิภาพ

แล้ว AMP (Accelerated Mobile Pages) ล่ะ?

AMP เป็น Framework ที่ Google สร้างขึ้นมาเพื่อทำให้เว็บโหลดเร็วบนมือถือ แต่มีข้อจำกัดเยอะพอสมควร ต้องศึกษาให้ดีก่อนใช้งาน

สรุป

เรื่อง Web Performance มันเป็น Journey ไม่ใช่ Destination ต้อง Optimize ไปเรื่อยๆ คอย Monitor Performance อยู่เสมอ แล้วเว็บคุณก็จะเร็วขึ้นเรื่อยๆ เอง

อย่าลืมว่าความเร็วคือ User Experience ที่ดี และ User Experience ที่ดี คือความสำเร็จของเว็บไซต์คุณ

SiamCafe Blog