ในปัจจุบัน รูปภาพเป็นเนื้อหาที่ใหญ่ที่สุดของเว็บในแง่ของขนาดการโอนทั้งหมด และ จำนวนคำขอ ต่อหน้า ค่ามัธยฐานของขนาดการโอนทั้งหมดของหน้าเว็บคือ 2 MB ข้อมูล ณ เดือนมิถุนายน 2022 โดยมีรูปภาพเพียงอย่างเดียวคิดเป็นเกือบครึ่งหนึ่ง ไม่ใช่การเกินจริง การเพิ่มประสิทธิภาพคำขอรูปภาพอาจเป็นการเพิ่มประสิทธิภาพที่ใหญ่ที่สุดเพียงอย่างเดียวที่ทำได้
หลังจากนั้น คุณจะได้เรียนรู้ว่ารูปภาพที่ตอบสนองตามอุปกรณ์พัฒนาไปอย่างไรเพื่อช่วยแก้ปัญหาที่สร้างขึ้นด้วยการพยายามแสดงรูปภาพเดียวสำหรับทุกเหตุการณ์ ในส่วนนี้ พบกับเมตริกประสิทธิภาพที่สำคัญซึ่งเกี่ยวข้องกับรูปภาพ และวิธีปรับปรุงรูปภาพ
กำลังเลื่อนคำขอรูปภาพ
ในขณะที่คุณกำลังเรียนรู้เกี่ยวกับวิธีการต่างๆ ที่ทำให้คำขอรูปภาพมีขนาดเล็กและมีประสิทธิภาพมากที่สุด คำขอรูปภาพที่รวดเร็วที่สุด
จะเป็นสิ่งที่ไม่เคยมีใครทำได้ ก่อนอื่นเลย ฉันอยากจะแบ่งปันสิ่งที่อาจส่งผลกระทบมากที่สุดต่อการเปลี่ยนแปลงนี้
คุณส่งชิ้นงานรูปภาพให้กับผู้ใช้: แอตทริบิวต์ loading="lazy"
<img src="image.jpg" loading="lazy" alt="…">
แอตทริบิวต์นี้ทำให้ไม่มีการสร้างคำขอรูปภาพจนกว่าจะตกอยู่ใกล้กับวิวพอร์ตของผู้ใช้ โดยเลื่อนเวลาคำขอไปไว้ตั้งแต่ต้น การโหลดหน้าเว็บ ซึ่งก็คือเวลาที่เบราว์เซอร์กำลังทำงานมากที่สุด และนำคำขอเหล่านั้นออกจากเส้นทางการแสดงผลวิกฤติ
ไม่ซับซ้อนเหมือนในทางปฏิบัติ การใช้แอตทริบิวต์นี้สามารถส่งผลดีต่อประสิทธิภาพเป็นอย่างมาก ซึ่งก็คือรูปภาพที่ไม่อยู่ภายใน ระบบจะไม่ขอวิวพอร์ตของผู้ใช้และจะไม่สูญเสียแบนด์วิดท์ไปกับรูปภาพที่ผู้ใช้จะไม่เห็น
แต่ก็มีข้อจำกัดอยู่เช่นกัน การเลื่อนเวลาคำขอเหล่านี้ออกไปจะทำให้ไม่มีการใช้ประโยชน์จากเบราว์เซอร์ กระบวนการที่เพิ่มประสิทธิภาพขั้นสูงสำหรับการขอ
รูปภาพต่างๆ ให้เร็วที่สุดเท่าที่จะทำได้ หากใช้ loading="lazy" ในองค์ประกอบ img ที่ด้านบนสุดของเลย์เอาต์ ดังนั้นจึงมีแนวโน้มมากขึ้น
อยู่ในวิวพอร์ตของผู้ใช้เมื่อโหลดหน้าเว็บครั้งแรก ผู้ใช้ปลายทางอาจรู้สึกว่ารูปภาพเหล่านี้ทำงานช้าลงอย่างมาก
ลำดับความสำคัญของการดึงข้อมูล
แอตทริบิวต์ loading เป็นตัวอย่างของความพยายามในการสร้างมาตรฐานเว็บที่ใหญ่ขึ้นเพื่อให้นักพัฒนาแอปมีอำนาจมากขึ้นในการควบคุมเว็บเบราว์เซอร์
จัดลำดับความสำคัญของคำขอ
คุณอาจทราบแล้วว่าเบราว์เซอร์ วิธีการพื้นฐานในการดึงข้อมูลลำดับความสำคัญ
ตัวอย่างเช่น คำขอไฟล์ CSS ภายนอกใน <head> ของเอกสารถือเป็นสิ่งจำเป็นมากพอที่จะบล็อกการแสดงผล ในขณะที่คำขอสำหรับ
ระบบจะเลื่อนไฟล์ JavaScript ภายนอกที่สูงกว่า </body> จนกว่าการแสดงผลจะเสร็จสมบูรณ์ หากค่าของแอตทริบิวต์ loading ใน <img> เป็น "lazy"
ระบบจะเลื่อนคำขอรูปภาพที่เกี่ยวข้องออกไปจนกว่าเบราว์เซอร์จะพิจารณาว่าจะแสดงต่อผู้ใช้ มิฉะนั้น รูปภาพดังกล่าวจะมี
ลำดับความสำคัญกับรูปภาพอื่นๆ ในหน้าเว็บ
แอตทริบิวต์ fetchpriority มีไว้เพื่อให้
ควบคุมลำดับความสำคัญของเนื้อหาได้อย่างละเอียด ซึ่งช่วยให้คุณแจ้งทรัพยากรต่างๆ ได้
เป็น "high" และ "ต่ำ" ลำดับความสำคัญที่สัมพันธ์กับทรัพยากรในประเภทเดียวกัน กรณีการใช้งาน fetchpriority จะคล้ายกับ loading
แม้ว่าจะกว้างกว่ามาก เช่น คุณอาจใช้ fetchpriority="low" ในรูปภาพที่แสดงหลังจากการโต้ตอบของผู้ใช้เท่านั้น
(ไม่ว่ารูปภาพนั้นจะอยู่ในวิวพอร์ตของผู้ใช้หรือไม่ก็ตาม) เพื่อจัดลำดับความสำคัญของรูปภาพที่มองเห็นได้ในส่วนอื่นๆ ของหน้าเว็บ หรือfetchpriority="high"
เพื่อจัดลำดับความสำคัญของรูปภาพที่คุณทราบว่าจะปรากฏในวิวพอร์ตทันทีที่มีการแสดงผลหน้าเว็บ
โปรดทราบว่า fetchpriority แตกต่างจาก loading ตรงที่ไม่ได้เปลี่ยนลักษณะการทำงานของเบราว์เซอร์โดยพื้นฐาน ไม่แจ้งให้เบราว์เซอร์
เพื่อโหลดเนื้อหาบางอย่างก่อนเนื้อหาอื่นๆ แต่ให้บริบทที่มีความสำคัญต่อการตัดสินใจเกี่ยวกับการขอเนื้อหาแทน
การวัดผลกระทบของรูปภาพ
เมื่อเพิ่มประสิทธิภาพชิ้นงานรูปภาพ ประสิทธิภาพที่รับรู้ได้มักจะมีความสำคัญและวัดผลได้ยากกว่าการโอนทั้งหมด ขนาดเดียวเท่านั้น
Web Vitals มอบเมตริกที่วัดผลได้และนำไปใช้ได้จริง รวมถึงคำแนะนำสำหรับการปรับปรุงผู้ใช้ เว็บด้วย เน้นถึงปัญหาต่างๆ เช่น เช่น เวลาตอบสนองช้าจากเว็บเซิร์ฟเวอร์ ปัญหาการแสดงผล และความล่าช้าของการโต้ตอบ Core Web Vitals เป็นชุดย่อยของเป้าหมายเหล่านี้ซึ่งมุ่งเน้นเลเซอร์ เกี่ยวกับประสบการณ์โดยตรงของผู้ใช้ในหน้าเว็บหนึ่งๆ ซึ่งเป็นชุดการวัดทางเทคนิคที่เมื่อใช้ร่วมกันแล้ว จะใช้เพื่อพิจารณาว่าประสบการณ์ความรู้สึกของผู้ใช้เร็วเพียงใด
การเปลี่ยนเลย์เอาต์สะสม
Cumulative Layout Shift (CLS) คือการวัดความเสถียรของภาพ เมตริกนี้คือเมตริกวัดปริมาณรายได้ เลย์เอาต์ของเนื้อหาในหน้าเว็บจะเปลี่ยนไปเมื่อเนื้อหาโหลดขึ้นและแสดงหน้าเว็บ ใครก็ตามที่ใช้จ่ายไปเป็นจำนวนมาก ของการใช้เว็บเสียเวลาไปกับข้อความยาวๆ เนื่องจากบนหน้า "กระโดด" เป็นเว็บฟอนต์หรือแหล่งที่มาของรูปภาพที่ล่าช้า แสดงผล หรือมีองค์ประกอบแบบอินเทอร์แอกทีฟย้ายออกห่างจากตัวชี้โดยทันที CLS ที่สูงจะทำให้เกิดความรำคาญมากที่สุด และทำให้ ข้อผิดพลาดของผู้ใช้ที่แย่ที่สุด เช่น "ยกเลิก" ปุ่มเลื่อนไปยังพื้นที่ที่ก่อนหน้านี้มีปุ่ม "ยืนยัน" เช่นเดียวกับที่ผู้ใช้คลิก เป็นต้น
ด้วยเวลาโหลดสูงและเนื้อที่ที่ใช้ได้ในเลย์เอาต์ ก็ให้เหตุผลว่ารูปภาพเป็นสาเหตุที่พบบ่อยอย่างหนึ่ง ที่มีคะแนน CLS สูง
เนื่องจากการเปลี่ยนแปลงที่ค่อนข้างล่าสุดในเบราว์เซอร์สมัยใหม่ การเลี่ยงค่า CLS ที่สูงเนื่องจากรูปภาพจึงง่ายกว่าที่คุณคิด
หากใช้ฟรอนท์เอนด์มา 2-3 ปีแล้ว คุณจะคุ้นเคยกับแอตทริบิวต์ width และ height ใน <img>
ก่อนที่จะมีการนำ CSS มาใช้อย่างแพร่หลาย นี่เป็นวิธีเดียวในการควบคุมขนาดของรูปภาพ
<img src="image.jpg" height="200" width="400" alt="…">
แอตทริบิวต์เหล่านี้เลิกใช้งานแล้วเพื่อพยายามแยกข้อกังวลด้านสไตล์ออกจากมาร์กอัป โดยเฉพาะอย่างยิ่งเนื้อหาที่ปรับเปลี่ยนตามอุปกรณ์
การออกแบบเว็บทำให้จำเป็นต้องระบุขนาดตามเปอร์เซ็นต์ผ่าน CSS ในช่วงแรกๆ ของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ "ลบ
แอตทริบิวต์ width และ height ที่ไม่ได้ใช้" เป็นคำแนะนำทั่วไป ดังค่าที่เราระบุไว้ใน CSSmax-width: 100% และ
height: auto จะลบล้าง
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
เนื่องจากได้นำแอตทริบิวต์ height และ width ออกตามที่แสดงในตัวอย่างก่อนหน้านี้ จึงเป็นวิธีเดียวที่เบราว์เซอร์มีไว้ใช้พิจารณา
สำหรับความสูงของรูปภาพในกรณีนี้คือ การส่งคำขอแหล่งที่มา แยกวิเคราะห์ และแสดงผลรูปภาพตามสัดส่วนภาพตามจริง
ความกว้างของพื้นที่ที่แทรกไว้ในเค้าโครงเมื่อมีการใช้สไตล์ชีต กระบวนการนี้มักเกิดขึ้นหลังจากที่หน้าเว็บ
ด้วยความสูงที่คำนวณใหม่ซึ่งทำให้เลย์เอาต์เพิ่มเติม
ตั้งแต่ปี 2019 เราได้อัปเดตลักษณะการทำงานของเบราว์เซอร์เพื่อจัดการแอตทริบิวต์ width และ height ในลักษณะที่ต่างออกไป แทนที่จะใช้ค่าของแอตทริบิวต์เหล่านี้
เพื่อกำหนดขนาดคงที่ตามพิกเซลขององค์ประกอบ img ในเลย์เอาต์
สัดส่วนภาพของรูปภาพ แม้ว่าไวยากรณ์จะเหมือนกันก็ตาม เบราว์เซอร์สมัยใหม่จะแบ่งค่าเหล่านี้ออกจากกันเพื่อ
กำหนดสัดส่วนภาพภายในขององค์ประกอบ img ก่อนที่หน้าจะแสดง ซึ่งช่วยให้รักษาพื้นที่ในรูปภาพขณะแสดงผลเลย์เอาต์
ตามกฎแล้ว คุณควรใช้แอตทริบิวต์ height และ width ใน <img> เสมอ ซึ่งมีค่าตรงกับขนาดที่แท้จริงของแหล่งที่มาของรูปภาพ ดังนั้น
ตราบใดที่คุณแน่ใจว่าได้ระบุ height: auto ควบคู่ไปกับ max-width: 100% เพื่อลบล้างความสูงจากแอตทริบิวต์ HTML
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
การใช้แอตทริบิวต์ width และ height ในองค์ประกอบ <img> จะช่วยให้คุณหลีกเลี่ยงคะแนน CLS ที่สูงเนื่องจากรูปภาพ
โปรดทราบว่าวิธีนี้ไม่มีข้อเสียเปรียบ เนื่องจากวิธีนี้ต้องอาศัยลักษณะการทำงานของเบราว์เซอร์ที่มีมาอย่างยาวนาน นั่นคือทุกเบราว์เซอร์
พร้อมการรองรับ CSS พื้นฐานจะทำงานได้ตามเดิม โดยมีแอตทริบิวต์ height และ width ในมาร์กอัปลบล้างโดยสไตล์ของคุณ
แม้ว่าแอตทริบิวต์ width และ height จะหลีกเลี่ยงปัญหา CLS ได้อย่างชาญฉลาดด้วยการจองพื้นที่เลย์เอาต์ที่จำเป็นสำหรับรูปภาพ และนำเสนอ
ผู้ใช้ที่ไม่มีช่องว่างหรือมีตัวยึดตำแหน่งที่มีคุณภาพต่ำ
พวกเขารอให้ภาพโอนและแสดงผลก็ไม่ค่อยดีเช่นกัน แม้ว่ายังมีสิ่งที่คุณทำได้เพื่อลดความสามารถในการวัดผลและการรับรู้ที่รับรู้ได้
ผลกระทบของรูปภาพที่โหลดช้า วิธีเดียวที่จะนำเสนอรูปภาพที่แสดงผลแบบเต็มแก่ผู้ใช้ได้เร็วขึ้นคือการลดขนาดการโอน
การแสดงผลเนื้อหาขนาดใหญ่ที่สุด
Largest Contentful Paint (LCP) จะวัดเวลาที่ใช้ในการแสดงผลองค์ประกอบ "contentful" ขนาดใหญ่ที่สุดที่มองเห็นได้ในวิวพอร์ตของผู้ใช้ องค์ประกอบที่ใช้พื้นที่มากที่สุดของหน้าที่มองเห็นได้ อาจจะดูเป็นเมตริกที่มีความเฉพาะเจาะจงมากเกินไป ทำหน้าที่เป็นพร็อกซีที่ใช้ได้จริงสำหรับจุดที่แสดงหน้าเว็บส่วนใหญ่ จากมุมมองของผู้ใช้ LCP มีความสำคัญอย่างยิ่ง การวัดประสิทธิภาพ (ที่รับรู้)
เมตริก เช่น DOMContentLoaded หรือเหตุการณ์ window.onload อาจเป็นประโยชน์ในการระบุกระบวนการโหลดหน้าเว็บปัจจุบัน
ดำเนินการในทางเทคนิคแล้ว แต่อาจไม่ได้สอดคล้องกับประสบการณ์การใช้งานหน้าเว็บของผู้ใช้ ความล่าช้าเล็กน้อยในการแสดงผลองค์ประกอบ
นอกวิวพอร์ตของผู้ใช้จะถูกนำไปเป็นปัจจัยในเมตริกเหล่านี้ แต่ก็เป็นไปได้ว่าผู้ใช้จริงจะตรวจไม่พบเลย
LCP แบบยาวหมายถึงการแสดงผลหน้าเว็บครั้งแรกของผู้ใช้ ซึ่งเป็นเนื้อหาที่สำคัญที่สุดในวิวพอร์ตปัจจุบัน คือหน้าเว็บช้า
หรือเสียไปเลย
การรับรู้ของผู้ใช้ที่ LCP รวบรวมได้จะมีผลต่อประสบการณ์ของผู้ใช้โดยตรง การทดสอบโดย Vodafone เมื่อปีที่แล้ว พบว่า LCP เพิ่มขึ้น 31% ไม่เพียงแต่ทำให้ยอดขายเพิ่มขึ้น 8% ซึ่งเป็นผลลัพธ์ที่ยอดเยี่ยมเพียงอย่างเดียว แต่จำนวนผู้ใช้ทั้งหมดยังพบ 15% เพิ่มขึ้นของผู้เข้าชมที่กลายเป็นผู้มีโอกาสเป็นลูกค้า ("อัตราผู้เข้าชมต่อผู้มีโอกาสเป็นลูกค้า") และเพิ่มขึ้น 11% ในจำนวนผู้ใช้ ผู้ที่เข้าชมรถเข็นของตน ("อัตราจากรถเข็นต่อการเข้าชม")
ในหน้าเว็บมากกว่า 70% ซึ่งเป็นองค์ประกอบที่ใหญ่ที่สุดในช่วงเริ่มต้น
วิวพอร์ตเกี่ยวข้องกับรูปภาพ ไม่ว่าจะเป็นองค์ประกอบ <img> แบบแยกเดี่ยวหรือองค์ประกอบที่มีภาพพื้นหลัง กล่าวคือ
70% ของหน้าเว็บ คะแนน LCP จะอิงตามประสิทธิภาพของรูปภาพ ไม่จำเป็นต้องจินตนาการมากนักเพื่อหาเหตุผลว่าทำไมคุณถึงจะเห็นว่ายิ่งใหญ่และดึงดูดความสนใจ
รูปภาพและโลโก้จึงมีแนวโน้มที่จะปรากฏที่ "ครึ่งหน้าบน"
คุณหลีกเลี่ยงความล่าช้าของ LCP ได้ด้วย 2-3 ขั้นตอนดังนี้ ก่อนอื่น อย่าระบุ loading="lazy" ใน "ครึ่งหน้าบน" รูปภาพ
เนื่องจากการชะลอคำขอไปจนกว่าจะแสดงผลหน้าเว็บแล้วมีแนวโน้มที่จะส่งผลกระทบด้านลบอย่างมากต่อคะแนน LCP ของคุณ
ข้อที่ 2 การใช้ fetchpriority="high" จะบอกให้เบราว์เซอร์ทราบว่าการโอนรูปภาพนี้ควรให้ความสำคัญกับการโอนรูปภาพเหนือรูปภาพส่วนอื่นๆ ในหน้าเว็บ
เมื่อคำนึงถึงกฎเหล่านั้นอย่างถ่องแท้ สิ่งสำคัญที่สุดที่คุณทำได้เพื่อปรับปรุงคะแนน LCP ของหน้าเว็บคือการลดระยะเวลา ที่ต้องใช้ในการโอนและแสดงภาพ ในการทำเช่นนั้น คุณจะต้องทำให้แหล่งที่มาของรูปภาพมีขนาดเล็กและมีประสิทธิภาพ (โดยไม่ลดคุณภาพ) และดูแลให้ผู้ใช้ได้รับเฉพาะชิ้นงานรูปภาพที่ใช้ประโยชน์สูงสุด ต่อบริบทการท่องเว็บของผู้ใช้ได้อย่างไร
บทสรุป
ชิ้นงานรูปภาพคือการระบายความรู้สึกของผู้ใช้มากที่สุด แบนด์วิดท์ - แบนด์วิดท์ที่ไม่ได้ใช้ในการโอนเนื้อหาอื่นๆ ทั้งหมดที่จำเป็น เพื่อแสดงผลหน้าเว็บ รูปภาพก่อให้เกิดปัญหาสำคัญในแง่ของประสิทธิภาพที่รับรู้ ทั้งในระหว่างและหลังหน้าเว็บโดยรอบ แสดงผลเลย์เอาต์แล้ว กล่าวโดยสรุปคือชิ้นงานรูปภาพเป็นความเสียหาย
เรื่องนี้อาจทำให้คุณกังวลใจ แต่ "การใช้เว็บจะดีกว่าหากรูปภาพน้อยลง" ก็จะต้องแสดงในเรื่องประสิทธิภาพเพียงอย่างเดียว และยังทำให้ผู้ใช้สูญเสียบริการอันมหาศาลด้วย รูปภาพเป็นส่วนสำคัญของเว็บ และคุณไม่ควรลดคุณภาพของ เนื้อหาที่มีความหมายเพื่อประสิทธิภาพเพียงอย่างเดียว
ในส่วนที่เหลือของหลักสูตรนี้ คุณจะได้เรียนรู้เกี่ยวกับเทคโนโลยีที่ขับเคลื่อนชิ้นงานรูปภาพและเทคนิคของเราในการบรรเทาปัญหา ผลกระทบด้านประสิทธิภาพ แต่ไม่กระทบต่อคุณภาพ