การใช้บ็อต Lighthouse เพื่อกำหนดงบประมาณด้านประสิทธิภาพ

คุณทำงานหนักแล้วเพื่อให้ได้ความเร็วเร็วทันใจด้วยการทำให้การทดสอบประสิทธิภาพทำงานโดยอัตโนมัติด้วย Lighthouse Bot

Lighthouse ให้คะแนนแอปของคุณเป็น 5 หมวดหมู่ และหนึ่งในนั้นคือประสิทธิภาพ แม้ว่าคุณอาจพยายามอย่าลืมตรวจสอบการเปลี่ยนแปลงด้านประสิทธิภาพด้วย DevTools หรือ Lighthouse CLI ทุกครั้งที่แก้ไขโค้ด แต่คุณไม่จำเป็นต้องดำเนินการดังกล่าว เครื่องมือสามารถทำเรื่องที่น่าเบื่อหน่ายให้คุณได้ Travis CI คือบริการที่ยอดเยี่ยมซึ่งจะทำการทดสอบโดยอัตโนมัติสำหรับแอปในระบบคลาวด์ทุกครั้งที่คุณพุชโค้ดใหม่

Lighthouse Bot ผสานรวมกับ Travis CI และใช้ฟีเจอร์งบประมาณด้านประสิทธิภาพที่ทำให้มั่นใจได้ว่าจะไม่ดาวน์เกรดประสิทธิภาพโดยไม่ได้ตั้งใจ คุณสามารถกำหนดค่าที่เก็บเพื่อไม่ให้รวมคำขอพุลได้ หากคะแนน Lighthouse ต่ำกว่าเกณฑ์ที่คุณตั้งไว้ (เช่น < 96/100)

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

1. ตั้งค่า

แอปง่ายๆ นี้จะช่วยคุณจัดเรียงตัวเลข 3 ตัว

โคลนตัวอย่างจาก GitHub และอย่าลืมเพิ่มเป็นที่เก็บในบัญชี GitHub

2. ทำให้ใช้งานได้กับ Firebase

คุณต้องมีบัญชี Firebase เพื่อเริ่มต้นใช้งาน เมื่อคุณแก้ไขเรียบร้อยแล้ว ให้สร้างโปรเจ็กต์ใหม่ในคอนโซล Firebase โดยคลิก "เพิ่มโปรเจ็กต์"

การทำให้ใช้งานได้กับ Firebase

คุณต้องใช้ Firebase CLI เพื่อทำให้แอปใช้งานได้ แม้ว่าคุณจะติดตั้งไว้แล้ว แต่การอัปเดต CLI เป็นเวอร์ชันล่าสุดบ่อยๆ ด้วยคำสั่งต่อไปนี้

npm install -g firebase-tools

หากต้องการให้สิทธิ์ Firebase CLI ให้เรียกใช้คำสั่งต่อไปนี้

firebase login

จากนั้นเริ่มต้นโปรเจ็กต์:

firebase init

คอนโซลจะถามคำถามชุดหนึ่งกับคุณระหว่างการตั้งค่า:

• เมื่อระบบแจ้งให้เลือกฟีเจอร์ ให้เลือก "Hosting"
• สำหรับโปรเจ็กต์ Firebase เริ่มต้น ให้เลือกโปรเจ็กต์ที่คุณสร้างไว้ในคอนโซล Firebase
• พิมพ์ "สาธารณะ" เป็นไดเรกทอรีสาธารณะ
• พิมพ์ "N" (no) เพื่อกําหนดค่าเป็นแอปหน้าเว็บเดียว

กระบวนการนี้จะสร้างไฟล์การกำหนดค่า firebase.json ในรูทของไดเรกทอรีโปรเจ็กต์

ยินดีด้วย คุณพร้อมที่จะทำให้ใช้งานได้แล้ว เรียกใช้:

firebase deploy

เพียงเสี้ยววินาที คุณก็จะมีแอปที่เผยแพร่อยู่

3. การตั้งค่า Travis

คุณจะต้องลงทะเบียนบัญชีใน Travis แล้วเปิดใช้งานการผสานรวมแอป GitHub ในส่วนการตั้งค่าของโปรไฟล์

เมื่อคุณมีบัญชีแล้ว

ไปที่การตั้งค่าใต้โปรไฟล์ กดปุ่มซิงค์บัญชี แล้วตรวจสอบว่าที่เก็บโปรเจ็กต์ของคุณแสดงอยู่ใน Travis

ในการเริ่มต้นการผสานรวมอย่างต่อเนื่อง คุณจำเป็นต้องมี 2 สิ่งต่อไปนี้

1. วิธีให้ไฟล์ .travis.yml อยู่ในไดเรกทอรีราก
2. เพื่อทริกเกอร์บิลด์ด้วยการพุช Git เก่าแบบปกติ

ที่เก็บ lighthouse-bot-starter มีไฟล์ YAML .travis.yml อยู่แล้ว:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

ไฟล์ YAML จะบอก Travis ให้ติดตั้งทรัพยากร Dependency ทั้งหมดและสร้างแอป ตอ��นี้ก็ถึงเวลาที่คุณจะส่งแอปตัวอย่างไปยังที่เก็บ GitHub ของคุณเองแล้ว หากยังไม่ได้ดำเนินการ ให้เรียกใช้คำสั่งต่อไปนี้

git push origin main

คลิกที่เก็บในส่วนการตั้งค่าใน Travis เพื่อดูหน้าแดชบอร์ด Travis ของโปรเจ็กต์ หากทุกอย่างดูดีแล้ว คุณจะเห็นงานสร้างของคุณเปลี่ยนจากสีเหลืองเป็นสีเขียวใน 2-3 นาที 🎉

4. ทำให้ Firebase ใช้งานได้โดยอัตโนมัติด้วย Travis

ในขั้นตอนที่ 2 คุณเข้าสู่ระบบบัญชี Firebase และทำให้แอปใช้งานได้จากบรรทัดคำสั่งด้วย firebase deploy เพื่อให้ Travis สามารถทำให้แอปของคุณใช้งานได้ ใน Firebase คุณต้องให้สิทธิ์แอป คุณจะทำได้อย่างไร ด้วยโทเค็น Firebase 🗝️🔥

ให้สิทธิ์ Firebase

หากต้องการสร้างโทเค็นให้เรียกใช้คำสั่งนี้

firebase login:ci

ซึ่งจะเปิดแท็บใหม่ในหน้าต่างเบราว์เซอร์เพื่อให้ Firebase ยืนยันตัวตนของคุณได้ หลังจากนั้นให้มองย้อนกลับไปที่คอนโซล แล้วคุณจะเห็นโทเค็นที่สร้างขึ้นใหม่ คัดลอกแล้วกลับไปที่ Travis

ในหน้าแดชบอร์ด Travis ของโปรเจ็กต์ ให้ไปที่ตัวเลือกเพิ่มเติม > การตั้งค่า > ตัวแปรสภาพแวดล้อม

วางโทเค็นในช่องค่า ตั้งชื่อตัวแปร FIREBASE_TOKEN แล้วเพิ่ม

เพิ่มการทำให้ใช้งานได้ลงในการตั้งค่า Travis

คุณต้องมีบรรทัดต่อไปนี้เพื่อบอกให้ Travis ติดตั้งใช้งานแอปหลังจากบิลด์ที่เสร็จสมบูรณ์ทุกครั้ง เพิ่มส่วนท้ายไปที่ส่วนท้ายของไฟล์ .travis.yml 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

พุชการเปลี่ยนแปลงนี้ไป��ัง GitHub และรอการทำให้ใช้งานได้แบบอัตโนมัติครั้งแรก ถ้าคุณดูบันทึก Travis ของคุณ เร็วๆ นี้ จะมีข้อความระบุว่า ✔️ การทำให้ใช้งานได้เสร็จเรียบร้อย!

ตอนนี้เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงในแอป การเปลี่ยนแปลงดังกล่าวจะถูกนำไปใช้กับ Firebase โดยอัตโนมัติ

5. การตั้งค่าบ็อต Lighthouse

บ็อต Lighthouse ที่เป็นกันเองจะอัปเดตคะแนน Lighthouse ของแอปให้คุณทราบ เพียงแต่ต้องได้รับคำเชิญไปยังที่เก็บของคุณ

ใน GitHub ให้ไปที่การตั้งค่าโปรเจ็กต์แล้วเพิ่ม "ประภาคาร" เป็นผู้ทำงานร่วมกัน (การตั้งค่า > ผู้ทำงานร่วมกัน) โดยทำดังนี้

การอนุมัติคำขอเหล่านี้เป็นการดำเนินการด้วยตนเอง คำขอจึงไม่เกิดขึ้นทันทีเสมอไป ก่อนเริ่มการทดสอบ โปรดตรวจสอบว่า Lightbot ได้อนุมัติสถานะผู้ทำงานร่วมกันแล้ว ในระหว่างนี้ คุณต้องเพิ่มคีย์อื่นลงในตัวแปรสภาพแวดล้อมของโปรเจ็กต์บน Travis ด้วย เก็บอีเมลไว้ ที่นี่ แล้วคุณจะได้รับคีย์ของ Lighthouse Bot ในกล่องจดหมาย 📬

ใน Travis ให้เพิ่มคีย์นี้เป็นตัวแปรสภาพแวดล้อมและตั้งชื่อเป็น LIGHTHOUSE_API_KEY ดังนี้

เพิ่มบ็อต Lighthouse ในโปรเจ็กต์

ถัดไป ให้เพิ่มบ็อต Lighthouse ลงในโปรเจ็กต์โดยเร��ยกใช้

npm i --save-dev https://github.com/ebidel/lighthousebot

และเพิ่มบิตนี้ลงใน package.json:

"scripts": {
  "lh": "lighthousebot"
}

เพิ่มบ็อต Lighthouse ในการกำหนดค่า Travis

สำหรับเคล็ดลับสุดท้าย ให้ทดสอบประสิทธิภาพของแอปหลังจากพุลคำขอทุกครั้ง

ใน .travis.yml ให้เพิ่มขั้นตอนหลังความสําเร็จ:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

โดยการดำเนินการนี้จะทำการตรวจสอบ Lighthouse ใน URL ที่ระบุ ดังนั้นโปรดแทนที่ https://staging.example.com ด้วย URL ของแอป (ซึ่งก็คือ your-app-123.firebaseapp.com)

กำหนดมาตรฐานให้สูงและปรับเปลี่ยนการตั้งค่าเพื่อไม่ให้แอปยอมรับการเปลี่ยนแปลงแอปที่ทำให้คะแนนประสิทธิภาพต่ำกว่า 95 ดังต่อไปนี้

- npm run lh -- --perf=95 https://staging.example.com

สร้างคำขอดึงเพื่อเรียกใช้การทดสอบ Lighthouse Bot ใน Travis

บ็อต Lighthouse จะทดสอบคำขอพุลเท่านั้น ดังนั้นหากคุณพุชไปยังสาขาหลักตอนนี้ คุณจะเห็น "สคริปต์นี้ทำงานได้ตามคำขอ PR ของ Travis เท่านั้น" ในบันทึกของ Travis

วิธีเริ่มการทดสอบบ็อต Lighthouse

1. ชำระเงินที่สาขาใหม่
2. พุชไปยัง GitHub
3. สร้างการ���ึงคำขอ

อดใจรอหน้าคำขอพุลนั้น แล้วรอให้บ็อต Lighthouse ร้องเพลง 🎤

คะแนนประสิทธิภาพดีมาก แอปใช้งบประมาณไม่เกิน และผ่านการตรวจสอบ

ตัวเลือก Lighthouse เพิ่มเติม

คุณจำได้ไหมว่า Lighthouse ทดสอบ��มว���หมู่ต่างๆ ทั้ง 5 หมวดหมู่อย่างไร คุณจะบังคับใช้คะแนนสำหรับรายการที่มี Flag บ็อต Lighthouse ได้ดังนี้

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

ตัวอย่าง

npm run lh -- --perf=93 --seo=100 https://staging.example.com

ซึ่งจะทำให้การประชาสัมพันธ์ไม่สำเร็จหากคะแนนประสิทธิภาพลดลงต่ำกว่า 93 หรือคะแนน SEO ลดลงต่ำกว่า 100

นอกจากนี้ คุณยังเลือกไม่รับความคิดเห็นของบ็อต Lighthouse ได้โดยใช้ตัวเลือก --no-comment