<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=525392224501275&amp;ev=PageView&amp;noscript=1">

Website Optimization Checklist

Step-by-step guide including code snippets and examples to optimize your HubSpot CMS website and score an A on a GTMetrix website performance test, improve SEO, and boost conversions.

 
Scroll Down

All the Secrets to Scoring an A on GTMetrix

Thank you so much for checking out our Web Performance Checklist. Below you'll find all the tools, steps, and code we use to optimize our websites here at HIVE. We've also included some bonus SEO snippets and technical best practice guidance. We recommend you bookmark this page and use it any time you need to optimize a HubSpot website!

Tools

All the links you'll need to optimize your performance.

GTMetrix

Site performance grader

TinyPNG

Image converter and compressor.

Unpkg

CDN links for all npm plugins

jsDelivr

A free, fast, and automated CDN for open source

Google Fonts

Browse fonts and generate optimized embed codes for Google Fonts

How to Use this Checklist

The steps below are specific to HubSpot CMS websites utilizing a HubSpot theme. That being said, the concepts being applied here (which are talked about in more detail here), can be applied to other websites as well.

Header

  • Move all JS to footer
  • Import Font Awesome from CDN
  • Add Google Font optimization snippets
  • Add SEO snippet

Footer

  • Remove jQuery, add via HubSpot settings
  • Add global external resources 

 

Get Code
  • Add lazy load JS plugin via CDN in the footer
  • Add lazy load snippet to main.js file to apply effect to images and iframes within the body tag
  • Add SEO snippet
  • Make sure that the H1 is not set to content.name, add heading module if necessary
  • Add SEO snippet
  • Make sure that the H1 is not set to row.name
  • Load all external resources via CDN
  • Remove all links to Font Awesome

If using an external script

  • Include in require_js block with position="footer"
  • Include any calls to external script functions in the same require_js block, otherwise place JS in the module's JS area
  • Resize image files to largest possible size on screen
  • Save as .jpg if no transparency, otherwise use .png
  • Compress using TinyPNG

 

Code

base.html

<your theme>/templates/layouts/base.html

 

SEO Snippets

<your theme>/templates/blog-listing.html

<your theme>/templates/blog-post.html

 

 

External Resources

Resources

From the Experts at HIVE

Most Common Website Performance Issues & How to Solve Them

Website Optimization Tools and How to Use Them

How to Diagnose and Fix CLS to Optimize Website Performance

Innovative Marketing Ideas You'll Love: Simple Animations to Boost UX

Inbound Marketing Strategy: What are Pillar Pages and Topic Clusters?

Effective Education Marketing Strategies