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

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

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

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

การตรวจสอบของบ็อต Lighthouse ใน GitHub ไม่ผ่าน
การตรวจสอบของบ็อต Lighthouse ใน GitHub

แม้ว่าคุณจะทดสอบประสิทธิภาพใน 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

คอนโซลจะถามคำถามต่างๆ ระหว่างการตั้งค่าดังนี้

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

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

ยินดีด้วย คุณพร้อมใช้งานแล้ว เรียกใช้

firebase deploy

อีกเพียงเสี้ยววินาที แอปจะแสดงเผยแพร่อยู่

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

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

การผสานรวมแอป GitHub ใน Travis CI

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

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

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

  1. หากต้องการมีไฟล์ .travis.yml ในไดเรกทอรีรูท
  2. วิธีเรียกใช้การสร้างโดยทำ git push แบบเดิม

รีพอซีต lighthouse-bot-starter มีไฟล์ .travis.yml YAML อยู่แล้ว

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 เพื่อให้ 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 Bot

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

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

สถานะผู้ทำงานร่วมกันของบ็อต Lighthouse

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

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

เพิ่ม Lighthouse Bot ลงในโปรเจ็กต์

จากนั้นเพิ่ม Lighthouse Bot ลงในโปรเจ็กต์โดยเรียกใช้สิ่งต่อไปนี้

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

และเพิ่มข้อมูลต่อไปนี้ลงใน package.json

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

เพิ่ม Lighthouse Bot ลงในการกำหนดค่า Travis

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

ใน .travis.yml ให้เพิ่มขั้นตอนใน After_Success:

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 ใน Travis

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

วิธีเรียกใช้การทดสอบด้วย Lighthouse Bot

  1. ตรวจสอบสาขาใหม่
  2. พุชไปยัง GitHub
  3. สร้างคำขอพุล

โปรดรอสักครู่ในหน้าคำขอดึงข้อมูลและรอให้ Lighthouse Bot ร้องเพลง 🎤

คะแนน Lighthouse ที่ผ่าน

ผ่านการตรวจสอบของ GitHub

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

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

จำวิธีที่ Lighthouse ทดสอบหมวดหมู่ต่างๆ ทั้ง 5 หมวดหมู่ได้ไหม คุณสามารถบังคับใช้คะแนนสำหรับหน้าเว็บใดก็ได้ที่มี Flag ของ Lighthouse Bot ดังต่อไปนี้

--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

การดำเนินการนี้จะถือว่าไม่ผ่าน PR หากคะแนนประสิทธิภาพลดลงต่ำกว่า 93 หรือคะแนน SEO ลดลงต่ำกว่า 100

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