How to use Client-Side Performance Profiler
This is the Client-Side Performance Profiler utility. 100% client-side and offline capable.
Analyze any website's performance using browser-native APIs - 100% private, no data sent anywhere
Drag the button below to your bookmarks bar. Then visit any website and click it to analyze performance!
Drag me to your bookmarks bar!
Drag the "Profile This Page" button to your browser's bookmarks bar
Navigate to the website you want to analyze (e.g., your own site, competitors, etc.)
Click "Profile This Page" in your bookmarks bar to run the profiler
A panel appears with scores, metrics, and optimization suggestions
If you can't add bookmarklets, copy this script and paste it into DevTools Console (F12) on any page:
(function(){var s=document.createElement('script');s.src='https://tools.7scribes.com/wp-content/themes/7ss%20Tools/assets/js/tools/performance-profiler-inject.js?v='+Date.now();document.body.appendChild(s);})();
Want to see how it works? Click below to run the profiler on this page:
Overall 0-100 score based on load speed, JS execution, layout stability & more
LCP, CLS, FID/INP, FCP, TTFB - all the metrics Google cares about
See all JS, CSS, images, fonts with sizes, load times & blocking status
Node count, depth analysis, heavy elements detection
Heap usage monitoring and real-time FPS tracking
Actionable recommendations to improve performance
This is the Client-Side Performance Profiler utility. 100% client-side and offline capable.
Our Performance Profiler is a bookmarklet-based tool that lets you analyze any website's performance directly in your browser. Unlike Lighthouse, which requires a browser extension or CLI tool, our profiler works via a simple bookmarkβjust drag it to your bookmarks bar and click it on any page. It uses browser-native Performance APIs (no external services) to measure Core Web Vitals, resource loading, DOM complexity, and JavaScript execution in real-time.
Installation is simple: 1) Drag the "Profile This Page" button to your browser's bookmarks bar. 2) Navigate to any website you want to analyze (your own site, competitors, Amazon, etc.). 3) Click the bookmarklet in your bookmarks bar. 4) A sleek overlay panel appears showing performance scores and metrics. You can drag the panel around, switch between tabs, and export results as JSON.
Yes! That's the main advantage of this tool. Once you have the bookmarklet installed, you can analyze any website you can visitβyour own sites, competitor pages, e-commerce stores, news sites, anything. The profiler runs entirely in your browser, so there are no restrictions on which domains you can analyze. This makes it perfect for competitive analysis and benchmarking.
The profiler measures: Core Web Vitals (LCP, FCP, CLS, TTFB), Page Load Timing (DNS, TCP, SSL, DOM Ready), Resource Analysis (JS/CSS/Image sizes and load times), DOM Complexity (node count, depth, heavy elements), Long Tasks (JavaScript blocking the main thread), and Memory Usage (Chrome only). All metrics are combined into a 0-100 Performance Score with breakdown by category.
The overall score (0-100) is a weighted average: Load Speed (30%) based on page load time, JS Execution (25%) based on long task duration, Layout Stability (15%) based on CLS score, Memory Usage (10%) based on heap utilization, and Best Practices (20%) based on DOM size and resource optimization. Scores are color-coded: green (90+), yellow (50-89), red (below 50).
Yes! The "Tips" tab shows actionable recommendations based on detected issues. Examples include: "Reduce JavaScript Bundle" if JS exceeds 300KB, "Reduce DOM Size" if nodes exceed 1500, "Fix Layout Shifts" if CLS is above 0.1, "Improve LCP" if Largest Contentful Paint exceeds 2.5 seconds, and "Lazy Load Images" if many images lack the loading="lazy" attribute. Each suggestion includes specific guidance.
Yes! Click the "Export JSON Report" button at the bottom of the profiler panel to download a complete JSON file containing the URL, timestamp, performance score, all metrics, resource count, and optimization suggestions. This is perfect for documentation, sharing with team members, tracking performance over time, or integrating into CI/CD pipelines.
100% Private. The entire profiler runs in your browser using native Performance APIs. No data is ever sent to any serverβnot the URL you're analyzing, not the metrics collected, not the page content. There's no Google API, no Lighthouse backend, no analytics tracking. This makes it completely safe for analyzing internal tools, staging environments, password-protected pages, or any confidential web applications.
The bookmarklet is designed primarily for desktop browsers (Chrome, Firefox, Edge, Safari, Brave). While some mobile browsers support bookmarklets, the profiler overlay is optimized for larger screens. For mobile performance testing, we recommend using the profiler on a desktop browser while testing responsive layouts, or using Chrome DevTools' mobile emulation mode.
The profiler works in all modern browsers: Chrome, Edge, Firefox, Safari, Brave, and Opera. Full functionality (including memory monitoring) is available in Chromium-based browsers (Chrome, Edge, Brave, Opera). Firefox and Safari support all features except memory usage tracking, which uses Chrome's proprietary performance.memory API.