Skip to content
DocsCritical CSSUnderstanding the Visual Similarity Score
Critical CSS

Understanding the Visual Similarity Score

Learn how PerfBee's visual similarity score helps you ensure your critical CSS is correctly applied, improving your website's speed and user experience. Understand the score's components, threshold, and how to troubleshoot low scores.

3 min readUpdated Mar 9, 2026

Understanding the Visual Similarity Score

Ensuring your website renders correctly with critical CSS is crucial for a fast and optimized user experience. PerfBee's Critical CSS feature includes a Visual Similarity score to help you validate that your extracted critical CSS accurately represents your above-the-fold content. This article explains how the score works and how to interpret the results.

What the Visual Similarity Score Measures

The Visual Similarity score is a percentage that compares two screenshots of your webpage: one rendered with the full CSS and another rendered with only the inlined critical CSS. It quantifies how similar the two renderings appear to the human eye. A higher score indicates a more accurate representation of your page's design with the critical CSS applied. The score is calculated using a combination of methods.

How the Score Works

PerfBee employs a sophisticated method to calculate the Visual Similarity score:

  • Screenshot Comparison: We capture screenshots of your webpage rendered with both full CSS and the extracted critical CSS.
  • PSNR (Peak Signal-to-Noise Ratio): This metric measures the quality of a reconstructed image compared to the original image.
  • Pixel-based Comparison: We also perform a pixel-by-pixel comparison of the two screenshots.
  • Combined Score: The final score is an average of the PSNR and pixel-based comparison results, resulting in a percentage score between 0 and 100%.

The goal is to ensure the page looks as close as possible to the full-CSS version, even with only critical CSS applied initially.

Interpreting the Score

A Visual Similarity score of 85% or above is generally considered safe. This means that the critical CSS extraction has successfully captured the essential styles needed for above-the-fold rendering. A score below 85% indicates potential issues with the critical CSS extraction.

Troubleshooting a Low Score

If your Visual Similarity score is below 85%, it indicates that the extracted critical CSS might be missing some crucial styles. Here's how to improve it:

  1. Check Your Critical CSS Settings: Navigate to the PerfBee dashboard and review your Critical CSS configuration.
  2. Adjust Preset Settings: Experiment with the preset options. Try enabling extractInlineStyles and disabling ignoreKeyframes.
  3. Re-Extract Critical CSS: After adjusting your settings, re-extract the critical CSS for your page.
  4. Monitor the Score: Check the new Visual Similarity score to see if it has improved.

Why Not Always 100%?

It's important to understand that the Visual Similarity score will rarely reach 100%. Differences in fonts, animations, and dynamic content can cause slight variations between the two renderings. The score is designed to give you a reliable indicator of whether your critical CSS is effectively applied, not to guarantee pixel-perfect matching. Even a score in the high 80s or 90s is usually excellent.

By understanding and utilizing the Visual Similarity score, you can ensure that your website's critical CSS is correctly implemented, leading to improved page speed and a better user experience. For more detailed information on critical CSS and other features, visit our documentation.

Back to DocsWas this helpful? Contact support