OutSystems Page Speed Optimization

OutSystems Page Speed Optimization

Hi everyone,

What is current situation of the platform regarding optimization of page loads?
On Amsterdam there are some improvements on CSS, which automatically concatenates the CSS files that support our app (http://www.outsystems.com/forums/discussion/14708/css-optimization-in-platform-9-amsterdam/).

It seems to me this is an area where OutSystems is somewhat behind... and is so important. You can argue it is not so much for enterprise users, but I won't agree.
There are some basics on optimization and I don't see them being fully implemented:
  • Activate GZIP compression
  • Leverage browser caching (Expires header, Last-Modified date or adopting ETags)
  • Use a Content Delivery Network (CDN)
  • Remove unused assets
  • Concatenate and minify CSS
  • Concatenate and minify JavaScript
  • Use the correct image format
  • Resize large images
  • Compress images further
  • Remove unnecessary fonts

I could go on and on... OutSystems doesn't have to reinvent the wheel, there are some great tools/solutions that could be integrated into the platform.
Anyone want to share his/her thoughts on this?

Hi Tiago,

Some of the points are actually used already:
  • GZIP Compression is active by default, if the browser says that it supports the response is compressed
  • Caching headers sent aready for static content (30 days expires)
  • CDNs can and should be used on top of the platform to increase performance. This site uses a CDN for example.

The images suggestions, need to be a application design decisions, not actually much the patform can decide.

I totally agree that some work still needs be made in the CSS and Javascript minification.
There was also a couple versions ago where we wanted to place javascripts/css/resources files in a CDN automatically...but at that time most enterprises worked in closed environments without internet access. Something that nowadays is no longer true. So it may be an idea to revisit.

What do you mean by the "Remove unused assets"?

João Rosado
Hi João,

I wanted to get some opinions coming through... I stated some basics on optimization (some the platform does, other doesn't and some are really a developers choice/responsibility). Overall I think there's work to do. I could add some more complexity, but lets go through the points I mentioned initially.
  1. Activate GZIP compression - OS activates this by default. Great, no hassle. 
  2. Leverage browser caching (Expires header, Last-Modified date or adopting ETags) - OS activates this by default (IIS enables it by default). The developer can tweak this as wanted (e.g. appcmd set config /section:httpProtocol /customHeaders.[name=' string ']. value: string)
  3. Use a Content Delivery Network (CDN) - it's not included in the package. As you say "CDNs can and should be used on top of the platform to increase performance". Maybe OS could include a default service, probably amazon cloudfront cdn, that could be activated with client/developer own amazon account credentials (or not). I agree - something you could revisit (thank you for the insight).
  4. Remove unused assets - Maybe OS could help on optimizing this. What do I mean? I was referring to parts of the application like css styles or some javascript. A bit like unused references in OS. There are some tools to help on this (e.g. Chrome’s Audit or Dust-Me Selectors). This might be difficult for OS to implement... It seems like a job for Developer
  5. Concatenate and minify CSS - Concatenation of CSS is now possible (I mentioned that), but regarding minification, you agree on this, is something that could be an Idea/Task to be worked on already.
  6. Concatenate and minify JavaScript - As the previous point. Added together this two optimizations would have a significant impact. There are many tools to help OS on implementing it. I think it's a must have.
  7. Use the correct image format - on Developers side, as you say say, it's an "application design decision, not actually much the platform can decide." As a general guideline I would say use JPG for photos and PNG for the rest. Optimization can always go further, SVGs are a great step forward when possible to use them. But OS can help on optimizing images in the next points.
  8. Resize large images - automated resizing should be implemented. If you have a file 1200x800px and really just use it in a maximum of 300x200px, why not automatic resize?
  9. Compress images further - there's always room for some more image optimization. Just Smush.it or try imageoptim on the Mac or Radical Image Optimization Tool on Windows
  10. Remove unnecessary fonts - it speaks by itself. On the developer side, if your client loves that awful handwriting typefaces but it’s only used for one title, is it worth downloading a 200KB font file?

This is just the tip of the iceberg. You can go deeper in optimization, it's a never ending story really. Just to name a few: Replace images with CSS3 effects, Replace JavaScript with CSS3 effects and animations, Consider Scalable Vector Graphics (SVGs), Replace images with icon fonts, Use image sprites, ...

As an Idea, regarding image compression, for example, OutSystems could have 2 or 3 compression choices whenever an Image widget is used. I mean, add a property "Compression" and choose one of three compression levels. In the resources we could specify the default compression for that image. Ideas abound and with OS going mobile and more B2C apps being created, this is an area to focus on.

OutSystems reduces boring parts and, citing OS own words, drives to make developers phenomenally more efficient in creating, deploying and managing modern applications at scale. Page Speed Optimization with lower load times takes hard work and time, but is important. At the same time, some tasks are dependent on the developer, decisions that need to be taken at application design time.

Wow... Such a long post already. I would like to see some feedback from others too. I like to participate and share, but I'm not even close to be a guru :) I have so much to learn. I only have about 7 months of OutSystems experience - I might say some silly things, but I get better by the day. If you read this far, come and join, in this post or some other discussion... Cheers
Well, it seems that with OutSystems concatenation and minification might not behave as you would expect.
The objective is less requests and smaller size pages... but this was not the result on the OutSystems Platform, evaluating by these results: http://www.outsystems.com/forums/discussion/14708/amsterdam-css-optimization/

There are multiple factors there.

Concatenation gets a worse time because browsers do multiple things in parallel.
Lets say you have 12 scripts (or css) to download. Browsers have usually 6 parallel downloads per site, as soon as the first script ends it will start to be be evaluated, while others can still be being downloaded.
When files are concatenated into one big one, it will take all the time downloading it and then start executing.

Not only that ...but modern browsers are expecting many files, and are implemented accounting for it.
So even the javascript parsing is parallel.

And lets not forget the Speculative parsing a well that affects not only javascipt but also stylesheets and images.

With fast connections and decent browser behaviors (with 6 multiple parallel file downloads) all concatenation and minification impact is minimal.

João Rosado

Like I wrote on the other post, optimization works best when attacking on three fronts: requests, size and parallelism. Optimization has to address all this. Of course, if you get one single file that is 2mb it will take long... instead of 6 files of around 300kb.
But there is also another thing, which is User Perception. You can deal with optimization in a way that User Perception will be even faster, by start rendering the page sooner although it isn't yet done displaying everything and loading scripts without blocking.

By the way, I run a test on www.outsystems.com with websitetest.com and the result was not that good... I see some ways to improve those more than 200 requests and 5mb in size. Here is the result: http://websitetest.com/ui/tests/5548535d6ac6c6046d000005/samples/55485399e2815b314e000690

That first html request (critical) takes a long time and Wistia has an overall significant impact as well as images and javascript. With so many requests and each taking about 11ms gives a significant overhead.