การตรวจสอบประสิทธิภาพด้วย Lighthouse CI

วิธีเพิ่ม Lighthouse ลงในระบบการผสานรวมต่อเนื่อง เช่น GitHub Actions

เคธี่ เฮมปีเนียส
Katie Hempenius
X

Lighthouse CI เป็นชุดเครื่องมือสำหรับใช้ Lighthouse ในระหว่างการผสานรวมอย่างต่อเนื่อง สามารถรวม CI ของ Lighthouse ไว้ในเวิร์กโฟลว์ของนักพัฒนาซอฟต์แวร์ได้หลายวิธี คู่มือนี้ครอบคลุมหัวข้อต่อไปนี้

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

ภาพรวม

Lighthouse CI เป็นชุดเครื่องมือฟรีที่อำนวยความสะดวกในการใช้ Lighthouse สำหรับการตรวจสอบประสิทธิภาพ รายงาน Lighthouse ฉบับเดียวจะแสดงภาพรวมประสิทธิภาพของหน้าเว็บในขณะที่ทำงาน ขณะที่ Lighthouse CI แสดงการเปลี่ยนแปลงของการค้นหาเหล่านี้เมื่อเวลาผ่านไป ซึ่งอาจใช้ระบุผลกระทบของการเปลี่ยนแปลงโค้ดเฉพาะหรือตรวจสอบว่าเป็นไปตามเกณฑ์ประสิทธิภาพในระหว่างกระบวนการผสานรวมที่ต่อเนื่องกัน แม้ว่าการตรวจสอบประสิทธิภาพจะเป็นกรณีการใช้งานที่พบบ่อยที่สุดสำหรับ Lighthouse CI แต่สามารถใช้ตรวจสอบแง่มุมอื่นๆ ของรายงาน Lighthouse ได้ เช่น SEO หรือการช่วยเหลือพิเศษ

ฟังก์ชันหลักของ CI ของ Lighthouse ให้บริการโดยอินเทอร์เฟซบรรทัดคำสั่ง CI ของ Lighthouse (หมายเหตุ: เครื่องมือนี้แยกต่างหากจาก Lighthouse CLI) CI CLI ของ Lighthouse จะมีชุดคำสั่งสำหรับการใช้ CI ของ Lighthouse เช่น คำสั่ง autorun จะเรียกใช้การเรียกใช้ Lighthouse หลายครั้ง ระบุรายงานของ Lighthouse ตามค่ามัธยฐาน และอัปโหลดรายงานสำหรับพื้นที่เก็บข้อมูล คุณปรับแต่งลักษณะการทำงานนี้แบบหนักได้ด้วยการส่งแฟล็กเพิ่มเติมหรือปรับแต่งไฟล์การกำหนดค่า lighthouserc.js ของ Lighthouse ก็ได้

แม้ว่าฟังก์ชันหลักของ CI ของ Lighthouse จะรวมอยู่ใน CLI ของ Lighthouse เป็นหลัก แต่โดยทั่วไป CI ของ Lighthouse จะใช้ผ่านวิธีใดวิธีหนึ่งต่อไปนี้

  • การเรียกใช้ CI ของ Lighthouse สำหรับการผสานรวมอย่างต่อเนื่อง
  • การใช้ Lighthouse CI GitHub Action ที่ทำงานและแสดงความคิดเห็นในพุลคำขอทุกคำขอ
  • การติดตามประสิทธิภาพในช่วงเวลาหนึ่งผ่านแดชบอร์ดที่ได้รับจากเซิร์ฟเวอร์ของ Lighthouse

วิธีทั้งหมดเหล่านี้สร้างขึ้นจาก Lighthouse CI CLI

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

ใช้ CI ของ Lighthouse ในเครื่อง

หัวข้อนี้จะอธิบายวิธีเรียกใช้และติดตั้ง Lighthouse CI CLI ในเครื่องและวิธีกำหนดค่า lighthouserc.js การเรียกใช้ Lighthouse CI CLI ในเครื่องเป็นวิธีที่ง่ายที่สุดในการตรวจสอบว่า lighthouserc.js ได้รับการกำหนดค่าอย่างถูกต้อง

  1. ติดตั้ง CI CLI สำหรับ Lighthouse

    npm install -g @lhci/cli

    CI ของ Lighthouse ได้รับการกำหนดค่าโดยการวางไฟล์ lighthouserc.js ในรูทของที่เก็บโปรเจ็กต์ ไฟล์นี้จำเป็นต้องดำเนินการและจะมีข้อมูลการกำหนดค่าที่เกี่ยวข้องกับ CI ของ Lighthouse แม้ว่า CI ของ Lighthouse จะกำหนดค่าให้ใช้โดยไม่มีที่เก็บ Git ได้ได้ แต่วิธีการในบทความนี้จะถือว่าที่เก็บโปรเจ็กต์ได้รับการกำหนดค่าให้ใช้ Git

  2. ในรูทของที่เก็บ ให้สร้างไฟล์การกำหนดค่า lighthouserc.js

    touch lighthouserc.js

  3. เพิ่มโค้ดต่อไปนี้ลงใน lighthouserc.js โค้ดนี้เป็นการกำหนดค่า CI ของ Lighthouse ที่ว่างเปล่า คุณจะเพิ่มลงในการกำหนดค่านี้ใน ขั้นตอนต่อๆ ไป

    module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

  4. โดยทุกครั้งที่ CI ของ Lighthouse ทำงาน เซิร์ฟเวอร์จะเริ่มให้บริการเว็บไซต์ เซิร์ฟเวอร์นี้คือสิ่งที่ช่วยให้ Lighthouse โหลดเว็บไซต์ได้แม้ว่าจะไม่มีเซิร์ฟเวอร์อื่นทำงานอยู่เลยก็ตาม เมื่อ CI ของ Lighthouse ทำงานเสร็จแล้ว ระบบจะปิดเซิร์ฟเวอร์โดยอัตโนมัติ คุณควรกำหนดค่าพร็อพเพอร์ตี้ staticDistDir หรือ startServerCommand เพื่อให้มั่นใจว่าการแสดงผลทำงานอย่างถูกต้อง

    หากเว็บไซต์เป็นแบบคงที่ ให้เพิ่มพร็อพเพอร์ตี้ staticDistDir ลงในออบเจ็กต์ ci.collect เพื่อระบุตำแหน่งของไฟล์แบบคงที่ Lighthouse CI จะใช้เซิร์ฟเวอร์ของตนเองในการแสดงไฟล์เหล่านี้ขณะทดสอบเว็บไซต์ หากเว็บไซต์ไม่ได้เป็นแบบคงที่ ให้เพิ่มพร็อพเพอร์ตี้ startServerCommand ในออบเจ็กต์ ci.collect เพื่อระบุคำสั่งที่เริ่มต้นเซิร์ฟเวอร์ CI ของ Lighthouse จะเริ่มกระบวนการของเซิร์ฟเวอร์ใหม่ระหว่างการทดสอบและปิดการทำงานหลังจากนั้น

    // Static site example
collect: {
  staticDistDir: './public',
}

    // Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}

  5. เพิ่มพร็อพเพอร์ตี้ url ลงในออบเจ็กต์ ci.collect เพื่อระบุ URL ที่ CI ของ Lighthouse ควรเรียกใช้ Lighthouse ควรระบุค่าของพร็อพเพอร์ตี้ url เป็นอาร์เรย์ของ URL ซึ่งอาร์เรย์นี้สามารถมี URL ได้อย่างน้อย 1 รายการ โดยค่าเริ่มต้น CI ของ Lighthouse จะเรียกใช้ Lighthouse 3 ครั้งกับ URL แต่ละรายการ

    collect: {
  // ...
  url: ['http://localhost:8080']
}

  6. เพิ่มพร็อพเพอร์ตี้ target ลงในออบเจ็กต์ ci.upload แล้วตั้งค่าเป็น 'temporary-public-storage' ระบบจะอัปโหลดรายงาน Lighthouse ที่รวบรวมโดย CI ของ Lighthouse ไปยังพื้นที่เก็บข้อมูลสาธารณะชั่วคราว รายงานจะยังคงอยู่ในนั้นเป็นเวลา 7 วัน จากนั้นจะถูกลบโดยอัตโนมัติ คู่มือการตั้งค่านี้ใช้ตัวเลือกการอัปโหลด "พื้นที่เก็บข้อมูลสาธารณะชั่วคราว" เนื่องจากตั้งค่าได้รวดเร็ว โปรดดูข้อมูลเกี่ยวกับวิธีอื่นๆ ในการจัดเก็บรายงาน Lighthouse ในเอกสารประกอบ

    upload: {
  target: 'temporary-public-storage',
}

    ตำแหน่งพื้นที่เก็บข้อมูลของรายงานจะคล้ายกับสิ่งต่อไปนี้

    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

    (URL นี้จะไม่ทำงานเนื่องจากรายงานถูกลบไปแล้ว)

  7. เรียกใช้ CI CLI ของ Lighthouse จากเทอร์มินัลโดยใช้คำสั่ง autorun การดำเนินการนี้จะเรียกใช้ Lighthouse 3 ครั้งและอัปโหลดรายงานค่ามัธยฐานของ Lighthouse

    lhci autorun

    หากคุณกำหนดค่า CI ของ Lighthouse อย่างถูกต้อง การเรียกใช้คำสั่งนี้ควรสร้างเอาต์พุตที่คล้ายกับคำสั่งต่อไปนี้

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    คุณไม่จำเป็นต้องสนใจข้อความ GitHub token not set ในเอาต์พุตของคอนโซล คุณจำเป็นต้องใช้โทเค็น GitHub เฉพาะในกรณีที่ต้องการใช้ CI ของ Lighthouse กับ GitHub ส่วนวิธีตั้งค่า GitHub Action ก็จะอธิบายเพิ่มเติมในบทความนี้

    การคลิกลิงก์ในเอาต์พุตที่ขึ้นต้นด้วย https://storage.googleapis.com... จะนำคุณไปยังรายงาน Lighthouse ที่เกี่ยวข้องกับการเรียกใช้ Lighthouse ตามค่ามัธยฐาน

    ค่าเริ่มต้นที่ autorun ใช้อาจลบล้างผ่านบรรทัดคำสั่งหรือ lighthouserc.js ตัวอย่างเช่น การกำหนดค่า lighthouserc.js ด้านล่างระบุว่าควรมีการรวบรวมการเรียกใช้ Lighthouse 5 ครั้งทุกครั้งที่ autorun ดำเนินการ

  8. อัปเดต lighthouserc.js เพื่อใช้พร็อพเพอร์ตี้ numberOfRuns:

    module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

  9. เรียกใช้คำสั่ง autorun อีกครั้ง

    lhci autorun

    เอาต์พุตเทอร์มินัลควรแสดงว่า Lighthouse ทำงาน 5 ครั้งแทนที่จะเป็น 3 ตามค่าเริ่มต้น

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    โปรดดูข้อมูลเกี่ยวกับตัวเลือกการกำหนดค่าอื่นๆ ในเอกสารประกอบการกำหนดค่า CI ของ Lighthouse

ตั้งค่ากระบวนการ CI เพื่อเรียกใช้ CI ของ Lighthouse

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

การใช้ CI ของ Lighthouse เพื่อรวบรวมการวัดประสิทธิภาพเป็นวิธีที่ดีในการเริ่มต้นตรวจสอบประสิทธิภาพ อย่างไรก็ตาม ผู้ใช้ขั้นสูงอาจต้องทำตามขั้นตอนเพิ่มเติมและใช้ CI ของ Lighthouse เพื่อทำให้บิลด์ไม่ประสบความสำเร็จหากไม่เป็นไปตามเกณฑ์ที่กำหนดไว้ล่วงหน้า เช่น การผ่านการตรวจสอบของ Lighthouse บางรายการหรือเป็นไปตามงบประมาณด้านประสิทธิภาพทั้งหมด ลักษณะการทำงานนี้จะกำหนดค่าผ่านพร็อพเพอร์ตี้ assert ของไฟล์ lighthouserc.js

CI ของ Lighthouse รองรับการยืนยัน 3 ระดับดังนี้

  • off: ไม่สนใจการยืนยัน
  • warn: พิมพ์ Stderr ไม่สำเร็จ
  • error: พิมพ์ Stderr และออกจาก Lighthouse CI ที่มีโค้ดการออกที่ไม่ใช่ 0 ไม่สำเร็จ

ด้านล่างนี้เป็นตัวอย่างการกำหนดค่า lighthouserc.js ที่มีการยืนยัน โดยจะยืนยันคะแนนประสิทธิภาพและหมวดหมู่การช่วยเหลือพิเศษของ Lighthouse หากต้องการลองใช้งาน ให้เพิ่มการยืนยันที่แสดงด้านล่างลงในไฟล์ lighthouserc.js จากนั้นเรียกใช้ CI ของ Lighthouse อีกครั้ง

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

เอาต์พุตคอนโซลที่เครื่องมือสร้างขึ้นจะมีลักษณะดังนี้

ภาพหน้าจอของข้อความเตือนที่สร้างโดย CI ของ Lighthouse

ดูข้อมูลเพิ่มเติมเกี่ยวกับการยืนยัน CI ของ Lighthouse ได้ในเอกสารประกอบ

ตั้งค่า GitHub Action เพื่อเรียกใช้ CI ของ Lighthouse

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

ภาพหน้าจอของการตรวจสอบสถานะ GitHub

  1. ในรูทของที่เก็บ ให้สร้างไดเรกทอรีที่ชื่อ .github/workflows เวิร์กโฟลว์สำหรับโปรเจ็กต์ของคุณจะอยู่ในไดเรกทอรีนี้ เวิร์กโฟลว์คือกระบวนการที่ทำงานในเวลาที่กำหนดไว้ล่วงหน้า (เช่น เมื่อมีการพุชโค้ด) และประกอบด้วยการดำเนินการอย่างน้อย 1 รายการ

    mkdir .github
mkdir .github/workflows

  2. ใน .github/workflows ให้สร้างไฟล์ชื่อ lighthouse-ci.yaml โดยไฟล์นี้จะระงับการกำหนดค่าสำหรับเวิร์กโฟลว์ใหม่

    touch lighthouse-ci.yaml

  3. เพิ่มข้อความต่อไปนี้ใน lighthouse-ci.yaml

    name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

    การกำหนดค่านี้จะตั้งค่าเวิร์กโฟลว์ที่ประกอบด้วยงานเดียวซึ่งจะทำงานเมื่อมีการพุชโค้ดใหม่ไปยังที่เก็บ งานนี้มี 4 ขั้นตอน:

    • ดูที่เก็บที่ Lighthouse CI จะทำงานด้วย
    • ติดตั้งและกำหนดค่าโหนด
    • ติดตั้งแพ็กเกจ npm ที่จำเป็น
    • เรียกใช้ CI ของ Lighthouse และอัปโหลดผลลัพธ์ไปยังพื้นที่เก็บข้อมูลสาธารณะชั่วคราว

  4. ทำการเปลี่ยนแปลงเหล่านี้และพุชไปยัง GitHub หากคุณทำตามขั้นตอนข้างต้นได้ถูกต้อง การพุชโค้ดไปยัง GitHub จะทริกเกอร์เวิร์กโฟลว์ที่คุณเพิ่งเพิ่มขึ้นมา

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

    ภาพหน้าจอของแท็บ "การตั้งค่า" ของ GitHub

    คุณสามารถไปที่รายงาน Lighthouse ที่เกี่ยวข้องกับคอมมิตแต่ละรายการได้จากแท็บการดำเนินการ คลิกคอมมิต แล้วคลิกขั้นตอนเวิร์กโฟลว์ Lighthouse CI จากนั้นขยายผลลัพธ์ของขั้นตอนเรียกใช้ CI ของ Lighthouse

    ภาพหน้าจอของแท็บ "การตั้งค่า" ของ GitHub

    คุณเพิ่งตั้งค่า GitHub Action ให้เรียกใช้ Lighthouse CI ซึ่งจะเป็นประโยชน์มากที่สุดเมื่อใช้ร่วมกับการตรวจสอบสถานะของ GitHub

ตั้งค่าการตรวจสอบสถานะ GitHub

หากมีการกำหนดค่าไว้ การตรวจสอบสถานะคือข้อความที่ปรากฏในการประชาสัมพันธ์ทุกครั้ง และโดยทั่วไปจะมีข้อมูล เช่น ผลการทดสอบหรือความสำเร็จของการสร้าง

ภาพหน้าจอของแท็บ "การตั้งค่า" ของ GitHub

ขั้นตอนด้านล่างนี้จะอธิบายวิธีตั้งค่าการตรวจสอบสถานะ CI ของ Lighthouse

  1. ไปที่หน้าแอป Lighthouse CI GitHub แล้วคลิกกำหนดค่า

  2. (ไม่บังคับ) หากคุณเป็นส่วนหนึ่งของหลายองค์กรใน GitHub ให้เลือกองค์กรที่เป็นเจ้าของที่เก็บที่คุณต้องการใช้ CI ของ Lighthouse

  3. เลือกที่เก็บทั้งหมดหากต้องการเปิดใช้ CI ของ Lighthouse ในที่เก็บทั้งหมด หรือเลือกเฉพาะที่เก็บที่เลือกเท่านั้นหากต้องการใช้ในที่เก็บเฉพาะจากนั้นเลือกที่เก็บ จากนั้นคลิกติดตั้งและให้สิทธิ์

  4. คัดลอกโทเค็นที่แสดง คุณจะได้ใช้ในขั้นตอนถัดไป

  5. ในการเพิ่มโทเค็น ให้ไปที่หน้าการตั้งค่าของที่เก็บ GitHub คลิก Secrets แล้วคลิก Add a new Secret

    ภาพหน้าจอของแท็บ "การตั้งค่า" ของ GitHub

  6. ตั้งค่าช่อง Name เป็น LHCI_GITHUB_APP_TOKEN และตั้งค่าช่อง Value เป็นโทเค็นที่คุณคัดลอกในขั้นตอนสุดท้าย แล้วคลิกปุ่ม Add secret

  7. ไปที่ไฟล์ lighthouse-ci.yaml และเพิ่มข้อมูลลับของสภาพแวดล้อมใหม่ลงในคำสั่ง "เรียกใช้ Lighthouse CI"

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $
  1. การตรวจสอบสถานะพร้อมใช้งานแล้ว หากต้องการทดสอบ ให้สร้างคำขอพุลใหม่หรือพุชคอมมิตไปยังคำขอพุลที่มีอยู่

ตั้งค่าเซิร์ฟเวอร์ CI ของ Lighthouse

เซิร์ฟเวอร์ CI ของ Lighthouse มีหน้าแดชบอร์ดสำหรับการสำรวจการรายงานย้อนหลังของ Lighthouse อีกทั้งยังทำหน้าที่เป็นพื้นที่เก็บข้อมูลส่วนตัวในระยะยาวสำหรับรายงาน Lighthouse ด้วย

ภาพหน้าจอของแดชบอร์ดเซิร์ฟเวอร์ CI ของ Lighthouse
ภาพหน้าจอการเปรียบเทียบรายงาน Lighthouse ทั้ง 2 ฉบับในเซิร์ฟเวอร์ CI ของ Lighthouse
  1. เลือกคอมมิตที่จะเปรียบเทียบ
  2. จำนวนคะแนนของ Lighthouse ที่เปลี่ยนแปลงระหว่างคอมมิต 2 รายการ
  3. ส่วนนี้จะแสดงเฉพาะเมตริกที่มีการเปลี่ยนแปลงระหว่างคอมมิตทั้ง 2 รายการเท่านั้น
  4. การถดถอยจะไฮไลต์เป็นสีชมพู
  5. การปรับปรุงจะไฮไลต์เป็นสีน้ำเงิน

เซิร์ฟเวอร์ CI ของ Lighthouse เหมาะที่สุดสำหรับผู้ใช้ที่สามารถทำให้ใช้งานได้และจัดการโครงสร้างพื้นฐานของตนเอง

สำหรับข้อมูลเกี่ยวกับการตั้งค่าเซิร์ฟเวอร์ CI ของ Lighthouse รวมถึงสูตรอาหารสำหรับใช้ Heroku และ Docker สำหรับการทำให้ใช้งานได้ โปรดดูinstructionsเหล่านี้

ดูข้อมูลเพิ่มเติม