Why Audit Your HubSpot Site?
Your HubSpot site has been live for months or years. Multiple people have worked on it—agencies, freelancers, internal team members. Pages have been added, modules updated, and quick fixes applied. Everything seems to work, but you have a nagging feeling that things could be better.
You're probably right. Most HubSpot sites accumulate technical debt over time: performance issues that slow pages down, code quality problems that make maintenance difficult, and structural issues that limit what you can do. These problems compound quietly until they become serious enough to demand attention.
A comprehensive audit reveals what's actually happening under the hood. It identifies specific problems, quantifies their impact, and provides a roadmap for improvement. This guide walks through how to audit your HubSpot site for performance and code quality, what to look for, and how to fix what you find.
What You'll Need
Before starting your audit, gather the necessary tools and access:
HubSpot access. You'll need access to the Design Manager to inspect themes, templates, and modules. Super admin access is ideal, but content access with design tool permissions works.
Google PageSpeed Insights. Free tool from Google that analyzes page performance and provides specific recommendations. Test both mobile and desktop performance.
GTmetrix. Another free performance testing tool that provides detailed waterfall charts showing exactly what's loading and how long it takes.
Browser developer tools. Chrome DevTools or Firefox Developer Tools let you inspect code, test responsive design, and identify console errors.
Spreadsheet or note-taking app. You'll be documenting findings, so have a way to organize notes, screenshots, and action items.
Time. A thorough audit takes several hours. Block dedicated time rather than trying to squeeze it between other tasks.
Performance Audit
Start with performance because it's measurable, impacts user experience directly, and affects SEO rankings.
Step 1: Test Key Pages
Identify your most important pages: homepage, top landing pages, key service/product pages, and popular blog posts. Run each through Google PageSpeed Insights and GTmetrix. Test both mobile and desktop versions.
Record the scores and key metrics: PageSpeed score (0-100), Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), total page size, number of requests, and fully loaded time.
Don't panic if scores are low—most sites have room for improvement. You're establishing a baseline to measure against after fixes.
Step 2: Identify Performance Bottlenecks
Look at the detailed recommendations from PageSpeed Insights and the waterfall chart from GTmetrix. Common issues include:
Unoptimized images. Large image files are the most common performance killer. Look for images over 200KB or images served at much larger dimensions than displayed.
Render-blocking resources. CSS and JavaScript files that block the page from rendering until they load. These should be minimized, deferred, or loaded asynchronously.
Unused CSS and JavaScript. Loading entire libraries or frameworks when only a small portion is actually used. This adds unnecessary weight.
Too many HTTP requests. Each file—CSS, JS, image, font—requires a separate request. Too many requests slow down loading, especially on mobile.
No caching. Resources that could be cached aren't, forcing browsers to re-download them on every visit.
Large DOM size. Pages with thousands of HTML elements take longer to render and respond to user interactions.
Note which issues appear across multiple pages—these are systemic problems worth fixing at the theme level rather than page-by-page.
Step 3: Check Mobile Performance
Mobile performance is often significantly worse than desktop. Test your key pages on actual mobile devices if possible, or use Chrome DevTools device emulation.
Look for mobile-specific issues: images that aren't responsive or optimized for mobile, fonts that are too small or too large, touch targets that are too small or too close together, horizontal scrolling caused by elements wider than the viewport, and layouts that break on small screens.
Mobile performance matters more than desktop for most sites—mobile traffic typically exceeds desktop traffic, and Google uses mobile performance for rankings.
Code Quality Audit
Performance is what users experience. Code quality is what determines how easy your site is to maintain and improve.
Step 1: Review Theme Structure
Open your theme in HubSpot's Design Manager. Examine the overall structure: how are files organized? Is there a clear, logical structure, or is everything jumbled together?
Look for signs of good structure: modules in a dedicated modules folder, templates in a templates folder, global CSS in a dedicated stylesheets folder, consistent naming conventions, and clear file organization.
Red flags include: files scattered randomly with no organization, inconsistent naming (some files use hyphens, others underscores, others camelCase), duplicate files with similar names (hero-v1, hero-v2, hero-final, hero-final-2), and no clear separation between global and module-specific code.
Step 2: Audit Module Quality
Open several modules and examine the code quality. You don't need to understand every line, but look for patterns:
HTML quality: Is the markup semantic and well-structured? Are there proper heading hierarchies? Is there conditional rendering to handle empty fields? Are there empty elements or broken image tags?
CSS quality: Are styles scoped to the module with a unique class prefix? Is there a consistent naming convention? Are there inline styles that should be in the CSS file? Are there !important declarations everywhere (sign of specificity problems)?
JavaScript quality: Is JavaScript actually needed, or could it be done with CSS? Is the code clean and commented? Are there console errors? Is jQuery loaded just for simple tasks?
Field structure: Are fields well-organized in logical groups? Do they have clear labels and help text? Are there smart defaults? Are there too many fields (overwhelming) or too few (inflexible)?
Step 3: Check for Code Duplication
Look for duplicate or near-duplicate modules. If you have hero-1, hero-2, and hero-3 that are 90% identical, that's a maintenance problem. Each variation needs to be updated separately when changes are needed.
Check for duplicate CSS. Search for common class names across files. If the same styles are defined in multiple places, updates won't propagate consistently.
Look for duplicate JavaScript. If multiple modules load jQuery or other libraries, you're wasting bandwidth and slowing pages.
Step 4: Identify Technical Debt
Technical debt is the accumulated cost of shortcuts and quick fixes. Look for:
Commented-out code. Large blocks of commented code suggest uncertainty about what's actually needed. This clutter makes files harder to read and maintain.
Hardcoded values. Text, URLs, colors, or sizes hardcoded in templates or modules rather than made editable or defined as variables.
Inline styles. Style attributes in HTML rather than proper CSS classes. These are hard to maintain and override.
Missing documentation. No comments explaining complex logic, no README files, no module descriptions.
Deprecated code. Old modules marked as "old" or "deprecated" but still present in the theme, creating confusion about what should be used.
SEO and Accessibility Audit
Performance and code quality affect SEO and accessibility, but there are specific issues to check:
SEO Issues
Missing or duplicate title tags. Every page should have a unique, descriptive title tag. Check that templates properly implement title fields.
Missing or duplicate meta descriptions. Same as titles—every page needs a unique meta description.
Broken heading hierarchy. Pages should have one H1, followed by H2s, then H3s, etc. Check that modules maintain proper hierarchy.
Missing alt text on images. Every image should have descriptive alt text. Check that image fields in modules require or encourage alt text.
Broken internal links. Links to pages that no longer exist or redirect chains that hurt SEO.
Accessibility Issues
Insufficient color contrast. Text and background colors should meet WCAG contrast requirements. Use a contrast checker tool to verify.
Missing ARIA labels. Interactive elements like buttons and forms should have proper ARIA labels for screen readers.
Keyboard navigation problems. All interactive elements should be accessible via keyboard. Test by navigating with Tab and Enter keys only.
No focus indicators. When tabbing through a page, there should be clear visual indication of which element has focus.
Form accessibility. Forms should have proper labels, error messages, and validation that works with screen readers.
Responsive Design Audit
Test your key pages at different screen sizes to identify responsive design issues:
Use Chrome DevTools device emulation. Test at common breakpoints: 320px (small mobile), 375px (standard mobile), 768px (tablet), 1024px (small desktop), and 1440px (large desktop).
Check for horizontal scrolling. Pages should never scroll horizontally. If they do, something is wider than the viewport.
Test touch targets. Buttons and links should be at least 44x44 pixels for easy tapping on mobile devices.
Verify text readability. Text should be at least 16px on mobile. Check that line lengths aren't too long (60-70 characters is ideal).
Check image scaling. Images should scale properly without distortion or excessive file sizes on mobile.
Test navigation. Mobile navigation should be easy to use. Hamburger menus should open smoothly and be easy to close.
Browser Compatibility Check
Test your site in different browsers to catch compatibility issues:
Chrome (most common), Safari (especially on iOS—Safari behaves differently on mobile), Firefox, and Edge (if you have significant enterprise traffic).
Look for layout differences, broken functionality, console errors specific to certain browsers, and CSS features that don't work in older browsers.
Use caniuse.com to check browser support for CSS and JavaScript features you're using. If you're using cutting-edge features, ensure you have fallbacks for older browsers.
Documenting Your Findings
As you audit, document everything systematically. Create a spreadsheet with these columns:
Issue: Brief description of the problem.
Category: Performance, code quality, SEO, accessibility, responsive, or browser compatibility.
Severity: Critical (breaks functionality or severely impacts users), high (significant impact on performance or UX), medium (noticeable but not critical), or low (minor issue or nice-to-have improvement).
Location: Where the issue appears—specific pages, modules, or templates.
Impact: How this issue affects users, SEO, or maintenance.
Recommended fix: What should be done to resolve it.
Effort: Estimated time to fix—quick (under 1 hour), medium (1-4 hours), or large (4+ hours).
This documentation becomes your roadmap for improvements. It helps prioritize fixes and communicate issues to stakeholders or developers.
Creating Your Action Plan
With your audit complete and findings documented, create a prioritized action plan:
Quick Wins (Do First)
Start with high-impact, low-effort fixes. These provide immediate improvement without major investment:
Compress and optimize large images. Enable lazy loading for below-the-fold images. Remove unused CSS and JavaScript. Fix broken links and missing alt text. Add missing meta descriptions. Correct heading hierarchy issues.
These fixes often take a few hours total but can significantly improve performance and SEO.
High-Priority Issues (Do Next)
Address critical problems that significantly impact users or SEO:
Fix mobile responsiveness problems. Resolve major performance bottlenecks. Correct accessibility issues. Fix broken functionality. Address security or compliance issues.
These require more effort but are essential for a professional, functional site.
Code Quality Improvements (Ongoing)
Tackle technical debt and code quality issues systematically:
Consolidate duplicate modules. Refactor messy code. Improve documentation. Establish consistent naming conventions. Remove deprecated code.
These improvements make future work easier and cheaper. Tackle them incrementally rather than trying to fix everything at once.
Long-Term Enhancements (Plan Ahead)
Plan larger improvements that require significant investment:
Theme rebuild or major refactoring. Design system implementation. Performance optimization project. Accessibility remediation project.
These are strategic investments that pay off over time. Budget and plan them appropriately rather than rushing.
Measuring Improvement
After implementing fixes, re-run your performance tests and compare to your baseline:
PageSpeed scores should improve. Page load times should decrease. Number of HTTP requests should decrease. Total page size should decrease. Mobile performance should improve significantly.
Document the improvements to demonstrate ROI. A 20% improvement in page speed might translate to measurable improvements in conversion rates and SEO rankings.
Ongoing Maintenance
Auditing isn't a one-time task—it's an ongoing practice:
Quarterly performance checks. Test key pages every quarter to catch performance regressions early.
Code reviews for new work. Review new modules and templates before they go live to maintain quality standards.
Monitor Core Web Vitals. Use Google Search Console to track Core Web Vitals over time and identify pages that need attention.
Regular cleanup. Periodically remove unused modules, clean up old code, and consolidate duplicates.
Stay current. Keep up with HubSpot platform updates, browser changes, and evolving best practices.
When to Get Help
Some audit findings are straightforward to fix. Others require specialized expertise:
You can probably handle: Image optimization, content updates, minor CSS adjustments, adding alt text and meta descriptions, and fixing broken links.
You might need help with: Module refactoring, performance optimization, responsive design fixes, JavaScript debugging, and accessibility remediation.
You definitely need help with: Theme rebuilds, complex technical debt, security issues, and large-scale performance optimization projects.
Don't let perfect be the enemy of good. Fix what you can, and get professional help for the rest. A partially