Show HN: Jampack – ขั้นตอนหลังการประมวลผลเพื่อเพิ่มประสิทธิภาพเว็บไซต์แบบสแตติก

 (github.com/divriots)
4 คะแนน โดย GN⁺ 2024-03-26 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

jampack คืออะไร?

  • jampack ไม่ใช่ทั้ง bundler หรือ framework แต่เป็นเครื่องมือ post-processing ที่ช่วยเพิ่มประสิทธิภาพผลลัพธ์จาก static site generator (SSG) เพื่อยกระดับประสบการณ์ผู้ใช้และคะแนน Core Web Vitals

jampack ทำอะไรได้บ้าง?

  • รูปภาพในแท็ก <img> จะถูกแปลงให้เป็น responsive image เพื่อรองรับหลายความละเอียด พร้อมเพิ่มคุณสมบัติ loading="lazy" และ decoding="async" เพื่อปรับปรุงประสิทธิภาพ
  • แปลงเป็น responsive image ที่ใช้แท็ก <picture> เพื่อรองรับรูปภาพหลายฟอร์แมต และรองรับฟอร์แมต AVIF ด้วย
  • รูปภาพจาก CDN จะถูกแปลงให้เป็นแบบ responsive โดยให้บริการรูปภาพหลายความละเอียดผ่าน srcset
  • สามารถดาวน์โหลดรูปภาพภายนอกมาปรับแต่งให้เหมาะสม และบันทึกไฟล์รูปภาพที่ปรับแต่งแล้วไว้ในโฟลเดอร์ _jampack
  • รูปภาพที่มองเห็นได้ทันทีบนหน้าจอ (above-the-fold) จะถูกโหลดด้วยลำดับความสำคัญสูง ส่วนรูปภาพที่ต้องเลื่อนลงไปจึงจะเห็น (below-the-fold) จะถูกโหลดแบบ lazy loading

CSS สำคัญแบบอินไลน์

  • เพื่อป้องกัน FOUC (Flash of Unstyled Content) ที่อาจเกิดขึ้นระหว่างการดาวน์โหลดและ parsing สไตล์ชีต jampack จะนำ CSS สำคัญมาใส่แบบ inline และโหลด CSS ที่เหลือแบบล่าช้า

การดึงลิงก์ล่วงหน้า

  • ดึงลิงก์ภายในหน้าล่วงหน้าเพื่อเพิ่มความเร็วในการนำทางไปยังหน้าในอนาคต และด้วย quicklink จึงสามารถทำ prefetch แบบไดนามิกสำหรับลิงก์ที่เข้ามาใน viewport ได้

บีบอัดทรัพยากรทั้งหมด

  • jampack จะบีบอัดทรัพยากรทั้งหมดที่ยังไม่ได้แตะต้องในรอบที่สอง โดยคงชื่อและฟอร์แมตเดิมไว้ และใช้เครื่องมือบีบอัดที่เหมาะสมกับนามสกุลไฟล์แต่ละประเภท

และฟีเจอร์อื่น ๆ อีกมาก!

  • jampack สามารถเพิ่มประสิทธิภาพเว็บไซต์แบบสแตติกในโฟลเดอร์ dist ได้ผ่านคำสั่ง npx @divriots/jampack ./dist

กรณีการใช้งาน jampack

  • jampack ถูกใช้งานบนเว็บไซต์ต่าง ๆ เช่น เว็บไซต์ของ ‹div›RIOTS, keycloak.ch, bayjs.org และอีกหลายแห่ง

ที่มาของชื่อ jampack

  • jam: มาจาก Jamstack
  • pack: ชวนให้นึกถึง executable packers ในยุค 90

ไลเซนส์

  • ซอฟต์แวร์นี้เผยแพร่ภายใต้เงื่อนไขของไลเซนส์ MIT

ความเห็นของ GN⁺

  • jampack อาจเป็นเครื่องมือที่มีประโยชน์สำหรับวิศวกรซอฟต์แวร์ระดับเริ่มต้นที่สนใจการปรับแต่งประสิทธิภาพเว็บ โดยเฉพาะนักพัฒนาที่ให้ความสำคัญกับตัวชี้วัดอย่าง Core Web Vitals
  • เครื่องมือนี้ไม่ได้มีแค่การปรับแต่งรูปภาพเท่านั้น แต่ยังมีความสามารถด้านการบีบอัด CSS และ JavaScript รวมถึงฟีเจอร์ปรับแต่งเว็บอีกหลากหลายที่ช่วยลดเวลาโหลดหน้าและปรับปรุงประสบการณ์ผู้ใช้
  • หากมองอย่างวิพากษ์ การใช้เครื่องมืออย่าง jampack อาจเพิ่มความซับซ้อนให้เว็บไซต์ และหากใช้อย่างไม่เหมาะสมก็อาจก่อให้เกิดปัญหาด้านประสิทธิภาพได้เช่นกัน ดังนั้นจึงควรทดสอบและตรวจสอบอย่างเพียงพอก่อนใช้งาน
  • ปัจจุบันมีเครื่องมือสำหรับการปรับแต่งประสิทธิภาพเว็บอยู่แล้วมากมาย เช่น Lighthouse ของ Google หรือ WebPageTest ซึ่งสามารถใช้ร่วมกับ jampack เพื่อวิเคราะห์และปรับปรุงประสิทธิภาพเว็บไซต์อย่างรอบด้าน
  • เมื่อนำ jampack มาใช้ ควรพิจารณาโครงสร้างของเว็บไซต์และเทคโนโลยีสแตกที่ใช้งานเพื่อวางกลยุทธ์การปรับแต่งให้เหมาะสม นอกจากนี้ แม้การใช้เครื่องมือโอเพนซอร์สจะมีข้อดีจากการได้รับการสนับสนุนจากชุมชน แต่ก็ควรคำนึงถึงความต่อเนื่องของโครงการและภาระในการบำรุงรักษาด้วย

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

1 ความคิดเห็น

 
GN⁺ 2024-03-26
ความคิดเห็นบน Hacker News

  • ผู้ใช้นี้บอกว่าเจอสิ่งที่ตามหาอยู่แล้ว ก่อนหน้านี้เคยทำ image optimization ด้วยสคริปต์ของตัวเองที่ใช้ Sharp แต่หลังจากใช้ Jampack ก็ไม่จำเป็นอีกต่อไป โดยหลังจาก build เว็บไซต์แบบ static ด้วย Quarto แล้วรัน Jampack ขนาดโฟลเดอร์ลดลง 32% และตอนนี้ยังไม่เห็นข้อเสียที่ชัดเจน พร้อมทั้งแชร์ตัวชี้วัดประสิทธิภาพก่อนและหลังใช้ Jampack จาก PageSpeed Insights

    • ตัวชี้วัดประสิทธิภาพบนมือถือ
      • ก่อนใช้ Jampack: ประสิทธิภาพ 52, การเข้าถึง 73, แนวปฏิบัติที่ดี 100, SEO 85
      • หลังใช้ Jampack: ประสิทธิภาพ 49, การเข้าถึง 80, แนวปฏิบัติที่ดี 100, SEO 92
    • ตัวชี้วัดประสิทธิภาพบนเดสก์ท็อป
      • ก่อนใช้ Jampack: ประสิทธิภาพ 90, การเข้าถึง 75, แนวปฏิบัติที่ดี 100, SEO 82
      • หลังใช้ Jampack: ประสิทธิภาพ 85, การเข้าถึง 82, แนวปฏิบัติที่ดี 100, SEO 91

  • ผู้ใช้อีกคนบอกว่าฟีเจอร์นี้ทำให้นึกถึงโมดูล PageSpeed สำหรับ Apache และ Nginx

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

  • ผู้ใช้อีกคนสนใจแนวคิดเรื่องการระบุ CSS ที่ "สำคัญ" แล้วทำเป็น inline เขาหวังว่าจะมีวิธีเชิงหลักการในการระบุ CSS ที่ไม่สำคัญ แต่ดูเหมือนว่าไลบรารีที่ใช้จะอาศัยการเรนเดอร์หน้าเพจแล้วพยายามตรวจจับให้ดีที่สุดว่ากฎไหนสำคัญ

  • ผู้ใช้คนหนึ่งอยากเห็นวิธีเลือกฟอนต์บางส่วนตามช่วงยูนิโค้ดของผลลัพธ์จาก SSG และการตรึง OpenType axis ตาม font-feature-settings ที่กำหนดไว้ใน CSS

  • ผู้ใช้ที่คิดว่า Jampack เจ๋งมากถามว่าสามารถทำ Docker คอนเทนเนอร์ เพื่อให้ใช้งานง่ายขึ้นสำหรับคนที่กลัวการใช้ Node.js ได้หรือไม่

  • ผู้ใช้ที่ไม่ชอบเลย์เอาต์เว็บเพจและไม่ยอมเรียนรู้ แต่บางครั้งก็จำเป็นต้องทำ บอกว่า Jampack ดูยอดเยี่ยมมาก

  • มีผู้ใช้ถามถึง static site generator ที่ถูกใช้ในสภาพแวดล้อม production จริง โดยคิดว่าสามารถใช้เครื่องมือเหล่านี้เพื่อปรับแต่งผลลัพธ์ให้เหมาะสมยิ่งขึ้นได้ ตัวอย่างเช่น เขาพยายามทั้งวันเพื่อแปลงเว็บไซต์ Divjoy React ให้เป็น HTML ธรรมดาที่สามารถให้บริการจาก S3 bucket ได้ แต่ยังทำได้ยาก และต้องการเครื่องมือที่ deploy ไปยัง S3 bucket อัตโนมัติพร้อมชี้โดเมนได้

  • มีผู้ใช้บอกว่า Jampack ดูเหมือนจะครอบคลุมหลายกรณีการใช้งานที่ SSG และปลั๊กอินของมันพยายามจัดการอยู่แล้ว จึงสงสัยว่าเหตุผลในการเลือก Astro หรือ Eleventy แทนคืออะไร และการมี post-build step แยกต่างหากเป็นสิ่งที่คนชอบมากกว่าหรือไม่ เพราะอาจมี trade-off ระหว่างการ rebuild ที่รวดเร็วระหว่างพัฒนา กับความเป็นไปได้ที่จะพลาดบั๊กเล็ก ๆ ที่เกิดจากการเพิ่มสิ่งอย่างการประกาศความกว้างของรูปภาพ

  • มีผู้ใช้แสดงความขอบคุณต่อคนที่ส่งตัวอย่างจริงมาทางอีเมล และบอกว่าซาบซึ้งกับการสนับสนุนแบบนี้มาก