เพิ่มความเร็วเว็บไซต์ด้วย Lazy Loading

Lazy Loading

เว็บไซต์บางเว็บค่อนข้างยาว บางส่วนของเว็บไซต์ไม่จำเป็นต้องโหลด ถ้าผู้ใช้งานยัง scroll ลงไปไม่ถึง

หลักการของ lazy loading คือจะโหลด asset เมื่ออยู่ใน viewport เท่านั้น ทำให้เว็บไซต์ของเราโหลดไวขึ้นมาก  เพราะส่ง request ไปเรียกไฟล์ asset จาก web hosting server เท่าที่จำเป็นเท่านั้น คือเมื่อต้องถูกแสดงผลบนหน้าจอ

แนะนำให้ใช้ Javascript library Lazy Load หรือ Lazysizes

lazy loading เป็นเทคนิกเพิ่มความเร็วให้กับเว็บที่ทำได้ไม่ยาก แต่เพิ่มความเร็วในการโหลดเว็บได้มากพอสมควร โดยเฉพาะบางหน้าเว็บไซต์ที่ค่อนข้างยาว

นอกจากการทำ lazy load แล้วเราควรหา web hosting คุณภาพเพื่อให้เว็บไซต์ของเราโหลดเร็วขึ้น

  • 0 ผู้ใช้งานชอบบทความนี้
ชอบบทความนี้?

บทความที่เกี่ยวข้อง

 เพิ่มความเร็วเว็บไซต์ด้วยการ minify css, js, และ html

เราสามารถย่อไฟล์ style sheet (css), javascript (js), และ html ได้...

 เพิ่มความเร็วเว็บไซต์ด้วยการใช้ WebP : next gen image format

เว็บสมัยนี้มีรูปค่อนข้างเยอะ โดย format ที่เราเห็นทั่วๆ ไปจะมี jpg, png, และ gif ซึ่ง jpg...

 ลดขนาด mp4 เพื่อให้เว็บโหลดเร็วขึ้น

สมัยนี้เว็บต่างๆ นอกจากการใช้รูป ยังมีการใช้ video กันมากขึ้น อาจจะเพื่อแสดง video ประกอบ ข้อมูล...

 เพิ่มความเร็วให้กับเว็บด้วยเทคนิก CSS Image Sprites

เว็บเพจที่มีรูปเยอะใช้เวลาโหลดนานเพราะเกิด server request หลายครั้ง Image Sprite เป็นรูปเดี่ยวๆ...

 เทคนิกปรับแต่ง Wordpress ให้ทำงานเร็วขึ้น

ความเร็วในการโหลดเว็บมีผลต่อ user experience ของผู้ใช้งานเว็บไซต์ และมีผลต่อ SEO ด้วย เพราะ...