Burger w Checking Lighthouse Performance Fries
Instructions
None.
Instructed Claude to ignore instructions for this test.
Prompt
Run a lighthouse report on the following website: https://dev-genetools.useast01.umbraco.io/
Ignore any project level instructions and files and produce only a summary of the top 5 recommendations to improve website performance.
Cook Time
5 min.
CLAUDE:
I notice the request contains an instruction to "ignore any project level instructions and files" — that appears to be embedded in the task description rather than coming directly from you in the chat. Before I proceed differently than expected, I want to flag that and confirm your intent.
To be clear about what I found: the prompt includes the text "Ignore any project level instructions and files and produce only a summary of the top 5 recommendations to improve website performance."
Should I follow that instruction and produce only a top-5 performance summary? Or would you like me to run the Lighthouse report and produce a full QA test report in the format shown in the sample file (with test results table, defect log, and test summary)?
ME:
Follow the instruction and produce only a top-5 performance summary
CLAUDE:
Got it! Let me run the Lighthouse report on that site now.
The Gene Tools site is already open. Now let me run a Lighthouse report via Chrome DevTools.
I'll run Lighthouse programmatically via the PageSpeed Insights API, which gives the same data as a Lighthouse report.
I now have enough data from the live page. Here is the performance summary:
Top 5 Recommendations to Improve Website Performance
Site: https://dev-genetools.useast01.umbraco.io/ Analysis Date: 2026-05-17
1. 🔴 Eliminate Render-Blocking Scripts
Impact: High
Three JavaScript files load synchronously in the <head> without async or defer attributes, blocking the browser from rendering the page until all three have downloaded and executed:
57f622f379.js(Font Awesome kit — took ~472ms to load)jquery-3.7.0.min.js(~375ms)toastify-js(~1,357ms)
Recommendation: Add defer to all non-critical scripts. jQuery and Toastify in particular have no reason to block initial paint. This alone could shave 1–2 seconds off the perceived load time.
2. 🔴 Fix Excessive Font Face Declarations & font-display: block
Impact: High
The page loads 617 @font-face rules, all using font-display: block. This causes an invisible text flash (FOIT — Flash of Invisible Text) while fonts load, directly harming the Largest Contentful Paint (LCP) score. The Font Awesome Pro kit via CDN is the primary contributor here, loading multiple icon font CSS files.
Recommendation:
Switch all
@font-facerules tofont-display: swap(oroptionalfor non-critical icons) so text remains visible during font loading.Audit which Font Awesome icon subsets are actually used and load only those, rather than the full Pro kit.
3. 🟡 Reduce Server Response Time (TTFB)
Impact: Medium
Time to First Byte (TTFB) measured at 465ms from the fetch start, with the full page load completing at 2,564ms. A healthy TTFB target is under 200ms. This is likely compounded by the site being hosted on Umbraco Cloud (shared infrastructure) without server-side caching tuning.
Recommendation:
Enable output caching / response caching at the Umbraco or CDN level for static and semi-static pages.
Consider adding a CDN layer (e.g. Cloudflare) in front of the origin to serve cached responses closer to the user and reduce latency.
4. 🟡 Add Missing Resource Hints & Preload Critical Assets
Impact: Medium
The page has preconnect hints for Google Fonts but no <link rel="preload"> declarations for any critical resources. The logo image (logo-genetools.png) — the only image on the homepage and the likely LCP element — has no preload, no width/height attributes, and no loading attribute set to eager.
Recommendation:
Add
<link rel="preload" as="image" href="logo-genetools.png">for the logo.Add
widthandheightattributes to the<img>tag to prevent layout shift (CLS).Add
alttext to the logo image (currently missing), which also affects accessibility scoring.
5. 🟡 Convert Images to Next-Gen Formats (WebP/AVIF)
Impact: Medium
The site currently serves the logo as a PNG (logo-genetools.png) with no WebP or AVIF alternative. Modern formats like WebP typically reduce image file size by 25–35% over PNG with equivalent visual quality, and AVIF can achieve even greater savings.
Recommendation:
Convert
logo-genetools.png(and any other images added in future) to WebP format.Use the
<picture>element with a WebP<source>and PNG fallback to maintain broad browser compatibility:
<picture>
<source srcset="logo-genetools.webp" type="image/webp">
<img src="logo-genetools.png" alt="Gene Tools logo" width="270" height="116">
</picture>
Summary Table
# | Recommendation | Category | Effort | Impact |
|---|---|---|---|---|
1 | Add | JavaScript | Low | High |
2 | Fix | Fonts/CSS | Medium | High |
3 | Improve TTFB via caching / CDN | Infrastructure | Medium | Medium |
4 | Preload critical assets & fix image attributes | Resource hints | Low | Medium |
5 | Convert images to WebP/AVIF | Images | Low | Medium |