เพิ่มประสิทธิภาพภาพพื้นหลัง CSS ด้วยการค้นหาสื่อ

Demián Renzulli

เว็บไซต์จำนวนมากขอทรัพยากรจำนวนมาก เช่น รูปภาพ ซึ่งไม่ได้รับการเพิ่มประสิทธิภาพสำหรับบางหน้าจอ และส่งไฟล์ CSS ขนาดใหญ่ซึ่งมีสไตล์ที่อุปกรณ์บางชนิดจะไม่ใช้เลย การใช้คิวรี่สื่อเป็นเทคนิคที่นิยมใช้ในการส่งสไตล์ชีตและองค์ประกอบที่ได้รับการปรับแต่งไปยังหน้าจอต่างๆ เพื่อลดปริมาณข้อมูลที่โอนไปยังผู้ใช้ และปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ คู่มือนี้แสดงวิธีใช้คิวรี่สื่อเพื่อส่งรูปภาพที่มีขนาดใหญ่เท่าที่จำเป็นเท่านั้น ซึ่งเป็นเทคนิคที่เรียกกันโดยทั่วไปว่ารูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

ข้อกำหนดเบื้องต้น

คู่มือนี้จะถือว่าคุณคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์อื่นแทนได้หากต้องการ คุณเพียงแค่ต้องจับคู่ภาพหน้าจอของ Chrome DevTools ในคู่มือนี้กลับไปยังฟีเจอร์ที่เกี่ยวข้องในเบราว์เซอร์ที่คุณเลือก

ทำความเข้าใจภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์

ก่อนอื่น ให้วิเคราะห์การจราจรของข้อมูลในเครือข่ายของการสาธิตที่ยังไม่ได้เพิ่มประสิทธิภาพ

1. เปิดเดโมที่ไม่ได้เพิ่มประสิทธิภาพในแท็บ Chrome ใหม่
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. โหลดหน้าเว็บซ้ำ

หมายเหตุ: ดูตรวจสอบกิจกรรมในเครือข่ายด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หากต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ

คุณจะเห็นได้ว่ารูปภาพเดียวที่มีการร้องขอคือ background-desktop.jpg ซึ่งมีขนาด 1006KB

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

คุณสามารถดูสไตล์ที่ควบคุมภาพพื้นหลังได้ใน style.css ดังนี้

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

ต่อไปนี้เป็นความหมายของแต่ละพร็อพเพอร์ตี้ที่ใช้

• background-position: center center: จัดรูปภาพให้อยู่กึ่งกลางในแนวตั้งและแนวนอน
• background-repeat: no-repeat: แสดงรูปภาพเพียงครั้งเดียว
• background-attachment: fixed: ระวังอย่าให้ภาพพื้นหลังต้องเลื่อน
• background-size: cover: ปรับขนาดรูปภาพให้ครอบคลุมทั้งคอนเทนเนอร์
• background-image: url(images/background-desktop.jpg): URL ของรูปภาพ

เมื่อนำมารวมกัน รูปแบบเหล่านี้จะบอกให้เบราว์เซอร์ปรับภาพพื้นหลังตามความสูงและความกว้างของหน้าจอที่แตกต่างกัน ซึ่งเป็นขั้นตอนแรกในการสร้างพื้นหลังที่ตอบสนองตามอุปกรณ์

การใช้ภาพพื้นหลังภาพเดียวสำหรับหน้าจอทุกขนาดมีข้อจำกัดบางประการดังนี้

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

ในส่วนถัดไป คุณจะได้เรียนรู้วิธีใช้การเพิ่มประสิทธิภาพเพื่อโหลดภาพพื้นหลังต่างๆ ตามอุปกรณ์ของผู้ใช้

ใช้คิวรี่สื่อ

การใช้คิวรี่สื่อเป็นเทคนิคทั่วไปในการประกาศสไตล์ชีตที่จะนำไปใช้กับสื่อหรืออุปกรณ์บางประเภทเท่านั้น โดยใช้งานโดยใช้กฎ@media ซึ่งจะช่วยให้คุณกำหนดชุดเบรกพอยท์ที่มีการระบุรูปแบบเฉพาะ เมื่อเป็นไปตามเงื่อนไขที่กฎ @media กำหนด (เช่น ความกว้างหน้าจอที่กำหนด) ระบบจะใช้กลุ่มรูปแบบที่กำหนดไว้ภายในเบรกพอยท์

ขั้นตอนต่อไปนี้สามารถใช้กับการนำข้อความค้นหาสื่อไปใช้กับเว็บไซต์เพื่อให้มีการใช้รูปภาพที่ต่างกัน โดยขึ้นอยู่กับความกว้างสูงสุดของอุปกรณ์ที่ขอหน้าเว็บ

• ใน style.css นำบรรทัดที่มี URL ของภาพพื้นหลังออก:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• ถัดไป ให้สร้างเบรกพอยท์สำหรับความกว้างของหน้าจอแต่ละหน้าจอ โดยอิงตามขนาดพิกเซลทั่วไปที่หน้าจออุปกรณ์เคลื่อนที่ แท็บเล็ต และเดสก์ท็อปมักมีขนาดดังนี้

สำหรับอุปกรณ์เคลื่อนที่

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

สำหรับแท็บเล็ต:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

สำหรับอุปกรณ์เดสก์ท็อป

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

เปิด style.css เวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพในเบราว์เซอร์เพื่อดูการเปลี่ยนแปลงที่เกิดขึ้น

หมายเหตุ: รูปภาพที่ใช้ในการสาธิตที่เพิ่มประสิทธิภาพได้ปรับขนาดให้พอดีกับหน้าจอขนาดต่างๆ อยู่แล้ว การแสดงวิธีปรับขนาดรูปภาพอยู่นอกขอบเขตของคู่มือนี้ แต่หากคุณต้องการทราบข้อมูลเพิ่มเติม ก็คำแนะนำในการแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะครอบคลุมเครื่องมือที่มีประโยชน์บางอย่าง เช่น แพ็กเกจ npm ที่คมชัดและ ImageMagick CLI

วัดผลสำหรับอุปกรณ์ต่างๆ

จากนั้น ให้เห็นภาพเว็บไซต์ที่เป็นผลลัพธ์ในขนาดหน้าจอที่แตกต่างกันและในอุปกรณ์เคลื่อนที่จำลอง ดังนี้

1. เปิดเว็บไซต์ที่เพิ่มประสิทธิภาพในแท็บ Chrome ใหม่
2. ทำให้วิวพอร์ตแคบ (น้อยกว่า 480px)
3. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
4. คลิกแท็บเครือข่าย
5. โหลดหน้าเว็บซ้ำ สังเกตวิธีการขอรูปภาพ background-mobile.jpg
6. ทำให้วิวพอร์ตกว้างขึ้น เมื่อกว้างกว่า 480px ให้สังเกตวิธีการขอ background-tablet.jpg เมื่อกว้างกว่า 1025px ให้สังเกตวิธีการขอ background-desktop.jpg

เมื่อเปลี่ยนความกว้างของหน้าจอเบราว์เซอร์ ระบบจะขอรูปภาพใหม่

โดยเฉพาะอย่างยิ่งเมื่อความกว้างต่ำกว่าค่าที่กำหนดไว้ในเบรกพอยท์สำหรับอุปกรณ์เคลื่อนที่ (480 พิกเซล) คุณจะเห็นบันทึกเครือข่ายต่อไปนี้

พื้นหลังของอุปกรณ์เคลื่อนที่ใหม่จะเล็กกว่าบนเดสก์ท็อป 67%

ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)

องค์ประกอบที่มีภาพพื้นหลัง CSS ถือว่าเป็นตัวเลือกที่เหมาะสำหรับ Largest Contentful Paint (LCP) อย่างไรก็ตาม โปรแกรมสแกนการโหลดล่วงหน้าของเบราว์เซอร์จะค้นพบภาพพื้นหลัง CSS ไม่ได้ ซึ่งหมายความว่าคุณอาจล่าช้า LCP ของเว็บไซต์หากไม่ระมัดระวัง

ตัวเลือกแรกที่คุณควรพิจารณาคือ ว่าจะให้รูปภาพตัวเลือก LCP ทำงานในองค์ประกอบ <img> ที่มีแอตทริบิวต์ srcset และ sizes สำหรับการตอบสนองหรือไม่ ตัวสแกนการโหลดล่วงหน้าของเบราว์เซอร์จะค้นพบองค์ประกอบ <img> และส่งคำขอสำหรับองค์ประกอบเหล่านั้นในขณะที่โปรแกรมแยกวิเคราะห์ถูกบล็อกเมื่อแสดงผล

หากคุณไม่สามารถ (หรือไม่ต้องการ) หลีกเลี่ยงการใช้ภาพพื้นหลัง CSS ตัวเลือกที่ 2 คือโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้าเพื่อให้แน่ใจว่าคุณได้โหลดรูปภาพที่ถูกต้องสำหรับขนาดวิวพอร์ตที่เหมาะสมไว้ล่วงหน้า แอตทริบิวต์ <link> องค์ประกอบ media, imagesrcset และ imagesizes บอกเบราว์เซอร์ว่าคำแนะนำทรัพยากรที่ระบุมีผลเฉพาะในเงื่อนไขวิวพอร์ตบางเงื่อนไข เพื่อหลีกเลี่ยงการโหลดล่วงหน้าที่สูญเปล่าหลายครั้งเมื่อคุณต้องการโหลดทรัพยากรเพียงทรัพยากรเดียวที่เหมาะสมกับวิวพอร์ตปัจจุบันเท่านั้น

สรุป

ในคู่มือนี้คุณจะได้เรียนรู้การใช้การค้นหาสื่อเพื่อขอภาพพื้นหลังที่ปรับแต่งให้เข้ากับขนาดหน้าจอที่เฉพาะเจาะจงและประหยัดไบต์เมื่อเข้าถึงเว็บไซต์บนอุปกรณ์ขนาดเล็ก เช่น โทรศัพท์มือถือ คุณใช้กฎ @media เพื่อใช้พื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์ ทุกเบราว์เซอร์รองรับเทคนิคนี้อย่างกว้างขวาง ฟีเจอร์ CSS ใหม่: image-set() ซึ่งสามารถใช้เพื่อวัตถุประสงค์เดียวกันแต่มีบรรทัดโค้ดน้อยลง ในขณะที่เขียนบทความนี้ คุณลักษณะนี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด แต่คุณอาจต้องการติดตามการเปลี่ยนแปลงของการรับไปใช้งาน เนื่องจากฟีเจอร์นี้เป็นทางเลือกที่น่าสนใจแทนเทคนิคนี้