3 tips for optimizing a Webflow sites Google PageSpeed score

What we learned while improving our Webflow page speed score.

This site is built entirely in Webflow. We love designing and building with it. We've wrote about using Webflow in the past, too. Check out our previous posts where we highlight [what we've learned while using Webflow](https://www.daily.co/blog/what-weve-learned-after-using-webflow-for-1-year), and [how we added code block and markdown functionality](https://www.daily.co/blog/code-blocks-and-markdown-with-the-webflow-cms) to our blogs Webflow CMS.

We received a great response to both of these posts and wanted to follow up with some more learnings. This time, we wanted to share how we optimized our [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/) score.

Hopefully this post helps you optimize your Webflow site.

# Previous Google PageSpeed Insights

Before we began optimizing our PageSpeed ranking we had a rather slow score of 51 on mobile. Our desktop ranking was pretty good, at 91. [Open this link](https://developers.google.com/speed/pagespeed/insights/) to check your PageSpeed score.

Our previous mobile PageSpeed score
Our previous mobile PageSpeed score

Like any site, mobile visitors are important to us, we want them to have the best experience possible. Furthermore, Google prioritizes mobile when indexing sites.

Google mobile first indexing notification
Google mobile first indexing notification

With this information in mind, it was clear to us that we'd want to improve our mobile score in hopes of improving our SEO performance. We wanted to get our mobile score into the "Fast" range (90–100).

# Improving your score

The Google PageSpeed results will give you recommendations of where you can improve. Things like, deferring offscreen images, minifying code, resizing images, using `@font-face` fall backs and more. These recommendations — or opportunities as Google calls them — will differ from page to page.

PageSpeed opportunities
PageSpeed opportunities for www.daily.co

For example `www.daily.co` may have a different ranking than a sub page like `www.daily.co/api/pricing`. So be sure to run tests on individual pages.

There were 4 main things we did to improve our ranking from a 51 to 90 (on mobile).

1. We deferred the load for all off screen images
2. We set a fallback font using `@font-face`
3. We set a timer to lazy load Intercom Messenger

Otherwise, we also made some small tweaks and improvements. For example, we minify all of our code, resize any image, and have created a custom sitemap.xml file. We're also trying our best to consistently add `title` and `alt` tags for accessibility.

## Deferring offscreen images

For `www.daily.co` Google recommended that we could save 2.5s by deferring offscreen images. An offscreen image is any image that sits "below the fold". Because we were focused on mobile optimizations that meant the majority of the images in our layout.

Unfortunately there is no native solution for this, in Webflow. But luckily, there's a great solution in the Webflow Community forums. I must send a huge thank you to community member, @matt50 for the well documented [solution they provide in this post](https://forum.webflow.com/t/integrate-lazy-loading-with-a-webflow-slider/38516/6).

Essentially, you'll add a script to your site and then give each image you'd like to lazy load a class of `lazyload` to each image that you'd like to have loaded, lazily.

Example of adding a lazyload class in Webflow
How to add a lazyload class in Webflow

## Fallback fonts

I'm embarrassed to say that we did not have a fallback typeface for our brand font, Graphik. It was bad practice not to include one.

To remedy this we added some fallback fonts to the Custom Code section of our project. We also are using `font-display:swap` which will render the fallback font immediately if Graphik has not fully downloaded. Learn more about `font-display`, from [Google](https://developers.google.com/web/updates/2016/02/font-display) and [CSS Tricks](https://css-tricks.com/font-display-masses/).

This is what our code looks like now.

    -- CODE language-markup --
   font-family: 'Graphik Medium', 'Helvetica', Arial, sans-serif;
      src: url('…/Graphik-Medium-Web.woff') format('woff');
      font-weight: 500;
      font-style: normal;
       font-display: swap;
    }

Your milage and goals may very. Using the `swap` value is not without an expense. Your users may see a flash of invisible text (FOIT). Choose a `font-display` value that is most appropriate to your needs.

## Speeding up our Intercom Messenger widget

Since launch we've use Intercom Messenger across all of our marketing webpages. It's helped us keep our customers happy and close deals; we're big fans.

To improve our PageSpeed score we set up our site to load our content and assets, first. We delay loading Intercom until after a page loads — this is only for our marketing pages.

On product pages — like a meeting join page — Intercom still loads in real time, so that users can chat with us much more quickly.

To modify the marketing pages, we added some code that loads Intercom 10s after the page has loaded. Incredibly, this helped us shave nearly 3s off our page load! My colleague, Kwin, describes how we implemented this update, below.

Kwin: The instructions for installing Intercom Messenger on a web page load Intercom as soon as the web page loads. The javascript sample code looks like this:

   -- CODE language-js line-numbers --
   //Set your APP_ID
   var APP_ID = "APP_ID";
   window.intercomSettings = {
       app_id: APP_ID
   };
   
   (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();

The first five lines just define your site's `intercomSettings`. The last (very long) line is an [IIFE, which stands for "immediately-invoked function expression"](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression). The syntax is a little confusing if you've never seen this pattern before. But it's just what it sound like — a function that is defined and then called right away in the same expression.

To delay loading the Intercom Messenger widget, all we need to do is call the IIFE function a little later, rather than "immediately."

Here's the sample code, modified to load Intercom Messenger ten seconds after our initial page load.

   -- CODE language-js line-numbers --
   //Set your APP_ID
   var APP_ID = "APP_ID";
   window.intercomSettings = {
       app_id: APP_ID
     };
     
   var startIntercom = function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}};
   
   setTimeout(startIntercom, 10*1000);

---

As mentioned at the top of the post, there's no specific set of guidelines or rules to follow here. Optimizing your site is very specific your site and each of its pages. For us we were able to get our mobile page ranking to a 92. Our desktop ranking rose to 99!

Improved Webflow PageSpeed score
Our improved mobile PageSpeed score of 92

I'll leave you with the following list of tools and tips. If you'd like more detailed tutorials or explanations we'd love to hear from you! Email us anytime, help@daily.co. Cheers, and thanks for reading.

- [ImageOptim](https://imageoptim.com/mac): a great tool for scaling down images on macOS, they also have an API
- [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- [Webflow Community](https://forum.webflow.com/) forums: good place to search and ask Webflow specific questions

Recent posts