Optimize page performance
Reduce image, video, script, and CSS costs on Sprocket Rocket pages.
Measure the page before and after each change. Performance scores vary with content, HubSpot features, third-party scripts, network conditions, and the test device.
Measure with Sprocket Rocket AI
Sprocket Rocket AI can run Google PageSpeed Insights on a published page: scores for performance, accessibility, best practices, and SEO, the core speed metrics, and the audits that failed, worst first. Ask "how fast is this page?" on the page in Page Builder. It then fixes what it can on the page and names the fixes that belong to the theme or to HubSpot.
PageSpeed Insights only tests published pages. A draft can't be tested, so publish first. See Page settings and SEO.
It can also fix the SEO and accessibility findings that are page content:
- Meta descriptions and titles: see Page settings and SEO.
- Alt text: it looks at each image and writes alt text from what it sees. See Images and alt text.
- Internal links: it can search the site for related pages to link to, on portals with Content Hub Professional.
- Redirects: when a page moves, it offers redirects so old links don't end on an error page. See Domains and redirects.
Images
- Resize images to the largest dimensions at which they will be displayed.
- Compress images and use a suitable modern format.
- Lazy-load images below the first screen.
- Keep large background images and decorative media out of the mobile hero when they do not add useful information.
Video and animation
Prefer compressed video loops or CSS animation over large GIFs. Set media dimensions to prevent layout shifts. Do not autoplay heavy video above the fold unless it is necessary.
Marketing scripts
Audit tracking, chat, testing, and advertising scripts. Remove scripts the site no longer uses and load non-critical scripts after the main content where possible.
Advanced changes
Removing shared CSS or changing critical-loading behavior can break pages. Test all affected templates and keep a recovery path.
For an app-managed installation, use custom CSS or a cloned module where appropriate, and create a backup before changing files. Child themes are neither required nor recommended with the app.
If you use a Marketplace theme without the app, make source-file customizations in a child theme.