เอามาให้อ่านกันเล่น ๆ ครับ เห็นว่าหัวข้อน่าสนใจดีครับ
Optimized Web Page ให้เร็วตามแบบฉบับ Google
ขออธิบายในแต่ละส่วนนะครับ เป็นวิธีแก้ที่ผมนำมาใช้จนผ่านการทดสอบ 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 ที่ผิดรูปแบบ
และเพิ่มเติมพิเศษครับ สำหรับเว็บที่ให้โหลดเร็วปรี๊ดดๆๆๆๆ เพียงเติม 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 ชอบ แล้วทำให้เรามีรายได้เพิ่ม ก็น่าจะดีครับ
ที่มา
http://www.oknation.net/blog/print.php?id=539666 
ความรู้ทั่วไป
