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

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

จริง ๆ ผมหาวิธีมานานแล้วครับ แต่ก็ no idea เพราะไม่ค่อยได้สนใจมากนัก แต่พอ Google เข้ามานำเสนอวิธีการ ผมก็ได้โอกาสทำซะเลย เมื่อได้ลองใช้ Page Speed (Plugin โหลดได้ฟรีจาก Firefox แต่ต้องลง Firebug ด้วย) แล้วพบว่าเว็บตัวเอง ขึ้นสีแดงเลยครับ นั่นคือ ไม่ผ่านการ optimized ด้าน Speed ตามที่ Google แนะนำ

ก็ต้องเริ่มแก้กันทีละตัวครับ ที่ผมเจอบ่อย ๆ จนถึงบ่อยที่สุดคือ

Optimize images
Parallelize downloads across hostnames
enable gzip compression
Serve static content from a cookieless domain
Remove unused CSS
Leverage browser caching
Minify CSS

ผมขออธิบายในแต่ละส่วนนะครับ เป็นวิธีแก้ที่ผมนำมาใช้จนผ่านการทดสอบ Speed ครับ

1. Optimized images
สำหรับปัญหานี้ ผมเชื่อว่า ทุกคนที่เทสต้องเจอครับ คือ การ resize รูปด้วยการกำหนด width, height จากขนาดภาพจริงลงมา เช่น ภาพจริง 200 x 200 แต่เรากำหนด ในแท็ก img ว่า width=”80″ height=”80″ สำหรับตัวเรามองว่า ไม่เห็นจะมีอะไร ภาพมันก็แค่ลดขนาดลงมา แต่ในเบื้องลึกแล้ว Browser ต้อง Render ภาพใหม่ ตลอดทำให้โหลดนานขึ้น หรือ อีกกรณีนึงคือ ภาพที่เราใช้ ยังสามารถทำให้ขนาดไฟล์เล็กลงได้อีก เช่น เราใช้ ภาพ .gif แต่ Google จะลองทำเป็น .png ถ้า .png มีขนาดเล็กกว่า Google ก็จะแนะนำให้ใช้ .png ตรงนี้ง่ายครับ แค่ save ไฟล์ที่ Google ทำให้เอามาใช้ได้เลย และ .jpg ก็เช่นกันครับ

2. Parallelized downloads across hostnames
ปัญหานี้ ปัจจุบันผมก็ยังแก้ไม่ตกครับ ไม่รู้ว่า เพราะอะไร แต่เท่าที่อ่าน คือ เรามีการอ้างอิงภาพ หรือ external link จากคนละ hostname มากเกินไป ถ้าหาทางแก้ได้จะรีบมาแจ้งครับ

3. Enable gzip compression
วิธีนี้แก้ง่ายมากครับ สำหรับเว็บที่ทำเอง เขียนโค้ดเอง สำหรับผมขอยกตัวอย่าง PHP ครับ เพียงแค่ใส่ code
ob_start(”ob_gzhandler”);
เข้าไปที่บรรทัดแรกของ php ก็เสร็จแล้วครับ เหมือนเพื่อบอกให้ code นี้ว่า document นี้จะทำการ gzip ด้วย เพื่อให้การโหลดต่อครั้งเล็กลงครับ

4. Serve static content from a cookieless domain
ปัญหานี้ผมก็ยังแก้ไม่ได้ครับ เท่าที่อ่าน ๆ ดู เหมือนจะให้เราแยก sub domain ออกมาสำหรับ static content เช่น image,flash ต่าง ๆ ครับแล้วกำหนด cookie ใน sub domain นั้น ๆ อันนี้ท่าทางจะทำไม่ได้สำหรับ share host อย่างเรา ๆ ครับ - -”

5. Remove unused cssสำหรับข้อนี้แปลกันตรงตัวครับ คือ ลบ css ที่ไม่ได้ใช้ทิ้งไป แต่… ก่อนจะลบ เช็คทุกหน้าที่มีการใช้นะครับ เพราะแต่ละหน้า จะมีการใช้ css ไม่เหมือนกัน แต่เราทำไฟล์ css ไฟล์เดียว ทำให้บางหน้าจะไม่ได้ใช้ตัวนั้น ตัวนี้ อย่าไปลบทิ้งหมดล่ะครับ หรือถ้าจะเอาให้มันดี 100% คือ แต่ละ page content ให้ใช้ css คนละไฟล์ เช่น css-home.css, css-item.css อะไรแบบนี้ แล้วกำหนดแต่ละ css ให้ใช้งานพอดีกับที่จำเป็น แล้วแต่ความชอบครับ

6. Leverage browser caching
ปัญหานี้คือเกี่ยวกับ browser ครับ คือ การโหลดภาพจาก browser ควรจะให้ browser เก็บ cache ด้วย เพื่อที่ครั้งต่อไป จะได้ดึงจาก browser cache ก่อน ไม่ต้องโหลดใหม่ จนกว่า cache จะหมดอายุครับ แก้ได้ด้วย .htaccess ผมทดสอบใน hostgator แล้วใช้ได้งานครับ เพียงเอา code นี้ไปใส่บนสุดของ .htaccess ก็เรียบร้อย

<FilesMatch “\.(ico|flv|jpg|jpg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=2592000, public”
</FilesMatch>

7. Minify CSS
เนื่องจากบางครั้ง การทำ css เรามักจะเว้นบรรทัด ช่องว่า หรือ อะไรมากมายเพื่อให้อ่านง่าย แต่การทำเช่นนั้น ทำให้ขนาดไฟล์ใหญ่ขึ้นครับ Google จึงแนะนำให้เราลดออกซะ แก้ง่าย ๆ ครับ เปิด link ที่ google แนะนำ แล้วเอามาทับไฟล์ css เรา ก็จบล่ะ

เพิ่มเติมอีกหน่อยครับ
ควรกำหนด image dimension ทุกภาพครับ
ลดขนาด js ด้วยวิธีเดียวกับ minify css
ลดการใช้ external js มาก ๆ หรือถ้าทำได้ นำมาไว้ที่ไฟล์เดียวกันทั้งหมด
หลีกเลี่ยงการใช้ css ที่ผิดรูปแบบ (Use efficient CSS selectors)
และเพิ่มเติมพิเศษครับ สำหรับเว็บที่ให้โหลดเร็วปรี๊ดดๆๆๆๆ เพียงเติม code นี้เข้าไปที่ .htaccess เช่นเคย
<FilesMatch “.(php|cgi|pl|htm)$”>
Header set Cache-Control “max-age=3600, public”
</FilesMatch>
ทำเพื่ออะไร?? ใน code นี้บอกว่า ไฟล์ php cgi pl html จะโดน cache ไว้ 3600 วินาที (1 ชม.) แล้วค่อยเริ่ม cache ใหม่ นั่นคือ ถ้าเราโหลดแล้ว 1 รอบ จะไม่โหลดอีก 1 ชม. ลองใส่แล้วทดสอบดูครับ จะเห็นว่า โหลดรอบแล้ว แล้วถ้าโหลดอีกครั้ง มันจะเหมือนไม่ได้โหลดเลย ยกเว้นกด F5 หรือ Ctrl+F5 นะครับ
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะครับ ทำแล้ว Google ไม่ชอบ แต่ User ชอบ แล้วทำให้เรามีรายได้เพิ่ม ก็น่าจะดีครับ

พี

Random Posts

• รายงานผล Amazon 2009-06-08 (4)
• Google Backlinks Update เตรียมปรับ PR (0)
• รายงานผล 2009-01-11 (2)
• วิธีการ Submit Social Bookmark ง่าย ๆ แค่ HTML เท่านั้น (6)
• คิดอย่างคนซื้อ อย่าคิดอย่างคนขาย (3)