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

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

Addy Osmani

Katie Hempenius

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

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

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

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

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

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

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

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

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

• lazy: เป็นตัวเลือกที่ดีสำหรับการโหลดแบบ Lazy Loading
• eager: ไม่เหมาะสําหรับการโหลดแบบเลื่อนดู โหลดทันที
• auto: เบราว์เซอร์จะกำหนดว่าจะโหลดแบบ Lazy Loading หรือไม่

<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 ไว้ในการฝังโค้ดเริ่มต้น (ดังที่แสดงด้านล่าง) เราหวังว่านี่จะกระตุ้นให้นักพัฒนาซอฟต์แวร์จำนวนมากขึ้นลองใช้ในส่วนเพิ่มเติมที่น่าตื่นเต้นนี้

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

รับชมเพิ่มเติม

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