Shopify Theme Load Speed Badge

WHAT IT DOES

Shopify Theme Load Speed Badge is a real-time performance monitoring tool that measures and grades your page load speed using industry-standard Web Vitals metrics. It calculates First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Time to Interactive (TTI), and full page load time using the Navigation Timing API and PerformanceObserver. The tool displays a floating badge with a letter grade (A through F) based on performance thresholds, making it instantly clear how fast your page loads. Click the badge to expand a detailed panel showing every metric with individual grades and color-coded indicators. The script also generates specific, actionable recommendations to improve performance—such as optimizing images, reducing JavaScript execution, and deferring non-critical resources. It automatically detects Shopify themes and provides Shopify-specific optimization tips, making it invaluable for Shopify store owners, developers, and anyone optimizing e-commerce sites for better conversion rates.

WHERE IT RUNS

This script runs on any website, not just Shopify sites. It operates entirely within your browser tab, using the browser's built-in Performance API to collect timing data from the page you're viewing. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including badge visibility and metric display preference—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically measures performance when you load any page. A floating badge appears in the bottom-right corner displaying your letter grade—green A for excellent, yellow B/C for average, orange D for slow, or red F for very slow. Click the badge to open the full analysis panel with a detailed breakdown of each metric, individual letter grades, and prioritized recommendations. Use the "Analyze Now" button to re-measure at any time. The panel also detects whether the page is built on Shopify and shows Shopify-specific optimization tips. You can toggle the floating badge on or off, switch between expanded and collapsed metric views, and copy the entire analysis report to your clipboard for sharing or documentation.

THE REAL MECHANISM

The script uses a dual-API strategy to collect performance metrics with maximum accuracy. First, it reads the Navigation Timing API via window.performance.timing to get fundamental metrics including domInteractive, domComplete, loadEventEnd, and network timing (DNS, connect, request, response). Second, it uses PerformanceObserver to capture paint timing entries (first-contentful-paint) and largest-contentful-paint entries, which provide the actual render timestamps as measured by the browser. For Total Blocking Time, the script queries longtask entries from PerformanceObserver and sums the duration of each task exceeding 50ms minus the 50ms threshold. If longtask entries aren't available, it estimates TBT from the difference between TTI and DOM Interactive. For Time to Interactive, the script calculates a weighted average of DOM Interactive, DOM Content Loaded, and full load time as a robust estimate. Each metric is graded against configurable thresholds derived from Google's Core Web Vitals recommendations. The overall grade is computed as the average of individual metric grades. The script detects Shopify by scanning for common Shopify DOM markers including data-shopify attributes, Shopify CDN links, meta tags, and script references.

THE PANEL

The Load Speed Badge panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more metrics and recommendations. Press the Escape key to collapse the panel instantly. The floating badge remains visible on the page even when the panel is closed, providing always-on performance visibility. Your panel position and badge visibility preference are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. Performance metrics are measured using the browser's built-in Performance API, which is available in all modern browsers. Some metrics like LCP and TBT may not be available on all pages or in all browser versions—the script gracefully handles missing data with estimates. The grade thresholds are based on Google's Core Web Vitals recommendations but can be adjusted in future updates. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your badge visibility and metric display preferences locally. No performance data, page content, or personal information is ever collected, transmitted, or shared.