Month: December 2016

รู้จักกับ HTTP2 Server Push

ในโลกของ Web นั้น ทุกๆครั้งที่ทางฝั่ง Client หรือ Browser ทำการขอข้อมูลด้วยนั้นจะใช้ HTTP Request ซึ่งการ Request หนึ่งครั้งนั้นมันมี Cost ของมันอยู่โดยเฉพาะการทำ Network Negociation ที่จะต้องมีในทุกๆครั้งที่ทำ HTTP Request

พื้นฐานกันหน่อย

ทีนี้มาลองดูตัวอย่างเช่น มีเวปเล็กๆ 1 เวปที่มี

  • index.html
  • style.css
  • font.woff2

ถ้าหน้า index.html นั้นมีการใช้ทั้ง style.css และ font.woff2 เวลาที่ถูกโหลดหน้า index.html หนึ่งครั้งนั้นจะเกิด HTTP Request 3 ครั้งและมีการทำ Network negociation 3 ครั้งเช่นกัน ซึ่งก็คือจะเกิด 3 Round Trip (ซึ่งกระบวนการเริ่ม Request จนได้รับ Response นั้นเรียกว่า Round Trip) ซึ่งจุดนี้แหละครับที่ HTTP2 Push นั้นจะมาช่วยเพิ่ม Performance ของการโหลดเวปได้

แล้ว Round Trip มันสำคัญยังไง

มันสำคัญแน่นอนครับ เพราะมันมีผลโดยตรงต่อเวลาที่ใช้ในการแสดงผลของหน้าเวป ซึ่งเราจะดูเวลาที่ใช้ไปได้จาก Debugging Tool เช่น

Screen Shot 2559-12-10 at 9.56.08 AM.png
Network Tab จาก Chrome Debugger

จากรูปจะเห็นได้ว่าการทำ HTTP request 1 ครั้งนั้นจะมี Connection Setup รวมไปถึงเวลาที่ใช้ส่ง Request จนฝั่ง Server ได้รับก่อนจะเริ่มประมวลผลและส่งข้อมูลกลับ

ซึ่งจะเห็นได้ว่าทุก Round Trip นั้นมี ค่าใช้จ่ายของ overhead ที่ต้องเสียไป ซึ่งบางคนอาจจะดูแล้วเหมือนไม่เยอะเพราะมันแค่หลัก milli-sec แต่ถ้าเวปเริ่มซับซ้อนมันรวมๆกันก็เยอะนะครับอาจจะเป็นหลายวินาทีเลย

HTTP2 Server Push?

สรุปสั้นๆก็คือเป็นเป็นความสามารถของ HTTP2 ที่จะช่วยลด Round Trip ในการส่งข้อมูลจาก Server ไปให้ Client โดยการ Push ข้อมูลไปให้ Client โดยที่ฝั่ง Client นั้นไม่ต้องทำการ Request มาหา Server (เหมือนยัดเยียดให้นั่นแหละ)

มาดูภาพประกอบเพื่อเพิ่มความเข้าใจกัน

1_pushintro
รูปจาก  http://calendar.perfplanet.com/2016/http2-push-the-details/

จากรูปด้านบนนั้นเราแบ่ง design ออกเป็น 3 แบบ

  1. no push ซึ่งก็เป็นการ Request/Response ตามปกติซึ่งจะทำให้เกิด 3 Round Trip ตามหลักปกติของ HTTP
  2. push critical เป็น design ที่เริ่มการ Utilize ความสามารถของ push ในการที่เราเน้นแต่ resouce ที่จำเป็นเช่น โหลด html ก็แถม css ไปให้ด้วยเลย
  3. push everything เป็นอีกรูปแบบที่ทางฝั่ง Client นั้นแค่ request มาทีเดียวทาง server ก็ส่งสิ่งที่ขอมาพร้อมกับแถมทุกอย่างไปให้ client ซึ่งเป็นการประหยัด Round Trip กันแบบสุดๆ

มาถึงตรงนี้ดูแล้ว Push นี่ดูดีใช่มั้ยครับ

แต่ช้าก่อนสิ่งเหล่านี้จำเป็นต้องคิดเพิ่มว่าจะ PUSH ดีรึเปล่า

  • Cached ข้อมูลบางอย่างอาจจะมีการ Cached เอาไว้แล้วที่ Client ซึ่งถ้า Server ทำการ Push ไปให้ด้วยตลอดเวลาก็เหมือนกับว่าเป็นส่งของฟรีเสียทั้งเวลา, CPU, bandwidth เล่นๆ
  • Bandwidth เนื่องจากขนาดของ Bandwidth นั้นจำกัดซึ่งการ Push ข้อมูลไปที่ Client ทีละเยอะๆนั้นอาจจะทำให้เครื่องของ Client ช้าลงได้ซึ่งก็มีผลกระทบต่อการใช้งานของ User
  • Priority ทางฝั่ง Server ต้องคำนึงถึงการเรียง Priority ของสิ่งที่จะ Push ดีๆเช่นจะส่งรูป หรือ Script หรือไฟล์ text อะไรยังไงให้ User Experience ดีที่สุด เพราะการ Push ส่งข้อมูลซี้ซั้วอาจจะทำให้เวปแสดงผลได้ช้าลงไปอีก

 

เอาล่ะ พร้อมมาเริ่มรีดประสิทธิภาพให้เวปกัน!

อ้างอิง

http://calendar.perfplanet.com/2016/http2-push-the-details/