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

High Performance HubSpot Sites with Asynchronous CSS Loading

by Joe Rapier on December 1, 2017

We recently had some clients who wanted to get more speed out of HubSpot, but after going through our usual image optimization techniques and concatenating files they still weren't satisfied. We dug around and found out we could load CSS files asynchronously so that page rendering isn't blocked while the stylesheet loads. Here's how to do it:

  1. Load the stylesheet like this:
    <link rel="preload" href="link-to-stylesheet-here" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
  2. You'll notice the link tag uses some JavaScript to change the rel to stylesheet on load, so you need to use this code as a backup for when JavaScript is disabled:
     <noscript><link rel="stylesheet" href="link-to-stylesheet-here"></noscript>
  3. Next, copy the LoadCSS script from here and inline it in a script tag right below the link and noscript tags like this:
    <script>
    /*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
    (function(){ ... }());
    </script>
  4. Remove the stylesheet from HubSpot's internal linking tool (check both content settings and the template for this) so the stylesheet isn't loading twice.
  5. Use this tool to get the critical CSS for the above the fold content, and inline that CSS in a style tag at either template or page level. The tool isn't perfect and seems to include extra CSS from below the fold, but if you don't want to gather that CSS yourself it'll get the job done.
  6. Make sure your inline CSS is minified. Try minifier.org.
  7. The final result will look like this:
    <link rel="preload" href="link-to-stylesheet-here" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
    <noscript><link rel="stylesheet" href="link-to-stylesheet-here"></noscript>
    <script> /*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */ (function(){ ... }()); </script>
Design Manager   HubSpot

 

LoadCSS is a polyfill that allows us to load CSS asynchronously across all browsers. You can find the documentation here.

Topics: HubSpot COS

Are you using HubSpot for your marketing?

There are two broad categories of HubSpot users: those who use it as a supplement to their marketing efforts and those who dive in and host their entire marketing suite on HubSpot. We have found in our experience that companies whose websites are hosted on HubSpot have more inbound marketing success. This is because HubSpot’s templates are built to help you succeed.

Check out this free guide to see how easy switching to HubSpot can be!

Migrating Your Awesomeness To Hubspot Is Really This Easy

Is your conversion strategy optimized?

Converting visitors into users sounds easy right? But we all know how hard that actually is. No matter how great your product is, if visitors don’t understand it they won’t become users. The most important thing you can do to get conversions is to be intentional by having conversion strategy in place. Stay on top of the game with The Ultimate Conversion Optimization Checklist. Using this checklist, you will discover best practices for driving traffic to your site and successfully converting traffic into users. 

Fill out the form below to get your own checklist and start boosting your conversion!  

We made this checklist to help you convert random web traffic into clients!

Join The Conversation!