Streaming live at 10am (PST)

Exported Code Optimisation Tips and Feedback


#1

I recently exported my website after having finished it.
Here it is: https://preview.webflow.com/preview/webimo?preview=63466f63cecd48e1f5de58f1cbe7a6d4

I wasn't happy with the size it came out (255 KB), so I just thought I'd post to say the Optimisation is questionable and here's what I've done so far to reduce the file size. FYI, THESE ARE DESIGNER FRIENDLY METHODS.

  • I used http://csscompressor.com/ to reduce the normalize.css from 8 KB to 2 KB.

  • I used various "PNG Compressors" to reduce the image file sizes of images webflow generated for me? I don't even know why. (Can someone fill me in?) My original image was 6 KB, and the two images generated were 17 and 10 KB, which I reduced to 11 and 5 KB.

  • Depending on your index.html file size, you could also optimise that using a tool such as http://minifycode.com/html-minifier/. Additionally, you could remove the webflow related meta code in the header.

  • I have merged the two webflow css files, and have removed all unnecessary code. It totals 2342 lines of code at 50 KB. After completing this process, the merged file is 13 KB with roughly 900 lines. If this process would take to long for you, simply using https://css.github.io/csso/csso.html.

  • Likewise, the webflow.js is 151 KB and I'm removing all unnecessary code, will update as well. If you don't want to remove unnecessary code, simply using http://javascript-compressor.com/, I reduced the file size from 151 KB to 70 KB. Considering I only have 8 interactions, the 4347 lines of js code seems a little excessive.

I haven't finished compressing, but in about 5 minutes, I've gone from 255 KB to 118 KB. Which is still not up to my standards, but is definitely better :slight_smile:

UPDATE:

  1. All webflow projects begin with a 146 KB js file, and a 37 KB CSS file.
  2. Interactions are added onto the js file, starting from line 4332.

Kind Regards, Paul


#2

no. You need to run all the code through an optimizer.

Normally... I also gzip the source.

I had seen a post (from Webflow) saying a recent update added only the utilized js code.

I haven't had the time to check if this was implemented though.

Easiest way is to export 2 different (various size) projects and check the file sizes.


#3

As for the images... I have a folder with my originals - resized to the appropriate device.

They are pre-optimized - so even though Webflow creates the multi-device images for me

I just over right them with my own. It's an added step for me after export.


#4

Hey @Revolution,

I'll go right ahead and export another project and test the js sizes, thanks for the idea!
EDIT: A completely blank slate site, begins with an 146 KB js file :open_mouth: and a 37 KB CSS file.

Ah okay, I might have to replace the images they generated, thank you again.

I've never used Gzip but I'll see if I can get it going.

Cheers, Paul


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.