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

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

Addy Osmani

Katie Hempenius

ในงาน "Speed at Scale" ที่งาน Google I/O 2019 เราได้ประกาศ 3 สิ่งที่เราหวังว่าจะช่วยเพิ่มประสิทธิภาพเว็บในปีที่จะถึงนี้

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

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

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

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

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

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

ก่อนหน้านี้ คุณยังต้องแก้ปัญหาการโหลดรูปภาพแบบ Lazy Loading โดยใช้ไลบรารี JavaScript แต่อาจมีการเปลี่ยนแปลงในเร็วๆ นี้ ฤดูร้อนนี้ Chrome จะเปิดตัวการรองรับแอตทริบิวต์การโหลดซึ่งนำการโหลดแบบ 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 ใช้งานหลัง Flag ใน Chrome Canary คุณสามารถ ลองใช้เดโมนี้ได้ใน Chrome เวอร์ชัน 75 ขึ้นไปซึ่งเปิดใช้แฟล็ก about://flags/#enable-lazy-image-loading และ about://flags/#enable-lazy-frame-loading

การเขียนบันทึกในฟีเจอร์การโหลดแบบ Lazy Loading จะพร้อมใช้งานพร้อมรายละเอียดเพิ่มเติม

Google Fonts รองรับการแสดงแบบอักษรเป็นพารามิเตอร์การค้นหาแล้ว

เราได้ประกาศเปิดตัวการรองรับ 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 เกี่ยวกับการใช้ Display กับชุดแบบอักษรหลายชุด ลองใช้ด้วยการจำลองเครือข่าย DevTools เพื่อดูผลกระทบของ font-display: swap

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

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