ความเร็วในวงกว้าง: มีอะไรใหม่เกี่ยวกับประสิทธิภาพเว็บ

ดูข้อมูลเกี่ยวกับการเปิดตัวประสิทธิภาพของเว็บ 3 รายการใหม่จาก I/O 2019

Katie Hempenius
Katie Hempenius

ในระหว่างการพูดคุยเรื่อง"ความเร็วที่ปรับขนาดได้" ที่ Google I/O 2019 เราได้ประกาศ 3 สิ่งที่เราหวังว่าจะช่วยปรับปรุงประสิทธิภาพของเว็บในปีหน้า

ตอนนี้ Lighthouse รองรับงบประมาณด้านประสิทธิภาพแล้ว

LightWallet เป็นฟีเจอร์ใหม่ที่เพิ่มการรองรับงบประมาณด้านประสิทธิภาพใน Lighthouse งบประมาณประสิทธิภาพจะใช้เป็นมาตรฐานสำหรับประสิทธิภาพของเว็บไซต์คุณ และที่สำคัญกว่านั้นคือช่วยให้คุณระบุและแก้ไขการถดถอยของประสิทธิภาพได้ก่อนที่จะเผยแพร่

รายงาน LightWallet ที่แสดงชิ้นงานที่มีขนาดไฟล์เกินงบประมาณ

LightWallet มีให้บริการใน Lighthouse CLI เวอร์ชันล่าสุดและใช้เวลาตั้งค่าเพียงไม่กี่นาที วิธีเหล่านี้มีข้อมูลเพิ่มเติม

หากไม่แน่ใจว่าควรตั้งงบประมาณเท่าใด ลองใช้เครื่องคำนวณงบประมาณตามประสิทธิภาพเวอร์ชันทดลอง ซึ่งสามารถสร้างการกำหนดค่างบประมาณที่เข้ากันได้กับ LightWallet

การโหลดแบบ Lazy Loading รูปภาพและ iframe ระดับเบราว์เซอร์พร้อมใช้งานบนเว็บแล้ว

หน้าเว็บมักมีรูปภาพจํานวนมาก ซึ่งส่งผลให้มีการใช้อินเทอร์เน็ต หน้าเว็บมีขนาดใหญ่ และหน้าเว็บโหลดช้า รูปภาพเหล่านี้จำนวนมากอยู่นอกหน้าจอ ทำให้ผู้ใช้ต้องเลื่อนเพื่อดู

ก่อนหน้านี้ คุณต้องแก้ปัญหาการโหลดรูปภาพแบบ Lazy Loading โดยใช้ไลบรารี JavaScript แต่สถานการณ์อาจเปลี่ยนแปลงในเร็วๆ นี้ ในช่วงฤดูร้อนนี้ Chrome จะเปิดตัวการรองรับแอตทริบิวต์ loading ซึ่งจะนําการโหลดแบบ Lazy <img> และ <iframe> มาตรฐานมาสู่เว็บ

การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ที่ไฮไลต์เนื้อหาที่อยู่นอกหน้าจอซึ่งกำลังโหลดตามคําขอ

แอตทริบิวต์ loading ช่วยให้เบราว์เซอร์เลื่อนเวลาการโหลดรูปภาพและ iframe นอกหน้าจอจนกว่าผู้ใช้จะเลื่อนไปใกล้ๆ loading รองรับค่า 3 ค่า ได้แก่

  • lazy: เหมาะสําหรับการโหลดแบบเลื่อนดู
  • eager: ไม่เหมาะสําหรับการโหลดแบบเลื่อนดู โหลดทันที
  • auto: เบราว์เซอร์จะเป็นผู้กำหนดว่าจะโหลดแบบเลื่อนเวลาหรือไม่
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

เบราว์เซอร์จะเป็นผู้กำหนดวิธีการที่แน่นอนสำหรับ "เมื่อผู้ใช้เลื่อนอยู่ใกล้" โดยทั่วไป เราหวังว่าเบราว์เซอร์จะเริ่มดึงข้อมูลรูปภาพและเนื้อหา iframe ที่เลื่อนออกไปก่อนเล็กน้อยก่อนที่เนื้อหาดังกล่าวจะปรากฏในวิวพอร์ต

แอตทริบิวต์ loading ใช้งานได้ในเบื้องหลัง Flag ใน Chrome Canary คุณสามารถลองใช้การสาธิตนี้ใน Chrome 75 ขึ้นไปโดยเปิด Flag about://flags/#enable-lazy-image-loading และ about://flags/#enable-lazy-frame-loading

บทความเกี่ยวกับฟีเจอร์การโหลดแบบ Lazy Loading มีรายละเอียดเพิ่มเติม

ตอนนี้ Google Fonts รองรับ font-display เป็นพารามิเตอร์การค้นหาแล้ว

เราได้ประกาศการรองรับ font-display ในเวอร์ชันที่ใช้งานจริงสำหรับ Google Fonts ทั้งหมดผ่านพารามิเตอร์สตริงการค้นหาการแสดงผลแล้ว

https://fonts.googleapis.com/css?family=Lobster&display=swap

ตัวบ่งชี้ font-display ช่วยให้คุณตัดสินใจได้ว่าจะให้เว็บแบบอักษรแสดงผลหรือแสดงผลสำรองอย่างไร โดยขึ้นอยู่กับระยะเวลาในการโหลด ซึ่งรองรับค่าต่างๆ รวมถึง auto, block, swap, fallback และ optional

ก่อนหน้านี้ วิธีเดียวในการระบุ font-display สำหรับแบบอักษรเว็บจาก Google Fonts คือต้องโฮสต์แบบอักษรเอง แต่การเปลี่ยนแปลงนี้ทำให้คุณไม่ต้องดำเนินการดังกล่าว

เอกสารประกอบของ Google Fonts ได้อัปเดตให้รวม font-display ไว้ในการฝังโค้ดเริ่มต้น (ดังที่แสดงด้านล่าง) เราหวังว่าการอัปเดตนี้จะกระตุ้นให้นักพัฒนาแอปจำนวนมากขึ้นลองใช้ฟีเจอร์ใหม่ที่น่าตื่นเต้นนี้

โค้ดการฝัง Google Fonts ที่มี font-display รวมอยู่ใน URL ในฐานะพารามิเตอร์การค้นหา

ต่อไปนี้คือตัวอย่างใน Glitch ของการใช้แบบอักษรแสดงผลที่มีชุดแบบอักษรหลายชุด ลองใช้การจําลองเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บเพื่อดูผลกระทบของ font-display: swap

ดูเพิ่มเติม

นอกจากนี้ เรายังได้พูดถึงกรณีศึกษาการใช้งานจริงหลายกรณีเกี่ยวกับการใช้รูปแบบประสิทธิภาพขั้นสูงเพื่อปรับปรุงประสบการณ์ของผู้ใช้ ซึ่งรวมถึงเว็บไซต์ต่างๆ ที่ใช้ CDN สำหรับรูปภาพ, การบีบอัด Brotli, การเรียกใช้และการแสดงผล JavaScript ที่ชาญฉลาด และการอ่านล่วงหน้าเพื่อเร่งความเร็วหน้าเว็บ ดูการพูดคุยเพื่อดูข้อมูลเพิ่มเติม :)