No Login Data Private Local Save

Web Page Resource Analyzer - Online List Assets & Size

5
0
0
0

Web Page Resource Analyzer

Analyze any webpage to list all assets — CSS, JavaScript, images, fonts, media — with their sizes and types. Identify bloated resources and optimize your page load speed.

Resources with absolute URLs will have sizes fetched automatically.
0
Total Resources
0 B
Known Total Size
0
External Resources
0
Render-Blocking
Resource Type Distribution
Type ↕ Resource URL ↕ Size ↕ Status ↕ Origin ↕ Blocking ↕

No resources match your filter or search criteria.

Analyzed: | HTML size:
Frequently Asked Questions

A web page resource analyzer is a tool that scans a webpage's HTML and catalogs every external asset it references — including CSS stylesheets, JavaScript files, images, fonts, media files, and more. It reports each resource's type, URL, file size, and whether it may block page rendering. This helps developers and SEO specialists understand what contributes to a page's total weight and load time.

Due to browser security policies (CORS — Cross-Origin Resource Sharing), our tool cannot directly fetch the file size of resources hosted on third-party domains that don't permit cross-origin access. When you use a CORS proxy, most sizes can be retrieved. Resources on the same domain as the analyzed page are usually measurable. For pasted HTML with absolute URLs to CDNs (like jQuery CDN or Google Fonts), sizes are often fetchable since popular CDNs allow CORS.

Render-blocking resources are files that prevent the browser from displaying the page until they are fully loaded and processed. Typically, synchronous CSS files (linked in the <head> without media="print" or defer) and synchronous JavaScript files (without async or defer attributes) are render-blocking. Our tool flags these to help you identify optimization opportunities — consider inlining critical CSS, deferring non-critical JS, or using async/defer attributes.

A CORS proxy acts as an intermediary server that forwards requests to the target website and adds the necessary CORS headers to the response. This allows our browser-based tool to fetch content from any website without being blocked by cross-origin restrictions. We provide several preset proxy options (corsproxy.io, allorigins.win, codetabs.com). You can also use a custom proxy by selecting "Custom Proxy URL" and entering your own endpoint. The proxy only retrieves public web content and does not store any data.

The tool detects resources from HTML tags including: <link> (stylesheets, icons, preloads), <script> (JavaScript), <img> and <picture> (images, including srcset), <video> and <audio> (media), <source> elements, and <iframe>. With "Deep CSS scan" enabled, it also fetches external CSS files and parses url() references to discover fonts, background images, and other assets referenced in stylesheets.

While there's no strict limit, Google recommends keeping total page weight under 1.5–2 MB for optimal mobile performance. Pages exceeding 3 MB may see ranking penalties, especially for mobile search. Key targets: total page HTML + resources should load within 2.5 seconds on a 4G connection. Use this analyzer to identify oversized images (often the biggest culprit), unminified CSS/JS, and unnecessary third-party scripts that bloat your page.

Yes, you can analyze any publicly accessible website. The tool fetches the page HTML (via a CORS proxy if needed) and catalogs all referenced resources. Some websites with bot protection or CAPTCHAs may block automated requests. For websites behind authentication or paywalls, you can use the "Paste HTML" mode — simply copy the page's HTML source from your browser's DevTools and paste it for analysis. This bypasses any access restrictions.
🔧 Related Tools