Streaming live at 10am (PST)

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


#1

Are there any plans to improve PageSpeed scores by minifying CSS and JS assets? I also noticed you don't appear to be running mod_deflate. As it stands, Webflow pages score in the mid-50s on mobile for PageSpeed. Google punishes sites with bad scores.

I use Webflow for PPC landing pages for several clients, and it would help me pay less per click if my pages have a better PageSpeed score. It also means I'm less likely to move off the $5/month hosting option.

If you're feeling especially ambitious, you might consider implementing automatic image resizing and lazy loading. I'm using CloudFlare for all of the above, and I'm sure they'd love to work with Webflow.

My fellow Webflowers - I call upon you to run your site through PageSpeed and then click the little heart button in this thread to show the folks at Webflow that PageSpeed matters to you, too. Thanks!


Eliminate render-blocking JavaScript and CSS in above-the-fold content
Eliminate render-blocking JavaScript and CSS
Why is webflow creating my site with a script in the head before the css?
Help Eliminate render-blocking JavaScript and CSS in above-the-fold content
Options to edit default head and footer code?
Just with nav bar Google Speed is 67-100
Google analytics speed improvements
Render-blocking JavaScript and CSS
2017 Eliminate render-blocking JavaScript and CSS in above-the-fold content
Google will now make page speed a ranking factor from July
Eliminate render-blocking JavaScript and CSS
Remove Render-Blocking JavaScript From Your Website
Page Load Speed
Top head code problems
Render blocking javascript
Optimizing images for Google & removing render blocking Java Script
Render Blocking CSS and Browser Caching
#2

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.


#3

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.


#4

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 :/

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. ++


#5

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!


#6

@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.


#7

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.


#8

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


#9

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.


#10

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??


#11

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


#12

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


#13

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


#14

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!!


#15

@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!


#16

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


#17

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: https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

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.


#18

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?


#19

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


#20

That did it. Thank you.

This was helpful.