Lazy load ฟีเจอร์ใหม่ของ SP Page Builder Pro ช่วยให้หน้าเว็บพร้อมตอบสนองผู้ใช้งานได้อย่างรวดเร็ว

Lazy Load V3.7.0
Lazy Load

  SP Page Builder Pro เป็น Extensions เสริมสำหรับ  Joomla เป็นเครื่องมือที่ใช้สำหรับจัดการเนื้อหาหน้าเว็บไซต์ ซึ่ง SP Page Builder Pro นั้นจะใช้ระบบการสร้างเว็บไซต์แบบ Drag & Drop (คลิ้ก ลาก วาง) หรือ WYSIWYG (What You See Is What You Get) ในปัจจุบัน SP Page Builder Pro ได้มีการอัปเดตเวอร์ชั่นใหม่ เป็นเวอร์ชั่น 3.7.0 โดยได้มีการเพิ่มฟีเจอร์ " Lazy Loading " ที่จะช่วยให้การโหลดหน้าเว็บไซต์เร็วขึ้นกว่าเดิม

 

การอัพเดต SP Page Builder Pro เวอร์ชั่น 3.7.0 

  • New: เพิ่มฟีเจอร์ Lazy Load
  • New: Carousel option ในส่วนเสริม Clients
  • New: ตัวกรองรูปภาพและตัวเลือกแบบโฮเวอร์ใน แอดออน ของลูกค้า
  • Update: รูปแบบแผนที่ 2 แบบ (Open Street Black / White, Hike Bike) ถูกลบเนื่องจาก API ไม่ตอบสนองปัญหา
  • Fix: ปัญหาค่าที่ไม่ใช่ตัวเลขในส่วนเสริม Testimonial Carousel
  • Fix: ระยะ ขอบแถว ภายในขอบ: ไม่ทำงานอัตโนมัติกับปัญหาส่วนหน้า

 

Lazy Loading คืออะไร ?

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

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

 

ประเภทของ Lazy Loading ใน SP Page Builder

   ในการอัปเดต SP Page Builder จะมี Lazy Loading 2 ประเภท ประเภทแรกคือ native lazy loading สำหรับผู้ใช้ Chrome จะทำการเลื่อนการโหลดเนื้อหาออกไป จนกว่าผู้ใช้งานจะเลื่อนลงไปที่เนื้อหา และอีกประเภทคือ IntersectionObserver’s สำหรับผู้ที่ไม่ได้ใช้ Chrome

 

วิธีการเปิดใช้งาน Lazy Loading บน Joomla

   เว็บไซต์ที่สร้างโดยใช้ SP Page Builder Pro ตอนนี้สามารถใช้ Lazy Loading ได้ภายในคลิกเดียว โดยผู้ใช้งานสามารถทำการเปิดใช้งาน Lazy Loading จาก Global Configuration ทำการคลิกที่ปุ่ม Options ที่มุมขวาบนในหน้า SP Page Builder panel

 

คลิก Options เพื่อทำการตั้งค่าการใช้งาน Lazy loadingคลิก Options เพื่อทำการตั้งค่า

 

จากนั้นจะเห็นหน้า SP Page Builder Configuration ทำการเปิดการใช้งาน Lazy Loading เมื่อเปิดใช้งานแล้ว จะแสดง ฟิลด์ Placeholder Image ภาพนี้จะถูกใช้ก่อนที่จะทำการโหลดเนื้อหา ควรใช้ไฟล์ภาพที่เบาที่สุดเท่าที่จะเป็นไปได้

ตัวอย่างแสดงขั้นตอนการเปิดใช้งาน Lazy loadingทำการเปิดใช้งาน Lazy loading

 

Carousel Option ในส่วนเสริม Clients

   นอกจากนี้ ยังมีการเพิ่มฟีเจอร์ Carousel Option ในส่วนเสริม Clients ซึ่งในเวอร์ชั่นนี้สามารถทำ Slide ให้กับ logo ของลูกค้าได้ เพียงทำการเปิดใช้งาน Use As Carousel

ตัวอย่างฟีเจอร์ใหม่ของส่วนเสริม ClientCarousel Option ฟีเจอร์ใหม่ของส่วนเสริม Client

 

   SP Page Builder เป็นตัวช่วยที่ดีในการสร้างเว็บไซต์บน Joomla และในการอัพเดตครั้งนี้ยังมีฟีเจอร์อย่าง Lazy Loading ที่จะเข้ามาช่วยให้หน้าเว็บของโหลดเร็วขึ้นมากกว่าเดิม

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามฟิจเจอร์ขำระเงิน QR Code ของ E-Payment ในใบแจ้งหนี้ [MDRental]
โดย eange08 จ 07 ก.ค. 2025 1:11 pm บอร์ด Joomla Dev
2
10
จ 07 ก.ค. 2025 1:18 pm โดย tsukasaz View Topic สอบถามฟิจเจอร์ขำระเงิน QR Code ของ E-Payment ในใบแจ้งหนี้ [MDRental]
Falsy ใน Python คืออ่ะไร
โดย Sakana ศ 04 ก.ค. 2025 4:41 pm บอร์ด Python Knowledge
0
34
ศ 04 ก.ค. 2025 4:41 pm โดย Sakana View Topic Falsy ใน Python คืออ่ะไร
Python ใช้ count() แทน for loop ในการนับจำนวน
โดย Sakana พฤ 03 ก.ค. 2025 6:30 pm บอร์ด Python Knowledge
0
46
พฤ 03 ก.ค. 2025 6:30 pm โดย Sakana View Topic Python ใช้ count() แทน for loop ในการนับจำนวน
การจัดการข้อมูล Python ด้วย filter() + reduce()
โดย Sakana พฤ 03 ก.ค. 2025 5:52 pm บอร์ด Python Knowledge
0
35
พฤ 03 ก.ค. 2025 5:52 pm โดย Sakana View Topic การจัดการข้อมูล Python ด้วย filter() + reduce()
itertools จัดการข้อมูลวนซ้ำอย่างมีประสิทธิภาพใน Python
โดย Sakana พ 02 ก.ค. 2025 4:31 pm บอร์ด Python Knowledge
0
43
พ 02 ก.ค. 2025 4:31 pm โดย Sakana View Topic itertools จัดการข้อมูลวนซ้ำอย่างมีประสิทธิภาพใน Python
reduce() ใน Python: การลดข้อมูลซ้ำๆ ให้เหลือผลลัพธ์เดียว
โดย Sakana พ 02 ก.ค. 2025 11:32 am บอร์ด Python Knowledge
0
57
พ 02 ก.ค. 2025 11:32 am โดย Sakana View Topic reduce() ใน Python: การลดข้อมูลซ้ำๆ ให้เหลือผลลัพธ์เดียว
สร้าง QR Code ตอบสนองแบบ Real-Time ด้วย JavaScript
โดย Sakana อ 01 ก.ค. 2025 11:32 am บอร์ด jQuery & Ajax Knowledge
0
63
อ 01 ก.ค. 2025 11:32 am โดย Sakana View Topic สร้าง QR Code ตอบสนองแบบ Real-Time ด้วย JavaScript
วิธีสร้าง QRCODE ด้วย PHP ตั้งแต่เริ่มต้น
โดย Sakana อ 01 ก.ค. 2025 10:46 am บอร์ด PHP Knowledge
0
59
อ 01 ก.ค. 2025 10:46 am โดย Sakana View Topic วิธีสร้าง QRCODE ด้วย PHP ตั้งแต่เริ่มต้น