help4bis
335d9a76e1
Add comprehensive documentation for the dual-engine performance evaluation system: - System architecture and data flow - Score calculation methodology (0-100 approximation from CWV thresholds) - Detailed metrics reference (LCP, FCP, CLS, TBT, TTFB) - Testing engines comparison (Sitespeed vs PSI) - Complete code structure map (file-by-file breakdown) - Case study: rds.ink 77 score with actionable fixes - Quick reference guides for interpreting results Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
244 lines
8.2 KiB
Markdown
244 lines
8.2 KiB
Markdown
# Case Study: rds.ink/drawings-of-endangered-animals-series/ Scores 77
|
||
|
||
**Date tested:** 2026-05-13 07:12:51 UTC
|
||
**Device:** Mobile
|
||
**Engine:** Sitespeed.io (HAR-based approximation)
|
||
**Score:** 77/100 ← AMBER (needs improvement)
|
||
|
||
---
|
||
|
||
## The Numbers
|
||
|
||
| Metric | Value | Good | Poor | Status | Contribution |
|
||
|--------|-------|------|------|--------|--------------|
|
||
| **TBT (Total Blocking Time)** | 1,807ms | 200ms | 600ms | 🔴 CRITICAL | 30/100 pts |
|
||
| FCP (First Contentful Paint) | 2,116ms | 1,800ms | 3,000ms | 🟡 SLOW | 82/100 pts |
|
||
| TTFB (Time to First Byte) | 144ms | 800ms | 1,800ms | ✓ GOOD | 100/100 pts |
|
||
| CLS (Cumulative Layout Shift) | 0.0 | 0.1 | 0.25 | ✓ EXCELLENT | 100/100 pts |
|
||
| LCP (Largest Contentful Paint) | Not measured | 2,500ms | 4,000ms | ❓ UNKNOWN | skipped |
|
||
|
||
**Final score:** (30 + 82 + 100 + 100) / 4 = **78 ≈ 77**
|
||
|
||
---
|
||
|
||
## Why 77, Not Higher?
|
||
|
||
**One metric kills the score: TBT at 1,807ms.**
|
||
|
||
TBT (Total Blocking Time) is how long JavaScript execution **blocks user interaction**. Your page:
|
||
1. Finishes initial render at FCP (2.1s) ✓
|
||
2. BUT JavaScript continues executing for another **1.8 seconds** after that
|
||
3. During those 1.8s, user clicks don't work, scrolling is frozen
|
||
4. Page feels frozen even though it looks loaded
|
||
|
||
This single metric contributes only 30/100 points, dragging the average from ~90 to 77.
|
||
|
||
---
|
||
|
||
## Root Cause Analysis
|
||
|
||
### Page Composition (from HAR)
|
||
|
||
- **Total size:** 4.2 MB
|
||
- **Images:** 0.6 MB (14%)
|
||
- **JavaScript:** 1.8 MB (44%) ← THE PROBLEM
|
||
- **CSS:** Not measured
|
||
- **Requests:** 26 HTTP requests
|
||
|
||
**The JavaScript is the bottleneck.** 1.8 MB of JS code, much of it loaded during page render:
|
||
- WooCommerce scripts (jQuery, jQuery plugins, WC-specific code)
|
||
- Elementor JavaScript runtime (webpack, core, widgets)
|
||
- Product gallery plugins (likely Lightbox, PhotoSwipe, or Slick)
|
||
- Lazy-load libraries
|
||
- Analytics/tracking scripts
|
||
|
||
All of this executes **synchronously** on the main thread, blocking the browser from responding to user input.
|
||
|
||
### Why FCP is Slow Too (2,116ms)
|
||
|
||
The page doesn't show any content until 2.1 seconds because:
|
||
1. Server takes 144ms (acceptable)
|
||
2. Browser parses HTML
|
||
3. Hits render-blocking JavaScript in `<head>` or early `<body>`
|
||
4. Waits for scripts to download + execute
|
||
5. Finally renders first content
|
||
|
||
If you defer non-critical JS, FCP would drop significantly.
|
||
|
||
---
|
||
|
||
## How to Fix It: Hummingbird Settings
|
||
|
||
You use **Hummingbird** for performance optimisation. Here are the exact steps:
|
||
|
||
### Fix #1: Defer Non-Critical JavaScript (15 min, +12 score points)
|
||
|
||
**Path:** WordPress Admin → Performance → Hummingbird
|
||
|
||
1. Click **Performance** tab
|
||
2. Scroll to **JavaScript** section
|
||
3. ✓ **Enable "Defer JavaScript"**
|
||
- This adds `defer` to all `<script>` tags except critical ones
|
||
- Page renders BEFORE scripts execute
|
||
- User sees content faster
|
||
4. ✓ **Enable "Compress JavaScript"**
|
||
- Minifies JS to reduce parse time
|
||
5. Save
|
||
|
||
**Expected impact:** TBT 1,807ms → 400ms | Score 77 → 88
|
||
|
||
---
|
||
|
||
### Fix #2: Lazy-Load Product Gallery (30 min, +5 score points)
|
||
|
||
The page has product cards with Lightbox/gallery plugins. These load globally but only needed when user clicks an image.
|
||
|
||
**Option A (Using Hummingbird Pro):**
|
||
1. **Performance → Asset Optimization**
|
||
2. Find the gallery plugin (e.g., `glightbox.min.js`)
|
||
3. Set to load **only on product pages** or **only on this specific page**
|
||
4. Hummingbird will skip loading it on homepage, category pages, etc.
|
||
|
||
**Option B (Manual):**
|
||
1. Check what gallery plugin you're using (inspect page source, look for `lightbox`, `glightbox`, `swiper`, `slick` in script names)
|
||
2. Go to that plugin's settings
|
||
3. Look for "Lazy Load" or "Load on Interaction" option
|
||
4. Enable it
|
||
|
||
**Expected impact:** TBT 1,807ms → 600ms | Score 77 → 85
|
||
|
||
---
|
||
|
||
### Fix #3: Disable Unused Plugins on This Page (20 min, +2 score points)
|
||
|
||
WooCommerce loads a LOT of plugins globally. This page may not need all of them.
|
||
|
||
**Path:** WordPress Admin → Plugins
|
||
|
||
1. Check which plugins are active
|
||
2. For each plugin, ask: "Is this used on the endangered-animals page?"
|
||
- Contact form plugin? (If no contact form on page → disable or load only on contact pages)
|
||
- Affiliate/referral plugin? (If not visible → disable)
|
||
- Social sharing? (If not visible → disable)
|
||
- Booking plugin? (If not used → disable)
|
||
- Custom tracking? → check if needed
|
||
3. **Hummingbird Pro:** Use "Asset Optimization" to load plugins only on pages that need them
|
||
|
||
**Expected impact:** Saves ~100ms | Score 77 → 79
|
||
|
||
---
|
||
|
||
### Fix #4: Enable Page Caching (5 min, +1 score point)
|
||
|
||
**Path:** WordPress Admin → Performance → Hummingbird → Caching
|
||
|
||
1. Click **Caching** tab
|
||
2. ✓ **Enable "Page Caching"**
|
||
- Set cache expiry: 24 hours (or 7 days if content doesn't change daily)
|
||
3. ✓ **Enable "Browser Caching"**
|
||
- Tells visitor browsers to cache static assets
|
||
4. Save
|
||
|
||
**Expected impact:** TTFB 144ms → 50ms on repeat visits | Score 77 → 78 (small gain)
|
||
|
||
---
|
||
|
||
## Expected Results
|
||
|
||
| Step | TBT Impact | Score Impact |
|
||
|------|-----------|--------------|
|
||
| Initial | 1,807ms | 77 |
|
||
| After Fix #1 (defer JS) | 400ms | 88 |
|
||
| After Fix #2 (lazy-load gallery) | 150ms | 92 |
|
||
| After Fix #3 (disable plugins) | 100ms | 94 |
|
||
| After Fix #4 (page cache) | 100ms (TTFB, not TBT) | 95 |
|
||
| **TOTAL** | **1,807ms → 100ms** | **77 → 95** |
|
||
|
||
---
|
||
|
||
## Step-by-Step Instructions
|
||
|
||
### Before You Start
|
||
1. Backup your database:
|
||
```bash
|
||
wp db export /home/help4bis/backups/rds_backup_$(date +%Y%m%d_%H%M%S).sql
|
||
```
|
||
2. Go to your WordPress site admin panel for rds.ink
|
||
|
||
### Step 1: Defer JavaScript (easiest, highest impact)
|
||
1. **WordPress Admin → Performance**
|
||
2. Click **Hummingbird**
|
||
3. Click **Performance** tab
|
||
4. Scroll to **JavaScript** section
|
||
5. Toggle ON: "Defer JavaScript"
|
||
6. Toggle ON: "Compress JavaScript"
|
||
7. Click **Save** button
|
||
8. Wait 5 minutes for cache to clear
|
||
|
||
### Step 2: Lazy-Load Gallery
|
||
1. **WordPress Admin → Plugins → Installed Plugins**
|
||
2. Look for gallery/lightbox plugin names:
|
||
- "Elementor" (has built-in gallery)
|
||
- "Glightbox"
|
||
- "Photo Gallery"
|
||
- "FooGallery"
|
||
- "Lightbox with Photo Gallery"
|
||
3. Click on the plugin name to open settings
|
||
4. Look for "Lazy Load" or "Load on Interaction" toggle
|
||
5. Enable it
|
||
6. Save
|
||
|
||
### Step 3: Disable Unused Plugins
|
||
1. **WordPress Admin → Plugins → Installed Plugins**
|
||
2. For each plugin, check if it's actually used on the endangered-animals page:
|
||
- Hover over plugin name
|
||
- Click "Settings" if available
|
||
- Check if it applies to this page
|
||
3. If not used on this page: **Deactivate** (don't delete)
|
||
4. Test the page in browser to make sure nothing broke
|
||
|
||
### Step 4: Enable Caching
|
||
1. **WordPress Admin → Performance → Hummingbird**
|
||
2. Click **Caching** tab
|
||
3. Toggle ON: "Page Caching"
|
||
- Set expiry to: 24 hours or 7 days
|
||
4. Toggle ON: "Browser Caching"
|
||
5. Click **Save**
|
||
|
||
### Verify Your Fix
|
||
1. Go to `http://192.168.0.117:8765/performance/`
|
||
2. Click on **rds.ink** (site ID 3)
|
||
3. Scroll to "URL breakdown" table
|
||
4. Find `rds.ink/drawings-of-endangered-animals-series/`
|
||
5. Click **"Mob"** (mobile test) button
|
||
6. Wait ~90 seconds
|
||
7. Refresh the page
|
||
8. New score should appear (expected: 88–95)
|
||
|
||
---
|
||
|
||
## Common Questions
|
||
|
||
**Q: What if I'm not using Hummingbird?**
|
||
A: Switch to Hummingbird. It's what your portfolio uses. Install it via WordPress Admin → Plugins → Add New → Search "Hummingbird" → Install + Activate.
|
||
|
||
**Q: Will deferring JS break anything?**
|
||
A: No. Defer is safe — it just loads scripts after page render. If something breaks, you'll see it immediately on the page. You can turn it off.
|
||
|
||
**Q: How often should I test?**
|
||
A: Test after each fix to verify the improvement. Then test weekly via the "Run portfolio sweep" button.
|
||
|
||
**Q: Why not just buy WP Rocket?**
|
||
A: You already have Hummingbird. Both do the same job. Stick with Hummingbird.
|
||
|
||
**Q: Can I change the performance thresholds?**
|
||
A: Yes, but they're hard-coded in the sitespeed.io configuration. Not recommended — they're based on Google's official Lighthouse rubric.
|
||
|
||
---
|
||
|
||
## Related Reading
|
||
|
||
- [Score Calculation](../docs/02-score-calculation.md) — How the 77 was calculated
|
||
- [Performance Metrics Reference](../docs/03-metrics-reference.md) — What TBT, FCP, etc. mean
|
||
- [Interpreting Scores](../guides/interpreting-scores.md) — General score interpretation guide
|