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