ภาค 2 เทคนิคเพิ่มความเร็วการโหลดเว็บ

ภาค 2 เทคนิคเพิ่มความเร็วการโหลดเว็บ

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

ระวังการใช้ CSS Expression

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

ดังนั้น อย่าไปใช้มันเลยจะดีกว่า 

ทำ CSS และ Javascript ให้แยกไฟล์ออกไปต่างหาก

ถึงแม้ว่า ประเด็นหลักในการที่เพิ่มความเร็วการโหลดหน้าเว็บของเราอยู่ที่การควบคุมจำนวนของ 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 เพราะว่าที่เหลือเป็นเรื่องที่เข้าใจได้ไม่ยากแล้วครับ

Create: Modify : 2010-09-27 18:28:31 Read : 7534 URL :