บทนำ
ปัจจุบัน สิ่งสำคัญที่สุดที่คุณทำได้สำหรับเว็บไซต์คือการตรวจสอบว่าเว็บไซต์ทำงานได้ดีเมื่อเข้าชมจากโทรศัพท์หรือแท็บเล็ต อ่านต่อเพื่อดูวิธีเพิ่มประสิทธิภาพเว็บไซต์สำหรับเบราว์เซอร์บนมือถือโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และอุปกรณ์ Android
ทำไมการเพิ่มประสิทธิภาพสำหรับเว็บบนมือถือจึงมีความสำคัญอย่างมาก
ประสิทธิภาพ
อุปกรณ์เคลื่อนที่มี CPU ที่เร็วขึ้น, RAM มากขึ้น, GPU ที่เร็วขึ้น และการเข้าถึงเครือข่ายที่เร็วขึ้นเมื่อเราเปลี่ยนจาก 2G และ 3G เป็น 4G แม้ว่าอุปกรณ์เคลื่อนที่จะมีความก้าวหน้าอย่างต่อเนื่อง แต่ก็ยังมีประสิทธิภาพต่ำกว่าเมื่อเทียบกับคอมพิวเตอร์ กล่าวอย่างเป็นรูปธรรมมากขึ้นคือ การโหลดทรัพยากรเครือข่ายใช้เวลานานขึ้น การแตกไฟล์รูปภาพใช้เวลานานขึ้น การแสดงผลหน้าเว็บใช้เวลานานขึ้น และการเรียกใช้สคริปต์ใช้เวลานานขึ้น คุณสามารถคาดการณ์ได้ว่าหน้าเว็บจะทำงานช้าลง 5-10 เท่าในอุปกรณ์เคลื่อนที่
แบตเตอรี่
อุปกรณ์เคลื่อนที่จะใช้พลังงานจากแบตเตอรี่เท่านั้น ผู้ใช้อุปกรณ์เคลื่อนที่ต้องการให้แบตเตอรี่ใช้งานได้นานที่สุด เว็บไซต์ที่ไม่มีประสิทธิภาพจะทำให้แบตเตอรี่หมดเร็วกว่าที่ควรจะเป็น ลดการจราจรของข้อมูลในเครือข่ายและลดการวาดเพื่อลดการใช้แบตเตอรี่ เมื่อคุณดึงข้อมูลทรัพยากร สัญญาณ Wi-Fi หรือสัญญาณโทรศัพท์มือถือจะต้องเปิดอยู่ ซึ่งจะทำให้แบตเตอรี่หมดเร็วขึ้น เมื่อเบราว์เซอร์แสดงผลองค์ประกอบ การใช้งาน CPU และ GPU จะเพิ่มขึ้นอย่างรวดเร็ว ซึ่งจะทำให้แบตเตอรี่หมดเร็วขึ้นด้วย
การมีส่วนร่วม
Performance Max มีไว้เพื่อเพิ่มเมตริกที่สําคัญที่สุดสําหรับคุณ ใน Facebook เราให้ความสำคัญกับการเลื่อนดู ในการทดสอบ A/B เราได้ชะลอการเลื่อนจาก 60 FPS ลงเหลือ 30 FPS ยุบการมีส่วนร่วมแล้ว เราจึงบอกว่าโอเค การเลื่อนจึงเป็นเรื่องสำคัญ
Facebook ในงาน Edge Conference
ผู้ใช้อุปกรณ์เคลื่อนที่คาดหวังว่าจะเข้าและออกจากเว็บไซต์ได้อย่างรวดเร็ว เว็บไซต์ที่เร็วที่สุดจะได้รับการมีส่วนร่วมมากที่สุด
การจัดการประสิทธิภาพ
Chrome มาพร้อมกับชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ยอดเยี่ยม บทความนี้จะสอนวิธีใช้เครื่องมือเหล่านี้เพื่อสร้างโปรไฟล์เว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ หากคุณคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อยู่แล้ว ก็เยี่ยมเลย หากยังไม่ได้ดู ลองดูบทแนะนำดีๆ เหล่านี้เลย
เมื่อคุณเข้าใจแล้ว เรามาดูวิธีเร่งความเร็วเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ด้วยเครื่องมือสำหรับนักพัฒนาเว็บกัน หากคุณใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Android เป็นครั้งแรก โปรดดูคู่มือเริ่มต้นใช้งานที่ด้านล่างของบทความ
การใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จากระยะไกล
เมื่อเชื่อมต่ออุปกรณ์ Android กับคอมพิวเตอร์ ใน Chrome บนเดสก์ท็อป ให้ไปที่ http://localhost:9222 และเปิดเว็บไซต์ในอุปกรณ์ Android ระบบจะนำคุณไปยังรายการแท็บที่เปิดอยู่ในอุปกรณ์ Android เลือกหน้าเว็บจากรายการ "หน้าเว็บที่ตรวจสอบได้"
และระบบจะนำคุณไปยังเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้านั้น
อ๋อ… แถบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่คุ้นเคยอยู่ตรงนั้นเอง สิ่งสำคัญที่สุดที่ต้องทำความเข้าใจเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ระยะไกลคือเครื่องมือเหล่านี้เป็นเครื่องมือสำหรับนักพัฒนาเว็บแบบเดียวกับที่คุณใช้อยู่ในปัจจุบันบนเดสก์ท็อป ข้อแตกต่างเพียงอย่างเดียวคืออุปกรณ์ Android จะรับผิดชอบเฉพาะหน้าเว็บ ส่วนเดสก์ท็อปจะรับผิดชอบเครื่องมือสำหรับนักพัฒนาเว็บ เบื้องหลังคือระบบจะรวบรวมข้อมูลเดียวกันและมีฟังก์ชันการทำงานเหมือนกัน
ตัวอย่างเช่น ฉันเข้าชม www.sfgate.com/movies ในโทรศัพท์ เมื่อใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome บนเดสก์ท็อป ฉันวางเมาส์เหนือ div ในเครื่องมือองค์ประกอบ และ div จะไฮไลต์ให้เห็นในอุปกรณ์ Android เหมือนกับที่ไฮไลต์บนเดสก์ท็อป
นอกจากนี้ คุณยังใช้เครื่องมือองค์ประกอบเพื่อเปิดและปิดสไตล์ได้ด้วย ซึ่งจะมีประโยชน์เมื่อเราพยายามตรวจสอบเวลาในการแสดงผล
การให้ข้อมูลเกี่ยวกับการเข้าถึงเครือข่าย
ประสิทธิภาพของเครือข่ายเป็นสิ่งสำคัญ และยิ่งสำคัญมากขึ้นไปอีกในเว็บบนอุปกรณ์เคลื่อนที่ อุปกรณ์เคลื่อนที่มักจะมีการเชื่อมต่อที่ช้ากว่าคอมพิวเตอร์เดสก์ท็อปและแล็ปท็อป เพื่อให้แน่ใจว่าคุณกำลังทำสิ่งที่ถูกต้อง ให้จับภาพสแนปชอตเครือข่ายโดยไปที่เครื่องมือเครือข่าย แล้วกดบันทึก
ภาพหน้าจอแสดงการจราจรของข้อมูลในเครือข่ายที่เกิดจากการค้นหาใน Google Search สังเกตคำขอเครือข่ายที่เว็บไซต์สร้างขึ้นและหาวิธีลดคำขอเหล่านั้น หากเว็บไซต์ส่งคำขอการสำรวจไปยังเซิร์ฟเวอร์ คุณอาจต้องให้ความสนใจกับกิจกรรมของผู้ใช้และหลีกเลี่ยงการสำรวจเมื่อผู้ใช้ไม่มีการใช้งาน เครื่องมือเครือข่ายช่วยให้คุณดูส่วนหัว HTTP ดิบได้ ซึ่งมีประโยชน์ในกรณีที่เครือข่ายมือถือมีการเปลี่ยนแปลงส่วนหัวดังกล่าว
การเพิ่มประสิทธิภาพเวลาในการแสดงผล
หนึ่งในปัญหาคอขวดที่ใหญ่ที่สุดในเว็บเบราว์เซอร์บนมือถือคือการแสดงผลหน้าเว็บ การวาดคือกระบวนการวาดองค์ประกอบในหน้าเว็บด้วยการจัดรูปแบบที่ระบุ เมื่อองค์ประกอบหนึ่งใช้ทรัพยากรมากในการแสดงผล ก็จะทำให้การแสดงผลทั้งหน้าช้าลง Chrome พยายามแคชองค์ประกอบที่แสดงผลก่อนหน้านี้ในบัฟเฟอร์นอกหน้าจอ แต่ในอุปกรณ์เคลื่อนที่ ปริมาณ GPU RAM ที่ใช้ได้มีจำกัด ซึ่งจะจำกัดจำนวนองค์ประกอบที่แคชนอกหน้าจอได้ ผลข้างเคียงคือการแสดงผลมากขึ้นและการแสดงผลแต่ละครั้งช้ากว่าเดสก์ท็อป คุณต้องลดเวลาในการแสดงผลเพื่อให้การเลื่อนตอบสนองได้ดี
Chrome 25 มีโหมดการวาดหน้าซ้ำอย่างต่อเนื่อง โหมดการวาดหน้าซ้ำอย่างต่อเนื่องจะไม่แคชองค์ประกอบที่วาด แต่จะวาดองค์ประกอบทั้งหมดในแต่ละเฟรมแทน การบังคับให้วาดองค์ประกอบทั้งหมดในแต่ละเฟรมจะช่วยให้ทำการทดสอบ A/B ของเวลาในการวาดได้โดยการเปิดและปิดองค์ประกอบ รวมถึงเปิดและปิดสไตล์ แม้ว่ากระบวนการนี้จะเป็นแบบแมนนวล แต่ก็เป็นเครื่องมือที่ประเมินค่าไม่ได้สำหรับการติดตามว่าการวาดองค์ประกอบแต่ละรายการในหน้าเว็บมีค่าใช้จ่ายสูงเพียงใด กฎข้อแรกของชมรมการเพิ่มประสิทธิภาพคือวัดสิ่งที่คุณพยายามเพิ่มประสิทธิภาพเพื่อให้ได้ค่าพื้นฐาน ลองมาดูตัวอย่างง่ายๆ กัน
ก่อนอื่น ให้เปิดใช้โหมดการวาดหน้าซ้ำอย่างต่อเนื่องโดยทำดังนี้
หลังจากเปิดใช้แล้ว กราฟจะปรากฏที่มุมขวาบนของอุปกรณ์ Android แกน X ของกราฟคือเวลา ซึ่งแบ่งออกเป็นเฟรม แกน Y ของกราฟจะวัดเวลาในการแสดงผลเป็นมิลลิวินาที คุณจะเห็นว่าในอุปกรณ์ของฉัน หน้าเว็บใช้เวลา 14 มิลลิวินาทีในการแสดงผล นอกจากนี้ ระบบยังแสดงเวลาการแสดงผลต่ำสุดและสูงสุด รวมถึงหน่วยความจำ GPU ที่ใช้ด้วย
ฉันได้ตั้งค่ารูปแบบในองค์ประกอบที่เลือกเป็น display: none เพื่อเป็นการทดสอบ มาดูกันว่าหน้าเว็บใช้ทรัพยากรมากแค่ไหนในการแสดงผลในตอนนี้
เวลาในการวาดลดลงจากประมาณ 14 มิลลิวินาทีต่อเฟรมเหลือ 4 มิลลิวินาทีต่อเฟรม กล่าวคือ การแสดงผลองค์ประกอบนั้นใช้เวลาประมาณ 10 มิลลิวินาที การทำตามขั้นตอนการเปิดและปิดองค์ประกอบและสไตล์จะช่วยให้คุณจำกัดส่วนที่ใช้ทรัพยากรมากของหน้าได้อย่างรวดเร็ว อย่าลืมว่าเวลาในการแสดงผลที่เร็วขึ้นหมายถึงความกระตุกที่น้อยลง แบตเตอรี่ที่ใช้งานได้นานขึ้น และการมีส่วนร่วมจากผู้ใช้ที่มากขึ้น เมื่อพร้อมที่จะเจาะลึกแล้ว โปรดอ่านบทความดีๆ นี้เกี่ยวกับโหมดการทาสีหน้าเว็บซ้ำอย่างต่อเนื่อง
ฟีเจอร์ขั้นสูง
about:tracing
ฟีเจอร์ขั้นสูงสำหรับนักพัฒนาซอฟต์แวร์หลายรายการที่มีใน Chrome บนเดสก์ท็อปก็มีให้ใช้งานใน Chrome บน Android ด้วยเช่นกัน เช่น about:gpu-internals, about:appcache-internals และ about:net-internals เมื่อตรวจสอบปัญหาที่ซับซ้อนเป็นพิเศษ บางครั้งคุณอาจต้องใช้ข้อมูลเพิ่มเติมเพื่อจำกัดสาเหตุของปัญหาให้แคบลง ในเดสก์ท็อป คุณอาจใช้ about:tracing หากคุณยังไม่คุ้นเคยกับ about:tracing โปรดดูวิดีโอของฉันเกี่ยวกับการใช้และการสำรวจเครื่องมือสร้างโปรไฟล์ about:tracing คุณสามารถบันทึกข้อมูลเดียวกันจาก Android Chrome ได้โดยทำตามขั้นตอนต่อไปนี้เพื่อเริ่มต้นใช้งาน
- ดาวน์โหลด adb_trace.py
- เรียกใช้ adb_trace.py จากบรรทัดคำสั่ง
- ใช้ Chrome บน Android
- กด Enter ในบรรทัดคำสั่งเพื่อปิดสคริปต์ adb_trace.py
หลังจาก adb_trace.py เสร็จสมบูรณ์ คุณจะมีไฟล์ JSON ที่สามารถโหลดใน about:tracing ของ Chrome บนเดสก์ท็อปได้
คู่มือเริ่มต้นใช้งาน
เมื่อเราได้ทบทวนสิ่งที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ระยะไกลทำได้แล้ว มาดูวิธีเริ่มต้นเซสชันการแก้ไขข้อบกพร่องระยะไกลกัน หากคุณไม่เคยใช้มาก่อน โปรดอ่านวิธีการโดยละเอียดเกี่ยวกับวิธีเริ่มต้นใช้งาน หากคุณเคยใช้แล้วแต่ลืมวิธีใช้ที่ถูกต้อง เราได้สรุปวิธีการไว้ให้ที่นี่ด้วย
1. ติดตั้ง Android SDK
คุณอาจสงสัยว่าทำไมต้องติดตั้ง Android SDK เมื่อพัฒนาสำหรับเว็บ SDK ประกอบด้วย adb (Android Debug Bridge) Chrome บนเดสก์ท็อปต้องสื่อสารกับอุปกรณ์ Android ได้ Chrome ไม่ได้สื่อสารกับอุปกรณ์ Android โดยตรง แต่จะกำหนดเส้นทางการสื่อสารผ่าน adb
2. เปิดใช้การแก้ไขข้อบกพร่อง USB ในอุปกรณ์
ตัวเลือกสำหรับการเปิดใช้การแก้ไขข้อบกพร่อง USB จะอยู่ในการตั้งค่า Android เปิดใช้งาน
3. เชื่อมต่อกับอุปกรณ์
หากยังไม่ได้เชื่อมต่อ ให้เชื่อมต่ออุปกรณ์ Android กับเดสก์ท็อปผ่าน USB หากคุณใช้การแก้ไขข้อบกพร่อง USB เป็นครั้งแรก คุณจะได้รับข้อความแจ้งต่อไปนี้
หากคุณจะทำการแก้ไขข้อบกพร่องจากระยะไกลบ่อยครั้ง เราขอแนะนำให้เลือก "อนุญาตจากคอมพิวเตอร์เครื่องนี้เสมอ"
4. ตรวจสอบว่าอุปกรณ์เชื่อมต่ออย่างถูกต้อง
เรียกใช้ adb devices จาก Command Prompt คุณควรเห็นอุปกรณ์ของคุณแสดงอยู่
5. เปิดใช้การแก้ไขข้อบกพร่อง USB ใน Chrome
เปิดการตั้งค่า > ขั้นสูง > เครื่องมือสำหรับนักพัฒนาเว็บ และเลือกตัวเลือกเปิดใช้การแก้ไขข้อบกพร่อง USB Web ดังที่แสดงที่นี่
6. การสร้างการเชื่อมต่อ DevTools กับอุปกรณ์ Android
เรียกใช้คำสั่งต่อไปนี้
adb forward tcp:9222 localabstract:chrome_devtools_remote
สร้างการเชื่อมโยงระหว่างเครื่องเดสก์ท็อปกับอุปกรณ์ Android ผ่าน adb หากพบปัญหาในการดำเนินการถึงขั้นตอนนี้ โปรดอ่านวิธีการตั้งค่าโดยละเอียดที่นี่
7. กำลังยืนยันว่าคุณพร้อมใช้งาน
ยืนยันว่าอุปกรณ์เชื่อมต่ออย่างถูกต้องโดยเปิด Chrome บนเดสก์ท็อปและไปที่ http://localhost:9222 หากคุณได้รับข้อผิดพลาด 404 หรือข้อผิดพลาดอื่นๆ หรือไม่เห็นข้อความที่คล้ายกับข้อความต่อไปนี้
อ่านวิธีการตั้งค่าโดยละเอียดที่นี่
บทสรุป
ผู้ใช้อุปกรณ์เคลื่อนทีมักจะรีบและต้องการข้อมูลสำคัญจากหน้าเว็บของคุณอย่างรวดเร็ว ในฐานะผู้สร้างเว็บไซต์บนอุปกรณ์เคลื่อนที่ คุณมีหน้าที่ตรวจสอบว่าการโหลดหน้าเว็บเร็วและทำงานได้ดีบนอุปกรณ์เคลื่อนที่ หากไม่ การมีส่วนร่วมของผู้ใช้จะลดลง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ระยะไกลมีฟังก์ชันการทำงานเทียบเท่ากับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome บนเดสก์ท็อป UI มีความคล้ายคลึงกันมากพอที่คุณไม่จำเป็นต้องเรียนรู้การใช้เครื่องมือชุดใหม่ กล่าวคือ เวิร์กโฟลว์ของคุณจะยังคงอยู่ โปรดทราบว่า Facebook ไม่ได้อยู่ยงคงกระพันต่อปัญหาด้านประสิทธิภาพ และเว็บไซต์ของคุณก็เช่นกัน เว็บไซต์ที่มีประสิทธิภาพจะได้รับการมีส่วนร่วมของผู้ใช้มากขึ้น