วิธีปรับรูปภาพให้เหมาะสมสำหรับเว็บ: คำแนะนำทีละขั้นตอนเพื่อประสิทธิภาพของเว็บไซต์ที่ดีขึ้น

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

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

ดังนั้น คุณจะสร้างสมดุลระหว่างประสิทธิภาพของไซต์กับการออกแบบภาพได้อย่างไร

โดยการปรับภาพของคุณให้เหมาะสม

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

ในคำแนะนำทีละขั้นตอนสำหรับการเพิ่มประสิทธิภาพรูปภาพ ฉันจะกล่าวถึง:

• การเพิ่มประสิทธิภาพภาพคืออะไร?
• เหตุใดการเพิ่มประสิทธิภาพภาพจึงมีความสำคัญ
• 7 วิธีในการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ

การเพิ่มประสิทธิภาพภาพคืออะไร?

โดยทั่วไป การเพิ่มประสิทธิภาพรูปภาพคือการลดขนาดไฟล์โดยไม่สูญเสียคุณภาพ คุณสามารถปรับรูปภาพของคุณให้เหมาะสมได้ในขั้นตอนการสร้าง (เช่น การใช้ตัวเลือก “ส่งออก” ที่ถูกต้องใน Photoshop) หรือบนเว็บไซต์ของคุณโดยตรง (เช่น การใช้ Lazy Load เพื่อแสดงสื่อบนไซต์ของคุณ) เป้าหมายคือการลดปริมาณข้อมูลที่ผู้ใช้ต้องดาวน์โหลด เพื่อให้ได้รับเนื้อหาที่ต้องการเร็วขึ้น

เหตุใดการเพิ่มประสิทธิภาพภาพจึงมีความสำคัญ

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

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

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

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

เมื่อคุณทราบแล้วว่าการเพิ่มประสิทธิภาพภาพมีความสำคัญเพียงใด มาพูดถึงวิธีการทำกัน! คำแนะนำทีละขั้นตอนนี้จะครอบคลุมทุกอย่างตั้งแต่เคล็ดลับ Photoshop ไปจนถึงแนวทางการพัฒนา

วิธีเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ

คำแนะนำทีละขั้นตอนนี้จะครอบคลุมทุกสิ่งที่คุณทำได้เพื่อเพิ่มประสิทธิภาพรูปภาพ เริ่มใน Photoshop และสิ้นสุดที่ไซต์ของคุณ

ทำตามขั้นตอนเหล่านี้เพื่อปรับภาพของคุณให้เหมาะสมเพื่อประสิทธิภาพไซต์ที่ดีขึ้น:

1. เปรียบเทียบความเร็วไซต์ปัจจุบันของคุณ
2. รู้วิธีเลือกประเภทไฟล์ภาพที่ดีที่สุด
3. ปรับขนาดภาพของคุณก่อนส่งออก
4. บีบอัดภาพเพื่อลดขนาดไฟล์
5. ปรับภาพให้เหมาะสมโดยอัตโนมัติด้วยปลั๊กอิน WordPress
6. ใช้เทคนิค "เบลอ" เพื่อโหลดรูปภาพคุณภาพต่ำก่อน
7. ใช้การโหลดแบบขี้เกียจ

1. เปรียบเทียบความเร็วไซต์ปัจจุบันของคุณ

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

ในฐานะที่เป็นส่วนหนึ่งของทีมสนับสนุนของ Flywheel ฉันคุ้นเคยกับการทดสอบความเร็วค่อนข้างน้อย แต่ห้าสิ่งนี้คือรายการโปรดของฉัน:

• Google PageSpeed ​​Insights
• เครื่องมือ Pingdom
• GTMetrix
• การทดสอบหน้าเว็บ
• โปรแกรมเสริมข้อมูลเชิงลึกด้านประสิทธิภาพของมู่เล่

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

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

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

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

2. รู้จักวิธีเลือกประเภทไฟล์ภาพที่ดีที่สุด

เมื่อคุณสร้างภาพเสร็จแล้ว (ไม่ว่าจะบันทึกจากกล้องหรือส่งออกจากเครื่องมือเช่น Photoshop) คุณจะมีตัวเลือกในการระบุประเภทไฟล์ ประเภทไฟล์ทั่วไปที่ใช้บนเว็บ ได้แก่ JPEG, PNG และ GIF และอย่างที่ฉันแน่ใจว่าคุณสามารถเดาได้ พวกเขาทั้งหมดมีข้อดี ข้อเสีย และแนวทางปฏิบัติที่ดีที่สุดเมื่อถูกนำไปวางบนเว็บไซต์ของคุณ

JPEG

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

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

ต่อไปนี้เป็นแนวคิดในการโหลดรูปภาพที่ไม่ต่อเนื่อง:

ต่อไปนี้เป็นวิธีโหลดภาพแบบโปรเกรสซีฟ:

หากคุณกำลังทำงานใน Photoshop คุณจะพบการตั้งค่านี้เมื่อคุณส่งออกเป็น “บันทึกสำหรับเว็บ”

PNGs

หากคุณไม่มีสีมากมายในรูปภาพของคุณ (เช่น ภาพประกอบหรือไอคอนแบบเรียบๆ) หรือต้องการให้โปร่งใส ฉันแนะนำให้ส่งออกเป็น PNG ตรวจสอบให้แน่ใจว่าคุณมีขนาดภาพที่เหมาะสม และมองหาตัวเลือกในการบันทึกเป็น PNG-24 (หรือ 8 หากไม่มีการสูญเสียคุณภาพ)

GIFs

รูปแบบรูปภาพที่พบบ่อยที่สุดอันดับสามสำหรับเว็บคือ GIF รองรับ 256 สีเท่านั้น ดังนั้นคุณจะต้องเลือกไฟล์ประเภทนี้!

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

3. ปรับขนาดภาพของคุณก่อนที่จะอัปโหลด

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

ตัวอย่างเช่น สมมติว่าคุณกำลังเพิ่มรูปภาพในบทความบล็อกบนไซต์ของคุณ หากธีม WordPress ของคุณแสดงรูปภาพที่ 500 x 500 แต่คุณกำลังอัปโหลดรูปภาพที่มีความละเอียด 1024 x 1024 พิกเซลพิเศษทั้งหมดเหล่านี้เป็นเพียงการเพิ่มขนาดไฟล์และลดความเร็วของไซต์โดยไม่ให้ประโยชน์ที่แท้จริง

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

ในการปรับขนาดภาพของคุณ เพียงแค่เปิดซอฟต์แวร์แก้ไขภาพที่คุณเลือก Photoshop ทำงานได้ดี หรือคุณสามารถใช้เครื่องมือที่ง่ายกว่า เช่น Preview (สำหรับ Mac) Paint (สำหรับ Windows) หรือ Canva (เครื่องมือเบราว์เซอร์)

4. บีบอัดภาพเพื่อลดขนาดไฟล์

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

กระบวนการนี้จะช่วยให้คุณย่อขนาดไฟล์ได้โดยไม่สูญเสียคุณภาพของภาพที่เห็นได้ชัดเจน การบีบอัดมีสองประเภทหลัก: การสูญเสียและการสูญเสีย

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

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

ในการบีบอัดรูปภาพ สิ่งที่คุณต้องมีคือเครื่องมือบีบอัดรูปภาพ รายการโปรดของฉัน ได้แก่ :

• TinyPNG: เครื่องมือฟรีบนเบราว์เซอร์สำหรับบีบอัดรูปภาพ PNG และ JPEG
• ImageOptim: แอปโอเพนซอร์ซฟรีสำหรับบีบอัดรูปภาพ
• JPEGmini: แอปบีบอัดรูปภาพสำหรับ Mac และ Windows
• RIOT: แอพ Windows ฟรีสำหรับปรับแต่งภาพ
• Image Optimizer: โปรแกรมเสริมฟรีสำหรับ Local

TinyPNG

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

ImageOptim

นี่เป็นแอพ Mac ฟรีที่บีบอัดรูปภาพโดยลบส่วนที่ไม่จำเป็นออกไป ในขณะที่รักษาคุณภาพของรูปภาพให้มากที่สุด

JPEGmini

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

จลาจล

Radical Image Optimization Tool (RIOT) เป็นแอพ Windows ฟรีสำหรับลดขนาดไฟล์รูปภาพ มีมุมมองแบบเคียงข้างกัน คุณจึงสามารถเปรียบเทียบคุณภาพของภาพก่อนและหลังการบีบอัดได้

Image Optimizer โปรแกรมเสริมฟรีสำหรับ Local

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

5. ปรับภาพให้เหมาะสมโดยอัตโนมัติด้วยปลั๊กอิน WordPress

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

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

ในการเพิ่มประสิทธิภาพรูปภาพบนไซต์ WordPress ฉันขอแนะนำปลั๊กอินเหล่านี้:

• EWWW Image Optimizer คลาวด์
• บีบอัดรูปภาพ JPEG และ PNG
• Kracken.io
• จินตนาการ

EWWW Image Optimizer คลาวด์

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

บีบอัดภาพ JPEG และ PNG

ปลั๊กอิน WordPress นี้โดยทีมงาน TinyPNG สามารถเพิ่มประสิทธิภาพภาพ JPEG และ PNG ในการอัปโหลด หากคุณเป็นแฟนตัวยงของเครื่องมือบนเบราว์เซอร์ ปรับปรุงกระบวนการด้วยปลั๊กอินฟรี!

Kracken.io

ปลั๊กอิน Kracken.io สามารถเพิ่มประสิทธิภาพทั้งภาพใหม่และที่มีอยู่บนไซต์ WordPress ของคุณ นอกจากนี้ยังรองรับทั้งโหมดการบีบอัดแบบไม่สูญเสียข้อมูลและการสูญเสียข้อมูล ทำให้คุณควบคุมผลลัพธ์ได้มากมาย

จินตนาการ

ปลั๊กอิน WordPress นี้จะช่วยเพิ่มประสิทธิภาพภาพของคุณโดยไม่สูญเสียคุณภาพ นอกจากนี้ยังเข้ากันได้กับ WooCommerce และ NextGen Gallery หากคุณใช้ปลั๊กอินเหล่านั้น

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

6. ใช้เทคนิค “เบลอ” เพื่อโหลดรูปภาพคุณภาพต่ำก่อน

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

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

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

วิธีที่นิยมในการทำเช่นนี้คือเทคนิค "เบลอ" ซึ่งคุณสามารถเรียนรู้วิธีใช้งานกับบทช่วยสอนนี้เกี่ยวกับ CSS-Tricks

7. ขี้เกียจโหลดภาพเว็บไซต์ของคุณ

คล้ายกับเทคนิค "เบลอ" มีเคล็ดลับอีกอย่างหนึ่งที่จะช่วยให้คุณโหลดรูปภาพได้เร็วขึ้น: โหลดแบบ Lazy Loading

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

การโหลดแบบ Lazy Loading เป็นเทคนิคที่ยอดเยี่ยมในตัวเอง และยิ่งมีประสิทธิภาพมากขึ้นเมื่อจับคู่กับเคล็ดลับการเพิ่มประสิทธิภาพรูปภาพที่เหลือเหล่านี้! และมันง่ายมากที่จะทำบนไซต์ WordPress ด้วยปลั๊กอิน BJ Lazy Load

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

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

ก้าวไปไกลกว่ารูปภาพ: เรียนรู้วิธีปรับปรุงความเร็วไซต์เพื่อประสิทธิภาพที่รวดเร็วอย่างเห็นได้ชัด

แพลตฟอร์มโฮสติ้ง WordPress ที่มีการจัดการของ Flywheel ได้รับการปรับให้เหมาะสมสำหรับการทำให้ไซต์ WordPress รวดเร็ว แต่เซิร์ฟเวอร์ของคุณเป็นเพียงส่วนหนึ่งของปริศนา ด้วย Add-on ของ Performance Insights คุณจะได้รับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของไซต์ของคุณ (เพื่อให้คุณรู้ว่าควรปรับปรุงที่ใด!) ในขณะที่สามารถติดตามเมตริกเมื่อเวลาผ่านไปเพื่อดูว่าเมื่อใด หรือไม่ และอย่างไร สิ่งต่าง ๆ เปลี่ยนไป

เรียนรู้เพิ่มเติม

คู่มือนี้เขียนโดย Tyler Stokes วิศวกรแห่งความสุขที่ Flywheel เราช่วยครีเอทีฟโฆษณาเพิ่มประสิทธิภาพเว็บไซต์ของตนทุกวันเพื่อประสิทธิภาพที่รวดเร็วปานสายฟ้า

คลิกที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแพลตฟอร์ม โฮ สติ้ง WordPress ที่มีการจัดการของ Flywheel