RANKNIBBLER

Page Weight Analyser

Enter a URL to analyse page weight, HTML structure, inline assets, DOM complexity, and performance bottlenecks. The tool identifies exactly what is making your page heavy and generates a downloadable Word document with AI-powered recommendations to reduce bloat and improve load times.

What This Tool Checks

• HTML document size — is the raw HTML bloated beyond best practice?
• Inline SVGs — embedded SVG icons that should be in a sprite sheet
• Inline styles and scripts — CSS/JS that could be externalised and cached
• DOM element count — excessive nodes slow rendering and interaction
• Image count and lazy loading — too many images or missing lazy loading
• Form and input elements — excessive forms increase hydration time
• Product card detection — e-commerce pages rendering too many products
• Render-blocking scripts — external scripts without async/defer
• Shopify section analysis — identifies oversized theme sections
• Text-to-HTML ratio — low ratios indicate markup bloat

Why Page Weight Matters for SEO

Google uses Core Web Vitals as direct ranking signals. An oversized HTML document impacts all three metrics: Largest Contentful Paint (LCP) is delayed because the browser cannot render content until it has downloaded and parsed the HTML. Cumulative Layout Shift (CLS) increases when images without dimensions or dynamically loaded content causes the layout to jump. Interaction to Next Paint (INP) suffers when JavaScript must attach event listeners to hundreds of forms and buttons.

Beyond Core Web Vitals, oversized pages consume more of Google's crawl budget. If your homepage is 14 MB of HTML, Google spends disproportionate resources crawling it — potentially at the expense of your product pages, blog posts, and other content that drives organic traffic.

Common Causes of HTML Bloat

E-commerce Product Card Overload

The most common cause of oversized HTML on Shopify, WooCommerce, and Magento sites is rendering too many full product cards on a single page. Each product card typically includes images, variant selectors, add-to-cart forms, pricing, badges, and review widgets. When a homepage renders 100+ products with full markup, the HTML can easily exceed 10 MB. The solution is to limit products to 12-24 per page section and load variant forms on user interaction, not on page load.

Inline SVG Icon Overload

SVG icons embedded directly in the HTML cannot be cached by the browser. When every product card includes 15-20 inline SVG icons (star ratings, cart icons, arrows, badges), the total SVG markup can reach 2+ MB. Moving these to an SVG sprite sheet — downloaded once and cached — eliminates this bloat entirely.

Mega Navigation Menus

Large navigation menus that pre-render product cards, images, and full category trees in the HTML add hundreds of kilobytes to every page load — even though most visitors never open every dropdown. Lazy-loading menu panel content via JavaScript when the user hovers or clicks removes this dead weight from the initial HTML.

Excessive Inline CSS and JavaScript

Shopify themes and page builders often inject large blocks of CSS and JavaScript directly into the HTML rather than linking to external, cacheable files. While a small amount of critical CSS should be inlined for above-the-fold rendering, anything beyond 20-30 KB should be in external stylesheets.

How the Report Works

1. Fetch — the tool retrieves the raw HTML of your page, using multiple fallback methods to handle bot protection and firewalls
2. Analyse — client-side parsing counts every element type, measures inline asset sizes, detects e-commerce patterns, and identifies Shopify/WordPress theme sections
3. Detect issues — threshold-based rules flag problems as critical or warning, with specific evidence and best-practice benchmarks
4. AI insights — the analysis data is sent to Claude AI, which writes a tailored executive summary, performance impact assessment, and prioritised recommendations specific to your page
5. Generate report — everything is compiled into a professional Word document you can share with your team, developers, or clients

Who Is This Tool For?

• SEO professionals — generate client-ready performance audits in seconds
• E-commerce managers — identify why your Shopify or WooCommerce pages load slowly
• Web developers — pinpoint exactly which theme sections and inline assets are causing bloat
• Marketing teams — create evidence-based reports to justify performance improvements to stakeholders
• Agency teams — produce branded audit reports for client presentations

Frequently Asked Questions

What is a good HTML document size?

A well-optimised page should have an HTML document under 500 KB. Most content pages (blogs, landing pages, about pages) should be under 200 KB. E-commerce category pages with 12-24 products typically range from 200-500 KB. Anything over 1 MB indicates significant bloat that needs attention.

Why is my Shopify homepage so large?

Shopify themes often render full product cards — including add-to-cart forms, variant selectors, images, and review widgets — directly in the HTML for every product on the page. A homepage showing 100+ products can easily produce 10+ MB of HTML. The fix is to reduce the number of products shown and defer form rendering until user interaction. This tool identifies exactly which Shopify sections are the largest offenders.

Does page weight affect Google rankings?

Yes. Google uses Core Web Vitals — including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) — as ranking signals. Oversized HTML directly delays LCP and INP, which can lower your rankings. Google also allocates limited crawl budget to each site — bloated pages waste this budget.

What is the difference between this tool and Google PageSpeed Insights?

Google PageSpeed Insights measures load performance from Google's servers and provides general recommendations. This tool focuses specifically on HTML document analysis — breaking down exactly what is inside your HTML, how much space each component takes, and identifying specific elements (product cards, SVGs, forms, theme sections) that cause bloat. The downloadable Word report provides detailed, actionable findings you can share with developers.

Can I use this for competitor analysis?

Yes. Enter any public URL to analyse your competitors' page weight and structure. Compare their HTML size, DOM complexity, and inline asset usage against your own pages. Use the SEO Compare tool for a side-by-side comparison of on-page SEO factors.

Related Tools and Guides

• Free on-page SEO audit — comprehensive 30+ factor SEO analysis
• Site audit — crawl your entire site for SEO issues
• Website speed test — Google PageSpeed Insights integration
• How to reduce page load time — complete optimisation guide
• Core Web Vitals guide — understand LCP, CLS, and INP
• What is page speed? — why speed matters for SEO
• Lazy loading checker — verify images use lazy loading
• CSS/JS checker — identify render-blocking resources
• SEO compare tool — compare two pages side by side