มาทำ Lazy loading images กับ nuxt.js กันเถอะ Google ให้อภัยแล้ว
สำหรับเว็บไซต์สมัยนี้ Page speed ต้องได้ Performance ต้องดี ซึ่งส่วนนี้คุณ Google ก็บอกไว้อย่างชัดเจนอยู่แล้วครับ และสำหรับ developer อย่างเราๆ ก็ต้องฟังกันครับ ถ้ายังอยากให้เว็บไซต์ของเราได้วิ่งเล่นอยู่อันดับแรกๆ ของการค้นหาของ Google หรือ SEO นั่นเองครับ และในบทความนี้เราจะมาแนะนำวิธีการทำ Lazy loading image สำหรับ Nuxt.js กันครับ เพื่อเพิ่ม Page speed ให้กับเว็บไซต์ของเรากันครับ
ทำ Lazy loading กัน Google ให้อภัยแล้ว
ทำไมต้องบอกว่า Google ให้อภัยแล้ว ความจริงแล้วคุณ Google ก็ไม่ได้โกรธอะไรหรอกครับ แต่ที่ต้องพูดอย่างนั้นก็เพราะว่า เมื่อก่อนเราจะทำเว็บให้ได้ SEO เราจะต้องทำเว็บให้ GoogleBot นั้นสามารถมาไต่มาเก็บข้อมูลเพื่อทำ Indexing ได้ซึ่งสิ่งหนึ่งที่ GoogleBot นั้นไม่สามารถไต่ได้ก็คือ Javascript ครับ แต่แล้วเมื่อไม่นานมานี้ทางคุณ Google เองก็ได้ประกาศมาแล้วว่า “Google ได้เข้าใจโค้ดส่วนของ Javascript แล้ว” โอ้!! นั่นคือสิ่งที่แจ่มแมวไปเลยครับ ลองดูรายละเอียดเพิ่มเติมได้ที่ https://developers.google.com/search/docs/guides/javascript-seo-basics เลยครับ และทาง Google ได้มีการแก้ให้ GoogleBot รองรับการเก็บข้อมูลที่เป็น Lazy loading อีกด้วย ซึ่งถ้าเป็นเมื่อก่อนทาง Google จะมีฟ้องว่า GoogleBot ไม่สามารถเก็บข้อมูล Lazy loading ได้ แต่ ณ ตอนนี้ปัญหานั้นได้หมดไปแล้วครับ เอาล่ะ!! แล้วจะรออะไรอีกล่ะ มาทำ Lazy loading ให้กับเว็บไซต์ของเรากันดีกว่าครับ
Lazy loading คืออะไร?
เอาล่ะครับ พูดมาซะเยอะสำหรับ Lazy loading กับ SEO แต่หลายคนอาจจะยังไม่ทราบว่า Lazy loading คืออะไร งั้นเรามาเล่าคร่าวๆ แบบเห็นภาพกันดีกว่าครับ
Lazy loading คือการทำให้เว็บเราโหลดข้อมูลที่ User กำลัง Focus อยู่ ยกตัวอย่างเช่น เมื่อเปิดหน้าเว็บมาครั้งแรก เว็บไซต์จะไม่โหลดทั้งหน้าทีเดียว จะโหลดเฉพาะส่วนที่ User กำลังใช้งานอยู่เท่านั้น และเมื่อ User เลื่อนจอลงมาส่วนที่ยังไม่ได้โหลด เว็บไซต์ก็จะเริ่มโหลดส่วนนั้นๆ ต่อไป ซึ่งวิธีนี้ทำให้หน้าเว็บโหลดเร็วขึ้นมากๆ เพราะไม่จำเป็นต้องโหลดหน้าเว็บทั้งหน้าในทีเดียว จะเป็นการโหลดเฉพาะส่วนที่จำเป็นเท่านั้น ถ้ายังไม่เห็นภาพลองนึกถึง https://medium.com นี่แหละครับ เมื่อเราโหลดหน้าเว็บมาครั้งแรกส่วนของรูปภาพจะเป็นภาพแบบ blur ก่อนและค่อยโหลดภาพจริงทีหลัง ซึ่งภาพที่ blur นั้นก็คือภาพที่มีขนาดเล็กมากๆ ครับ เพื่อให้หน้าเว็บโหลดมาก่อนเพื่อความเร็ว และส่วนนั้นก็คือการทำ Lazy loading สำหรับรูปภาพครับ หากยังไม่เห็นภาพมงลองดูการทำงานของ Lazy loading พร้อมภาพประกอบด้านล่างครับ
การทำงานของ Lazy loading
อธิบายการทำงาน
เริ่มต้นหน้า Website จะโหลด Image ที่มีขนาดเล็กมากๆ มารอก่อนเพื่อแสดงเนื้อหาก่อน
และเมื่อ User เลื่อนหน้าจอลงมาตำแหน่งส่วนของ Contents อื่น Script ก็จะเริ่มโหลดรูปจริงที่ใช้ในการแสดงผล
หลักการทำงานของ Lazy loading ก็มีแค่นี้แหละครับ
แต่เดี๋ยวเรามาดูวิธีทำสำหรับ Nuxt.js กันครับ
เริ่มทำ Lazy loading images สำหรับ Nuxt.js
ก่อนอื่นเลยต้องสร้าง project กันก่อนเลย พิมพ์คำสั่งตามนี้เลยครับ
npm create nuxt-app lazy-load-image && cd lazy-load-imageเมื่อได้แล้วก็ลอง Start project ดู
npm run devแค่นี้ก็สร้าง project เรียบร้อยแล้ว ต่อมาเราจะทำ Lazy loading images กัน
สำหรับ Package ที่เราจะใช้กันก็คือ vue-lazyload (https://github.com/hilongjw/vue-lazyload) เหตุผลที่ใช้ตัวนี้ก็คือ Star เยอะดีครับ อิอิ
เอาล่ะ เราต้อง Install package กันก่อนครับ
npm i vue-lazyload -Sเมื่อได้แล้วก็ต้องเพิ่ม Plugins ให้ Nuxt.js ได้รู้จักกับ package ตัวนี้ก่อน
เข้าไปใน Folder ชื่อว่า root/plugins และเพิ่มไฟล์ชื่อ vue-lazyload.js และเพิ่มโค้ดดังนี้
จากนั้นก็ต้องเพิ่มที่ nuxt.config.js ด้วยครับ ตามรูปด้านล่างนี้เลยครับ
เอาล่ะครับตอนนี้เราก็ทำการติดตั้ง vue-lazyload สำหรับ project เรียบร้อยแล้วครับ
ต่อมาเราจะดูวิธีการใช้งานกันครับ
ก่อนอื่นให้เราสร้างหน้าใหม่เพื่อทดสอบมาเพิ่มอีก 1 หน้า ให้ตั้งชื่อว่า lazyload.vue ครับ และเพิ่มโค้ดด้านล่างนี้ครับ
อธิบายการทำงานของโค้ดส่วนนี้ก่อน
- บรรทัดที่ 3 คือ บอกว่าจะทำ Lazy loading ส่วนไหน เราก็ config selector คือ img
- บรรทัดที่ 6 ( data-src ) คือ ภาพที่ใช้แสดงผลจริงเมื่อ Users เลื่อนหน้าจอมาที่ตำแหน่งรูป Script ก็จะเริ่มโหลดรูปจาก data-src
- บรรทัดที่ 7 ( data-loading ) คือ ให้แสดงผลก่อนเมื่อรูปยังโหลดไม่เสร็จ ณ ที่นี้เราให้แสดงรูปที่มีขนาดเล็กมากๆ ก่อน ( ในตัวอย่างใช้รูปขนาด 1 kb ) และเมื่อ data-src โหลดเสร็จค่อยสลับให้แสดงรูปจาก data-src ครับ
สำหรับ vue-lazyload ยังมี Options อีกมากมายลองเข้าไปลองเล่นกันดูได้ครับ
เอาล่ะเมื่อมาถึงตรงนี้แล้วเราก็มาลองดูผลลัพธ์กันเลยดีกว่าครับ
จะเห็นว่าเราจะได้รูปที่มีขนาดเล็กมากๆ ที่เราใส่ไว้ตรง data-loading มาก่อนเพื่อให้หน้าเว็บแสดงผลได้เร็วที่สุด
ต่อมาเมื่อรูปจริงโหลดเสร็จหน้าเว็บก็จะเปลี่ยนมาแสดงรูปขนาดจริงที่เราต้องการ
แค่นี้เราก็ทำ Lazy loading images ได้แล้ว แต่เพียงเท่านี้ยังดีไม่พอสำหรับเว็บไซต์ของเราครับ เพราะหาก User ปิดการทำงาน Javascript ของ Browser หน้าเว็บของเราก็จะเป็นง้อยทันทีครับ ดังนั้นเราควรจะเพิ่ม Lazy load fallback เพื่อป้องกันเหตุดังกล่าวไว้ครับ
Lazy load fallback
เพื่อป้องกันการปิด Javascript ของ browser เราก็ต้องเพิ่ม <noscript /> เพื่อรองรับด้วย เพิ่มโค้ดดังนี้เลยครับ
ลองปิด Javascript ดูครับ จะเห็นว่ารูปก็ยังโหลดได้อยู่ เพียงแต่ไม่มีการทำงานของ Lazy loading เท่านั้นครับ
เพียงเท่านี้เราก็ทำ Lazy loading images ที่สมบูรณ์แบบแล้วครับ ขอให้สนุกสนานกับการทำ Lazy loading images ครับ
