เพิ่มความเร็วเว็บไซต์ได้ด้วย htaccess

 

PageSpeed Insights 000

สวัสดีครับ วันนี้ผมอยากมาแนะนำอีกหนึ่งเทคนิคสำหรับการเพิ่มความเร็วให้หน้าเว็บของเรากันนะครับ รับรองว่าความเร็วหน้าเว็บของคุณจะเพิ่มขึ้นบ้างหล่ะครับก่อนอื่นผมต้องอธิบายก่อนเลยว่าการเพิ่มความเร็วหน้าเว็บไซต์นั้นทำได้หลายวิธีและนี่ก็เป็นหนึ่งในวิธีเหล่านั้นนะครับ คือการใช้ 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 ได้เลยครับ ด้านล่างเลยครับ

[code]

# 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>

[/code]

โดยผมจะอธิบายแต่ละส่วนดังนี้ครับ

[code]# 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[/code]

ส่วนนี้จะเป็นการเพิ่ม Type ให้กับไฟล์จำพวกตัวอักษรครับ หากเว็บใครที่มีการใช้ตัวอักษรพิเศษ การใช้คำสั่งด้านบนจะมีผลกับตอนที่เราใช้คำสั่งเพื่อ filter type ในการบีบอัดและสร้าง cache ครับ

[code]

<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>

[/code]

ในส่วนนี้จะเป็นการกำหนดระยะเวลาในการหมดอายุของไฟล์แต่ละประเภทครับ (สร้าง cache นั่นเอง)

[code]# 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[/code]

ส่วนนี้จะเป็นการบีบอัดไฟล์ต่างๆ ให้เล็กลงครับ เพื่อความรวดเร็วในการส่งไปยัง user ครับ

เอาหล่ะเมื่อทำเสร็จแล้วก็ให้บันทึกแล้วอัพโหลดขึ้นไปบนเซิฟเวอร์แล้วเรามาดูผลกันครับ

htaccess-boots-speed-webpage-001

ก่อนทำการเพิ่ม htaccess วัดความเร็วได้ 71 ครับ

หลังจากนั้นผมลองอัพโหลดไฟล์ .htaccess ขึ้นไปบนเซิฟเวอร์แล้ววัดความเร็วอีกครั้ง

htaccess-boots-speed-webpage-002

หลังทำการเพิ่ม htaccess วัดความเร็วได้ 80 ครับ

หลังจากที่ทำการปรับแต่งแล้วก็ทำให้คะแนนความเร็วเว็บขึ้นมาอีกนิดหน่อยครับ ตรงนี้อาจจะมีผลกับ wordpress น้อยเพราะ wordpress มีการใส่ query strings ลงไปหลังไฟล์ css หรือ js ทำให้ไม่สามารถทำการ cache ได้ครับ แต่หากลองใช้กับเว็บที่เขียนเองผมว่าช่วยได้พอสมควรเลยครับ :)

เอาหล่ะครับ บทความนี้อาจจะช่วยได้ไม่มากก็น้อยนะครับ และหวังว่าเพื่อนๆ ที่อ่านน่าจะนำไปใช้ประโยชน์ได้บ้างนะครับ สำหรับวันนี้ผมต้องขอตัวก่อนหล่ะครับ แล้วพบกันใหม่บทความหน้านะครับ :)

Thapakorn
Follow me

Thapakorn

Programmer / Startup Owner at Phuketinnova Col., Ltd.
โปรแกรมเมอร์ที่ชอบถ่ายภาพและปั่นจักรยาน(แต่ไม่มีจักรยาน) ชอบทุกอย่างที่เกี่ยวกับเครื่องบินและคอมพิวเตอร์ ใฝ่ฝันอยากเป็นนักบินแต่ได้เป็นโปรแกรมเมอร์ :P
Thapakorn
Follow me

One thought on “เพิ่มความเร็วเว็บไซต์ได้ด้วย htaccess

Leave a Reply