Achieving Perfect Google Lighthouse Scores on HubSpot

Google Lighthouse is the industry-standard tool for measuring website quality. Achieving high Lighthouse scores on your HubSpot CMS site improves user experience, SEO rankings, and conversion rates.

Understanding Lighthouse Metrics

Lighthouse audits five key areas:

1. Performance (0-100)

Measures loading speed and runtime performance:

First Contentful Paint (FCP)

Largest Contentful Paint (LCP)

Total Blocking Time (TBT)

Cumulative Layout Shift (CLS)

Speed Index

2. Accessibility (0-100)

Evaluates how accessible your site is to all users:

Color contrast

ARIA attributes

Form labels

Alt text

Keyboard navigation

3. Best Practices (0-100)

Checks for modern web development standards:

HTTPS usage

Console errors

Image aspect ratios

Deprecated APIs

Security vulnerabilities

4. SEO (0-100)

Assesses search engine optimization:

Meta descriptions

Mobile friendliness

Crawlability

Structured data

5. Progressive Web App (0-100)

Evaluates PWA capabilities (optional for most sites)

Performance Optimization

Image Optimization

Images are often the biggest performance bottleneck:

1. Compress Images

bash

Use tools like:

TinyPNG

ImageOptim

Squoosh.app

2. Use Modern Formats

WebP for photos (90% smaller than JPEG)

SVG for logos and icons

Avoid PNG for photos

3. Implement Lazy Loading

html

4. Serve Responsive Images

html

srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"

sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"

src="large.jpg"

alt="Description"

/>

5. Set Proper Dimensions

Always specify width and height to prevent layout shift:

html

JavaScript Optimization

1. Minimize JavaScript

Remove unused code

Use tree-shaking

Split large bundles

2. Defer Non-Critical JavaScript

html

3. Avoid Render-Blocking Scripts

Load scripts asynchronously when possible

Inline critical JavaScript

Move scripts to bottom of page

4. Optimize Third-Party Scripts

Audit what's necessary

Load scripts conditionally

Use facades for heavy embeds (YouTube, Google Maps)

CSS Optimization

1. Minimize CSS

Remove unused styles

Combine stylesheets

Use CSS containment

2. Critical CSS

Inline critical above-the-fold CSS:

html

3. Avoid CSS @import

Use link tags instead:

html

Font Optimization

1. Use System Fonts

Fastest option - no download required:

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

2. Optimize Web Fonts

html

rel="preconnect"

href="https://fonts.googleapis.com"

/>

rel="preconnect"

href="https://fonts.gstatic.com"

crossorigin

/>

3. Font-Display Strategy

css

@font-face {

font-family: 'MyFont';

src: url('myfont.woff2') format('woff2');

font-display: swap; /* Show fallback immediately */

}

Core Web Vitals Optimization

Largest Contentful Paint (LCP) - Target: < 2.5s

Optimize images and videos

Improve server response times

Eliminate render-blocking resources

Use CDN (built into HubSpot)

First Input Delay (FID) - Target: < 100ms

Minimize JavaScript execution

Break up long tasks

Use web workers

Implement code splitting

Cumulative Layout Shift (CLS) - Target: < 0.1

Set dimensions for images and videos

Reserve space for ads and embeds

Avoid inserting content above existing content

Use transform animations instead of layout properties

Accessibility Optimization

Color Contrast

Ensure sufficient contrast ratios:

Normal text: 4.5:1 minimum

Large text: 3:1 minimum

Use tools like WebAIM Contrast Checker

css

/* Good contrast */

.text {

color: #333333;

background: #ffffff;

}

/* Poor contrast - avoid */

.text-bad {

color: #cccccc;

background: #ffffff;

}

Alt Text for Images

Always provide descriptive alt text:

html

Form Accessibility

1. Label All Inputs

html

Email Address

2. Add ARIA Labels When Needed

html

×

3. Provide Error Messages

html

type="email"

aria-invalid="true"

aria-describedby="email-error"

/>

Please enter a valid email

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

css

/* Visible focus indicators */

button:focus,

a:focus {

outline: 2px solid #0066cc;

outline-offset: 2px;

}

/* Don't remove outlines without replacement */

*:focus {

outline: none; /* BAD - never do this */

}

Semantic HTML

Use proper HTML5 semantic elements:

html

Title

...

Best Practices Optimization

HTTPS Everywhere

HubSpot provides automatic SSL, ensure:

All resources load via HTTPS

Update hardcoded HTTP links

Set HSTS headers (automatic on HubSpot)

Eliminate Console Errors

Check browser console for:

JavaScript errors

404s for missing resources

Mixed content warnings

Deprecated API usage

Proper Image Aspect Ratios

Prevent stretching or squishing:

css

.image-container {

aspect-ratio: 16 / 9;

}

.image-container img {

width: 100%;

height: 100%;

object-fit: cover;

}

Avoid Document.write()

Never use document.write() - it's blocking:

javascript

// Bad

document.write('');

// Good

const script = document.createElement('script');

script.src = 'ad.js';

document.body.appendChild(script);

SEO Optimization

Meta Description

Every page should have a unique meta description:

html

Mobile-Friendly

Ensure mobile viewport is set:

html

Crawlability

Check robots.txt and meta robots:

html

Structured Data

Add Schema.org markup:

json

{

"@context": "https://schema.org",

"@type": "WebSite",

"name": "ThemesMake",

"url": "https://themesmake.com",

"description": "HubSpot CMS expertise and themes"

}

HubSpot-Specific Optimizations

Module Optimization

1. Use Lazy Loading for Modules

Enable lazy loading for below-the-fold modules in HubSpot

2. Optimize Module CSS

Keep module styles minimal and scoped

3. Conditional Loading

Load resources only when modules are present

Template Optimization

1. Minimize Template Complexity

Keep templates simple

Avoid excessive nesting

Use includes efficiently

2. Optimize HubL

Cache expensive operations

Avoid unnecessary loops

Use built-in filters efficiently

Theme Optimization

Choose optimized themes like Realize that are built with performance in mind:

Clean, minimal code

Optimized images

Fast-loading templates

Mobile-first design

Accessibility built-in

Testing and Monitoring

Run Lighthouse Audits

1. Chrome DevTools

Open DevTools (F12)

Click Lighthouse tab

Select categories

Run audit

2. PageSpeed Insights

Test from Google's servers: https://pagespeed.web.dev/

3. Lighthouse CI

Automated testing in your deployment pipeline

Test on Real Devices

Lighthouse simulates conditions, but also test:

Real mobile devices

Different networks (3G, 4G, WiFi)

Various browsers

Different screen sizes

Continuous Monitoring

Set up monitoring:

Google Search Console

HubSpot Analytics

Third-party monitoring (Pingdom, GTmetrix)

Set up alerts for performance regressions

Common Issues and Solutions

Issue: Low Performance Score

Causes:

Large images

Too much JavaScript

Slow server response

Solutions:

Optimize images (WebP, compression)

Remove unused code

Enable caching

Use CDN (automatic on HubSpot)

Issue: Poor Accessibility Score

Causes:

Missing alt text

Poor color contrast

Missing ARIA labels

Solutions:

Add descriptive alt text

Fix contrast ratios

Add proper labels and ARIA attributes

Issue: SEO Issues

Causes:

Missing meta descriptions

Improper heading hierarchy

Non-mobile-friendly

Solutions:

Add unique meta descriptions

Fix heading structure (one H1, proper nesting)

Ensure responsive design

Real-World Example: Optimizing a HubSpot Page

Let's optimize a typical HubSpot landing page:

Before

Performance: 65

Accessibility: 78

Best Practices: 83

SEO: 88

Optimizations Applied

Compressed hero image (2MB → 200KB)

Implemented lazy loading

Fixed color contrast issues

Added missing alt text

Deferred non-critical JavaScript

Added meta description

Fixed heading hierarchy

After

Performance: 95

Accessibility: 100

Best Practices: 100

SEO: 100

Impact:

40% faster page load

25% improvement in conversion rate

Better search rankings

Conclusion

Achieving perfect Lighthouse scores requires attention to detail and ongoing optimization. Focus on:

Image optimization - Biggest impact on performance

Accessibility - Essential for all users

Clean code - Remove unused resources

Regular testing - Monitor and improve continuously

With HubSpot CMS and proper optimization techniques, 90+ scores across all categories are achievable. The Realize theme provides an excellent foundation for high-performing websites.

Start with quick wins (image optimization, alt text), then tackle more complex optimizations. Your users, search engines, and conversion rates will thank you.