กฏ 14 ข้อของการทำ performance website
พอดีไปเจอบทความนี้มาครับ พร้อมกับ ได้ ลองติดตั้ง firefox extension ชื่อว่า Yslow (ต้องมี firebug ก่อน) เพื่อไว้ตรวจดูว่าเว็บไซต์ของเรานั้น ความเร็วในการโหลดได้ดี(หรือแย่)ระดับไหน ควรปรับปรุงจุดใดบ้าง
ใครยังไม่มีก็ไป ดาวโหลดได้ที่นี่ครับ
http://developer.yahoo.com/yslow/
ส่วน คำอธิบายต่างๆ ผมได้ copy มาให้อ่านกันครับ จาก
http://forum.nkc.kku.ac.th/index.php?topic=869.msg10290#msg10290
โดยคุณ mcpyx ได้แปลเป็นภาษาไทย ให้อ่านกันครับ
1. ทำให้จำนวน http request น้อยที่สุดเท่าที่เป็นไปได้ ข้อนี้น้อง ๆ ที่ไม่ได้เรียนวิชา web programming อาจจะงงซักหน่อย
ว่ามัน คืออะไร ขออธิบายง่าย ๆ ทุกครั้งที่บราวเซอร์ร้องขอข้อมูลอะไรสักอย่าง จากเซอร์เวอร์ ไม่ว่าจะเป็น รูปภาพ ไฟล์สคริป หรือแม้แต่สไตล์ชีต มันจะเกิดการ
ส่งคำสั่ง เพื่อร้องขอข้อมูล เพราะฉะนั้น ยิ่งคำสั่งยิ่งยาวเท่าไหร่ ก็ยิ่งทำข้อมูลที่ถูกส่งออกไปเยอะเท่านั้น นั้นเป็นสาเหตุนึงที่ทำ ให้เว็บของเรา ช้า
วิธีแก้ปัญหา คือ พยายามทำให้ http request มีจำนวนคำสั่งน้องที่สุดอย่างเช่น เปลี่ยนจากการใช้สคริปแบบฝังในโค๊ด หรือการ
เอาไฟล์มาฝังโค๊ดไว้ในหน้า เปลี่ยนมาทำการแยกไฟล์จะดีกว่า เพราะจะช่วยในการทำ cache ได้ และพยายามรวมไฟล์สคริ๊ปต่าง ๆ ให้อยุ่ในไฟล์เดียวกัน
เพื่อลดจำนวน http request
2. ใช้ CDN เพื่อลดระยะทางในการดึงข้อมูล ตรงนี้ถ้าใครไม่รู้จัก CDN จะอธิบายให้ฟังว่ามัน คือ Content Delivery Network
ซึ่งมันก็ คือ เว็บฟาร์มที่มีเซอร์เวอร์อยู่หลาย ๆ ที่ อย่าง hotmail ที่มีเซอร์ในไทย เวลาเราใช้งานในไทย เราก็ไม่ต้องไปวิ่งโหลดข้อมูลจากเซอร์เวอร์ต่าง
ประเทศ ทำให้ลดระยะทางในการดึงข้อมูลได้ แต่การใช้วิธีการนี้ถึงแม้จะมีข้อดีอยู่มาก แต่ข้อเสียก็ คือ ค่าบริการที่มีราคาแพง
3. เพิ่มระยะเวลาของแคชให้มากขึ้น การเพิ่มเวลาให้กับแคชช่วยให้เราไม่ต้องทำการสร้างเนื้อหาขึ้นมาใหม่ หรือไปโหลดข้อมูลจากดาต้าเบสมาใหม่ซึ่งทุก
ครั้งที่มีการสร้างใหม่ ความเร็วมันจะช้าก็แคชอยู่แล้วเพราะข้อมูลที่อยู่จากแคชจะถูกเก็บในหน่วยความจำหลักทำให้ดึงข้อมูลได้เร็วกว่า แต่ข้อเสียของวิธีนี้ คือ
ถ้าเราเพิ่มเวลามากเกินไป หรือเงื่อนไขไม่ดี จะทำให้ผู้ใช้งานได้รับข้อมูลที่ไม่อัพเดต เมื่อข้อมูลจริงถูกเปลี่ยน และปัญหาของเมโมรี่ที่เกินการใช้งานจริง
4. ตั้งค่าของเซอร์ให้ทำการส่งผ่านข้อมูลด้วยการบีบอัดข้อมูลแบบ Gzip เพื่อลดปริมาณข้อมูลบนเครือข่าย
5. เอาลิงค์ของสไตร์ชีตไว้บน header การที่ต้องเอาสไตล์ชีดไว้บน header เพราะทุกอย่างที่อยู่บนนั้นจะถูกโหลดพร้อมๆ กันกับ ข้อมูลบน body แต่ถ้าเราเอา สไตรล์ชีพไว้ที่ body ข้อมูลจะถูกโหลดเรียงตามลำดับ
6. เอาจาวาสคริป๊ไปไว้ที่ส่วนล่าง เหตุผลเพราะหากข้อมูลยังมาไม่ครบแล้วสคริปตัวนั้นทำงาน จะทำให้เกิดข้อผิดพลาดของโปรแกรมขึ้นเพราะ ข้อมูลที่โหลดมายังไม่มี ข้อมูลที่กำหนดไว้ในสคริ๊ป และอีกเหตุผล คือ จะเป็นการเสียเวลา หากเราใช้เวลาโหลดสคริปไว้นาน โดยที่ไม่มีผลอะไรเกิดขึ้น ควรจะโหลดข้อมูลก่อนแล้วค่อยโหลดสคริป๊
7. หลีกเลี่ยงการใช้ CSS Expression เพราะเป็นอันตราย และทำให้การทำงานของเว็บบราวเซอร์หนักเกินจำเป็นเพราะ เว็บบราวเซอร์จะทำการตรวจสอบและรันสคริปดังกล่าวตลอดเวลา
8. เรียกใช้ javascript และ CSS จากด้านนอก เพราะการที่เราเรียกใช้แบบเป็นไฟล์แยก จะทำให้เราสามารถใช้ความสามารถของการทำแคชชิ่งได้
9. ลดจำนวนครั้งของการค้นหา DNS ด้วยการเพิ่มระยะเวลาของการเก็บ ip address ให้กับบราวเซอร์
10. ทำให้สคริป๊เล็กที่สุดเท่าที่เป็นไปได้ เช่น การลดจำนวนบรรทัด และจำนวนของโค๊ด ของจาวาสคริป เพื่อลดจำนวนขนาดที่วิ่งบนเครือข่าย
11. หลีกเลี่ยงการทำ redirect พูดง่าย ๆ คือ อย่าขี้เกียจเขียนโปรแกรมแล้วให้มัน redirect กลับมาโหลดหน้าเดิม
12. เอาสคริ๊ปที่ไม่ได้ใช้งาน หรือถูกเรียกซ้ำออก
13. กำหนด ETag ตรงนี้หมายถึงเป็นการกำหนดค่าให้กับเซอร์เวอร์รู้ว่า ไฟล์นามสกุลอะไร ประเภทไหน ที่เราต้องการทำ cache เพื่อลดจำนวนของการสร้างคอนเทนต์
14. ทำให้ AJAX สามารถทำการแคชได้ จะทำให้การดึงข้อมูลเร็วขึ้นได้กว่าเดิม เพราะไม่ต้องเจนเนอร์เร็ทใหม่ตลอดเวลา
อ้างอิง : http://forum.nkc.kku.ac.th/index.php?topic=869.msg10290#msg10290
โดยคุณ mcpyx