สวัสดีครับ วันนี้ผมอยากมาแนะนำอีกหนึ่งเทคนิคสำหรับการเพิ่มความเร็วให้หน้าเว็บของเรากันนะครับ รับรองว่าความเร็วหน้าเว็บของคุณจะเพิ่มขึ้นบ้างหล่ะครับก่อนอื่นผมต้องอธิบายก่อนเลยว่าการเพิ่มความเร็วหน้าเว็บไซต์นั้นทำได้หลายวิธีและนี่ก็เป็นหนึ่งในวิธีเหล่านั้นนะครับ คือการใช้ htaccess ในการกำหนด cache และบีบอัดให้พวกไฟล์ต่างๆ มีขนาดเล็กลงครับ แต่ Apache ในเครื่องเซิฟเวอร์หรือโฮสติ้งของคุณนั้นจะต้องมีโมดูลสามตัวนี้ครับ คือ mod_expires.c, mod_headers.c และ mod_deflate.c ครับ สามตัวนี่จะเป็นตัวช่วยเราในการรีดความเร็วครับ
เอาหล่ะ ขั้นแรกก็ผมขอวัดความเร็วก่อนครับ สำหรับการวัดความเร็วนั้นผมใช้?PageSpeed Insights?ในการวัดครับ สำหรับบทความเรื่อง PageSpeed Insights นั้นสามารถอ่านได้ที่ วัดความเร็วเว็บไซต์ด้วย PageSpeed Insights จาก Google ซึ่มผมได้เขียนไว้แล้วครับ สำหรับผมขอใช้เว็บ thapakorn.com ในการทดลองเลยแล้วกันนะครับ สำหรับผมวัดออกมาได้ ประมาณ 71 คะแนนครับ ถือว่าคะแนนระดับนี้ยังสามารถเพิ่มได้อีกนิดหน่อยครับ
โดยหลักการนั้นจริงๆ แล้วเราจะทำการสร้าง cache ไฟล์ที่เรียกใช้บ่อยๆ และไม่ค่อยมีการเปลี่ยนเก็บไว้บนเครื่อง user เลยครับ สำหรับในส่วนของไฟล์จำพวก js css หรือไฟล์จำพวกฟอนต์นั้นเราก็สามารถบีบอัดให้ขนาดเล็กลงและสร้าง cache เก็บไว้บนเครื่อง user เหมือนกันครับ แต่ในส่วนของ html นั้นเราคงทำได้แค่เพียงการบีบอัดด้วย gzip แล้วส่งไป เพื่อความรวดเร็วเท่านั้นครับ
สำหรับวิธีการทำนั้นไม่ยากเลยครับ เพราะผมได้รวบรวมคำสั่งไว้ให้แล้วครับ แค่ copy แล้วนำไปใส่ในไฟล์ .htaccess ได้เลยครับ ด้านล่างเลยครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
# Add correct content-type for fonts AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType font/x-woff .woff AddType image/svg+xml .svg <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" # Add a far future Expires header for fonts ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/x-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" </ifModule> # compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript #Font AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/x-woff AddOutputFilterByType DEFLATE image/svg+xml <IfModule mod_headers.c> <FilesMatch ".(js)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> </IfModule> |
โดยผมจะอธิบายแต่ละส่วนดังนี้ครับ
|
1 2 3 4 5 6 |
# Add correct content-type for fonts AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType font/x-woff .woff AddType image/svg+xml .svg |
ส่วนนี้จะเป็นการเพิ่ม Type ให้กับไฟล์จำพวกตัวอักษรครับ หากเว็บใครที่มีการใช้ตัวอักษรพิเศษ การใช้คำสั่งด้านบนจะมีผลกับตอนที่เราใช้คำสั่งเพื่อ filter type ในการบีบอัดและสร้าง cache ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" # Add a far future Expires header for fonts ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/x-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" </ifModule> <FilesMatch ".(js)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> </IfModule> |
ในส่วนนี้จะเป็นการกำหนดระยะเวลาในการหมดอายุของไฟล์แต่ละประเภทครับ (สร้าง cache นั่นเอง)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript #Font AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/x-woff AddOutputFilterByType DEFLATE image/svg+xml |
ส่วนนี้จะเป็นการบีบอัดไฟล์ต่างๆ ให้เล็กลงครับ เพื่อความรวดเร็วในการส่งไปยัง user ครับ
เอาหล่ะเมื่อทำเสร็จแล้วก็ให้บันทึกแล้วอัพโหลดขึ้นไปบนเซิฟเวอร์แล้วเรามาดูผลกันครับ
หลังจากนั้นผมลองอัพโหลดไฟล์ .htaccess ขึ้นไปบนเซิฟเวอร์แล้ววัดความเร็วอีกครั้ง
หลังจากที่ทำการปรับแต่งแล้วก็ทำให้คะแนนความเร็วเว็บขึ้นมาอีกนิดหน่อยครับ ตรงนี้อาจจะมีผลกับ wordpress น้อยเพราะ wordpress มีการใส่ query strings ลงไปหลังไฟล์ css หรือ js ทำให้ไม่สามารถทำการ cache ได้ครับ แต่หากลองใช้กับเว็บที่เขียนเองผมว่าช่วยได้พอสมควรเลยครับ 🙂
เอาหล่ะครับ บทความนี้อาจจะช่วยได้ไม่มากก็น้อยนะครับ และหวังว่าเพื่อนๆ ที่อ่านน่าจะนำไปใช้ประโยชน์ได้บ้างนะครับ สำหรับวันนี้ผมต้องขอตัวก่อนหล่ะครับ แล้วพบกันใหม่บทความหน้านะครับ 🙂
- การสร้าง Class ใน JavaScript - August 26, 2015
- [Showcase] Photoshop แต่งภาพแนว Surrealism – Volcano - May 27, 2015
- [Photoshop Tips] การสร้าง Color Swatches จาก Tone สีของภาพต้นแบบ - March 7, 2015
ขอบคุณครับที่แบ่งปัน