ที่ใช้อยู่ในปัจจุบัน รูปภาพคือเนื้อหาที่ใหญ่ที่สุดของเว็บในแง่ของทั้งขนาดการโอนทั้งหมดและจำนวนคำขอต่อหน้า ค่ามัธยฐานของขนาดการโอนทั้งหมดของหน้าเว็บคือประมาณ 2 MB ตามข้อมูลในเดือนมิถุนายน 2022 โดยรูปภาพเพียงอย่างเดียวแล้วคิดเป็นเกือบครึ่งหนึ่ง ไม่ได้กล่าวเกินจริงว่า การเพิ่มประสิทธิภาพคำขอรูปภาพอาจเป็นการเพิ่มประสิทธิภาพที่ดีที่สุดเพียงสิ่งเดียวที่คุณจะทำได้
จากนี้ไป คุณจะได้เรียนรู้ว่ารูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ได้พัฒนาไปอย่างไรเพื่อช่วยแก้ปัญหาที่สร้างขึ้นโดยการแสดงรูปภาพเดียวสำหรับทุกเหตุการณ์ ในส่วนนี้ มาดูเมตริกประสิทธิภาพที่สำคัญซึ่งเกี่ยวข้องกับรูปภาพและวิธีปรับปรุง
การเลื่อนคำขอรูปภาพ
ในขณะที่คุณกำลังเรียนรู้วิธีหลายวิธีที่จะทำให้คำขอรูปภาพของคุณมีขนาดเล็กและมีประสิทธิภาพที่สุดเท่าที่จะเป็นไปได้ คำขอรูปภาพที่เร็วที่สุดจะเป็นคำขอที่ไม่เคยมีมาก่อน อย่างแรกเลย เราขอแชร์ว่าการเปลี่ยนแปลงใดที่อาจส่งผลกระทบมากที่สุดที่คุณสามารถทำกับวิธีส่งชิ้นงานรูปภาพแก่ผู้ใช้ ซึ่งก็คือแอตทริบิวต์ loading="lazy"
<img src="image.jpg" loading="lazy" alt="…">
แอตทริบิวต์นี้ช่วยให้มั่นใจได้ว่าจะไม่มีการส่งคำขอรูปภาพจนกว่าจะหลุดออกไปใกล้กับวิวพอร์ตของผู้ใช้ โดยเลื่อนไม่ให้การโหลดหน้าเว็บเริ่มต้น ซึ่งเป็นเวลาที่เบราว์เซอร์ทำงานมากที่สุด และนำคำขอเหล่านั้นออกจากเส้นทางการแสดงผลวิกฤติ
การใช้แอตทริบิวต์นี้เป็นไปอย่างง่ายดายในทางปฏิบัติ แอตทริบิวต์นี้จะมีประโยชน์อย่างมากต่อประสิทธิภาพ เพราะระบบจะไม่ขอรูปภาพที่ไม่มีวันเข้าสู่วิวพอร์ตของผู้ใช้ และไม่มีการใช้แบนด์วิดท์กับรูปภาพที่ผู้ใช้ไม่มีวันสูญเสียไป
แต่ข้อดีอย่างหนึ่งคือ การยืดเวลาคำขอเหล่านั้นออกไปทำให้ไม่ใช้ประโยชน์จากขั้นตอนการขอรูปภาพที่ได้รับการเพิ่มประสิทธิภาพอย่างสูงของเบราว์เซอร์ให้เร็วที่สุด หากมีการใช้ loading="lazy" กับองค์ประกอบ img ที่อยู่ด้านบนของเลย์เอาต์และมีแนวโน้มสูงที่จะอยู่ในวิวพอร์ตของผู้ใช้เมื่อโหลดหน้าเว็บเป็นครั้งแรก ผู้ใช้อาจรู้สึกว่ารูปภาพเหล่านี้ช้าลงมาก
ลำดับความสำคัญของการดึงข้อมูล
แอตทริบิวต์ loading เป็นตัวอย่างของความพยายามมาตรฐานด้านเว็บที่มากขึ้นเพื่อให้นักพัฒนาซอฟต์แวร์มีอำนาจมากขึ้นในการจัดลำดับความสำคัญของคำขอในเว็บเบราว์เซอร์
คุณน่าจะทราบวิธีการพื้นฐานในการดึงลำดับความสำคัญของเบราว์เซอร์ เช่น คำขอไฟล์ CSS ภายนอกใน <head> ของเอกสารถือว่าสำคัญพอที่จะบล็อกการแสดงผล ขณะที่คำขอไฟล์ JavaScript ภายนอกที่อยู่สูงกว่า </body> จะถูกเลื่อนออกไปจนกว่าการแสดงผลจะเสร็จสมบูรณ์ หากค่าของแอตทริบิวต์ loading ใน <img> คือ "แบบ Lazy Loading"
ระบบจะเลื่อนคำขอรูปภาพที่เกี่ยวข้องไปจนกว่าเบราว์เซอร์จะตัดสินว่าจะแสดงให้ผู้ใช้เห็น ไม่เช่นนั้น รูปภาพจะมีลำดับความสำคัญเท่ากับรูปภาพอื่นๆ ในหน้าเว็บ
แอตทริบิวต์ fetchpriority มีจุดประสงค์เพื่อให้นักพัฒนาซอฟต์แวร์สามารถควบคุมลำดับความสำคัญของเนื้อหาได้อย่างละเอียดมากขึ้น ซึ่งจะช่วยให้คุณแจ้งว่าทรัพยากรมีลำดับความสำคัญ "สูง" และ "ต่ำ" เมื่อเทียบกับทรัพยากรประเภทเดียวกัน กรณีการใช้งาน 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 ที่ไม่ได้ใช้ออก" เป็นคำแนะนำทั่วไป เนื่องจากค่าที่เราระบุไว้ใน CSS (max-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) จะวัดเวลาที่ใช้ในการแสดงผลองค์ประกอบ "ที่มีเนื้อหาเต็ม" ขนาดใหญ่ที่สุดที่มองเห็นได้ในวิวพอร์ตของผู้ใช้ ซึ่งก็คือองค์ประกอบเนื้อหาที่มีเปอร์เซ็นต์สูงสุดของหน้าเว็บที่มองเห็นได้ อาจดูเป็นเมตริกที่เฉพาะเจาะจงมากเกินไป แต่องค์ประกอบดังกล่าวทำหน้าที่เป็นพร็อกซีที่ใช้ได้จริงสำหรับจุดที่แสดงผลส่วนใหญ่ของหน้า จากมุมมองของผู้ใช้ LCP เป็นตัวชี้วัดสำคัญ ของประสิทธิภาพ (ที่รับรู้)
เมตริกอย่างเช่น DOMContentLoaded หรือเหตุการณ์ window.onload จะมีประโยชน์ในการระบุว่ากระบวนการโหลดหน้าเว็บปัจจุบันเสร็จสิ้นในทางเทคนิคแล้วเมื่อใด แต่อาจไม่ได้ตรงกับประสบการณ์การใช้งานหน้าเว็บของผู้ใช้เสมอไป ความล่าช้าเล็กน้อยในการแสดงองค์ประกอบนอกวิวพอร์ตของผู้ใช้จะเป็นปัจจัยหนึ่งในเมตริกเหล่านี้ ด้วย แต่มีแนวโน้มว่าผู้ใช้จริงอาจตรวจไม่พบเลย
LCP ที่ยืดยาวหมายถึงความประทับใจแรกของผู้ใช้ในหน้าเว็บซึ่งเป็นเนื้อหาที่สำคัญที่สุดในวิวพอร์ตปัจจุบัน คือหน้าเว็บช้าหรือไม่ทำงานเลย
การรับรู้ของผู้ใช้ตามที่ LCP ระบุมีผลกระทบโดยตรงต่อประสบการณ์ของผู้ใช้ การทดสอบของ Vodafone เมื่อปีที่แล้วทำให้พบว่า LCP ที่เพิ่มขึ้น 31% ไม่เพียงแค่ทำให้มียอดขายเพิ่มขึ้น 8% ซึ่งเป็นผลลัพธ์ที่ยอดเยี่ยมเพียงอย่างเดียวเท่านั้น แต่จากจำนวนผู้ใช้ทั้งหมดพบว่าจำนวนผู้เข้าชมที่กลายเป็นผู้มีโอกาสเป็นลูกค้าเพิ่มขึ้น 15% ("อัตราผู้เข้าชมต่อโอกาสในการขาย") และจำนวนผู้ใช้ที่เข้าชมรถเข็นเพิ่มขึ้น 11%
ในหน้าเว็บมากกว่า 70% องค์ประกอบที่ใหญ่ที่สุดในวิวพอร์ตเริ่มต้นเกี่ยวข้องกับรูปภาพ ไม่ว่าจะเป็นองค์ประกอบ <img> แบบสแตนด์อโลนหรือองค์ประกอบที่มีภาพพื้นหลัง กล่าวคือ 70% ของคะแนน LCP ของหน้าเว็บนั้นขึ้นอยู่กับประสิทธิภาพของรูปภาพ คุณไม่จำเป็นต้องจินตนาการเลยว่าทำไมภาพและโลโก้
ที่ใหญ่และดึงดูดความสนใจจึงมีโอกาสสูงที่ "ครึ่งหน้าบน"
คุณทำ 2-3 ขั้นตอนเพื่อหลีกเลี่ยงความล่าช้าของ LCP ได้ โดยก่อนอื่น อย่าระบุ loading="lazy" ในรูปภาพ "ครึ่งหน้าบน" เพราะการยืดเวลาคำขอออกไปจนกว่าจะแสดงหน้าเว็บแล้วมีแนวโน้มที่จะส่งผลกระทบด้านลบอย่างมากต่อคะแนน LCP ของคุณ
อย่างที่สอง การใช้ fetchpriority="high" สามารถแจ้งให้เบราว์เซอร์ทราบว่าการโอนรูปภาพนี้ควรมีลำดับความสำคัญสูงกว่ารูปภาพในส่วนอื่นของหน้า
เมื่อยึดถือกฎเหล่านี้ไว้ สิ่งสำคัญที่สุดที่คุณทำได้เพื่อปรับปรุงคะแนน LCP ของหน้าเว็บคือการลดระยะเวลาที่ใช้ในการโอนและแสดงผลรูปภาพเหล่านั้น ในการทำเช่นนั้น คุณจะต้องทำให้แหล่งที่มาของรูปภาพมีขนาดเล็กและมีประสิทธิภาพมากที่สุดเท่าที่จะเป็นไปได้ (ซึ่งแน่นอนว่าจะไม่ทำให้คุณภาพลดลงด้วย) และตรวจสอบว่าผู้ใช้จะได้รับเฉพาะเนื้อหารูปภาพที่เหมาะกับบริบทการท่องเว็บมากที่สุดเท่านั้น
บทสรุป
เนื้อหารูปภาพใช้แบนด์วิดท์ของผู้ใช้มากที่สุด เพราะแบนด์วิดท์ที่ใช้ออกจากการโอนเนื้อหาอื่นๆ ทั้งหมดที่จำเป็นต่อการแสดงผลหน้าเว็บ รูปภาพทำให้เกิดปัญหาสำคัญในแง่ของประสิทธิภาพที่รับรู้ ทั้งในระหว่างและหลังจากที่มีการแสดงผลเลย์เอาต์หน้าเว็บโดยรอบ สรุปสั้นๆ คือ ชิ้นงานรูปภาพจะสร้างความเสียหาย
อาจเป็นเรื่องที่น่ากังวล แม้ว่า "เว็บจะดีกว่าเพราะมีรูปภาพน้อยลง" ก็เป็นความจริงในแง่ของประสิทธิภาพเพียงอย่างเดียว แต่ก็อาจทำให้ผู้ใช้บริการแย่ลงอย่างมาก รูปภาพเป็นส่วนสำคัญของเว็บ และคุณไม่ควรลดทอนคุณภาพของเนื้อหาที่มีความหมายเพียงเพื่อประสิทธิภาพเท่านั้น
ในช่วงที่เหลือของหลักสูตรนี้ คุณจะได้เรียนรู้เกี่ยวกับเทคโนโลยีที่ขับเคลื่อนชิ้นงานรูปภาพและเทคนิคของเราในการลดผลกระทบด้านประสิทธิภาพโดยไม่กระทบต่อคุณภาพ