เว็บไซต์ WordPress ของคุณโหลดช้าเกินไปไหม? คุณรู้ไหมว่าไซต์ช้าจะส่งผลต่อ SEO และประสบการณ์ผู้ใช้ (user experience)?
มีหลายวิธีเร่งความเร็วไซต์นอกจากการใช้ plugins หนึ่งคือ leverage browser cache (ใช้ประโยชน์จาก browser cache) อีกอย่างคือ compress files (บีบอัดไฟล์)
ทั้งสองอย่างสามารถทำได้โดยการปรับแต่งและเพิ่มประสิทธิภาพ (optimizing) ไฟล์ .htaccess
Browser Cache คืออะไร?
เมื่อใครเข้าชมเว็บไซต์ของคุณ จะมีไฟล์ที่ถูกดาวน์โหลดและจัดเก็บในตำแหน่งชั่วคราว (temporary location)
ประเภทของไฟล์รวมถึงเอกสารทั้งหมดที่ประกอบเว็บไซต์ของคุณ เช่น HTML, รูปภาพ, JavaScript, และไฟล์ CSS Browser cache หมายถึงตำแหน่งชั่วคราวนี้สำหรับไฟล์ที่ดาวน์โหลด
เมื่อ cache เต็ม มันจะใช้พื้นที่มากเกินบนคอมพิวเตอร์ของผู้เยี่ยมชม ส่งผลให้เบราว์เซอร์ช้า และเว็บไซต์โหลดนานเกินไป
โชคดีที่มีวิธีแก้ไขด้วยการแก้ไขไฟล์ .htaccess ของคุณ
สิ่งที่ควรทำก่อน
ก่อนเริ่มแก้ไขไฟล์ .htaccess พิจารณาข้อป้องกันต่อไปนี้:
- สร้างสำรอง (backup) ไฟล์ .htaccess ของ WordPress เสมอก่อนเปลี่ยนแปลง
- ปิดใช้งาน WordPress plugins ที่คุณอาจใช้อยู่
- ทดสอบความเร็วไซต์ก่อนเปลี่ยนแปลง .htaccess เพื่อได้ baseline measurement (ค่าฐาน) คุณสามารถใช้ GTmatrix, Pingdom, หรือ Google PageSpeed Insights
ตอนนี้คุณพร้อมที่จะใช้โค้ดผ่านไฟล์ .htaccess เพื่อบอกการติดตั้ง WordPress ของคุณ ให้ cache ไฟล์ static (คงที่) นานขึ้นสำหรับผู้เยี่ยมชมที่กลับมา (return visitors) คุณสามารถใช้ cPanel หรือ FTP ดูคำแนะนำด้านล่างสำหรับแต่ละอย่าง
เมื่อคุณเข้าถึงไฟล์ .htaccess แล้ว ให้ใช้คำแนะนำเพิ่มเติมเพื่อแก้ไข
การใช้ cPanel
ล็อกอินเข้าบัญชี cPanel ของเว็บไซต์ คุณมักไปได้โดยพิมพ์ yourdomain.com/cPanel ลงในเว็บเบราว์เซอร์
ล็อกอินด้วย username และ password ที่คุณได้รับเมื่อติดตั้ง WordPress บนโดเมนของคุณ เมื่อล็อกอินแล้ว ให้หาและคลิก File Manager
ไฟล์ .htaccess ของคุณอยู่ใน root folder จุด (dot) นำหน้าชื่อไฟล์บ่งบอกว่ามันเป็น hidden file ในการติดตั้ง WordPress ให้แน่ใจว่าติ๊ก checkbox Show Hidden Files
คุณควรทำสำเนาไฟล์ก่อนแก้ไข เพราะหากคุณทำผิด คุณอาจ crash ไซต์ของคุณ เพื่อทำสำเนา คลิก .htaccess และไฮไลท์มัน เพื่อบันทึกสำเนา คลิกปุ่ม download บนเมนูด้านบน
เมื่อคุณทำสำเนาแล้ว ตอนนี้คุณพร้อมแก้ไขไฟล์ ใน cPanel File Manager คลิกขวาไฟล์ .htaccess และคลิก edit
การใช้ FTP
คุณยังสามารถแก้ไขไฟล์ .htaccess โดยใช้ FTP client หนึ่งใน FTP clients ยอดนิยมคือ FileZilla ใช้ในตัวอย่างด้านล่าง
เริ่มด้วยการเปิด FTP client และใส่ host นี่มักจะเป็นที่อยูโดเมน username และ password ของคุณ หากคุณไม่แน่ใจว่ามันคืออะไร ติดต่อเว็บโฮสต์ของคุณ
ใช้ขั้นตอนต่อไปนี้เพื่อเข้าถึง คัดลอก และแก้ไขไฟล์ .htaccess:
- นำทางไปที่ root directory
- หาไฟล์ .htaccess ทำสำเนา และลากไปที่เดสก์ท็อป
- เก็บสำเนาต้นฉบับไว้ และแก้ไขสำเนาอีกชุด หากคุณต้องกู้คืนต้นฉบับ
- ใช้ editor อย่าง Notepad เพื่อแก้ไขไฟล์
- เมื่อคุณเสร็จสิ้นการแก้ไข อัปโหลดไฟล์กลับไปที่ root directory
หากคุณทำผิดพลาด เว็บไซต์ของคุณจะไม่ทำงาน เพื่อแก้ไข ให้อัปโหลดไฟล์สำรอง (backup file)
ตอนนี้คุณพร้อมที่จะเปลี่ยนแปลงไฟล์ .htaccess เพื่อเร่งความเร็วเว็บไซต์ WordPress ของคุณ
บีบอัดไฟล์ด้วย Gzip
Gzip compression ทำให้ไฟล์ของคุณเล็กลง และช่วยให้โหลดเร็วขึ้น การเพิ่มโค้ดด้านล่างลงในไฟล์ .htaccess (ใต้โค้ดปัจจุบัน) โดยใช้ gzip จะบีบอัดไฟล์ CSS, HTML, และ PHP
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
อย่าลืมคลิก "Save changes"
Browser Caching (การแคชเบราว์เซอร์)
เมื่อใครเข้าชมเว็บไซต์ของคุณ เบราว์เซอร์ที่ใช้จะดาวน์โหลดไฟล์ทั้งหมดที่เกี่ยวข้องกับหน้าที่เข้าถึง
Leveraging browser cache หมายถึงคุณต้องการดาวน์โหลดเฉพาะไฟล์ที่จำเป็น และไม่ใช่ assets ที่ไม่จำเป็น มักจะเป็น design และ style ของหน้า และบางครั้งรวม JavaScript functions ด้วย
เมื่อคุณใช้ browser cache คุณกำลังบอกเซิร์ฟเวอร์ให้ข้ามส่วนของเว็บเพจที่ดาวน์โหลดไปแล้วสำหรับผู้เยี่ยมชมซ้ำ (repeat visitors)
เพื่อแก้ไขไฟล์ .htaccess ให้ค้นหามัน และทำสองสำเนาในลักษณะเดียวกับตอนบีบอัดไฟล์ ตามที่ระบุข้างต้น โดยใช้ FTP client หรือ cPanel
เก็บสำเนาต้นฉบับ .htaccess ไว้ กรณีมีปัญหากับการเปลี่ยนแปลง ทำการแก้ไขในสำเนาอีกชุด
เพิ่มโค้ดต่อไปนี้ด้านล่าง เนื้อหาปัจจุบันของไฟล์ .htaccess:
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch "\.(txt|xml|js)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(css)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> ExpiresDefault A691200 </FilesMatch> </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(txt|xml|js)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> Header set Cache-Control "max-age=691200" </FilesMatch> </IfModule>
อย่าลืมคลิก Save เพื่อเก็บการเพิ่มเติมในไฟล์ของคุณ
การบีบอัดไฟล์และ leverage browser cache จะลดเวลาโหลดเว็บเพจของคุณอย่างมีนัยสำคัญ สิ่งนี้จะช่วยให้ไซต์จัดอันดับสูงขึ้นในการค้นหา และปรับปรุงประสบการณ์ผู้ใช้ ไม่มีใครอยากรอเกินไม่กี่วินาทีสำหรับหน้าเว็บโหลด
