วัด ประสิทธิภาพ Progressive Web App ด้วย Light House กันเถอะ

จริงๆควรจะเขียนเรื่องนี้นานแล้ว แต่ว่า ลืมตลอดเลย ก็จริงๆจะมาเล่าถึง tool ตัวนึงที่เอาไว้ วัดประสิทธิภาพ (หรือเรียกในภาษาอังกฤษเทห์ๆว่า Audit) Progressive Web App ของเรา

ทำไมต้อง Audit Progressive Web App?

เมื่อก่อน เวลาเราอยากรู้ว่าเว็บของเราเร็วหรือไม่เร็ว เราก็จะนึกถึง Page speed กันซะส่วนใหญ่ แต่พอมันมาเป็น PWA แล้วความเร็วก็เริ่มไม่พอ เพราะก็จะมีเรื่องหน้าตา หรือ ความสามารถในการใช้งาน Offline มาเกี่ยวข้องด้วย คราวนี้ Google ก็เลยทำ tool ออกมาตัวนึงคือ Light House ซึ่งเป็น tool ที่ช่วยให้เรารู้ได้ว่า PWA ของเราดีพอหรือยัง ซึ่งสุดท้ายเรา Light House จะให้คะแนนออกมาเป็นคะแนนเต็ม 100

คะแนนมาจากส่วนไหนบ้าง?

หลักๆแล้ว คะแนนของ Light house จะมาจาก หัวข้อตามนี้ครับ

App can load on offline/flaky connections — ถ้า Internet ช้า หรือ Offline จะใช้งานได้มั้ย

Page load performance is fast — โหลดเร็วมั้ย ข้อนี้จะวัดจาก First meaningful paint ด้วย

Site is progressively enhanced — ไม่เป็นหน้าขาวถ้า JavaScript ถูก Disable อยู่

Network connection is secure — เป็น HTTPS มั้ย

User can be prompted to Add to Homescreen — User Add to home screen ได้มั้ย

Installed web app will launch with custom splash screen — มี Splash Screen ตอนโหลด PWA มั้ย

Address bar matches brand colors — สี Address bar Match กับสี Brand มั้ย

Design is mobile-friendly — Mobile Friendly มั้ย

Using modern offline features — ไม่ใช้ App cache และ WebSQL version เก่าใช่มั้ย

Using modern protocols — ใช้ HTTPS และ HTTP/2 ใช่มั้ย

Using modern CSS features — ไม่ใช้ CSS flex box version เก่า

Using modern JavaScript features — ใช้ passive listeners มาช่วงเร่ง speed score มั้ย

Avoiding APIs that harm the user experience — ไม่ใช้ document.write(),noopener หรือ ไม่เรียกขอ permission Notification, Geolocation ตอนเพจโหลด

Avoiding deprecated APIs and browser interventions — ไม่ใช้ API ที่กำลังจะเลิกใช้ เช่น XMLHttpRequest

Accessibility — เหมาะสำหรับคนพิการมั้ย

Other — กำหนด short_name และกำหนด display ใน manifest เป็น stand alone

Performance — หลักๆเป็นเรื่องการใช้ Css sprite มั้ย รูปใหญ่ไปมั้ย หรือจัดการเรื่อง block render script ดีมั้ย

จากหัวข้อ พวกนี้ Light House จะเอามารวมแล้วบอกเราว่า คะแนนเราอยู่ที่เท่าไหร่ เต็ม 100 แล้วก็บอกเราว่าอะไรบ้างที่เราควรปรับปรุงและทำให้เราไม่ได้ 100

ใช้บน Platform ไหนได้บ้าง

ตอนนี้เท่าที่ผมเห็นหลักๆจะมีอยู่ 2 platform

Chrome Extension เราสามารถโหลดมาติดตั้งใน Chrome ได้เลย จาก link นี้ วิธีการใช้ก็แค่กด Icon light house แล้วก็รอ แค่นั้นเองครับ

Command Line Tool ซึ่งโหลดผ่าน npm ไปดูวิธีลงและวิธีใช้ได้ที่ link นี้

สำหรับใครที่กำลังลองทำ PWA อยู่ ก็อยากให้ลองเทสบน Light House ด้วยนะครับ ถ้าทำให้ เต็ม 100 ได้ผมว่าจะดีมากซึ่งในอนาคตผมว่า Google น่าจะเอาตรงนี้มาคิดเป็น Score เหมือน พวก PageSpeed