Skip to content
Performance Monitoring

Performance Monitoring #77

Sign in to view logs

Performance Monitoring

Performance Monitoring #77

Workflow file for this run

.github/workflows/performance.yml at 52d58f0
name: Performance Monitoring
on:
pull_request:
branches: [main, develop]
push:
branches: [main, develop]
schedule:
- cron: '0 2 * * 1' # Weekly on Monday at 2 AM
jobs:
lighthouse:
name: Lighthouse CI
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Build theme assets
run: npm run build
- name: Setup WordPress test environment
run: |
docker run -d --name wordpress \
-p 8888:80 \
-e WORDPRESS_DB_HOST=mysql \
-e WORDPRESS_DB_USER=wordpress \
-e WORDPRESS_DB_PASSWORD=wordpress \
-e WORDPRESS_DB_NAME=wordpress \
wordpress:latest
docker run -d --name mysql \
-e MYSQL_ROOT_PASSWORD=rootpass \
-e MYSQL_DATABASE=wordpress \
-e MYSQL_USER=wordpress \
-e MYSQL_PASSWORD=wordpress \
mysql:8.0
- name: Wait for WordPress
run: |
timeout 60 bash -c 'until curl -f http://localhost:8888; do sleep 2; done'
- name: Activate theme
run: |
docker exec wordpress wp theme activate block-theme-scaffold --allow-root
- name: Create sample content
run: |
docker exec wordpress wp post create \
--post_title="Sample Post" \
--post_content="Sample content for testing" \
--post_status=publish \
--allow-root
- name: Run Lighthouse CI
run: npx @lhci/cli@0.13.x autorun
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
- name: Upload Lighthouse reports
uses: actions/upload-artifact@v4
if: always()
with:
name: lighthouse-reports
path: lighthouse-reports/
retention-days: 30
bundle-size:
name: Bundle Size Analysis
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Build for production
run: npm run build
- name: Check bundle size
run: npm run size-limit
- name: Analyze bundle
run: npm run analyze-bundle
continue-on-error: true
- name: Upload bundle analysis
uses: actions/upload-artifact@v4
if: always()
with:
name: webpack-bundle-report
path: build/bundle-report.html
retention-days: 30
performance-budget:
name: Performance Budget Check
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Build theme
run: npm run build
- name: Check file sizes
run: |
echo "## Theme Asset Sizes" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "| File | Size | Gzipped |" >> $GITHUB_STEP_SUMMARY
echo "|------|------|---------|" >> $GITHUB_STEP_SUMMARY
for file in build/*.js build/*.css; do
if [ -f "$file" ]; then
size=$(wc -c < "$file" | numfmt --to=iec-i --suffix=B)
gzip_size=$(gzip -c "$file" | wc -c | numfmt --to=iec-i --suffix=B)
echo "| $(basename $file) | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
fi
done
- name: Fail if size limits exceeded
run: npm run size-limit
core-web-vitals:
name: Core Web Vitals Check
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Build theme
run: npm run build
- name: Analyze Core Web Vitals
run: |
echo "## Core Web Vitals Targets" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "| Metric | Target | Budget |" >> $GITHUB_STEP_SUMMARY
echo "|--------|--------|--------|" >> $GITHUB_STEP_SUMMARY
echo "| First Contentful Paint (FCP) | ≤ 1.8s | Good |" >> $GITHUB_STEP_SUMMARY
echo "| Largest Contentful Paint (LCP) | ≤ 2.5s | Good |" >> $GITHUB_STEP_SUMMARY
echo "| Cumulative Layout Shift (CLS) | ≤ 0.1 | Good |" >> $GITHUB_STEP_SUMMARY
echo "| Total Blocking Time (TBT) | ≤ 200ms | Good |" >> $GITHUB_STEP_SUMMARY
echo "| Speed Index | ≤ 3.4s | Good |" >> $GITHUB_STEP_SUMMARY