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

เพราะว่าเว็บที่มีขนาดใหญ่ๆ นอกจากตัว server จะประมวลผลได้เร็วแล้ว ยังจำเป็นต้องอาศัยความรวดเร็วในการโหลดอีกด้วย ต้องไม่โหลดมากจนเกินไป ต้องไม่มีขนาดใหญ่จนเกินไป และลด over head ต่างๆ และอื่นๆอีกที่เราจะกล่าวกัน ซึ่งจะเป็นเรื่องส่วน front หน้าเว็บเป็นส่วนใหญ่ครับ

บทความนี้ ต้นฉบับคือ Yahoo Developer นะครับ ทีมงานได้เก็บรวบรวมประสบการณ์ต่างๆมามากมาย แล้วเอามาสรุปให้เราฟังกันเป็นเรื่องๆครับ ผมจะเอามาเรียบเรียงให้เข้าใจง่ายๆกัน

ลดจำนวน HTTP Request (คำขอไฟล์ต่างๆของ server)
เริ่มมาจากเวลาที่ user เปิดหน้าเว็บนั้น จะใช้เวลา 80% ของการรอไปกับการโหลดส่วน front ทั้งหลาย ซึ่งจะประกอบไปด้วย รูปภาพ stylesheet script flash และอื่นๆ ดังนั้น การลดจำนวนไฟล์ที่จะต้องโหลดลงได้ ก็แปลความหมายได้ว่าลดการใช้เวลาในการเปิดหน้าเว็บลงไปได้ด้วย อันนี้ถือว่าเป็นหัวใจที่สำคัญสุดๆเลย ที่จะทำให้หน้าเว็บนั้นเร็วขึ้น

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

รวมไฟล์ เป็นหนทางที่จะลดจำนวน http request ลงได้ ด้วยการรวมสคริปหลายๆไฟล์ เข้ามาเป็นไฟล์เดียว หรือเช่นเดียวกัน ด้วยการรวม css หลายๆไฟล์เข้ามาเป็นไฟล์เดียว แต่อาจจะต้องพิจารณาเป็นหน้าๆไปด้วย แต่การทำแบบนี้จะช่วยลดเวลาการโหลดไปได้พอสมควรเลย

CSS Sprites เป็นเทคนิคเพื่อช่วยลด http request ของรูปภาพต่างๆ โดยการทำงานของมันก็คือ เอารูปหลายๆรูปที่อยู่ในจุดต่างๆมารวมเป็นรูปเดียว จากนั้น ใช้เทคนิคของ CSS เข้ามาช่วย ในการเรียก background-image และกำหนดค่าของ background-position เพื่อให้แสดงรูปเฉพาะตำแหน่งนั้นๆของรูปใหญ่นั่นเอง

Image maps เป็นอีกทางหนึ่งในการรวมหลายรูปเข้ามาเป็นรูปเดียว เพราะว่าบางคนใช้การตัด (slice) รูปเป็นชิ้นเล็กๆ แล้วเอาแต่ละชิ้นมาใส่ link ซึ่งนั่นจะไม่ดีแน่ๆ แต่มันก็จะใช้ได้กับภาพที่เป็นก้อนเดียวกันเท่านั้น แต่การใช้ image map นั้นมีข้อเสียเรื่องการวัด co ordinator ของวัตถุด้วย ซึ่งอาจจะทำให้เกิดการคลิก หรือทำให้เกิดลิ้งค์ที่ผิดพลาด จึงไม่แนะนำให้ทำเท่าไร

Inline image เป็นการฝังรูปลงไปในหน้าเว็บเลย (ทำให้รูปเป็นโค้ด แล้วเรียกแสดงโค้ดแทนรูป) จะส่งผลให้ขนาดของไฟล์หน้าเว็บเราใหญ่ขึ้น แต่ถ้าเราเอาไปผสมในการทำ css แล้วทำ cache ให้ไฟล์ ก็น่าจะช่วยลด http header ที่เสียไปกับรูปได้คุ้มค่ากับ ขนาดไฟล์ css ที่เพิ่มขึ้น แต่อย่างไรก็ดี Inline image ไม่สามารถใช้ได้ในทุก browser

การลด http header ถือเป็นเรื่องที่สำคัญ และเป็นสิ่งแรกที่ควรจะทำ เพื่อให้ user ที่เปิดหน้าเว็บครั้งแรกรู้สึกไม่ช้าจนขัดใจ โดยมีคนที่ได้ทดสอบเอาไว้ว่า 40-60% ของคนที่เข้าเว็บ เข้ามาแบบที่ไม่มี cache ที่เครื่องเลย ดังนั้น การทำเว็บให้โหลดได้เร็วจึงน่าจะเป็นสิ่งที่ดี ที่ทำให้ user เกิดความประทับใจได้

เลือกใช้ Content Delivery Network
เป็นสิ่งที่กระทบกับความเร็วในการเปิดเว็บของ user อันเนื่องมาจาก user ที่เปิด นั้นเปิดมาจาก หลากหลายที่บนโลกใบนี้ ดังนั้นเราจะแก้อย่างไรในปัญหานี้ จะต้องถึงกับไปวาง server ทั่วโลกเลยหรือเปล่า?

การที่เราจะทำให้ระบบรองรับผู้ใช้งานที่มาจากทั่วโลก เราควรจะต้องมีการวางโครงสร้างการเปลี่ยนแปลงที่จะเกิดขึ้นของตัวเว็บให้เราอย่างดีเสียก่อน ไม่ใช่แค่อ่าน เขียน ลงฐานข้อมูลธรรมดาอีกแล้ว แต่ระบบการทำงานจะต้องรองรับการถ่ายโอนข้อมูล การ sync กันระหว่างเครื่อง server ด้วย รวมทั้งการ update ข้อมูลให้แก่กันและกัน ซึ่งนี่คือการทำระบบภายใน

ต้องไม่ลืมว่า 80-90% ของเวลาที่ user ใช้เปิดหน้าเว็บ หมดไปกับการ download object ต่างๆของหน้าเว็บเรา โดยส่วนใหญ่ก็เป็น static file นั่นล่ะ ซึ่งเป็นสิ่งที่แก้ไขได้ง่ายกว่าการจะไปทำระบบให้ยุ่งยาก มากมายอย่างที่กล่าวมาแล้วข้างต้น ทั้งนี้ต้องยกความดีในการแก้ไขให้กับ content delivery network ที่กำลังจะกล่าวนี้

Content Delivery Network นี้ หรือ เรียกกันสั้นๆว่า CDN เป็นผู้ให้บริการไฟล์ต่างๆ ซึ่งจะมีการกระจายไฟล์นั้นๆ ไปยัง server ที่อยู่ที่ต่างๆกัน เช่นคนละประเทศ โดยจะมีการเลือกใช้ server ที่ใกล้กับ user มากที่สุด ตัวอย่างเช่น (สมมุติ)เราเปิดเว็บ amazon แต่เราอาจจะไม่รู้ว่า รูปที่เราดึงมาจาก amazon เครื่อง server นั้นตั้งอยู่แค่ สิงค์โปรเท่านั้น ซึ่งเป็นเครื่องในเครือข่าย CDN amazon แต่ว่า server จริงๆ ก็ยังตั้งอยู่ที่ USA เช่นเดิม ไม่ได้เปลี่ยนแปลง

บริษัทที่ดำเนินการผ่านทาง internet ใหญ่ๆนั้น มักจะมี CDN เป็นของตัวเองแต่นั่นจะทำให้เกิดค่าใช้จ่ายเพิ่มขึ้นสูงมากกว่าการเลือกใช้จากผู้ให้บริการ CDN ที่มีอยู่มากมายทั่วโลกเราในขณะนี้ ทั้งนี้ yahoo เองก็มีการใช้ CDN ด้วย ซึ่งจากการทดสอบพบว่า user จะเปิดหน้าเว็บเร็วขึ้น 20% หรือมากกว่านั้น

สำหรับเว็บในไทยเองนั้น หากมีการใช้ CDN ผมว่าความเร็วน่าจะเพิ่มขึ้นเกิน 50% สำหรับเว็บเล็ก และอาจจะถึง 80% สำหรับเว็บใหญ่ เพราะว่าช่องทางขาออกต่างประเทศของ server ในไทยเล็กเหลือเกินครับ

ตั้งค่า Expires หรือ Cache-Control Header
มีข้อกำหนดอยู่สองข้อ

สำหรับ static component ให้ใช้ “Never expire” โดยการตั้งค่า Expire header ให้ล่วงหน้าไปไกลๆ
สำหรับ dynamic component ให้ใช้ Cache-control header เพื่อสื่อสารกับ browser ในการจัดการกับ cache
หน้าเว็บนั้น มักจะประกอบด้วยส่วนต่างๆมากมายเต็มไปหมด ไม่ว่าจะเป็น script , style sheet, รูปภาพ หรือ flash จริงอยู่ที่ว่าการเปิดเว็บครั้งแรก user จะต้องโหลดไฟล์มากมาย และมี http header เกิดขึ้นมากมายด้วย แต่ว่าการใช้งาน Expire header จะทำให้ component เหล่านั้น cache เก็บไว้ที่เครื่อง user ซึ่งนั่นจะลดการใช้ http header ให้การเปิดหน้าอื่นๆต่อไปที่มีการใช้งานไฟล์เดิมๆที่ซ้ำกัน โดย Expire header จะใช้มากกับรูปภาพ แต่ก็สามารถเอามาใช้กับ script , stylesheet หรือ flash ด้วย

browser (หรือ proxies) จะมีการใช้ cache เพื่อลดจำนวน http request ลง เพื่อให้หน้าเว็บโหลดได้เร็วขึ้น โดยส่วนของ server ก็จะมีการตั้งค่า header expire เพื่อเป็นค่าที่ใช้บอกระบบ cache นั้นๆว่าจะเก็บ component นั้นๆไว้นานเท่าไร โดยเป็นค่าเวลาในอนาคต ที่คาดว่า จะไม่มีการเปลี่ยนแปลงใดๆของไฟล์นี้ โดยตัวอย่างกำหนดให้หมดอายุ 15 ธันวาคม 2553 คือ

Expires: Wed, 15 Dec 2010 20:00:00 GMT
ถ้า server ของคุณใช้งาน Apache ให้ใช้ ExpireDefault เพื่อกำหนดเวลาที่จะหมดอายุโดยอ้างอิงกับวันปัจจุบันไปข้างหน้า โดยนี่คือตัวอย่างของ ExpireDefault ที่สั่งให้หมดอายุใน 10 ปีข้างหน้า

ExpiresDefault “access plus 10 years”
แต่อย่างไรก็ดี หากว่าในอนาคตเรามีการเปลี่ยนไฟล์นี้ก็ไม่ต้องกังวลไป เพราะว่าวีธีการเปลี่ยนไฟล์ก็คือการเปลี่ยนชื่อไปเลย จะทำให้ user มาโหลดไฟล์จากชื่อใหม่ไปแทน แต่ก็ไม่ต้องห่วงว่าจะงง กับตัวเอง เพราะวิธีแก้ง่ายมากด้วยการใส่เลข version ของชื่อไฟล์นั้นๆลงไปด้วย ทำให้เราไม่งงตัวเองด้วย ว่า version นี้้คือใหม่หรือเก่า และตัว cache ก็จะได้โหลดของใหม่ไปใช้ได้ด้วย

การตั้งค่าการหมดอายุของไฟล์เหล่านี้จะมีผลต่อผู้ที่เคยเข้าเว็บแล้วเท่านั้น และไม่มีความเกี่ยวข้องกับจำนวน HTTP request header ของผู้ที่เปิดหน้าเว็บใหม่ในครั้งแรก เพราะว่าต้องโหลดทุกอย่างใหม่อยู่แล้ว
การทำแบบนี้จะส่งผลให้ website performance ดีขึ้น หากว่า user มีการคลิกหน้าเว็บที่เยอะๆ เพราะว่าข้อมูลก็จะถูกดึงขึ้นมาจาก cache ตลอด ไม่ต้องโหลดใหม่ทุกครั้งที่คลิก โดยจากการทดสอบของเว็บ yahoo เองนั้นพบว่า มีการเรียกข้อมูลจาก cache มากถึง 75-85% เลย ด้วยการตั้งค่าหมดอายุของไฟล์ไว้ไกลๆแค่นี้เอง

บีบข้อมูลที่ส่ง Gzip Components
จริงอยู่ที่ว่าความเร็วการโหลดหน้าเว็บนั้น ไม่ได้ขึ้นกับเพียงแต่ server เท่านั้น แต่ขึ้นอยู่กับ internet ที่ user ใช้งานเองด้วย  ดังนั้น หากเราสามารถบีบขนาดของ data ที่ user ต้องโหลดให้เล็กลงได้ ก็จะทำให้ user โหลดเว็บได้เร็วขึ้นอีกด้วย

โดยใน HTTP/1.1 web client จะรองรับการบีบอัดได้ ต่อเมื่อมี Accept-Encoding header ที่ HTTP request

Accept-Encoding: gzip, deflate
ถ้าเว็บ server ได้รับ header ชุดนี้มา ก็จะทำการบีบข้อมูลเพื่อส่งให้ client โดย web server ก็จะมี header แจ้งไปด้วย ใน Content-Encoding header ดังนี้

Content-Encoding: gzip
Gzip คือการบีบอัดที่ได้รับความนิยมมากที่สุด โดยทำอยู่บนมาตรฐาน RFC 1952

Gzip สามารถช่วยลด เวลาการตอบสนองได้ประมาณ 70% ซึ่งคาดการณ์ว่า 90% ในการใช้งาน internet ทั้งหมดในปัจจุบัน สามารถใช้งาน gzip ได้ ถ้าคุณใช้ Apache version 1.3 ให้ใช้ mod_gzip หรือถ้าใช้ Apache 2.x ให้ใช้ mod_deflate

อย่างไรก็ดี การใช้งาน Gzip ก็ต้องดูประเภทไฟล์ด้ฝวย เพราะว่าเรามักจะเอามาใช้กับ HTML , javascript , css โดยต้องระวังการนำไปใช้กับ XML, Json, PDF, รูปภาพ เพราะว่ามันถูกบีบอัดอยู่แล้ว จะทำให้สิ้นเปลือง CPU โดยเปล่าประโยชน์ หรืออาจจะทำให้ไฟล์ใหญ่ขึ้นได้อีกต่างหาก

ใส่ Stylesheets ที่ด้านบน
จากงานวิจัยของ Yahoo พบว่า การใส่ stylesheet ที่ head จะทำให้หน้าเว็บปรากฏได้เร็วขึ้น เป็นเพราะว่าการใส่ไว้ที่ headจะทำให้หน้าเว็บสามารถดำเนินกระบวนการแสดงผลหน้าเว็บได้

การวาง stylesheet ไว้ที่ด่านล่าง พบว่าเป็นการขัดขวางการแสดงผลหน้าเว็บในหลาย browser รวมทั้ง internet explorer ด้วย เพราะว่า browser จะต้องหยุดการแสดงผล จนกว่าจะโหลด stylesheet ชุดนั้นๆจนเสร็จ จึงจะแสดงผลออกมา ส่งผลให้เกิดช่วงหน้าขาวๆขึ้นระหว่างตอนที่รอนั่นเอง

มาตรฐานของ HTML เองก็กำหนดเอาไว้แล้วด้วยว่า ให้เอา css วางไว้ที่ส่วน head ของหน้าเว็บ และเพื่อป้องกันการแสดงผลในบางส่วนของเว็บที่ไม่ถูก apply stylesheet ด้วย

ใส่ สคริปที่ด้านล่าง

อันนี้เกิดเนื่องมาจาก web browser ไม่สามารถ parallel download ได้มากกว่า 2 ไฟล์พร้อมกันใน 1 host ซึ่งหนทางแก้ปัญหาก็คือการแบ่งไฟล์ใส่ไว้ที่หลายๆ host เพื่อให้เรียกเข้ามาพร้อมกันนั่นเอง แต่ว่ากรณีนี้ใช้ได้กับรูปเท่านั้น ถ้าเป็น script จะไม่มี parallel download แม้ว่าจะวางไว้ต่าง host กันก็ตาม

แต่ว่าบางกรณีเราจะไม่สามารถเอาสคริปไปไว้ที่ด้านล่างได้ เช่นคำสั่ง document.write เพราะว่าเป็นเรื่องของ scope การทำงาน
ทางเลือกที่น่าสนใจก็คือ การใช้ script defer โดย DEFER จะเป็นค่าที่บอกให้สคริปที่ไม่มีส่วน document.write สามารถทำงานต่อไปได้ แต่อย่างไรก็ดี firefox ก็ไม่รองรับ DEFER ส่วนใน internet explorer เอง ก็ไม่ใช่ว่าจะทำงานกับ defer ได้ดีนักด้วย

ระวังการใช้ CSS Expression
CSS expression มีความสามารถมาก (แต่ก็ส่งผลกระทบได้มากเหมือนกัน) เป็นการทำให้ CSS เกิดการ dynamic ได้ โดยสามารถใช้งานได้ใน Internet Explorer ตั้งแต่ version 5 ขึ้นมา แต่ว่า ถูกเอาความสามารถนี้ออกไปแล้ว ตั้งแต่ Internet Explorer version 8 ขึ้นไป

ดังนั้น อย่าไปใช้มันเลยจะดีกว่า
ถึงแม้ว่า ประเด็นหลักในการที่เพิ่มความเร็วการโหลดหน้าเว็บของเราอยู่ที่การควบคุมจำนวนของ component ที่เราเรียกมาใส่หน้าเว็บเราก็ตาม ก็จะต้องเจอกับคำถามค้างคาใจ ว่าแล้วสรุป สุดท้ายเราจะเอา javascript , css ไว้ในไฟล์หรือนอกไฟล์กันถึงจะดี

แนะนำให้เราแยก CSS กับ javascript ไฟล์ออกไปเป็นไฟล์ต่างหาก ไม่ควรเขียนลงไปรวมกันในหน้าเว็บ เพราะว่า CSS file และ javascrip file ต่างสามารถถูก cache ได้ใน browser แต่ว่า การเขียน javascript, css ลงไปที่หน้าเว็บ จะต้องถูกโหลดทุกๆครั้งที่เราเปิดหน้าเว็บนั้นๆ จริงอยู่ที่เราจะสามารถลดการ request ลงได้ แต่ว่าเรากลับไปเพิ่มในส่วนของ ขนาด HTML document แทนนั่นเอง แต่ในทางกลับกัน หากเราไปใช้ external file แล้ว และเมื่อ browser ได้ cache แล้วเราก็จะพบว่า เราทำงานกับ HTML document ที่ขนาดเล็กลง แต่มี request ที่เท่าเดิมนั่นเอง

โดยจะมีประเด็นหลักที่ส่งผลโดยตรงก็คือความถี่ในการเปิดหน้าเว็บ โดยเราจะต้องทำการประมวลก่อนด้วยว่า user จะมีพฤติกรรมบนหน้าเว็บเราแบบไหนมากกว่ากัน คือเปิดโดยมีหน้าตาซ้ำๆ หรือว่า เปิดหน้าตาแบบใหม่ตลอดแต่แค่ครั้งเดียว เพราะว่าจะส่งผลว่าไฟล์ที่ถูก cache เหล่านั้นได้ถูกใช้ซ้ำ คุ้มค่ามากน้อยแค่ไหนนั่นเอง

ลดเวลาการใช้ DNS lookup
เป็นที่รู้กัน ว่าเราใช้ระบบโดเมนเนม เข้ามามีบทบาทเพื่อทดแทนการจดจำเป็น IP  มันก็เหมือนกัน phone book ที่เราใช้ชื่อเพื่อนแทนเบอร์โทรศัพท์ในการจดจำนั่นเอง โดยเมื่อเราเปิดหน้าเว็บเช่น meewebfree.com ใน browser เจ้าตัว DNS resolver ก็จะตอบกลับไปที่ browser ว่าอยู่ที่ IP อะไร ซึ่ง DNS นี้ก็กินเวลาไปประมาณ 20-120 milliseconds ในกระบวนการ ถามหา ip จาก host name ดังกล่าวโดยระหว่างนี้ browser จะไม่สามารถ download อะไรได้เลย จนกว่า  dns lookup จะเสร็จสิ้น

ถ้าสามารถทำ cache ให้กับ DNS lookup ได้ ก็จะทำให้มีความเร็วที่มากขึ้น โดย cache นี้ จะเป็นแบบพิเศษ ซึ่งจะทำอยู่ที่ ISP ผู้ให้บริการ internet ของเรา หรือในเครือข่าย lan ของเรา แล้วแต่กรณี แต่ในเครื่องเราก็มีด้วยเหมือนกัน และ browser ส่วนใหญ่ก็จะมี cache เป็นของตัวเอง ที่ไม่ได้ใช้งานจาก OS

Internet Explorer cache dns lookup ไว้ประมาณ 30 นาที ซึ่งถูกกำหนดโดย DnsCacheTimeout registry setting ส่วน firefox cache 1 นาที กำหนดโดย network.dnsCacheExpiration

ดังนั้น การที่เราเอาไฟล์ ไว้ที่หลายๆ host name จะส่งผลให้ การทำ DNS lookup นั้นใช้เวลามากขึ้น ถ้าเราลดจำนวน host name ได้ ก็จะลดเวลาในการ DNS lookup ลงได้

แต่ว่าการลด host name ที่เราใช้เก็บไฟล์ ก็ส่งผลโดยตรงต่อการทำงาน parallel download อีก โดยข้อแนะนำก็คือ ให้แบ่งไฟล์เก็บไว้ที่ 2 host name แต่ไม่เกิน 4 host name ก็จะเป็นจุดที่สมดุลพอดี

ลดขนาดของ JavaScript และ CSS
การลดขนาดหรือที่เราเรียกว่า minify เป็นการลบตัวหนังสือต่างๆที่เราไม่ต้องการใช้งานออกจาก source code ซึ่งจะช่วยลด load time  โดยการทำ minify จะลบ comment หรือ ช่องว่างต่างๆที่ไม่สำคัญออก โดยใน case ของ JavaScript จะช่วยให้ทำงานได้เร็วขึ้น เพราะว่าลดเวลาการโหลดลงไป โดยที่นิยมใช้ มักจะใช้ JSMin หรือ YUI Compressor โดยที่ YUI Compressor สามารถใช้ minify CSS ได้ด้วย

โดยผลการสำรวจ top ten เว็บของอเมริกา พบว่า การทำ minify สามารถลดการโหลดลงได้ 21%

ตรวจสอบการ redirect
ทั้งการ redirect 301 และ 302  จริงๆแล้วจะมีการ redirect โดยใช้ meta refresh tag และ javascript ก็ตาม แต่แนะนำให้ใช้ standard 3xx HTTP status code ในการ redirect จะดีกว่า

โดยการ redirect จะทำให้การเปิดหน้าเว็บนั้นช้าลงไปอีก เพราะว่าเสียเวลาไปกับการ redirect ไปมา และอีกอย่างที่ต้องระวังและอาจจะคาดไม่ถึง ก็คือการ redirect ไปยัง URL ที่มี และไม่มีเครื่องหมาย / ตามหลัง เช่น meewebfree.com/aaa ซึ่งจะ redirect ไป meewebfree.com/aaa/ (ตัวอย่างนี้สมมุติขึ้นมาเฉยๆ) โดยเราสามารถแก้ไขใน apache ได้ด้วยการ ใช้ Alias หรือ mod_rewrite หรือ DirectorySlash (สำหรับคนที่ใช้งาน apache)

ลบโค้ดที่ซ้ำๆออก
โดยผลการสำรวจพบว่า เว็บใหญ่ๆ มักจะมีโค้ดที่ซ้ำๆกันให้เห็นอยู่เสมอๆ อาจจะเป็นเพราะว่า ขนาดของทีมที่ทำงาน ดังนั้นเราสามารถแก้ไขได้ โดยการเขียน function ขึ้นมาทำงานเพื่อ เรียก javascript, CSS เหล่านี้โดยเฉพาะ โดยให้มีการตรวจการ load ซ้ำเข้าไปด้วย ก็จะช่วยลดการโหลดและทำงานซ้ำซ้อนลงไปได้

ตั้งค่า Ajax ให้มี cache
จะทำให้การ request นั้นเร็วขึ้นอีกมาก แต่ว่าอาจจะต้องพิจารณาเป็นงานไปเพราะว่าบางงานก็ต้องการข้อมูลสดใหม่เสมอไม่ใช่จาก cache

Flush buffer ออกไปก่อน
เมื่อเราเปิดหน้าเว็บตามปกติ จะมีการทำงานจากส่วนของ server ที่จะใช้เวลาประมาณ 200-500 ms โดยระหว่างนี้ browser ก็จะรอข้อมูลอยู่ โดยเราสามารถตัดการรอ ได้ด้วยการใช้ function flush() เพื่อเป็นการส่งข้อมูลที่โหลดขึ้นมาแล้วไปยัง user ก่อน พร้อมกันระหว่างการประมวลผลในส่วนต่อๆไป โดยปกตินิยมการ flush ส่วน head ออกมาก่อน  ในระหว่างที่กำลังโหลด body โดยการเอา function นี้ไปคั่นระหว่าง head กับ body นั่นเอง

ใช้การ GET สำหรับ Ajax request
โดยใน URL จะสามารถส่งค่าการ get ได้ 2 K หากมากกว่านั่นจะไม่ได้

Post-load Component
คือการซ่อน เนื้อหาบางส่วนที่ต้องการ ซึ่งหลักๆจะเป็นภาพ โดยไม่ให้แสดงบนหน้าเว็บ แต่ว่าจะใช้ javascript เรียกเอาในภายหลังจากที่โหลดหน้าเว็บเสร็จแล้ว จะส่งผลให้หน้าเว็บโหลดได้เร็วมาก โดยเทคนิคนี้ มีให้เลือกใช้เยอะ เช่น YUI Image Loader , YUI Get utility แต่ข้อควรระวังคือ กรณีที่ user ไม่สามารถใช้ javascript ได้ ก็จะไม่เห็นส่วนนั้นๆเลย

และที่นอกเหนือจากนี้ก็อ่านเพิ่มเติมได้ที่ http://developer.yahoo.com/performance/rules.html เพราะว่าที่เหลือเป็นเรื่องที่เข้าใจได้ไม่ยากแล้ว