เปิด Browser Caching ด้วย .htaccess เพิ่มความเร็วเว็บ

Browser Caching คืออะไร?

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

ตัวอย่าง:

• ครั้งแรก: ผู้ใช้เข้าเว็บไซต์ เบราว์เซอร์ดาวน์โหลด HTML, CSS, JavaScript, รูปภาพทั้งหมด (อาจใช้เวลา 5-10 วินาที)
• ครั้งที่สอง (หลังจาก 3 วัน): ผู้ใช้กลับมาเข้าเว็บไซต์ เบราว์เซอร์ใช้ CSS, JavaScript, รูปที่เก็บไว้ ดาวน์โหลดเฉพาะ HTML ใหม่ (อาจใช้เวลาแค่ 1-2 วินาที)

Expires Header และ Cache-Control Header คืออะไร?

เซิร์ฟเวอร์บอกเบราว์เซอร์ว่า "ไฟล์นี้สามารถใช้ได้นานแค่ไหน?" ผ่านการส่ง HTTP Header สองตัว:

• Expires Header — ระบุวันเวลาที่ไฟล์หมดอายุ เช่น "Wed, 15 Jan 2027 08:00:00 GMT" หลังจากนี้เบราว์เซอร์ต้องตรวจสอบเซิร์ฟเวอร์ว่ามีไฟล์เวอร์ชันใหม่หรือไม่
• Cache-Control Header — ระบุระยะเวลาเป็นวินาที เช่น "max-age=31536000" หมายถึง 1 ปี (31536000 วินาที)

วิธีตั้งค่า Browser Caching ผ่าน .htaccess

วิธีนี้ใช้ได้กับเว็บโฮสติ้ง cPanel ที่ใช้ Apache ทั่วไป เข้าไปแก้ไขไฟล์ .htaccess ใน Root Folder ของเว็บไซต์ (public_html)

ขั้นตอน 1: เชื่อมต่อ FTP หรือใช้ File Manager

1. Login เข้า cPanel (https://yourdomain.com:2083)
2. ไปที่ File Manager
3. ไปที่โฟลเดอร์ public_html (Root folder ของเว็บไซต์)
4. ค้นหาไฟล์ .htaccess ถ้าไม่มี ให้สร้างไฟล์ใหม่

ขั้นตอน 2: เพิ่มบรรทัด Caching Code

เปิดไฟล์ .htaccess ด้วย Text Editor (แนะนำให้ใช้ Editor ของ cPanel) เพิ่มบรรทัดต่อไปนี้:

<IfModule mod_expires.c>
  ExpiresActive On

  # ตั้ง Default Expiry Time
  ExpiresDefault "access plus 1 month"

  # ไฟล์ HTML (ตรวจสอบทุกครั้งที่เข้าเยี่ยมชม)
  ExpiresByType text/html "access plus 1 day"

  # CSS
  ExpiresByType text/css "access plus 1 year"

  # JavaScript
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"

  # รูปภาพ
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Fonts
  ExpiresByType font/truetype "access plus 1 year"
  ExpiresByType font/opentype "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"

  # PDF
  ExpiresByType application/pdf "access plus 1 month"

  # เสียง/วิดีโอ
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType audio/mpeg "access plus 1 month"
</IfModule>

ขั้นตอน 3: บันทึกไฟล์

คลิก Save หรือ Upload ไฟล์ .htaccess กลับขึ้นไป Browser Caching ก็จะเปิดใช้งานแล้ว

วิธีตั้งค่า Cache-Control Header (ทางเลือก)

บาง Hosting ต้องใช้ Cache-Control แทน Expires ที่จะทำให้ใช้ได้กับ CDN ด้วย คุณสามารถใช้ทั้งสองแบบพร้อมกันได้:

<IfModule mod_headers.c>
  # CSS
  <FilesMatch "\.css$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>

  # JavaScript
  <FilesMatch "\.js$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>

  # รูปภาพ
  <FilesMatch "\.(jpg|jpeg|png|gif|ico|svg)$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>

  # Fonts
  <FilesMatch "\.(ttf|otf|woff|woff2)$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>

  # HTML (ตรวจสอบทุกครั้ง)
  <FilesMatch "\.html$">
    Header set Cache-Control "max-age=86400, must-revalidate"
  </FilesMatch>
</IfModule>

Caching Busting — ป้องกันไม่ให้ผู้ใช้เห็นเวอร์ชันเก่า

ปัญหา: ถ้าคุณอัพเดท CSS หรือ JavaScript ใหม่ บาง ผู้เยี่ยมชมอาจยังเห็นเวอร์ชันเก่า (จากการ Cache) ตั้งถึง 1 ปี วิธีแก้ไขคือ Caching Busting — เพิ่มเลขเวอร์ชันหลังชื่อไฟล์:

// แทน:
<link rel="stylesheet" href="style.css">

// ใช้:
<link rel="stylesheet" href="style.css?v=1.2.3">

// หรือใช้ File mtime():
<link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">

เมื่อไฟล์เปลี่ยน URL ก็เปลี่ยนไป เบราว์เซอร์จึงดาวน์โหลดเวอร์ชันใหม่ ไฟล์เก่าก็ยังเก็บใน Cache (ไม่เสียเพราะทั้งสอง URL ต่างกัน)

ตรวจสอบว่า Browser Caching ทำงานถูกต้อง

หลังจากตั้งค่า .htaccess ให้ทดสอบด้วยขั้นตอนต่อไปนี้:

# 1. ตรวจสอบ Cache Header ของไฟล์ CSS
curl -I https://yourdomain.com/style.css | grep -i cache-control

# ผลลัพธ์ควรเห็น:
# Cache-Control: max-age=31536000, public

# 2. ตรวจสอบ Expires Header
curl -I https://yourdomain.com/style.css | grep -i expires

# 3. เปิด DevTools (F12) ไปที่ Network tab
# รีเฟรชหน้า ดู Size Column ของ CSS/JS/รูป
# ครั้งแรก: ขนาดเต็ม (เช่น 50KB)
# ครั้งที่สอง: เห็น "from cache" หรือขนาด 0B

# 4. ทดสอบจาก Incognito Mode เพื่อล้าง Cache เดิม
# ครั้งแรก: โหลดเต็ม
# ครั้งที่สอง (รีเฟรช): ควรเห็น "from cache"

แก้ปัญหาที่พบบ่อย

Error: "ไฟล์ .htaccess ไม่ทำงาน หรือไม่มี Cache Header"

สาเหตุ: Apache mod_expires ไม่ติดตั้ง หรือ AllowOverride ไม่เปิด ติดต่อ Hosting Provider ให้เปิดใช้ mod_expires หรือลองใช้ Cache-Control Header ผ่าน mod_headers แทน ถ้า mod_headers ก็ไม่มี ให้ติดต่อ Support ยืนขอให้เปิด Modules เหล่านี้

Error: "ผู้ใช้เห็นรูปเก่าหรือ CSS เก่า แม้ว่าอัพเดทแล้ว"

เกิดเพราะ Cache Duration ยังไม่หมด ผู้เยี่ยมชมต้องรอจนกว่าจะหมดอายุ (เช่น 1 ปี) วิธีแก้: ใช้ Caching Busting โดยเพิ่มเลข Version ต่อท้ายไฟล์ เช่น style.css?v=2 style.css?v=3 ทุกครั้งที่เปลี่ยนแปลง

Error: "HTML Page ยังโหลดเก่าแม้อัพเดทแล้ว"

หากตั้ง Caching HTML เป็น 1 ปี แล้วอัพเดท HTML ผู้เยี่ยมชมเก่าจะยังเห็นเวอร์ชันเก่า ควรตั้ง Cache สำหรับ HTML ให้น้อยกว่า เช่น 1 วัน หรือ 1 ชั่วโมง แล้วใช้ Caching Busting สำหรับ CSS/JS ที่เปลี่ยนน้อย

Error: ".htaccess ทำให้เว็บลืม Login หรือ Session หาย"

เกิดจากการตั้ง Cache ให้สูงเกินไปสำหรับไฟล์ที่มี Dynamic Content (เช่น Login Form, Shopping Cart) ควรตั้งค่า Cache ให้ต่ำสำหรับ HTML ดังเช่นตัวอย่างข้างต้น "access plus 1 day" และใช้ Cache-Control: must-revalidate เพื่อให้บังคับตรวจสอบเวอร์ชันใหม่

Error: "WordPress Plugin Conflicts ที่ดีที่สุดสำหรับ Browser Caching"

Plugin Caching บางตัวเช่น W3 Total Cache, WP Super Cache, LiteSpeed Cache อาจขัดแย้งกับ .htaccess Caching วิธีแก้: ปิด Plugin Caching ชั่วคราว และเลือกวิธีเดียว — ใช้ .htaccess สำหรับ Browser Caching หรือใช้ Plugin Caching ตัวใดตัวหนึ่ง ไม่ใช้พร้อมกัน

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

Q: Cache Duration (max-age) ควรตั้งเป็นเท่าไร?

A: ขึ้นอยู่กับประเภทไฟล์: CSS/JS/Fonts/รูป ที่ไม่เปลี่ยนบ่อย ตั้ง 1 ปี (31536000 วินาที) HTML ตั้ง 1 วัน (86400 วินาที) เพื่อให้อัพเดทเร็ว API Response ตั้ง 5 นาที (300 วินาที) ทั่วไป ยิ่งนาน Cache ยิ่งเร็ว แต่ต้องจัดการ Caching Busting ให้ดี

Q: Browser Cache ส่งผลต่อ SEO หรือ Performance Score หรือไม่?

A: ใช่ Google PageSpeed Insights และ Lighthouse ตรวจสอบว่าเว็บไซต์มี Proper Caching Headers หรือไม่ ถ้า Cache ดี Score ก็เพิ่มขึ้น บาง Metrics เช่น First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) ก็เร็วขึ้นเพราะเก็บไฟล์ในเครื่อง

Q: CDN (CloudFlare) เก็บ Cache แยกจาก Browser Caching หรือไม่?

A: ใช่ CDN มี Cache ของตัวเอง (Server-side Cache) ที่แยกจาก Browser Cache (Client-side Cache) ทั้งสองอย่างทำงานพร้อมกัน: CDN เก็บไฟล์ไว้ในเซิร์ฟเวอร์ CloudFlare ทั่วโลก ผู้เยี่ยมชมจะได้รับจากเซิร์ฟเวอร์ที่ใกล้ที่สุด ส่วน Browser Cache เก็บไฟล์ในเครื่องผู้ใช้ ทั้งสองรวมกันทำให้เว็บโหลดเร็วมาก