Turning your webflow site into a rocket ship

Webflow is an amazing tool for creating websites. But it struggles with page speeds and download sizes. Lets fix that.

Webflow Starting Point

Before we start, here is the Webflow site we will be working with.
I’m using the Momentum Webflow template. It’s free.

https://webflow.com/templates/html/momentum-marketing-website-template

Without doing any optimizations, the Google page speed scores...

• Mobile 68
• Desktop 95

Webflow sites generally struggle with mobile performance. That’s kind of a problem when more than 50% of web traffic is on mobile devices and it’s also a major factor in SEO rankings.

Here is the site download size and speed in the browser. 3.1MB is pretty large for a simple landing page.

Now, lets take a look at how to turn this Webflow site into a rocket ship.

1. Host on Netlify

There are major benefits to exporting your webflow site and hosting it on Netlify.

• Netlify hosting is free.
• You can customize your source code for some major speed improvements.

Exporting your webflow site is very easy. Export your project in the webflow editor and then upload it to a Netlify site you’ve setup.

Important - CMS collections do not export with your site.

Speed Increases

Mobile +4 (72)

Desktop +2 (97)

2. Save Javascript Files Locally

Our source code is pulling in 2 javascript files from external URLS.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
...
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=62a8077833ce1b4eebd691d6" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

We can instead download these JavaScript files and reference them locally.

<script src="js/webfont.js" type="text/javascript"></script>
...
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>

Speed Increases

Mobile +3 (75)

Desktop +0 (97)

3. Lazy Load Images

Adding lazy loading to your images is a quick way to get a performance boost. So for every image tag, we will add…

<img src="..." loading="lazy" >

Important! - Don’t lazy load images that are visible on the screen when the page loads. Google will ding your speed score.

Speed Increases

Mobile +2 (77)

Desktop +0 (97)

4. Compress Images and Convert to webp Format

The first step is to convert the jpg and png images to webp. I’m using https://image.online-convert.com/convert-to-webp to do this.

There are hundreds of free image compression apps on the web. My personal favorites are https://www.iloveimg.com/compress-image and https://tinypng.com/.

Once the images are converted and compressed, add the webp files to your website folder and update your img tags to reference them.

<img loading="lazy" src="images/dash-device.webp"... >

Speed Increases

Mobile +2 (79)

Desktop +0 (97)

5. Save CSS Files Locally

In our source code, we have this javascript executing

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({  google: {    families: ["Gothic A1:300,regular,500,600,700,800"]  }});</script>

This script actually loads a CSS file containing the fonts for the site.

[@font](/font)-face {
    font-family: 'Gothic A1';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/gothica1/v13/CSR44z5ZnPydRjlCCwlCwOUKTZFstupOfBjNSl5zPnvB_dOjwqCu.0.woff2) format('woff2');
    unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}
...

We can remove the 2 script tags above and save this CSS file locally as fonts.css. Then we can add a link tag to pull in our new CSS file in the HTML.

<link href="css/fonts.css" rel="stylesheet" type="text/css">

Speed Increases

Mobile +4 (83)

Desktop +1 (98)

6. Save Fonts Locally

Our new fonts.css file has a couple of problems.

1. It’s pulling in the src for the fonts from an external url

src: url(https://fonts.gstatic.com/s/gothica1/v13/CSR44z5ZnPydRjlCCwlCwOUKTZFstupOfBjNSl5zPnvB_dOjwqCu.0.woff2) format('woff2');

2. It’s pulling in a lot of fonts that we don’t use. To be exact, it’s pulling in 552 fonts!!! The web page only uses 8 of those.

This is going to be the biggest optimization so far.

First, we can download the 8 fonts we actually use locally and then reference them in the fonts.css file.

[@font](/font)-face {
  font-display: swap;
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/CSR94z5ZnPydRjlCCwl6ac0oQNM8ru4reAXaTlFCBXrC-se62sS-fg.116.woff2) format('woff2');
  unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}

Second, we can remove the 448 other fonts referenced in the CSS file.

Speed Increases

Mobile +5 (88)

Desktop +2 (100!!!)

7. Add font-display:swap to Font Faces

We're still improving our font.css file. Google doesn’t like it when text is waiting for it's font to load in the browser.

An easy fix is to add font display swap to our 8 fonts in font.css

[@font](/font)-face {
  font-display: swap;
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/CSR94z5ZnPydRjlCCwl6ac0oQNM8ru4reAXaTlFCBXrC-se62sS-fg.116.woff2) format('woff2');
  unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}

Speed Increases

Mobile +1 (89)

Desktop +0 (100)

8. Add Height and Width to <img> Tags

Starting a couple of years ago, Google started to expect explicit heights and widths added on image tags. This reserves space for images before they load and prevents the page layout from jumping around as they are loaded.

However, this isn’t as easy as adding the height and width attributes to our img tags. If we set them explicitly, our images won’t be responsive anymore.

We can fix this by adding this CSS to all img tags.

img {
  max-width: 100%;
  height: auto;
}

Now we can add heights and widths to images and they will still behave responsively as the page gets smaller.

<img width="790" height="823" src="images/img-top.webp" ... >

Speed Increases

Mobile +4 (93)

Desktop +0 (100)

9. Asset Optimization in Netlify

Take a deep breath, we're almost done!

In the Netlify settings for our site, we need to turn on asset optimization.

This will do a couple of things.

1. Take all of our CSS files, minimize them and bundle them into 1 CSS file.
2. Take all of our JS files, minimize them and bundle them into 1 JS file.
3. Compress images again.
4. Urls will no longer have the .HTML extension, so your about page will be nice and pretty. example - wes.com/about

Speed Increases

Mobile +1 (94)

Desktop +0 (100)

Final Stats

It took a lot of work but we managed to increase our speed scores and download sizes dramatically.

Here's the before and after breakdown.

Before

Download size

Mobile Speed Score

Desktop Speed Score

After

Download size

Mobile Speed Score

Desktop Speed Score

Summary

That was a lot of work. I'm tired.

• ✅ Mobile Speed Score: 68 👉 94
• ✅ Desktop Speed Score: 95 👉 100
• ✅ Site transfer size: 3.1MB 👉 644KB
• ✅ Site load time: 827ms 👉 539ms

If you liked this article, please consider signing up for my newsletter. I send out articles on web design, web development, and freelancing once a month.

https://www.thefreelancedev.com/newsletter

You can also find me on Twitter https://twitter.com/thewebcraftsman

✌️ - Wes