เกริ่นนำ
ปัจจุบัน สิ่งสำคัญที่สุดที่คุณสามารถทำได้ให้กับเว็บไซต์คือการตรวจสอบว่าเว็บไซต์ทำงานได้ดีเมื่อเข้าชมจากโทรศัพท์หรือแท็บเล็ต อ่านต่อและเรียนรู้วิธีเพิ่มประสิทธิภาพ เว็บไซต์ของคุณสำหรับเบราว์เซอร์บนอุปกรณ์เคลื่อนที่โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และอุปกรณ์ Android
เหตุใดการเพิ่มประสิทธิภาพสำหรับเว็บบนอุปกรณ์เคลื่อนที่จึงมีความสำคัญ
การแสดง
อุปกรณ์เคลื่อนที่ได้รับ CPU ที่เร็วขึ้น, RAM เพิ่มขึ้น, GPU ที่เร็วขึ้น รวมถึงการเข้าถึงเครือข่ายที่เร็วขึ้นในขณะที่เราเปลี่ยนจาก 2G และ 3G ไปเป็น 4G แม้จะมีความก้าวหน้ามาก แต่อุปกรณ์เคลื่อนที่ยังกลับมีพลังงานต่ำกว่าคอมพิวเตอร์ของเรา กล่าวอย่างชัดเจนคือ การโหลดทรัพยากรของเครือข่ายจะใช้เวลานานขึ้น การคลายการแพครูปภาพใช้เวลานานกว่า การทาสีหน้าจะใช้เวลานานขึ้น การดำเนินการกับสคริปต์ก็ใช้เวลานานกว่า คุณสามารถคาดได้ว่าหน้าเว็บทำงานช้าลง 5-10 เท่าบนอุปกรณ์เคลื่อนที่
แบตเตอรี่
อุปกรณ์เคลื่อนที่ใช้แบตเตอรี่โดยเฉพาะ ผู้ใช้อุปกรณ์เคลื่อนที่อยากให้ แบตเตอรี่ใช้งานได้นานที่สุดเท่าที่จะเป็นไปได้ เว็บไซต์ที่มีประสิทธิภาพต่ำกว่าเกณฑ์จะทำให้แบตเตอรี่หมดเร็วกว่าที่จำเป็น ลดการจราจรของข้อมูลในเครือข่ายและลดการทาสี เพื่อลดปริมาณการใช้แบตเตอรี่ เมื่อดึงข้อมูลทรัพยากร คุณต้องเปิดใช้ Wi-Fi หรือสัญญาณวิทยุมือถือ ซึ่งจะทำให้แบตเตอรี่หมดเร็ว เมื่อเบราว์เซอร์ระบายสีองค์ประกอบ การใช้งาน CPU และ GPU จะพุ่งสูงขึ้น ซึ่งทำให้แบตเตอรี่หมดเร็วด้วย
การมีส่วนร่วม
ประสิทธิภาพมีไว้เพื่อเพิ่มเมตริกที่สำคัญต่อคุณมากที่สุด ใน Facebook เราให้ความสำคัญกับการเลื่อน ในการทดสอบ A/B เราเลื่อนจาก 60 FPS ไปจนถึง 30 FPS ยุบการมีส่วนร่วมแล้ว เราบอกว่าโอเค ดังนั้นการเลื่อนจึงเป็นเรื่องสำคัญ
Facebook ที่การประชุม Edge
ผู้ใช้อุปกรณ์เคลื่อนที่คาดหวังที่จะดำเนินการเข้าออกได้อย่างรวดเร็ว เว็บไซต์ที่เร็วที่สุดจะได้รับการมีส่วนร่วมมากที่สุด
การจัดการประสิทธิภาพ
Chrome มาพร้อมกับชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ยอดเยี่ยม บทความนี้จะสอนวิธีใช้เครื่องมือเหล่านี้เพื่อสร้างโปรไฟล์เว็บไซต์บนอุปกรณ์เคลื่อนที่ หากคุณคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อยู่แล้ว ก็เยี่ยมเลย หากยังไม่ได้ดู ให้ดูบทแนะนำดีๆ ต่อไปนี้
ตอนนี้คุณก็ทราบเนื้อหาครบแล้ว ลองมาดูวิธีเร่งความเร็วเว็บไซต์ในอุปกรณ์เคลื่อนที่ด้วยเครื่องมือสำหรับนักพัฒนาเว็บกัน หากคุณใช้ Chrome DevTools สำหรับ Android เป็นครั้งแรก โปรดดูคู่มือเริ่มต้นใช้งานที่ด้านล่างของบทความ
การใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จากระยะไกล
เมื่ออุปกรณ์ Android เชื่อมต่ออินเทอร์เน็ตอยู่กับคอมพิวเตอร์ ใน Chrome บนเดสก์ท็อป ให้ไปที่ http://localhost:9222 และเปิดเว็บไซต์ของคุณในอุปกรณ์ Android ระบบจะนำคุณไปยังรายการแท็บที่เปิดอยู่ในอุปกรณ์ Android เลือกหน้าเว็บจากรายการ "หน้าที่ตรวจสอบได้"
และระบบจะนำคุณไปยังเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้านั้น
โอ้... แถบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่คุณคุ้นเคยอยู่ตรงนั้น สิ่งสำคัญที่สุดที่ต้องทำความเข้าใจเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จากระยะไกลก็คือ เครื่องมือนี้เป็นเครื่องมือสำหรับนักพัฒนาเว็บประเภทเดียวกับที่คุณใช้บนเดสก์ท็อปในปัจจุบัน ความแตกต่างเพียงอย่างเดียวคืออุปกรณ์ Android จะเป็นผู้รับผิดชอบเฉพาะหน้าเว็บ ในขณะที่เดสก์ท็อปเป็นผู้รับผิดชอบเครื่องมือสำหรับนักพัฒนาเว็บ ข้อมูลขั้นสูงจะถูกเก็บรวบรวมและมีฟังก์ชันการทำงานเดียวกันนี้
ตัวอย่างเช่น ฉันไปที่ www.sfgate.com/movies จากโทรศัพท์ ฉันวางเมาส์เหนือ div ในเครื่องมือองค์ประกอบโดยใช้ Chrome DevTools ในเดสก์ท็อป และระบบไฮไลต์ div ในอุปกรณ์ Android ของฉันเช่นเดียวกับในเดสก์ท็อป
เครื่องมือองค์ประกอบยังใช้เพื่อสลับเปิดและปิดรูปแบบได้ด้วย ซึ่งมีประโยชน์เมื่อเราพยายามตรวจสอบเวลาในการวาด
Shedding Light ในการเข้าถึงเครือข่าย
ประสิทธิภาพเครือข่ายเป็นการนำเข้า และยิ่งมีความสำคัญมากขึ้นบนเว็บบนอุปกรณ์เคลื่อนที่ อุปกรณ์เคลื่อนที่มักมีการเชื่อมต่อที่ช้ากว่าคอมพิวเตอร์เดสก์ท็อปและแล็ปท็อป เพื่อให้แน่ใจว่าคุณทำสิ่งที่ถูกต้อง ให้ถ่ายสแนปชอตเครือข่ายโดยไปที่เครื่องมือเครือข่าย แล้วกด "บันทึก"
ภาพหน้าจอแสดงการจราจรของข้อมูลในเครือข่ายที่เกิดจากการค้นหาของ Google สังเกตคำขอเครือข่ายที่เว็บไซต์ของคุณสร้างและหาวิธีลดคำขอเหล่านั้น หากเว็บไซต์ส่งคำขอแบบสำรวจไปยังเซิร์ฟเวอร์ คุณอาจต้องสนใจกิจกรรมของผู้ใช้และหลีกเลี่ยงการทำการสำรวจเมื่อผู้ใช้ไม่มีความเคลื่อนไหว เครื่องมือเครือข่ายช่วยให้คุณดูส่วนหัว HTTP ดิบ ซึ่งมีประโยชน์ในกรณีที่เครือข่ายมือถือกำลังเปลี่ยนแปลงส่วนหัวนั้นเลย
การเพิ่มประสิทธิภาพเวลาการแสดงผล
จุดคอขวดที่ใหญ่ที่สุดในเว็บเบราว์เซอร์บนอุปกรณ์เคลื่อนที่คือการระบายสีหน้าเว็บของคุณ การลงสีเป็นขั้นตอนการวาดองค์ประกอบบนหน้าเว็บด้วยการจัดรูปแบบที่ระบุไว้ เมื่อองค์ประกอบหนึ่งมีค่าใช้จ่ายสูง การวาดภาพทั้งหน้าก็จะช้าลง Chrome จะพยายามแคชองค์ประกอบที่ทาสีไว้ก่อนหน้านี้ในบัฟเฟอร์นอกหน้าจอ แต่บนอุปกรณ์เคลื่อนที่ ปริมาณ RAM ของ GPU ที่ใช้ได้จะมีจำกัด ซึ่งจะจำกัดจำนวนองค์ประกอบที่สามารถแคชนอกหน้าจอได้ ผลข้างเคียงคือ Paint มากกว่า และ แต่ละสี จะช้ากว่าเดสก์ท็อป หากต้องการการเลื่อนที่ปรับเปลี่ยนตามอุปกรณ์ คุณต้องลดเวลาในการลงสีให้น้อยที่สุด
Chrome 25 มีโหมดการวาดหน้าอย่างต่อเนื่อง โหมดการทาสีหน้าอย่างต่อเนื่องจะไม่แคชองค์ประกอบที่ทาสีไว้ และจะระบายสีองค์ประกอบทั้งหมดในแต่ละเฟรมแทน การบังคับให้องค์ประกอบทั้งหมดลงสีในแต่ละเฟรมทำให้ทำการทดสอบ A/B กับเวลาในการวาดได้ โดยสลับเปิดและปิดองค์ประกอบ แล้วเปิดและปิดรูปแบบ แม้กระบวนการจะต้องทำด้วยตนเอง แต่เครื่องมือนี้ก็เป็นเครื่องมือที่มีประโยชน์มากสำหรับการติดตามราคาที่แพงในการวาดภาพแต่ละองค์ประกอบในหน้าเว็บ กฎข้อแรกของชมรมการเพิ่มประสิทธิภาพคือวัดสิ่งที่คุณพยายามเพิ่มประสิทธิภาพเพื่อให้ได้ข้อมูลพื้นฐาน ลองดูตัวอย่างง่ายๆ นี้
ขั้นแรก ให้เปิดใช้โหมดการวาดหน้าซ้ำแบบต่อเนื่อง โดยทำดังนี้
หลังจากเปิดใช้แล้ว กราฟจะแสดงที่มุมขวาบนของอุปกรณ์ Android แกน x ของกราฟคือเวลาที่แบ่งออกเป็นเฟรม แกน Y ของกราฟจะวัดเวลาในการแสดงผลในหน่วยมิลลิวินาที คุณจะเห็นว่าในอุปกรณ์ของฉัน ใช้เวลา 14 มิลลิวินาทีในการลงสี นอกจากนี้ เวลาสีขั้นต่ำและสูงสุดจะแสดงพร้อมกับหน่วยความจำ GPU ที่ใช้ด้วย
ในการทดสอบ ฉันได้ตั้งค่ารูปแบบในองค์ประกอบที่เลือกเป็น display: none เรามาดูกันว่าตอนนี้ค่าสีหน้าเว็บมีราคาแพงแค่ไหน
เวลาในการแสดงผลลดลงจากประมาณ 14 มิลลิวินาทีต่อเฟรมเป็น 4 มิลลิวินาทีต่อเฟรม กล่าวคือ ภาพวาดว่าองค์ประกอบหนึ่งใช้เวลาประมาณ 10 มิลลิวินาที การสลับเปิดและปิดองค์ประกอบ รวมถึงการเปิดและปิดรูปแบบจะช่วยให้คุณจำกัดส่วนที่มีราคาแพงของหน้าเว็บให้แคบลงได้อย่างรวดเร็ว อย่าลืมว่าเวลาสีที่เร็วขึ้นหมายถึงการรบกวนการใช้งานที่น้อยลง แบตเตอรี่ที่ใช้งานได้นานขึ้น และการมีส่วนร่วมจากผู้ใช้ที่มากขึ้น เมื่อคุณพร้อมที่จะเจาะลึกมากขึ้น ก็อย่าลืมอ่านบทความที่ยอดเยี่ยมนี้ในโหมดการวาดหน้าแบบต่อเนื่อง
ฟีเจอร์ขั้นสูง
เกี่ยวกับ:การติดตาม
ฟีเจอร์ขั้นสูงอื่นๆ อีกมากมายสำหรับนักพัฒนาซอฟต์แวร์ที่พร้อมใช้งานใน Chrome บนเดสก์ท็อป ก็พร้อมใช้งานใน Android Chrome เช่นกัน ตัวอย่างเช่น 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 DevTools ทำได้จากระยะไกลแล้ว เรามาพูดถึงวิธีเริ่มต้นใช้งานในเซสชันการแก้ไขข้อบกพร่องจากระยะไกลกัน หากคุณไม่เคยใช้มาก่อน โปรดอ่านวิธีการเริ่มต้นใช้งานโดยละเอียด ถ้าคุณเคยใช้มันอยู่แล้วแต่ลืมวิธีใช้งานไปเลย ผมได้แสดงรายการวิธีการแบบย่อไว้ตรงนี้เช่นกัน
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 จาก Command Prompt คุณควรเห็นอุปกรณ์ของคุณแสดงอยู่
5. เปิดใช้การแก้ไขข้อบกพร่อง USB ใน Chrome
เปิดการตั้งค่า > ขั้นสูง > เครื่องมือสำหรับนักพัฒนาเว็บ และทำเครื่องหมายที่ตัวเลือกเปิดใช้การแก้ไขข้อบกพร่องเว็บผ่าน USB ดังที่แสดงที่นี่
6. กำลังสร้างการเชื่อมต่อเครื่องมือสำหรับนักพัฒนาเว็บกับอุปกรณ์ Android
เรียกใช้คำสั่งต่อไปนี้
adb forward tcp:9222 localabstract:chrome_devtools_remote
จะสร้างบริดจ์ระหว่างเครื่องเดสก์ท็อปกับอุปกรณ์ Android ผ่าน adb หากพบปัญหาเมื่อมาถึงจุดนี้ โปรดอ่านวิธีการตั้งค่าโดยละเอียดที่นี่
7. กำลังยืนยันว่าคุณพร้อมที่จะใช้งาน
ตรวจสอบว่าอุปกรณ์ของคุณเชื่อมต่ออย่างถูกต้องโดยเปิด Chrome บนเดสก์ท็อป แล้วไปที่ http://localhost:9222 หากคุณได้รับ 404, ข้อผิดพลาดอื่น หรือไม่พบสิ่งต่อไปนี้
อ่านวิธีการตั้งค่าโดยละเอียดได้ที่นี่
บทสรุป
ผู้ใช้อุปกรณ์เคลื่อนที่มักรีบและต้องรับข้อมูลที่สำคัญจากหน้าเว็บของคุณอย่างรวดเร็ว คุณมีหน้าที่ในฐานะเครื่องมือสร้างเว็บไซต์บนอุปกรณ์เคลื่อนที่ในการตรวจสอบว่าหน้าเว็บโหลดได้อย่างรวดเร็วและทำงานได้ดีบนอุปกรณ์เคลื่อนที่ ไม่เช่นนั้น การมีส่วนร่วมของผู้ใช้จะลดลง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ระยะไกลมีฟังก์ชันการทำงานเทียบเท่ากับระบบบนเดสก์ท็อป UI มีความคล้ายคลึงกันมากจนคุณไม่ต้องเรียนรู้ชุดเครื่องมือใหม่ กล่าวคือ กระบวนการงานของคุณจะมีผลไปด้วย อย่าลืมว่า Facebook ไม่ได้ป้องกันปัญหาด้านประสิทธิภาพ และเว็บไซต์ของคุณก็ไม่ได้เช่นกัน เว็บไซต์ที่มีประสิทธิภาพจะมีส่วนร่วมจากผู้ใช้มากขึ้น