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

หนึ่งวิธีในการช่วยเพิ่มประสิทธิภาพของเว็บไซด์คือการลดจำนวนการใช้ thrid-party ลง แต่บาง Script มันไม่สามารถเอาออกได้จริงๆ ยิ่งในเว็บไซด์ใหญ่ๆ ที่มีทั้ง Team Marketing อาจจะต้องมีการใช้ Thrid-party หลายตัวเช่น Hotja, Google Analytics, intercom, Pixel, ETC. แล้วเราจะมีวิธีการแก้ปัญหานี้ยังไง

แนะนำ Partytown?

Partytown วิธีหนึ่งที่จะช่วยแก้ปัญหานี้ได้ นั่นคือการโหลด Script ด้วยการใช้ Web Worker ทำให้ Thrid-party Script ไม่ไปแย่งการทำงานจาก Main thread

ไอเดียมันก็นะแต่ถ้าต้องมาเขียนเองคงน่าจะปวดหัวน่าดู แต่เมื่อไม่นานผมได้รู้จักกับ Partytown จากวีดีโอของฝรั่งใน Youtube แล้วก็โอ้วมันว้าวนะ และที่ยิ่งว้าวไปกว่านั้นคือ Next.js ได้ทำให้ Script Support partytown(Experimental) ได้เลย

Web Worker คืออะไร

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

ลองใช้จริง

เรามาดูคะแนนจาก Page Speed ก่อนที่เราจะลองใช้ Partytown ก่อนนะครับ

วิธีใช้สามารถอ่านได้จาก Script Optimization

1. edit next.config.js

2. install partytown

npm install @builder.io/partytown

3. เปิดใช้งาน strategy=”worker”

เท่านี้ก็เรียบร้อยแล้ว ต่อไปเรามาลองดูผลลัพธ์กัน

ผลลัพธ์

จากผลลัพธ์ที่ได้จะเห็นได้ว่า Page Speed score เพิ่มขึ้นมาได้เยอะเลยทีเดียว ในเว็บตัวอย่างผมมี Script แค่อันเดียวลองจิตนาการถึงเว็บไซด์ใหญ่ๆที่ใช้ Thrid-party Script เยอะๆ มันจะมีผลอย่างมากๆ

สรุป…

การใช้ Web Worker ในการโหลด Script เป็นอะไรที่น่าสนใจมาก น่าสนใจว่าใน Next.js Version ถัดไป feature นี้จะถูก release เป็น feature หลักหรือยัง เดียวไว้ผมจะมาเล่าให้ฟังอีกรอบหลังใช้จริงไปหลายเดือนแล้วว่าเป็นยังไงบ้างละกันนะครับ โอเค ไปนอนก่อนละ บายย