วิธีทำให้รูปภาพโหลดเร็วขึ้นบน WordPress: 6 กลยุทธ์หลัก

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

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

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

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

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

วิธีทำให้รูปภาพโหลดเร็วขึ้น: หกกลยุทธ์ด้านประสิทธิภาพ

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

คุณสามารถมองว่าส่วนนี้เป็น " ทฤษฎี " และส่วนถัดไปเป็น " วิธีดำเนินการได้ "

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

1. บีบอัดรูปภาพ
2. ปรับขนาดรูปภาพ
3. แปลงรูปภาพเป็นรูปแบบที่ปรับให้เหมาะสมเช่น WebP
4. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN) เพื่อเพิ่มความเร็วในการดาวน์โหลดภาพ (โดยเฉพาะสำหรับผู้เยี่ยมชมที่อยู่ห่างไกลจากการโฮสต์เว็บไซต์ของคุณ)
5. ขี้เกียจโหลดภาพ
6. เปิดใช้งานการแคชเบราว์เซอร์เพื่อเพิ่มความเร็วในการเข้าชมครั้งต่อไป

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

มาดูกันว่ากลวิธีเหล่านี้สามารถเพิ่มความเร็วในการโหลดรูปภาพของคุณบน WordPress ได้อย่างไร

1. บีบอัดรูปภาพ

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

การบีบอัดมีสองประเภท:

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

คุณสามารถเรียนรู้เพิ่มเติมในบทความของเราเกี่ยวกับการบีบอัดภาพแบบ lossy และ lossless

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

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

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

2. ปรับขนาดรูปภาพ

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

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

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

เงินออมได้มากขนาด ไหน ? ต่อไปนี้คือตัวอย่างการทดสอบสั้นๆ ที่เราเพิ่งปรับขนาดรูปภาพโดยไม่ต้องเพิ่มการบีบอัด:

หากคุณรวมการบีบอัดกับการปรับขนาด คุณจะสามารถลดขนาดภาพได้อย่างไม่น่าเชื่อ ตัวอย่างเช่น หลังจากบีบอัดภาพที่ปรับขนาดด้วย Imagify เราย่อขนาดให้เหลือ 101 KB

ดังนั้นเพียงแค่ปรับขนาดและบีบอัดรูปภาพ เราก็ลดขนาดจาก 380 KB เป็น 101 KB โดยแทบไม่มีการเปลี่ยนแปลงคุณภาพ ( สมมติว่าคุณกำลังแสดงบนเว็บไซต์ )

3. แปลงรูปภาพเป็น WebP

WebP เป็นรูปแบบรูปภาพที่ทันสมัยจาก Google ที่สามารถให้ขนาดไฟล์ที่เล็กกว่า JPEG หรือ PNG ได้โดยไม่สูญเสียคุณภาพ

โดยเฉลี่ยแล้ว รูปภาพ WebP มีขนาดเล็กกว่ารูปภาพ JPEG ที่เปรียบเทียบได้ 25-34% และเล็กกว่ารูปภาพ PNG ที่เปรียบเทียบได้ 26%

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบนี้ โปรดดูคู่มือฉบับสมบูรณ์สำหรับรูปภาพ WebP

4. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

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

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

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

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

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

5. รูปภาพโหลดขี้เกียจ

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

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

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

6. เปิดใช้งานการแคชเบราว์เซอร์

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

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

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

วิธีเพิ่มความเร็วในการโหลดรูปภาพด้วยปลั๊กอิน WordPress

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

คุณจะต้องมีปลั๊กอินสองตัวเท่านั้นในการตั้งค่าทุกอย่าง:

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

Imagify – บีบอัด ปรับขนาด และแปลงเป็น WebP

Imagify เป็นปลั๊กอิน WordPress ที่ใช้งานง่ายซึ่งสามารถจัดการเคล็ดลับการเพิ่มประสิทธิภาพสามข้อแรกในรายการของเรา

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

• บีบอัดรูปภาพโดยใช้อัลกอริธึมแบบสูญเสียข้อมูล สูญเสียปานกลาง หรือเชิงรุก
• ปรับขนาดภาพเป็นขนาดสูงสุดที่แน่นอน
• แปลงรูปภาพเป็น WebP และให้บริการแก่ผู้เยี่ยมชม

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

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

หากต้องการรับคีย์ API คุณสามารถลงทะเบียนบัญชี Imagify ได้ฟรี คุณจะสามารถเพิ่มประสิทธิภาพ 20 MB ของภาพต่อเดือนได้ฟรีตลอดไป ( ~200 ภาพต่อเดือน )

หากคุณต้องการใช้เกินขีดจำกัด แผนแบบชำระเงินจะมีค่าใช้จ่าย $4.99/เดือน สำหรับ 500 MB (~5,000 ภาพ) หรือ $9.99/เดือน สำหรับการใช้งานไม่จำกัด คุณสามารถใช้แผนการชำระเงินบนเว็บไซต์ WordPress ได้ไม่จำกัด

เมื่อคุณมีคีย์ API แล้ว คุณสามารถวางลงในช่องและคลิก Connect Me :

จากนั้นไปที่การตั้งค่า → Imagify เพื่อกำหนดการตั้งค่าการปรับภาพให้เหมาะสม

ที่ด้านบน คุณสามารถเลือกระดับการบีบอัดที่คุณต้องการ นอกจากนี้ยังมีการเปรียบเทียบภาพเพื่อช่วยให้คุณทดสอบระดับต่างๆ:

หากคุณเลื่อนลงมา คุณสามารถให้ Imagify แปลงรูปภาพเป็น WebP โดยอัตโนมัติ และแสดงต่อผู้เยี่ยมชมได้ สำหรับรูปภาพ WebP เราขอแนะนำให้ใช้วิธีแท็ก <picture>:

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

และนั่นแหล่ะ! ตอนนี้ Imagify จะเพิ่มประสิทธิภาพรูปภาพใหม่ทั้งหมดที่คุณอัปโหลดไปยัง WordPress โดยอัตโนมัติ

หากคุณมีรูปภาพจำนวนมากบนไซต์ของคุณ คุณสามารถให้ Imagify เพิ่มประสิทธิภาพรูปภาพจำนวนมากโดยไปที่ Media → Bulk Optimization:

WP Rocket – การแคชเบราว์เซอร์, การโหลดแบบ Lazy Loading และ CDN

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

• การนำแคชเบราว์เซอร์ไปใช้
• ขี้เกียจโหลดภาพ
• กำลังเชื่อมต่อกับ CDN

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

ในการตั้งค่า คุณจะต้องซื้อและติดตั้ง WP Rocket ก่อน

ทันทีที่คุณเปิดใช้งาน มัน จะเปิดใช้งานการแคชหน้าและการแคชของเบราว์เซอร์โดยอัตโนมัติ หากต้องการเข้าถึงการตั้งค่าอื่นๆ ให้ไปที่การตั้งค่า → WP Rocket ในแดชบอร์ดของคุณ

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

ในการตั้งค่า CDN คุณสามารถไปที่แท็บ CDN วิธีที่ง่ายที่สุดในการเริ่มต้นคือการใช้บริการ RocketCDN ซึ่งมีค่าใช้จ่ายเพียง 7.99 เหรียญต่อเดือนสำหรับแบนด์วิดท์ไม่จำกัด หรือ WP Rocket สามารถช่วยให้คุณรวมเข้ากับบริการอื่นๆ เช่น Bunny CDN, KeyCDN หรือ StackPath

หากคุณใช้ CDN และกำหนดค่า Imagify เพื่อให้บริการรูปภาพ WebP โดยใช้วิธีแท็ก <picture> คุณจะต้องกลับไปที่การตั้งค่าของ Imagify (การตั้งค่า → Imagify) และป้อน CDN URL ของคุณในกล่องการตั้งค่า WebP

ทำให้รูปภาพของคุณโหลดเร็วขึ้นวันนี้

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

ในโพสต์นี้ เราได้กล่าวถึงหลายวิธีในการทำให้รูปภาพโหลดเร็วขึ้น

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

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

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