เทคนิคเพิ่มความเร็วหน้าเว็บ จากประสบการณ์ทีมงาน yahoo

เทคนิคเพิ่มความเร็วหน้าเว็บ จากประสบการณ์ทีมงาน yahoo

จากบทความก่อน ที่บอกเล่าเทคนิคการเขียน 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 ได้ดีนักด้วย 

เป็นอย่างไรกันบ้าง กับ เทคนิค ที่จะให้ผลลัพท์ที่ดีกับ user เพื่อให้หน้าเว็บเราโหลดและแสดงผลได้เร็วยิ่งขึ้น โดยเฉพาะที่หน้าเว็บใครที่ใหญ่ๆ เปิดมาแล้วโหลดเกินกว่า 1 นาที เมื่อได้ปรับตามนี้แล้ว จะเห็นผลลัพท์อย่างชัดเจนมากๆ

แต่ว่าเทคนิคยังมีต่ออีกนะครับ ยังไม่จบแค่นี้ ติดตามต่อในภาคที่ 2 ได้ครับ ซึ่งเขียนเสร็จเมื่อไรจะเอามาลงอีกที (ที่ท่านอ่านอยู่นี้ค่อยๆเขียนใช้เวลาเป็นเดือนเลยครับ)

Create: Modify : 2010-08-17 09:37:20 Read : 9936 URL :