เพิ่มความเร็วเว็บไซต์ทำอย่างไร Website Speed Optimization ครบถ้วน
How to improve website speed: actionable techniques that work, Core Web Vitals, and using GTmetrix/PageSpeed.
สารบัญ
ทำไมความเร็วเว็บถึงสำคัญ
ความเร็วเว็บส่งผลต่อทั้ง SEO และ Conversion Rate โดยตรง Google ใช้ Core Web Vitals เป็น Ranking Factor Amazon พบว่า 100ms ช้าลง = ยอดขายลด 1% Google พบว่า Bounce Rate เพิ่ม 32% เมื่อ Load Time เพิ่มจาก 1 เป็น 3 วินาที
Website speed directly impacts both SEO and conversion rates. Google uses Core Web Vitals as a ranking factor. Amazon found 100ms slower = 1% fewer sales. Google found bounce rate increases 32% when load time goes from 1 to 3 seconds.
- Google Ranking Factor: Core Web Vitals ส่งผลต่อ SEO
- Conversion: 1 วินาที ช้าลง = Conversion -7%
- Bounce Rate: 3 วินาที = +32% Bounce
- Mobile: ผู้ใช้มือถือ Expect เว็บเร็วกว่า Desktop
- UX: เว็บเร็ว = ผู้ใช้ Happy ใช้นานขึ้น
วัดความเร็วด้วย Tools
ใช้ Tool หลายอย่างร่วมกันเพราะแต่ละ Tool วัดคนละมุม Google PageSpeed Insights วัด Core Web Vitals, GTmetrix ให้ Waterfall Chart ละเอียด, WebPageTest รองรับ Multiple Location, Pingdom ง่ายใช้สุดสำหรับมือใหม่
Use multiple tools together as each measures different aspects. Google PageSpeed Insights measures Core Web Vitals, GTmetrix provides detailed Waterfall Charts, WebPageTest supports multiple locations, Pingdom is simplest for beginners.
- Google PageSpeed Insights: ฟรี วัด Core Web Vitals
- GTmetrix: Waterfall Chart, Grade A-F
- WebPageTest: Test จาก Location ทั่วโลก
- Pingdom: ง่ายสุด เหมาะมือใหม่
- Chrome DevTools: Network Tab ละเอียดที่สุด
Core Web Vitals คืออะไร
Core Web Vitals มี 3 ตัววัดหลัก: LCP (Largest Contentful Paint) วัดความเร็วโหลด Content หลัก ควร <2.5 วินาที FID/INP (Interaction to Next Paint) วัด Responsiveness ควร <200ms CLS (Cumulative Layout Shift) วัด Visual Stability ควร <0.1
Core Web Vitals has 3 main metrics: LCP (Largest Contentful Paint) measuring main content load speed (target <2.5s), INP (Interaction to Next Paint) measuring responsiveness (target <200ms), CLS (Cumulative Layout Shift) measuring visual stability (target <0.1).
- LCP: โหลด Content หลักได้ใน <2.5 วินาที = Good
- INP: ตอบสนอง Interaction ใน <200ms = Good
- CLS: Layout ไม่กระโดด <0.1 = Good
- Poor: LCP >4s, INP >500ms, CLS >0.25
- ปรับปรุง LCP ก่อน เพราะส่งผล UX และ SEO สูงสุด
Optimize รูปภาพ
รูปภาพมักเป็น สาเหตุหลักของเว็บช้า ใช้ Format สมัยใหม่ WebP หรือ AVIF แทน JPG/PNG ลดขนาดได้ 30-80% ใช้ width/height ป้องกัน CLS กำหนด srcset สำหรับหลาย Resolution และ Compress ก่อน Upload เสมอ
Images are often the main cause of slow websites. Use modern formats WebP or AVIF instead of JPG/PNG for 30-80% size reduction. Set width/height to prevent CLS, use srcset for multiple resolutions, and always compress before uploading.
- WebP: เล็กกว่า JPG 25-35%
- AVIF: เล็กกว่า JPG 50-80% (Browser ใหม่)
- Compress: TinyPNG, Squoosh, ImageOptim
- Width/Height: ป้องกัน CLS จาก Image
- srcset: รูปขนาดต่างๆ สำหรับหน้าจอต่างๆ
Caching ทุกระดับ
Cache คือการเก็บ Response ไว้ส่งซ้ำโดยไม่ต้อง Process ใหม่ มีหลาย Layer: Browser Cache (ผู้ใช้ไม่ต้องโหลดซ้ำ), Server Cache (PHP ไม่ต้อง Process ซ้ำ), Object Cache (Database Query Cache), Page Cache (เสิร์ฟ HTML Static)
Caching stores responses for reuse without reprocessing. Multiple layers: Browser Cache (users don't reload), Server Cache (PHP doesn't reprocess), Object Cache (database query cache), Page Cache (serves static HTML).
- Browser Cache: Cache-Control Header กำหนด TTL
- Page Cache: เสิร์ฟ Static HTML แทน PHP
- OPcache: Cache PHP Bytecode ไม่ต้อง Parse ใหม่
- Redis/Memcached: Cache Database Query
- WordPress: W3TC, WP Rocket, LiteSpeed Cache
CDN ลด Load Time ทั่วโลก
CDN (Content Delivery Network) เก็บ Static File ที่ Edge Server ใกล้ผู้เข้าชม แทนที่จะส่งจาก Origin Server ที่ไกล ลด Latency และ Load บน Server หลัก Cloudflare CDN ฟรีสำหรับทุกคน เปิดใช้ได้ใน 5 นาที
CDN stores static files at edge servers near visitors, instead of serving from distant origin servers. Reduces latency and origin server load. Cloudflare CDN is free for everyone, enabling in just 5 minutes.
- Cloudflare CDN: ฟรี 310+ เมือง ทั่วโลก
- Static Files: รูป, CSS, JS Cache ที่ Edge
- TTFB ลดลง: Edge ใกล้กว่า Origin
- ลด Bandwidth Origin: ประหยัดค่า Hosting
- ง่ายสุด: แค่เปลี่ยน Nameserver ไป Cloudflare
Minify และ Compress Code
Minify คือการลบ Whitespace, Comment, ย่อชื่อ Variable ใน CSS/JS/HTML เพื่อลดขนาดไฟล์ Gzip หรือ Brotli Compression บน Server ลดขนาด Transfer ได้ 60-80% รวมกันแล้วช่วยให้หน้าโหลดเร็วขึ้นมาก
Minification removes whitespace, comments, and shortens variable names in CSS/JS/HTML to reduce file size. Gzip or Brotli compression on the server reduces transfer size by 60-80%. Together these significantly improve page load times.
- Minify CSS: ลบ Space และ Comment
- Minify JS: ย่อชื่อ Variable + ลบ Comment
- Minify HTML: ลบ Whitespace ไม่จำเป็น
- Gzip: Compress 60-70% ลด Transfer Size
- Brotli: Compress 15-25% ดีกว่า Gzip
Hosting ที่ดีคือรากฐาน
ไม่ว่าจะ Optimize แค่ไหน ถ้า Hosting ช้า เว็บก็ช้า ควรเลือก Hosting ที่มี SSD NVMe, PHP 8.x + OPcache, LiteSpeed หรือ Nginx, HTTP/2, TTFB ต่ำ และ Server ใกล้กลุ่มเป้าหมาย
No matter how much you optimize, slow hosting means a slow website. Choose hosting with NVMe SSD, PHP 8.x + OPcache, LiteSpeed or Nginx, HTTP/2, low TTFB, and servers near your target audience.
- SSD NVMe: Database Query <50ms
- PHP 8.x + OPcache: PHP เร็วขึ้น 3 เท่า
- LiteSpeed: เร็วกว่า Apache 5-10 เท่า
- TTFB: ควร <300ms = ดี
- Server Location: ใกล้ผู้ใช้ = เร็วกว่า
Lazy Loading และ Defer Scripts
Lazy Loading โหลดรูปภาพเฉพาะเมื่อ Scroll มาถึง ไม่โหลดรูปที่ยังมองไม่เห็น Defer Scripts ทำให้ JS ไม่ Block Render สามารถใช้ fetchpriority="high" สำหรับรูปและ defer/async สำหรับ Script
Lazy Loading loads images only when scrolled into view, not preloading invisible images. Deferring scripts prevents JS from blocking rendering. Use fetchpriority="high" for images and defer/async attributes for scripts.
- loading="lazy": Attribute บน <img> ทำงานได้เลย
- Defer: <script defer> รัน JS หลัง HTML Parse
- Async: <script async> โหลดคู่กัน ไม่ Block
- Preload: <link rel="preload"> โหลด Resource สำคัญก่อน
- DNS Prefetch: Pre-resolve DNS ของ Resource ภายนอก