HTTP Compression, CSS/JS Minification, Eliminate Render Blocking, and PageSpeed

Hey @vitaligent - thanks for bringing this up. These optimizations have been on our mind for awhile and in due time we’ll add things like gzip compression for more and more assets.

1 Like

Have you given any thought to CloudFlare in particular? This would also solve your lack of captcha issue. CloudFlare automatically adds captcha on the fly when it senses a visitor may be a spammer.

CloudFlare would also give you a better CDN.

Hi @brryant ! I have just discovered Webflow. It’s truly unique!

But after have clicked through different kind of public sites in your public library, I’m very doubtful about code weight optimisation. In fact, Google Pagespeed results are most quite low :confused:

As @vitaligent, I’m wondering if you are always on the run to put an minifying function for .css & .js.

Perhaps, I will considered moving from Wordpress to Webflow. ++

Hi @guyom, thanks for taking interest in Webflow! I’d like to expand on the somewhat nebulous topic of hosting here.

If you have a simple website, or multiple sites, there really isn’t a better hosting platform than Webflow for the price. I’d like to expand on this in a more detailed blog post at some point but here are just a few reasons why Google PageSpeed is not actually giving you a correct representation of a Webflow site’s end user performance and why Webflow’s hosting solution is the easiest and fastest solution for your users:

  1. Webflow puts all of your images, CSS, and JS on a Tier 1 CDN (Amazon AWS’s CloudFront). Massive websites like Pinterest, and Instagram use it to power their content delivery. What CDNs do is reduce the TTFB and TTLB (Time to First|Last Byte) significantly as your browser will now connect to the nearest geographical server (there are over 80 edge locations worldwide on Amazon’s CDN) to download the content. If you have massive images (you should be compressing them!) then this will greatly benefit your end users’s load time.

  2. Google Page Speed also dings Webflow sites for putting scripts in the browser. The most common type of scripts on Webflow sites are Modernizr and TypeKit/Google Fonts. Modernizr is required for IE9 support and Typekit/Google WebFonts are required if you have custom fonts on your page. This is really in the hands of you, the designer, as you can always use system fonts or choose to not support IE9 if you want to remove scripts in the <head>.

  3. Focus on end user load time instead, like DOMContentLoaded and the load event (fires in Chrome DevTools when all assets have been loaded). This gives you a much better representation of how quickly a site loads as it’s actually measuring the time it takes to display the page, as opposed to using vanity metrics like “minification” (which only saves a few KBs), and “Don’t put script tags in ” (which is required in most cases for browser compatibility and web fonts)

For example: check out this new Webflow site, geospaces.webflow.com. The DOMContentLoaded event fires around 250ms and the DOMReady event fires around 1.8 seconds. For you to achieve this kind of speed, you definitely need to CDN all of your assets. Minifying the CSS or Javascript will only provide microscopic improvements on end user page load time.

That said, we still do our very best to make sure your site has all of these options, as they are still important! Here is a snapshot of our new publishing options coming soon!

1 Like

@brryant Glad to read your quick and positive answer. WebFlow really seems to be a serious deal! I was very stunned by your handy and complete interface.


The point is: Google’s market shares are obviously too important to be ignored. So pagespeed results must be taken into consideration. The Google’s results page ranking depends of many factors and the mobile and desktop optimisation is one of them.

Second though your web hosting offer is powerful, many clients will not want to leave ours for many differents reasons (good or bad).

I really appreciate to see you are always searching and developing new useful options. Minimize .css code will surely give some precious points on Pagespeed final score.


Keep going this way, I’m convinced like many other web professionals you’re doing it right.

Guillaume
(sorry for my english, not my native language)


BONUS suport :smile:
Last week post on WPMUdev about Upfront, another serious Wordpress’s alternative.

[quote]
Although, of course, while Upfront itself might not ‘take over the world’™ (WPMU DEV’s competitors are talented, lean and aggressive) it sure as hell is as close as any to the solution that the platform needs to remain relevant over the next decade.

Alongside hosted, rather than self-hosted WordPress experiences (of course, one thing Automattic doesn’t talk about are the actual % of WP market share that they own), which is why Upfront is also fully Multisite ready – and will become even moreso as we go forward. But that’s another post.

Right now, I don’t think there is any argument as to how WordPress needs to progress, and Upfront is in that direction. [/quote]

will similar options be given to those who export their code, it would be nice to be given that feature as well especially as my sites are not currently hosted on web flow.

1 Like

Hi @Paul_Newbery - The only minification you can do is on your HTML by pressing Ctrl-O when the export modal comes up. This is currently to tackle issues with whitespace/newlines in the markup causing unexpected layout issues in the exported code.

We may be adding more exporting options later depending on users’ needs :smile:

I saw a popup today when logging in about new feature to minify css but didn’t see and don’t see any method to do this.

Hi @brryant,
You stated in 2) > you can always use system fonts or choose to not support IE9 if you want to remove scripts in the <head>

How do we remove both Google Webfonts and Modernizr from the head if we are hosting our websites with Webflow??

1 Like

I have never come across this Minify HTML before. On Mac (Command+O) brings up Open. Can you kindly clarify?

To get the minify html options it´s «ctrl o» not cmd. :slight_smile:

For those interested, here’s a great MOZ article on why TTFB and latency will improve your search ranking: http://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte

1 Like

It took me a long time to get eh PageSpeed score to 84/100. This is something I would ask the webflow team to improve as part of webflow’s options when exporting site.

However, my question is, how can I fix things that have to do with external scripts or other sources?? For example, I have jotform forms, and banners from bannerflow, and pagespeed suggests that I should fix those. I ask this here because I have been searching for hours and this has been very complicated for me to understand and fix. So if someone could please help me fix at least the critial and urgent suggestions from google that would be awesome so that I can increase the score.

Thanks!!

@brryant Hi Bryant, I truly believe CSS minification should be available to all users who are paying for hosting! It’ll easily help many users gain points on PageSpeed! CSS minification should be done regardless and should not even be an option, imo! There should be plans to have JS minification as well?

Is there any possibility of this happening? I am a personal user and $35 from $16 is an extremely high jump for someone who will only be building one or two sites!

Also, is there any update on this:

Hey @vitaligent - thanks for bringing this up. These optimizations have been on our mind for awhile and in due time we’ll add things like gzip compression for more and more assets.


Also, I appreciate your answer you provided above, and it makes great sense to me. However, like some of the participants have pointed out, Pagespeed scores cannot be ignored. I understand the how minimal the results can be when conforming to guidelines (I think webflow websites are amazingly fast), but because Google is taking this scores into helping them make ranking considerations, it completely changes the situation for us. If not yellows, is it possible to take care of the Red exclamations on that are being pointed out on the PageSpeed Tool?


Webflow.com itself is scoring super low, and although I don’t think your site loads slow at all, rankings today are very much based on load times and pagespeed ranks.



You guys have made an excellent product and continue to better it, and I hope we are able to make progress in this direction as well! Thanks!

1 Like

I followed up on the questions in this thread with a new topic here: How PageSpeed Actually Affects Your Google Rankings

1 Like

When looking around the Web at the loading of web fonts issue, I noticed that many coders use tricks to get the web fonts to load in after the page loads, which gives priority to performance.

A good example is here: Preventing the Performance Hit from Custom Fonts | CSS-Tricks - CSS-Tricks

Is there a way this can be done in Webflow.

It seems a shame to have to abandon web fonts, or create images of text in order to avoid being penalized for using web fonts.

2 Likes

Hi Bryant, I’ve gone through my page and changed all fonts back to Arial, but it’s still utilizing webfont.js. Is there an easy way to tell where I might be using a Typekit/Google Webfont?

@pizzaman - check your site’s font settings page and see if you have any Google webfonts added to your site there:

That did it. Thank you.

This was helpful.