วิธีเพิ่มประสิทธิภาพเว็บและประสิทธิภาพสูงสุด

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

จากข้อมูลของ Kissmetrics ความเร็วในการโหลดเป็นปัจจัยสำคัญที่ทำให้เพจถูกละทิ้ง เนื่องจากผู้เยี่ยมชมเว็บโดยเฉลี่ยไม่มีความอดทนสำหรับหน้าเว็บที่ใช้เวลาในการโหลดนานเกินไป การละทิ้งจึงเพิ่มขึ้นเป็นเปอร์เซ็นต์กับทุกๆ วินาทีของการโหลด ผู้ใช้เกือบ 40% จะละทิ้งหน้าหลังจาก 10 วินาที บล็อกตั้งข้อสังเกต ผู้ใช้อินเทอร์เน็ตบนมือถืออาจประสบปัญหานี้มากที่สุด – 73% สังเกตว่าพวกเขาพบเว็บไซต์ที่โหลดช้าเกินไป

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

ผลที่ตามมาของความล่าช้าเหล่านี้แปลเป็นเงินจริง Amazon ยักษ์ใหญ่ด้านอีคอมเมิร์ซเปิดเผยว่าการโหลดหน้าเว็บช้าลงเพียง 1 วินาทีจะทำให้รายรับจากการขายมีมูลค่า 1.6 พันล้านดอลลาร์ ในทำนองเดียวกัน Google ตั้งข้อสังเกตว่าการชะลอตัวเพียงสี่ในสิบของวินาทีในผลการค้นหาจะส่งผลให้สูญเสียการค้นหา 8 ล้านครั้งต่อวัน ซึ่งแปลเป็นโฆษณาออนไลน์น้อยลงนับล้าน

เข้าถึงหัวใจของปัญหา

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

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

ใช้รูปแบบรูปภาพที่ทันสมัยและมีประสิทธิภาพมากขึ้น

Google ได้เพิ่มการรองรับรูปแบบภาพ WebP ให้กับเบราว์เซอร์ Chrome และ Microsoft ก็ทำเช่นเดียวกันสำหรับ JPEG-XR ในเบราว์เซอร์ Internet Explorer และ Edge ส่วนใหญ่ แต่นักพัฒนาจำนวนมากยังคงไม่ยอมรับการเปลี่ยนแปลงเหล่านี้ โดยใช้รูปแบบ JPG และ PNG เดียวกัน แทนที่จะใช้ประโยชน์จากรูปแบบที่ทันสมัยในการเพิ่มประสิทธิภาพไซต์ของตน

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

กำจัดการปรับขนาดฝั่งเบราว์เซอร์ที่สิ้นเปลือง

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

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

ใช้ประเภทไฟล์รูปภาพที่ถูกต้อง

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

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

อย่าใช้ขนาดภาพเดียวในสื่อนำส่งทั้งหมด

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

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

เลเวอเรจการออกแบบที่ตอบสนอง

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

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

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

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

ผลกระทบของการเปลี่ยนแปลง

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

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

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

บรรทัดล่าง

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

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