ดูข้อมูลเกี่ยวกับการเปิดตัวประสิทธิภาพของเว็บ 3 รายการใหม่จาก I/O 2019
ในระหว่างการพูดคุยเรื่อง"ความเร็วที่ปรับขนาดได้" ที่ 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
: เหมาะสําหรับการโหลดแบบเลื่อนดู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
ไว้ในการฝังโค้ดเริ่มต้น (ดังที่แสดงด้านล่าง) เราหวังว่าการอัปเดตนี้จะกระตุ้นให้นักพัฒนาแอปจำนวนมากขึ้นลองใช้ฟีเจอร์ใหม่ที่น่าตื่นเต้นนี้
ต่อไปนี้คือตัวอย่างใน Glitch ของการใช้แบบอักษรแสดงผลที่มีชุดแบบอักษรหลายชุด ลองใช้การจําลองเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บเพื่อดูผลกระทบของ font-display: swap
ดูเพิ่มเติม
นอกจากนี้ เรายังได้พูดถึงกรณีศึกษาการใช้งานจริงหลายกรณีเกี่ยวกับการใช้รูปแบบประสิทธิภาพขั้นสูงเพื่อปรับปรุงประสบการณ์ของผู้ใช้ ซึ่งรวมถึงเว็บไซต์ต่างๆ ที่ใช้ CDN สำหรับรูปภาพ, การบีบอัด Brotli, การเรียกใช้และการแสดงผล JavaScript ที่ชาญฉลาด และการอ่านล่วงหน้าเพื่อเร่งความเร็วหน้าเว็บ ดูการพูดคุยเพื่อดูข้อมูลเพิ่มเติม :)