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

Milica Mihajlija

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

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

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

การตรวจสอบบ็อต Lighthouse ใน GitHub ไม่สำเร็จ
Lighthouse Bot ตรวจสอบใน 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
  • พิมพ์ "public" เป็นไดเรกทอรีสาธารณะ
  • พิมพ์ "N" (ไม่) เพื่อกำหนดค่าเป็นแอปหน้าเดียว

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

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

firebase deploy

คุณจะมีแอปที่ใช้งานได้ในเสี้ยววินาที

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

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

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

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

ไปที่การตั้งค่าในโปรไฟล์ แล้วคลิกปุ่มซิงค์บัญชี และตรวจสอบว่าที่เก็บโปรเจ็กต์แสดงอยู่ใน 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 เพื่อให้ 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 คุณจะเห็นข้อความ ✔️ Deploy complete! ในไม่ช้า

ตอนนี้เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงแอป ระบบจะทำให้แอปใช้งานได้ใน 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

สร้าง Pull Request เพื่อทริกเกอร์การทดสอบ Lighthouse Bot ใน Travis

Lighthouse Bot จะทดสอบเฉพาะ Pull Request เท่านั้น ดังนั้นหากคุณพุชไปยัง Branch หลักตอนนี้ คุณจะเห็นข้อความ "This script can only be run on Travis PR requests" ในบันทึก Travis

วิธีทริกเกอร์การทดสอบ Lighthouse Bot

  1. เช็กเอาต์สาขาใหม่
  2. พุชสาขาไปยัง GitHub
  3. สร้าง Pull Request

รอสักครู่ในหน้า Pull Request แล้วรอให้ Lighthouse Bot ร้องเพลง 🎤

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

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

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

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

จำได้ไหมว่า Lighthouse ทดสอบ 5 หมวดหมู่ที่แตกต่างกัน คุณสามารถบังคับใช้คะแนนสำหรับหมวดหมู่ใดก็ได้โดยใช้แฟล็ก 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

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

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