#perfmatters: เทคนิคการใช้เครื่องมือสําหรับผู้เชี่ยวชาญด้านประสิทธิภาพ
การเรียนรู้วิธีใช้เครื่องมือการพัฒนาเป็นกุญแจสำคัญในการเป็นผู้เชี่ยวชาญด้านประสิทธิภาพ Colt อธิบายถึง 3 เสาหลักของประสิทธิภาพ ได้แก่ เครือข่าย การคํานวณ และการเรนเดอร์ โดยอธิบายปัญหาหลักในแต่ละด้านและเครื่องมือที่ใช้ค้นหาและขจัดปัญหา
- ตอนนี้คุณโปรไฟล์ Chrome ใน Android ได้ด้วยเครื่องมือสำหรับนักพัฒนาเว็บที่คุณคุ้นเคยจากเดสก์ท็อป
- ลูปการวนซ้ำสําหรับงานด้านประสิทธิภาพคือรวบรวมข้อมูล รับข้อมูลเชิงลึก และดําเนินการ
- จัดลําดับความสําคัญของชิ้นงานที่อยู่ในเส้นทางการแสดงผลที่สําคัญสําหรับหน้าเว็บ
- หลีกเลี่ยงการทาสีเพราะราคาแพงมาก
- หลีกเลี่ยงการเปลี่ยนแปลงหน่วยความจําและการใช้โค้ดในช่วงเวลาสําคัญในแอป
#perfmatters: การเพิ่มประสิทธิภาพเครือข่าย
โดยทั่วไปแล้ว เครือข่ายและเวลาในการตอบสนองจะคิดเป็นสัดส่วน 70% ของเวลาในการโหลดหน้าเว็บทั้งหมดของเว็บไซต์ เปอร์เซ็นต์นี้ถือว่าสูงมาก แต่ก็หมายความว่าการปรับปรุงที่คุณทำในวิดีโอเหล่านั้นจะส่งผลดีอย่างมากต่อผู้ใช้ ในการบรรยายนี้ Ilya ได้อธิบายการเปลี่ยนแปลงล่าสุดใน Chrome ที่จะปรับปรุงเวลาในการโหลด รวมถึงการเปลี่ยนแปลงบางอย่างที่คุณทำได้ในสภาพแวดล้อมของคุณเพื่อช่วยให้โหลดเครือข่ายน้อยที่สุด
- Chrome M27 มีเครื่องมือจัดสรรทรัพยากรแบบใหม่ที่ได้รับการปรับปรุง
- Chrome M28 ทำให้เว็บไซต์ SPDY เร็วขึ้น (อีก)
- แคชแบบง่ายของ Chrome ได้รับการปรับปรุงใหม่
- SPDY / HTTP/2.0 มีการปรับปรุงความเร็วในการโอนข้อมูลอย่างมาก มีโมดูล SPDY ที่ใช้งานได้จริงสำหรับ nginx, Apache และ Jetty (ลองดูตัวอย่างเพียง 3 รายการ)
- QUIC เป็นโปรโตคอลใหม่และโปรโตคอลทดลองที่สร้างขึ้นจาก UDP เราเพิ่งเริ่มใช้งาน แต่ไม่ว่าจะได้ผลลัพธ์เป็นอย่างไร ผู้ใช้ก็จะได้รับประโยชน์
#perfmatters: เลย์เอาต์และการเรนเดอร์ 60 FPS
การแสดงผลที่ 60 fps ในโปรเจ็กต์มีความสัมพันธ์โดยตรงกับการมีส่วนร่วมของผู้ใช้ และเป็นปัจจัยสําคัญต่อความสําเร็จของโปรเจ็กต์ ในบทสนทนานี้ Nat และ Tom ได้พูดคุยเกี่ยวกับไปป์ไลน์การแสดงผลของ Chrome, สาเหตุที่พบบ่อยของเฟรมที่หลุด และวิธีหลีกเลี่ยง
- เฟรมหนึ่งๆ มีความยาว 16 มิลลิวินาที ซึ่งประกอบด้วย JavaScript, การคํานวณสไตล์, การวาดภาพ และการคอมโพส
- การทาสีมีราคาแพงมาก Paint Storm คือการทำสีซ้ำๆ โดยไม่จำเป็นซึ่งทำให้สิ้นเปลือง
- เลเยอร์ใช้เพื่อแคชองค์ประกอบที่วาด
- แฮนเดิลอินพุต (โปรแกรมฟังเหตุการณ์การสัมผัสและล้อเลื่อนเมาส์) อาจทำให้แอปไม่ตอบสนอง ดังนั้นโปรดหลีกเลี่ยงหากเป็นไปได้ กรณีที่คุณไม่สามารถลดจำนวนโฆษณาให้น้อยที่สุดได้
#perfmatters: เว็บแอปบนอุปกรณ์เคลื่อนที่ที่เปิดใช้งานได้ทันที
เส้นทางการแสดงผลที่สําคัญหมายถึงทุกอย่าง (JavaScript, HTML, CSS, รูปภาพ) ที่เบราว์เซอร์จําเป็นต้องใช้ก่อนเริ่มวาดหน้าเว็บ คุณต้องให้ความสำคัญกับการส่งชิ้นงานในเส้นทางการแสดงผลที่สำคัญ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ในอุปกรณ์ที่มีข้อจำกัดด้านเครือข่าย เช่น สมาร์ทโฟนในเครือข่ายมือถือ Bryan อธิบายวิธีที่ทีม Google ดำเนินการตามกระบวนการระบุและจัดลําดับความสําคัญของชิ้นงานสําหรับเว็บไซต์ PageSpeed Insights ซึ่งทำให้เวลาในการโหลดจาก 20 วินาทีเหลือเพียง 1 วินาทีกว่าๆ
- กำจัด JavaScript และ CSS ที่บล็อกการแสดงผล
- จัดลําดับความสําคัญของเนื้อหาที่มองเห็นได้
- โหลดสคริปต์แบบไม่พร้อมกัน
- แสดงผลมุมมองเริ่มต้นฝั่งเซิร์ฟเวอร์เป็น HTML และเสริมด้วย JavaScript
- ลด CSS ที่บล็อกการแสดงผลให้เหลือน้อยที่สุด โดยส่งเฉพาะสไตล์ที่จำเป็นในการแสดงวิวพอร์ตเริ่มต้น จากนั้นส่งส่วนที่เหลือ
- URI ข้อมูลขนาดใหญ่ที่ฝังอยู่ใน CSS ที่บล็อกการแสดงผลเป็นอันตรายต่อประสิทธิภาพการแสดงผล เนื่องจากเป็นทรัพยากรที่บล็อกอยู่ในขณะที่ URL รูปภาพไม่ใช่ทรัพยากรที่บล็อก