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

ดูข้อมูลเกี่ยวกับการเปิดตัวประสิทธิภาพของเว็บใหม่ 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 Loading ของ <img> และ <iframe> ที่ได้มาตรฐานมาสู่เว็บ

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

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

<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

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

แอตทริบิวต์ loading จะใช้งานอยู่เบื้องหลังแฟล็กใน Chrome Canary คุณสามารถลองใช้การสาธิตนี้ใน Chrome 75 ขึ้นไปโดยเปิดแฟล็ก 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 อัจฉริยะ และการดึงข้อมูลล่วงหน้าเพื่อเพิ่มความเร็วหน้าเว็บ ดูการพูดคุยเพื่อดูข้อมูลเพิ่มเติม :)