5 ขั้นตอน ในการเพิ่มความเร็วรูปภาพของเว็บไซต์

รับทำเว็บไซต์ | ออกแบบเว็บไซต์ | รับเขียนโปรแกรม | รับทำระบบเว็บไซต์

5 ขั้นตอน ในการเพิ่มความเร็วรูปภาพของเว็บไซต์

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

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

1. ปรับขนาดภาพให้เล็กลง

นี่คือสิ่งที่ต้องมี ปรับขนาดรูปภาพของคุณให้ตรงกับสิ่งที่จำเป็นในเว็บไซต์ของคุณ และการปรับขนาดที่ผมกำลังพูดถึงไม่ใช่การปรับขนาดโดยใช้ CSS หรือใน HTML ผมกำลังพูดถึงการปรับขนาดภาพบนเซิร์ฟเวอร์แล้วส่งไปยังเบราว์เซอร์ ผมจะยกตัวอย่างง่ายๆ เช่น คุณมีภาพขนาด 4000px x 3000px รูปภาพของผลิตภัณฑ์ที่คุณต้องการแสดงบนเว็บไซต์อีคอมเมิร์ซของคุณ ซึ่งบนเว็บไซต์ต้องแสดงภาพผลิตภัณฑ์นี้ให้เล็กลงมาก อาจเป็น 400px x 300px หรือในหน้ารายละเอียดผลิตภัณฑ์อาจเป็น 800px x 600px คุณต้องตรวจสอบให้แน่ใจว่าคุณลดขนาดรูปภาพต้นฉบับเป็นขนาดเหล่านี้ก่อนที่จะส่งไปยังเบราว์เซอร์ ภาพที่ปรับขนาดจะเล็กจะโหลดเร็วกว่ามาก บ่อยครั้งที่นักพัฒนามักจะมองข้ามมันไป

2. ปรับรูปแบบภาพของคุณให้เหมาะสม

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

3. สร้างภาพสำหรับมือถือ

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

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 300px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Image">

แอตทริบิวต์ “sizes” ให้ข้อมูลเกี่ยวกับเลย์เอาต์รูปภาพแอตทริบิวต์ “srcset” แสดงรายการรูปภาพที่มีความกว้างจริงที่ระบุไว้กับ URL แต่ละรายการ

4. โหลดทรัพยากรน้อยลง

แม้ว่าคุณจะปรับแต่งรูปภาพทั้งหมดของคุณแล้ว แต่การโหลดมากเกินไปจะทำให้เว็บไซต์ของคุณช้าลงและส่งผลเสียต่อประสบการณ์ของผู้ใช้ ผมไม่ได้สนับสนุนว่าเราควรใช้รูปภาพที่น้อยกว่านี้ แต่มีหลายกรณีที่เราสามารถหลีกเลี่ยงการใช้รูปภาพหรือหลีกเลี่ยงการโหลดขึ้นหน้า การใช้ Lazy loading ก็เป็นวิธีที่ช่วยได้อีกวีธีนึง หลักการก็ไม่มีอะไรมากสมมุตว่าในหน้าเว็บของเรามีรูปอยู่ 100 รูป เราจะไม่โหลด 100 รูปทีเดียวตอนเริ่มต้น เราจะโหลดแค่ภาพที่มองเป็นบนหน้าจอในตอนแรกอาจจะโหลดแค่ 20 รูป ซึ่งอีก 80 รูปที่เหลือจะโหลดเมื่อมีการเลื่อนหน้าจอซึ่ง Lazy loading มี libraries จำนวนมากให้เลือกใช้ หรือ Lazy loading อีกวิธีหนึ่งคือการใช้แอตทริบิวต์ HTML ซึ่งเป็นสิ่งใหม่ที่ใช้ง่ายมากแต่อาจจะยังไม่สนับสนุนบนทุกเบราว์เซอร์ ตัวอย่างก็แค่เพิ่มแอตทริบิวต์ loading=”lazy” ในแท็ก img ง่ายมากๆ

5. ใช้ CDN ที่ดีสำหรับการส่งภาพ

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

Content Delivery Networks หรือ CDN คือชุดของเซิร์ฟเวอร์แคช / พร็อกซีที่กระจายทั่วโลก สมมติว่าเซิร์ฟเวอร์เว็บไซต์ของคุณตั้งอยู่ในสหรัฐอเมริกา เครือข่ายการจัดส่งเนื้อหาจะแคชรูปภาพของคุณบนเครือข่ายเซิร์ฟเวอร์ที่กระจายอยู่ทั่วโลก (มันซับซ้อนกว่านั้น แต่เพื่อความเรียบง่ายสมมุติว่าเป็นเช่นนี้) จากนั้นหากผู้ใช้จากไทยร้องขอภาพจากเว็บไซต์ของคุณแทนที่จะรับภาพนั้นจากเซิร์ฟเวอร์ของคุณในสหรัฐอเมริกา CDN จะส่งจากโหนดที่ใกล้เคียงที่สุดกับผู้ใช้รายนั้นในไทย ซึ่งจะช่วยลดเวลาในการเดินทาง ไป – กลับ ที่ต้องใช้ในการโหลดภาพ

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

ถ้าสงสัยว่าคุณจะทดสอบเว็บไซต์ของคุณเพื่อหาปัญหาเกี่ยวกับรูปภาพได้อย่างไร

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

สรุป

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

การส่งอีเมลใน PHP โดยใช้ PHPMailer

PHPMailer อาจเป็นไลบรารี PHP แบบโอเพนซอร์สที่ได้รับความนิยมมากที่สุดในการส่งอีเมลด้วย ครั้งแรกที่ปล่อยออกมาปี 2001 และตั้งแต่นั้นมามันได้กลายเป็นวิธีท...

WordPress CMS กับ PHP Framework อะไรดีกว่ากัน?

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

ออกแบบเว็บไซต์ รูปแบบต่างๆ ในการสร้าง Layout ใน HTML

สำหรับการออกแบบเว็บไซต์คุณต้องทราบถึงตัวเลือกเค้าโครงต่างๆที่มีอยู่ใน HTML / CSS และตัวเลือกต่างๆ ที่เหมาะกับการออกแบบเว็บไซต์ของคุณ มาดูรูปแบบต่...

การใช้ CSS แต่ละยุคสมัย มีอะไรน่าสนใจบ้าง

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

HTML5 คืออะไรใช้ทำอะไรได้บ้าง

HTML5 คืออะไร?HTML5 เป็นภาษาโปรแกรมที่มีตัวย่อมาจาก Hyper Text Markup Language เป็นระบบที่อนุญาตให้ปรับเปลี่ยนรูปลักษณ์ของหน้าเว็บรวมทั้งปรับเปลี่...

วิธีการทำ SEO ให้เว็บไซต์ติดอันดับ Google

การทำ SEO ก่อนอื่นสำหรับคนที่ทำเว็บไซต์แล้วเวลาผ่านไปหลายวันก็แล้ว พอพิมพ์ชื่อเว็บไซต์ของเราใน Google ก็ยังไม่เห็นเลยแม้แต่วี่แววสักนิดเดียว นั่นหมายค...