This site — with the exception of our blog — is built entirely in Webflow. We love designing and building in Webflow. 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, and how we added code block and markdown functionality to our blogs Webflow CMS.
Our blog is now built on Ghost, more on that soon!
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 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 to check your 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.
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.
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).
- We deferred the load for all off screen images
- We set a fallback font using
- 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
alt tags for accessibility.
Deferring offscreen images
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.
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.
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 and CSS Tricks.
This is what our code looks like now.
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.
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". 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.
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!
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, email@example.com. Cheers, and thanks for reading.