บทนำ
เว็บแอปที่รวดเร็วคือเว็บแอปที่ประสบความสําเร็จ งานของคุณในฐานะนักพัฒนาแอปยังไม่เสร็จสมบูรณ์จนกว่าคุณจะเพิ่มประสิทธิภาพทั้งประสิทธิภาพจริงและประสิทธิภาพที่ผู้ใช้รับรู้ของแอป ไม่เพียงเพราะเป็นสิ่งที่ควรทําเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ยอดเยี่ยมเท่านั้น แต่ยังมีเหตุผลทางธุรกิจที่เป็นประโยชน์และสำคัญมากในการเพิ่มประสิทธิภาพ Amazon พบว่ายอดขายลดลง 1% เมื่อเวลาในการตอบสนองของเว็บไซต์เพิ่มขึ้นทุกๆ 100 มิลลิวินาที และ Google พบว่าการเข้าชมลดลง 20% เมื่อเกิดความล่าช้าทุกๆ 0.5 วินาที (การอ้างอิง ตัวเลขเหล่านี้เป็นตัวเลขจริงที่มีความหมายต่อธุรกิจและเว็บแอปของคุณ
ความเร็วของเว็บเป็นสิ่งสำคัญมาก Google จึงทุ่มเททุกความพยายามเพื่อทำให้เว็บเร็วขึ้น หากต้องการเหตุผลเพิ่มเติมในการเพิ่มประสิทธิภาพแอป Google ได้ประกาศเพิ่มความเร็วหน้าเว็บลงในอัลกอริทึมการจัดอันดับ
มีแนวทางปฏิบัติแนะนำมากมายที่เผยแพร่แล้วสำหรับการเพิ่มประสิทธิภาพเว็บแอป ซึ่งรวมถึงหนังสือ 2 เล่มที่น่าสนใจ (High Performance Web Sites และ Even Faster Web Sites) เทคนิคในเซิร์ฟเวอร์ (ใช้ส่วนหัวการควบคุมแคชที่ถูกต้อง) และในไคลเอ็นต์ (ระบุแอตทริบิวต์ความกว้างและความสูงของรูปภาพ) จะรวมกันเป็นกลยุทธ์จากต้นทางถึงปลายทางเพื่อเพิ่มประสิทธิภาพ เคล็ดลับและเทคนิคมีมากมายจนบางครั้งอาจประเมินได้ยากว่าเคล็ดลับเหล่านั้นเกี่ยวข้องกับชีวิตจริงและเว็บแอปจริงของคุณอย่างไร
แต่โชคดีที่ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (รวมอยู่ในอินสแตนซ์ Chrome ทุกรายการ) มีเครื่องมือที่ยอดเยี่ยมซึ่งจะตรวจสอบเว็บแอปและให้คําแนะนําที่ปรับแต่งได้เพื่อปรับปรุงประสิทธิภาพและลดเวลาในการตอบสนอง บทความนี้จะกล่าวถึงแผงการตรวจสอบซึ่งมีขอบเขตคล้ายกับเครื่องมือ YSlow ที่ได้รับความนิยมอย่างมาก และวิธีใช้แผงดังกล่าวเพื่อเพิ่มความเร็วของเว็บไซต์ ลดเวลาในการตอบสนอง และเพิ่มความพึงพอใจของผู้ใช้
โปรดทราบว่าขณะนี้เครื่องมือแผงการตรวจสอบมีให้บริการใน Chrome เท่านั้น แต่เราคาดว่าเบราว์เซอร์ WebKit อื่นๆ จะผสานรวมเครื่องมือนี้ในที่สุด
เริ่มต้นใช้งาน
เราจะใช้เครื่องมือนี้กับ www.html5rocks.com ของเราเองเพื่อแสดงให้เห็นว่าแผงการตรวจสอบสามารถแนะนําการปรับปรุงประสิทธิภาพของเว็บแอปได้อย่างไร เราจะใช้แผงการตรวจสอบเพื่อทําให้เว็บไซต์ของเราเร็วขึ้น
การเริ่มใช้ DevTools นั้นง่ายเพียงใช้ไอคอน Chrome (ด้านขวาบนของหน้าต่าง Chrome) แล้วเลือกเครื่องมือ > เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นใช้งานเครื่องมือสำหรับนักพัฒนาเว็บได้ที่เอกสารประกอบอย่างเป็นทางการ
แผงการตรวจสอบอยู่ในแผงปุ่มเครื่องมือหลัก คุณจะเห็นได้ว่าเมื่อเลือกแล้ว แผงการตรวจสอบยังไม่ได้วิเคราะห์เว็บแอปของคุณ เนื่องจากการเรียกใช้วิธีการหาค่าประมาณทั้งหมดอาจทําให้ช้า โดยเฉพาะสําหรับเว็บแอปขนาดใหญ่ เช่น Gmail เครื่องมือจึงปิดอยู่โดยค่าเริ่มต้น
มาเริ่มกันเลยโดยคลิกปุ่มเรียกใช้ ซึ่งจะโหลดเว็บแอปอีกครั้งโดยเปิดใช้การประเมินประสิทธิภาพตามหลักการทั่วไป หลังจากโหลดหน้าเว็บซ้ำแล้ว คุณจะเห็นรายการคำแนะนำที่คล้ายกับภาพหน้าจอด้านล่าง
คุณจะเห็นได้ว่าแผงการตรวจสอบจะจัดหมวดหมู่คําแนะนําตามความรุนแรง โดยคําแนะนําที่รุนแรงที่สุดจะมีจุดสีแดง และคําแนะนําที่รุนแรงปานกลางจะมีจุดสีเหลือง การแยกแยะด้วยสีนี้จะช่วยคุณจัดลําดับความสําคัญของคําแนะนํา โดยเน้นที่สิ่งสําคัญที่สุด (และได้ผลลัพธ์มากที่สุด) ก่อน
ตัวเลขในวงเล็บตามคำแนะนำคือจํานวนอินสแตนซ์ที่เครื่องมือตรวจสอบตรวจพบ เช่น มีอินสแตนซ์ของ "ใช้ประโยชน์จากการแคชของเบราว์เซอร์" 12 รายการ ซึ่งจะช่วยให้คุณทราบว่าสามารถนำคําแนะนําไปใช้ได้บ่อยเพียงใด
กลยุทธ์ความเร็ว
ดังที่ได้กล่าวไว้ก่อนหน้านี้ กลยุทธ์ที่เป็นที่รู้จักและผ่านการทดสอบมาอย่างละเอียดเพื่อเพิ่มประสิทธิภาพเว็บแอปนั้นมีอยู่มากมาย เราจะไม่กล่าวถึงรายละเอียดทั้งหมดในบทความนี้ แต่คุณค้นหาข้อมูลเพิ่มเติมและรายละเอียดต่างๆ ได้โดยง่าย แหล่งข้อมูลที่เป็นประโยชน์สําหรับดูข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียดของการเพิ่มประสิทธิภาพเว็บแอป ได้แก่ บทแนะนําเกี่ยวกับมาทําให้เว็บเร็วขึ้นกัน และเวลาในการตอบสนองที่เกิดจากความสามารถในการปรับขนาดได้สูงมีอยู่ทุกที่และส่งผลเสียต่อยอดขาย
แผงการตรวจสอบจะจัดกลุ่มคําแนะนําออกเป็น 2 หมวดหมู่ ได้แก่ การใช้เครือข่ายและประสิทธิภาพหน้าเว็บ
จากแผงการตรวจสอบ เราควรทำดังนี้เพื่อปรับปรุงการใช้งานเครือข่าย
- ใช้ประโยชน์จากการแคชของเบราว์เซอร์
- ใช้ประโยชน์จากการแคชพร็อกซี
- ลดขนาดคุกกี้
- แสดงเนื้อหาแบบคงที่จากโดเมนที่ไม่มีคุกกี้
- ระบุขนาดรูปภาพ
หากต้องการปรับปรุงประสิทธิภาพของหน้าเว็บ เราควรทำดังนี้
- เพิ่มประสิทธิภาพลําดับของสไตล์และสคริปต์
- นำกฎ CSS ที่ไม่ได้ใช้ออก
มาดูกลยุทธ์หนึ่งที่เราสามารถมุ่งเน้นเพื่อปรับปรุงประสิทธิภาพของ htmlrocks.com
ใช้ประโยชน์จากการแคชของเบราว์เซอร์
ตัวอย่างเช่น มาเริ่มดูคําแนะนําเพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์กันก่อน ข้อมูลนี้หมายความว่าอย่างไร เมื่อเปิดตัวเลือกใน UI เราจะเห็นรายละเอียดต่อไปนี้
- ทรัพยากรต่อไปนี้ไม่มีวันหมดอายุของแคช เบราว์เซอร์อาจไม่แคชทรัพยากรที่ไม่ได้ระบุวันหมดอายุ
- ทรัพยากรต่อไปนี้ที่แคชได้มีอายุสั้น
- ทรัพยากรต่อไปนี้เป็นทรัพยากรที่แคชไม่ได้อย่างชัดแจ้ง ลองทำให้แคชได้หากเป็นไปได้
การแคชทรัพยากรเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงการใช้เครือข่าย ซึ่งทำให้ค่าบริการแบนด์วิดท์ของนักพัฒนาแอปลดลงและเวลาในการตอบสนองของผู้ใช้เร็วขึ้น ขออภัย เครื่องมือนี้ไม่ได้บอกสิ่งที่ต้องทำอย่างเจาะจง เราจึงต้องเจาะลึกคําแนะนําและนำความรู้ด้านการเพิ่มประสิทธิภาพเว็บแอปมาปรับใช้กับคําแนะนําเหล่านี้
การแคช
เราจะอธิบายข้อมูลเบื้องต้นบางอย่างได้โดยไม่ต้องเจาะลึกเรื่องแคช HTTP โปรโตคอล HTTP มีวิธีการแคช ซึ่งช่วยให้เซิร์ฟเวอร์และไคลเอ็นต์ลดปริมาณข้อมูลที่จำเป็นต้องโอนผ่านเครือข่ายได้ เช่น เซิร์ฟเวอร์สามารถบอกให้ไคลเอ็นต์บันทึกทรัพยากรไว้ในเครื่องเป็นระยะเวลาหนึ่งได้ จึงไม่จำเป็นต้องขอทรัพยากรอีกครั้ง นอกจากนี้ ไคลเอ็นต์ยังสอบถามได้ว่าทรัพยากรของเซิร์ฟเวอร์ใหม่กว่าทรัพยากรที่จัดเก็บไว้ในเครื่องหรือไม่ ในทางทฤษฎีแล้ว หากทรัพยากรเป็นแบบคงที่ เซิร์ฟเวอร์ควรบอกไคลเอ็นต์ให้จัดเก็บทรัพยากรไว้ในเครื่องและหลีกเลี่ยงการขอทรัพยากรจากเซิร์ฟเวอร์ในอนาคต อย่างที่ทราบกันดีว่ารายละเอียดเกี่ยวกับการแคช HTTP มีมากมายมหาศาล แต่ธีมทั่วไปคือ "ลดปริมาณข้อมูลที่ส่งผ่านเครือข่ายโดยจัดเก็บทรัพยากรไว้ในเครื่องไคลเอ็นต์"
การแก้ไขทรัพยากรที่แคชไม่ได้
มาดูคําแนะนําอย่างละเอียด 1 รายการและดูวิธีเชื่อมต่อคําแนะนําในการตรวจสอบกับเครื่องมืออื่นๆ ในเครื่องมือสําหรับนักพัฒนาเว็บ โดยเฉพาะอย่างยิ่ง เราจะมาดูวิธีแก้ไข "ทรัพยากรต่อไปนี้ไม่สามารถแคชได้อย่างชัดเจน"
เนื่องจากแคชทำงานผ่านโปรโตคอล HTTP เราจึงต้องดูคำขอและคำตอบ HTTP สำหรับทรัพยากร http://www.html5rocks.com/ เพียงคลิกที่ทรัพยากรเพื่อดูคำขอต้นฉบับและส่วนหัวการตอบกลับ รวมถึงรายละเอียด
จากนั้นระบบจะนําคุณไปยังแผงเครือข่าย ทรัพยากร หรือแหล่งที่มา (ขึ้นอยู่กับประเภทของทรัพยากรที่คลิก) พร้อมข้อมูลเพิ่มเติม ในกรณีนี้ ระบบจะนำเราไปยังแผงเครือข่าย
เรากําลังพยายามยืนยันว่าเซิร์ฟเวอร์ได้บอกไคลเอ็นต์ว่า "อย่าแคชหน้าแรกของ html5rocks.com" โดยคลิกที่ทรัพยากรเพื่อดูส่วนหัวการตอบกลับ เนื่องจากส่วนหัวเหล่านี้เป็นคำสั่งที่เซิร์ฟเวอร์ส่ง
Cache-Controlแน่นอน เซิร์ฟเวอร์ส่งส่วนหัว "Cache-Control: no-cache" ไปยังไคลเอ็นต์ ดังที่คุณทราบ การดำเนินการนี้จะบอกให้ไคลเอ็นต์ขอทรัพยากรเสมอและไม่ให้แคชไว้ในเครื่อง กล่าวโดยละเอียดคือ ข้อกำหนดเฉพาะของ HTTP สำหรับ "no-cache" มีเนื้อหาดังนี้
"หากคําสั่ง no-cache ไม่ได้ระบุชื่อช่อง แคชต้องไม่ใช้การตอบกลับเพื่อตอบสนองคําขอที่ตามมาหากการยืนยันกับเซิร์ฟเวอร์ต้นทางไม่สําเร็จ ซึ่งช่วยให้เซิร์ฟเวอร์ต้นทางป้องกันแคชได้ แม้กระทั่งแคชที่กำหนดค่าให้แสดงคำตอบที่ล้าสมัยสำหรับคำขอของไคลเอ็นต์"
ด้วยเหตุนี้ แผงการตรวจสอบจึงแนะนําให้เปิดใช้การแคช ไม่เช่นนั้นเซิร์ฟเวอร์และไคลเอ็นต์จะส่งข้อมูลที่อาจซ้ำกัน
เมื่อเรายืนยันสาเหตุของคําแนะนําในการตรวจสอบแล้ว เราจะแก้ไขได้อย่างไร ในกรณีนี้ โซลูชันเกี่ยวข้องกับการกำหนดค่าหรือโค้ดฝั่งเซิร์ฟเวอร์ คุณอาจเปิดใช้การแคชผ่านการกําหนดค่าของเว็บเซิร์ฟเวอร์หรือผ่านการกําหนดค่าในเฟรมเวิร์กของเว็บแอป ทั้งนี้ขึ้นอยู่กับการตั้งค่า กล่าวโดยละเอียดคือ คุณควรใส่ส่วนหัว Expires และ Cache-Control: private พร้อมพารามิเตอร์ max-age สําหรับทรัพยากรที่ต้องการแคช
คำแนะนำเป็นเพียงคำแนะนำ
โปรดทราบว่าแผงการตรวจสอบจะแนะนำการปรับปรุงตามการหาค่าประมาณทั่วไป แนวทางปฏิบัติแนะนำเหล่านี้เป็นแนวทางปฏิบัติที่ดีที่สุดที่เรียนรู้มาตลอดหลายปีและนำมาใช้กับเว็บแอปของคุณได้ ส่วนใหญ่แล้วคําแนะนําเหล่านี้จะตรงจุดและควรนำมาใช้
อย่างไรก็ตาม ในบางกรณี คําแนะนําอาจถูกต้องแต่อาจไม่ได้ทําให้เกิดการปรับปรุงใดๆ เช่น หากหน้าเว็บมีรูปภาพขนาดใหญ่เพียงรูปเดียว แผงการตรวจสอบจะแนะนำให้เพิ่มแอตทริบิวต์ความกว้างและความสูงลงในแท็ก <img> (เพื่อให้เครื่องมือแสดงผลทราบขนาดรูปภาพโดยไม่ต้องดาวน์โหลดและตรวจสอบรูปภาพ) แม้ว่าโดยทั่วไปแล้วจะเป็นคำแนะนำที่ยอดเยี่ยม แต่ก็ไม่ได้ช่วยอะไรมากนักหากรูปภาพเป็นองค์ประกอบเดียวในหน้า
อย่าลืมใช้คําแนะนําเหล่านี้เมื่อเข้าใจแล้ว และอย่าลืมวัดประสิทธิภาพก่อนและหลังการเปลี่ยนแปลงเพื่อให้แน่ใจว่ามีการปรับปรุงจริง
สรุป
แผงการตรวจสอบเป็นเครื่องมือที่ยอดเยี่ยมและใช้งานง่ายซึ่งจะแสดงวิธีเพิ่มประสิทธิภาพเว็บแอปอย่างรวดเร็ว ความเร็วเป็นคุณสมบัติที่สําคัญของเว็บแอป เนื่องจากบริษัทจํานวนมากพบว่าประสิทธิภาพและรายได้หรือกิจกรรมมีความสัมพันธ์โดยตรง การเพิ่มประสิทธิภาพของแอปไม่ใช่แค่สิ่งที่ควรทำเพื่อผู้ใช้เท่านั้น แต่ยังเป็นสิ่งที่ควรทำเพื่อผลกําไรของธุรกิจด้วย