ดูข้อมูลเกี่ยวกับการเปิดตัวประสิทธิภาพเว็บใหม่ 3 รายการจาก I/O 2019
ในงาน "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 Loadingeager
: ไม่ใช่ตัวเลือกที่ดีสำหรับการโหลดแบบ 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 แบบอัจฉริยะ และการดึงข้อมูลล่วงหน้าเพื่อให้หน้าเว็บเร็วขึ้น ดูการพูดคุยเพื่อเรียนรู้เพิ่มเติม :)