Performance Guide: Speed, Size & Core Web Vitals
Everything you need to know about feedback tool performance: script size, load times, Core Web Vitals impact, and how to ensure your tool doesn't hurt your site speed or SEO rankings.
Why Performance Matters
Every script you add to your site affects performance. Feedback tools are no exception. A poorly optimized script can cause serious problems:
Slow Page Loads
Adds hundreds of milliseconds to load times
Hurt CWV Scores
Damages your Core Web Vitals metrics
SEO Rankings Drop
Google uses CWV as a ranking factor
Higher Bounce Rates
Users leave slow sites
Mobile Bandwidth
Consumes unnecessary data
Main Thread Blocking
Makes your site feel sluggish
The Performance Principle
A feedback tool should never be the reason your site is slow. If you can't measure the tool's impact, it's performing correctly.
Script Size: The <10KB Target
Script size is the most fundamental performance metric for third-party scripts. Smaller scripts download faster, parse faster, and execute faster.
Why 10KB is the Magic Number
What Affects Script Size
| Factor | Impact | Optimization |
|---|---|---|
| Framework choice | High (React adds ~40KB) | Use vanilla JS or Preact (<4KB) |
| Dependencies | High (each adds weight) | Minimize external deps, audit regularly |
| CSS approach | Medium | Inline critical CSS only, no frameworks |
| Feature scope | Medium | Load features on demand |
| Compression | High (60-80% reduction) | Always use gzip/brotli |
| Tree shaking | Medium-High | Remove unused code at build |
Edge Decisioning: The <50ms Target
"Edge decisioning" refers to making targeting decisions (should this survey show?) as close to the user as possible, typically on CDN edge servers rather than origin servers.
✗Traditional Approach (100-500ms)
✓Edge Decisioning (<50ms)
Faster Display
Almost instant
Non-Blocking
No main thread
Better UX
Right moment
Less Origin Load
Edge handles it
Core Web Vitals Impact
Core Web Vitals are Google's metrics for user experience, and they directly affect SEO rankings. Here's how feedback tools can impact each:
Largest Contentful Paint
Feedback tools rarely affect LCP because they're not usually the largest element. However, a blocking script could delay LCP by preventing other resources from loading.
Interaction to Next Paint
Heavy JavaScript execution blocks the main thread, preventing the browser from responding to user input. This is where many tools fail—they do too much work synchronously.
Cumulative Layout Shift
This is where tools commonly cause problems. A tool that appears and pushes content around creates layout shift. This is the most common performance issue with feedback tools.
CLS Best Practices for Feedback Tools
SEO Implications
Google has made clear that performance affects rankings. Here's how script performance connects to SEO:
Direct Ranking Factors
- Core Web Vitals:LCP, INP, CLS are confirmed signals
- Page Experience:Overall UX affects rankings
- Mobile Performance:Mobile-first indexing prioritizes mobile CWV
Indirect Effects
- Bounce Rate:Slow pages lose visitors fast
- Time on Page:Performance issues reduce engagement
- Crawl Budget:Slow pages get crawled less often
Loading Strategies
How you load a script matters as much as the script's size. Here are the main strategies:
1. Async Loading
The script loads in parallel with other resources and doesn't block rendering:
<script async src="https://widget.example.com/script.js"></script>2. Defer Loading
The script loads in parallel but executes after HTML parsing:
<script defer src="https://widget.example.com/script.js"></script>3. Lazy Loading (On Interaction)
The script only loads when the user interacts:
feedbackButton.onclick = () => {
const script = document.createElement('script');
script.src = 'https://widget.example.com/script.js';
document.body.appendChild(script);
};4. Idle Loading
The script loads when the browser is idle:
requestIdleCallback(() => {
const script = document.createElement('script');
script.src = 'https://widget.example.com/script.js';
document.body.appendChild(script);
});Recommended Approach
For most sites, async loading with a well-optimized script provides the best balance. Combine with preconnect hints for even faster loading:
<link rel="preconnect" href="https://widget.example.com"> <script async src="https://widget.example.com/script.js"></script>
Competitor Comparison
How do popular feedback tools compare on performance?
| Tool | Script Size | Load Time | CWV Impact | Notes |
|---|---|---|---|---|
| Hotjar | ~80KB+ | ~800ms | Moderate-High | Includes heatmaps & recordings |
| Intercom | 200KB+ | 1-2s | High | Full messaging platform |
| Qualaroo | ~40KB | ~400ms | Low-Moderate | Survey-focused tool |
| Survicate | ~35KB | ~350ms | Low-Moderate | Survey-focused tool |
| ValerieBest | <10KB | <50ms | None | Feedback-optimized |
Why Hotjar is Heavier
Hotjar bundles heatmaps, session recordings, and surveys into one script. If you only need surveys, you're loading ~800ms of unused code and 0.47MB to page weight.
Why Valerie is Lightest
Built specifically for feedback collection with performance as a primary constraint. No framework, minimal dependencies, edge-optimized from the ground up.
Measuring Impact
Don't assume your tool is fast—measure it. Here are the tools and approaches:
Before/After Comparison
- Performance score
- Time to Interactive
- Total Blocking Time
- Core Web Vitals
Network Panel Analysis
- Script download size
- Download time
- Additional requests
- TTFB
Performance Panel
- Script parse time
- Execution time
- Main thread blocking
- Layout shifts
Real User Monitoring
- Field CWV data
- Device variation
- Regression tracking
Optimization Checklist
Use this checklist when evaluating a feedback tool:
Script Optimization
- Script size <10KB gzipped
- No unnecessary dependencies
- Code is minified and tree-shaken
- Uses modern compression (brotli/gzip)
- No large framework (React, Vue, Angular)
Loading Optimization
- Loads asynchronously (async or defer)
- Served from CDN with edge locations
- No blocking API calls during init
- Supports preconnect hints
- Decisions made at edge, not origin
Runtime Optimization
- Minimal main thread blocking (<50ms tasks)
- No forced synchronous layouts
- Efficient event listeners (debounced)
- Clean memory management (no leaks)
- Yields to main thread frequently
Layout Optimization
- Uses fixed positioning (no CLS)
- No content injection that moves elements
- Consistent tool dimensions
- Smooth animations (CSS transforms only)
How Valerie Achieves Zero Impact
Valerie is built with performance as a core constraint, not an afterthought:
📦Script Architecture
- <10KB gzippedCore script under 10KB compressed
- No frameworkBuilt with vanilla JavaScript
- Tree-shakingOnly includes code you use
- Minimal depsZero external runtime dependencies
🚀Loading Strategy
- Async by defaultNever blocks page rendering
- Global CDNEdge locations worldwide
- Preconnect supportDNS/connection established early
- Edge decisioningTargeting at the edge
⚡Runtime Behavior
- <50ms initReady almost instantly
- Minimal main threadHeavy work offloaded
- Efficient updatesOnly re-renders changes
- No long tasksAll tasks <50ms
🎨Layout Impact
- Zero CLSFixed positioning only
- CSS transformsSmooth animations
- Consistent dimensionsNo resize shifts
- Shadow DOMStyles isolated
Performance Guarantee
Valerie is designed to have zero measurable impact on your Core Web Vitals. If you can measure a performance regression after adding Valerie, we want to know about it.
Frequently Asked Questions
Related Resources
Fast Feedback Without the Performance Cost
Valerie's script is under 10KB with <50ms edge decisioning—zero impact on Core Web Vitals. Collect feedback without slowing down your site.