Optimize web font loading code to improve load time and Google Page Speed score

Hi, it would be great if Webflow could take the advice of the Google Page Speed tool and optimize the loading of certain assets, specifically web font loading snippets.

With some hand coded sites, I've seen significant improvements in page load time by optimizing font loading scripts, either by late loading them, or at least moving them out of the <head> of the page so they aren't render blocking.

Perhaps there could be a global site setting for initial display font (the one that gets displayed with the web font is loading) as well.

One of our Webflow developed sites is getting a 48 mobile page speed score, which as you probably know is not good.

The desktop site, where load time optimizations aren't as crititcal, gets an 82 score.

 

Thanks!

  • Evan McDaniel
  • Feb 15 2018
Other
  • Post comment
  • Website Speedy commented
    28 Mar 07:40

    Hi there,

    It sounds like you’re facing some challenges with optimizing web font loading for better page speed, especially for mobile. You're absolutely right—moving font loading out of the <head> and using strategies like font-display: swap can significantly improve load times and the user experience.

    Here are a few things you could try:

    Use Font Loading Strategies: As you mentioned, using font-display: swap ensures that the fallback font is shown immediately while the web font is loading, which can help improve the page’s perceived load speed. Additionally, using font preloading can help prioritize critical fonts and load them faster.

    Defer Non-Essential Fonts: For fonts that are not critical for the initial page view, you can defer their loading until the page has rendered. This way, they won’t block the page from displaying content quickly.

    Optimize CSS and JS: Ensure that your CSS and JavaScript files are minimized and that you’re only loading the fonts you need. Consider bundling or deferring the non-essential scripts.

    If you’re looking for an easier solution, I’d recommend trying the Website Speedy app for Webflow. It’s designed to optimize your website's performance, including font loading, image compression, and Core Web Vitals improvements. It takes only a few minutes to set up and comes with a 14-day free trial.

    Check it here: https://webflow.com/apps/detail/website-speedy

    Attachments Open full size
  • Guest commented
    February 18, 2022 21:03

    You could use Async Javascript Loading from https://stacket.app/ in order to speed up your website.

    Attachments Open full size
  • +20

Related ideas