B83%
Quality Score
4
Pages
100
Issues
7.7
Avg Confidence
8.0
Avg Priority
36 Critical55 High9 Medium
>_ Testers.AI
AI Analysis
John Lewis scored B (85%) with 100 issues across 7 tested pages, ranking #5 of 22 UK retail sites. That's 24 fewer than the 123.7 category average (77th percentile).
Top issues to fix immediately: "Cookie consent banner blocking page content and interaction" — Redesign the cookie consent banner to be non-blocking: either display it as a small, fixed notification at the bottom...; "Multiple critical network failures affecting page functionality" — Investigate and resolve the underlying HTTP/2 protocol errors and API failures: (1) Check server health and HTTP/2 co...; "Console Errors Indicate Systemic Resource Loading Failures Affecting P" — Conduct immediate infrastructure diagnostics: (1) Review HTTP/2 protocol configuration on server; investigate why mul....
Weakest area — accessibility (6/10): Basic accessibility present but areas for improvement include contrast ratios, alt text clarity, and keyboard navigation indica...
Quick wins: Improve color contrast ratios throughout, particularly in secondary text and navigation elements. Add more descriptive alt text to all product images for screen reader users.
Qualitative Quality
John Lewis
Category Avg
Best in Category
Pages Tested · 4 screenshots
Homepage
johnlewis.com
johnlewis.com
johnlewis.com
Detected Issues · 100 total
1
Cookie consent banner blocking page content and interaction
CRIT P10
Prompt to Fix
The cookie consent banner is currently implemented as a blocking modal that prevents users from viewing page content. Convert it to a non-blocking notification: 1) Move the banner to a fixed position at the bottom-right corner of the screen instead of center, 2) Remove the dark overlay that darkens the background, 3) Ensure the banner is compact (max height 120px) and only occupies about 30% of the viewport width, 4) Add a prominent 'Accept' button and 'Learn More' link that users can interact with without scrolling, and 5) Allow the banner to be dismissed with a visible close button. This lets users browse the site while still presenting consent options.
Why it's a bug
A modal cookie consent banner is displayed at the top of the page with a dark overlay, partially obscuring the main content. Users cannot see or interact with the primary page content (product images and sections) without first dismissing this banner. This creates a significant friction point that prevents users from browsing the site and accomplishing their goal of exploring products.
Why it might not be a bug
Cookie consent banners are legally required in many jurisdictions, so some form of disclosure is necessary. However, the implementation appears to block content interaction unnecessarily.
Suggested Fix
Redesign the cookie consent banner to be non-blocking: either display it as a small, fixed notification at the bottom or top corner of the screen that doesn't overlay main content, or implement a dismissible notice that allows users to browse while still presenting consent options. Alternatively, ensure the banner can be quickly dismissed with a prominent, easy-to-find close button or acceptance option.
Why Fix
Users expect to be able to browse a website immediately upon landing. A blocking consent banner creates friction and may cause users to abandon the site before engaging with products. Improving this will increase page usability and conversion rates.
Route To
Frontend Engineer / UX Engineer
Page
Tester
Mia · Usability TesterTechnical Evidence
Elements:
<div class='cookie-consent-modal'> with dark overlay, blocking main content areaConsole:
Multiple failed resource loads (ERR_HTTP2_PROTOCOL_ERROR, ERR_NAME_NOT_RESOLVED) suggest the page may be under stress, but the banner itself is clearly visible and blockingNetwork:
Failed to fetch recommendations and multiple HTTP/2 protocol errorsPage Text:
Cookie consent banner text visible at top of page2
Multiple critical network failures affecting page functionality
CRIT P10
Prompt to Fix
Investigate and fix the critical network errors affecting the John Lewis homepage. The logs show systematic HTTP/2 protocol errors and API failures. (1) Check server HTTP/2 configuration and fix any protocol-level issues causing ERR_HTTP2_PROTOCOL_ERROR. (2) Verify the /header/api/state endpoint is responding correctly and returning valid data. (3) Fix the Recommendations API endpoint that's returning fetch errors. (4) Implement proper error handling: when these APIs fail, the page should still be usable but display appropriate fallback content or error messages to users instead of silently failing. (5) Add monitoring/alerting for these critical API failures so issues are caught immediately.
Why it's a bug
The console logs show numerous ERR_HTTP2_PROTOCOL_ERROR failures, failed resource loads (404 errors), and critical API fetch failures including 'Header: error fetching initial data from /header/api/state', 'Recommendations: Fetch error', and 'Error: TypeError: Failed to fetch'. These indicate fundamental backend issues that are degrading the user experience. While the page may appear to load visually, core functionality (header state, personalized recommendations, potentially dynamic content) is broken or missing.
Why it might not be a bug
The page is still visually rendering and the cookie banner is present, suggesting some core resources loaded. However, the systematic nature of these errors indicates a significant infrastructure issue, not a minor visual glitch.
Suggested Fix
Investigate and resolve the underlying HTTP/2 protocol errors and API failures: (1) Check server health and HTTP/2 configuration. (2) Review API endpoint /header/api/state and personalization endpoints for availability and correct response codes. (3) Implement graceful error handling and user-friendly error messages when APIs fail instead of silently failing. (4) Add fallback content or loading states when personalization or recommendations fail to load. (5) Consider displaying a banner to users if core functionality is degraded.
Why Fix
These network failures directly impact the user experience and page functionality. Users may see incomplete personalization, missing recommendations, or broken features. This damages brand trust and can impact conversion rates. Critical API failures should never silently fail - users should be informed when functionality is unavailable.
Route To
Backend Engineer / DevOps / Site Reliability Engineer
Page
Tester
Sophia · Content Quality SpecialistTechnical Evidence
Console:
[ERROR] Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR, [ERROR] Header: error fetching initial data from /header/api/state: TypeError: Failed to fetch, [ERROR] Recommendations: Fetch error. Failed to fetchNetwork:
Multiple ERR_HTTP2_PROTOCOL_ERROR failures, /header/api/state endpoint failures, Recommendations API failures3
Console Errors Indicate Systemic Resource Loading Failures Affecting Page Functionality
CRIT P10
Prompt to Fix
Resolve systemic resource loading failures causing multiple HTTP/2 protocol errors and API fetch failures. The page console shows 16+ ERR_HTTP2_PROTOCOL_ERROR entries, a /header/api/state fetch error, and failed recommendations API calls. (1) Check HTTP/2 server configuration for protocol compliance issues, (2) Verify all API endpoints exist and return 200 status: /header/api/state, recommendations API with placement 'OSPHomePage1', (3) Implement graceful fallbacks for failed API calls so the page degrades gracefully rather than showing errors, (4) Add retry logic with exponential backoff for transient failures, (5) Set up monitoring for these endpoints with alerts when failure rates exceed thresholds, (6) Test the page load on different networks/clients to confirm whether this is environment-specific or widespread.
Why it's a bug
The console logs show extensive HTTP/2 protocol errors and resource loading failures affecting critical components: header state fetching ('Header: error fetching initial data from /header/api/state'), recommendations API ('Recommendations: Fetch error'), and multiple generic resource failures (at least 16+ ERR_HTTP2_PROTOCOL_ERROR entries). These aren't just technical backend issues—they directly impact user experience by preventing dynamic content loading, personalization features, and potentially breaking page structure. The 'Recommendations' API failure with 404 status is particularly concerning as it suggests missing endpoints.
Why it might not be a bug
These could be temporary server-side issues during testing or staging environments. However, the pattern and frequency suggest systemic problems that would significantly degrade the user experience if they occur in production.
Suggested Fix
Conduct immediate infrastructure diagnostics: (1) Review HTTP/2 protocol configuration on server; investigate why multiple requests are failing with protocol errors, (2) Verify the /header/api/state endpoint exists and is responding correctly, (3) Confirm the recommendations API endpoint and 'OSPHomePage1' placement are properly configured, (4) Implement request retry logic with exponential backoff for transient failures, (5) Add monitoring and alerting for these specific API endpoints, (6) Test with different client configurations to isolate whether this is client-side or server-side.
Why Fix
Multiple resource loading failures severely degrade page functionality and user experience. For an e-commerce platform like John Lewis, broken APIs mean customers cannot see personalized recommendations, headers may not load properly, and the page may appear incomplete or unresponsive. This directly impacts conversion rates and brand perception of reliability.
Route To
Backend Infrastructure / DevOps Engineer
Page
Tester
Sophia · Content Quality SpecialistTechnical Evidence
Console:
[ERROR] Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR, [ERROR] Header: error fetching initial data from /header/api/state: TypeError: Failed to fetch, [ERROR] Recommendations: Fetch error. Failed to fetchNetwork:
Multiple ERR_HTTP2_PROTOCOL_ERROR failures; 404 error on unspecified resource; /header/api/state endpoint failure