Amsterdam: CSS optimization

  

OutSystems Platform 9 Amsterdam delivers a new feature to improve end-user experience. Learn here how to enable that feature and start delivering a better user experience today.
 

White screen when loading...

When a user visits an application for the first time they might see a white screen until most of the page resources are transferred to the browser. In case of navigation between pages a flicker may occur frequently. This problem is especially noticeable on mobile devices connected to slow networks (high latency - 2G/3G).


Why?

Complex web applications require lots of stylesheets. In those scenarios you can easily reach 20 to 30 requests just to render a page. And the time to render a page is strongly influenced by the number and size of the resources the browser needs to fetch...


How will the CSS optimization feature improve this behaviour?

Reducing the number of resources reduces page load times, especially on slow networks (2G/3G) thus improving the user experience. With Platform 9 Amsterdam you can enable stylesheet concatenation, which will reduce the number of CSS resources from tens to about 4.


You can see the time gains - with this feature on off and on - in the chart below.
These results were obtained loading 50 times a page for the first time (empty cache), on a mobile device using 3G.




















The blue bars show the time to load the page with the feature off, and the green bars represent the time with the feature turned on. A smaller bar is better, so the feature definitely yields improvements.

Note that the gains are higher when there are lots of resources reaching more than 1.5 seconds improvement (Page 2).

The chart just shows gains in terms of load times, but the most important is the user perception. We did lots of tests and found that with this feature the page displays much earlier, thus reducing the time the screen stays white during page load. Navigating between pages is also much smoother.


How to enable the CSS optimization feature?

Follow these 4 steps to enable this feature:

  1. Download and publish the attached application module (the publish must be done through Service Center)

  2. Open the application in a browser and select the option to enable the feature

  3. Restart the Deployment Controller service (optional)

  4. Republish all applications to take effect


Note:

In some very specific situations the aspect of pages might suffer changes after activating this feature. Start by making sure all applications have refreshed references. If the problem persist, you may need to tweak the CSS to work as before. Feel free to contact us if you have any questions or additional feedback!


This sounds great but in the Personal Edition I don't know of any way to accomplish step 3, Restart the Deployment Controller, in any predictable way.  How can we use this feature in the Personal Edition?
I don't want to go off topic, unfortunately, as Curt says, there are quiet a few things we can't test/try on our Personal Environments, which should be a way for us to test solutions before addresing them with the clients...
I have just read on the Ideas section (here: http://www.outsystems.com/ideas/1673/bundling-and-minifying-the-javascript-css-files) that minification of CSS "didn't lead to a gain of performance" and that "automatic javascript concatenation results in actual loss of performance according to our benchmarks".

How come? Can you share a bit of your work on this?

Cheers
Hello Tiago,

Yes, I would like to share a bit of our work on this. The image below shows the results that were gathered along the research of several strategies, combining the concatenation and minification of CSS and JS files. By looking at the chart of four pages load times we can conclude that the red bar, which is related with the CSS concatenation, is the one that consistently shows gains of performance.
This means that if we compare the red bar with the dark blue one we will see that the red one always shows a lower load time.


Curt Raddatz wrote:
This sounds great but in the Personal Edition I don't know of any way to accomplish step 3, Restart the Deployment Controller, in any predictable way.  How can we use this feature in the Personal Edition?
 Hello Curt,

Actually the step 3 is optional, the eSpace attached will do that for you :)
 
That's good news - thanks!
I must say I am somewhat puzzled with this...

Why? Because when optimizing a website, there are three main types of front end optimization techniques:
  1. Reduce the number of requests
  2. Reduce the overall size of the content
  3. Promote parallelism (i.e. simultaneous download of assets)
By concatenation and minification we are addressing points 1 and 2. The normal behavior would be lower load times - less requests, smaller size... Why doesn't the platform reflect this? What may be causing this divergent outcome?
What is not clear to me is whether this is a one-time change to the environment, or whether we need to apply this every time we publish a new solution/application.
I am a bit worried as well, since other frameworks do gain the advantages of optimizing css, js.


Kilian Hekhuis wrote:
What is not clear to me is whether this is a one-time change to the environment, or whether we need to apply this every time we publish a new solution/application.
 Hi Kilian,
The CSS optimization is applied to all the applications that are published after enable the feature. So it is a one-time change to the environment.
 
Being a one-time change is obviously great.
I just wonder, will you include this by default in upcoming releases?
Tiago Neves wrote:
Being a one-time change is obviously great.
I just wonder, will you include this by default in upcoming releases?
 Yes, this feature will be included by default in upcoming releases :)
Where is the OMLProcessor espace?
Filipe Lourenço wrote:
Where is the OMLProcessor espace?
 Hi Filipe,
You must publish the CSSConcatenation eSpace through Service Center :)
 
Yes it works but we have a particular espace that when activated the flag we cannot publish anymore.
Here it is the service center error log:

Invalid compiler output.
Object reference not set to an instance of an object.
Environment Information  
Stack:
Exception Details:
[1] Internal Error: Invalid compiler output.
Object reference not set to an instance of an object.
at OutSystems.HubEdition.Compiler.Compiler.<>c__DisplayClass2.<Compile>b__1()
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ThreadHelper.ThreadStart()
[2] System.NullReferenceException: Object reference not set to an instance of an object.
   at OutSystems.HubEdition.Compiler.ResourcesOptimizer.AbstractCssProcessor.#dne.MoveNext().....
Filipe Lourenço wrote:
Yes it works but we have a particular espace that when activated the flag we cannot publish anymore.
Here it is the service center error log:

Invalid compiler output.
Object reference not set to an instance of an object.
Environment Information  
Stack:
Exception Details:
[1] Internal Error: Invalid compiler output.
Object reference not set to an instance of an object.
at OutSystems.HubEdition.Compiler.Compiler.<>c__DisplayClass2.<Compile>b__1()
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ThreadHelper.ThreadStart()
[2] System.NullReferenceException: Object reference not set to an instance of an object.
   at OutSystems.HubEdition.Compiler.ResourcesOptimizer.AbstractCssProcessor.#dne.MoveNext().....
Could you please submit feedback? So that the support team can look into it and figure out what's going on. You should have a button in Service Center for that purpose. In the meanwhile, to avoid the error above you can disable the feature in order to publish the eSpace.

Thank you!
 
Hey Thanks for this update. Thumbs up
Hi Sara,

Is this still relevant or is it now part of the Prefetch Resources function?

I can't publish the oml in service centre on 9.1.0.10...

Unable to open Solution Pack for reading:    at ICSharpCode.SharpZipLib.Zip.ZipInputStream.GetNextEntry()
   at OutSystems.PackageManager.Solutions.SolutionUtils.<GetSolutionZipEntries>d__0.MoveNext()
   at System.Linq.Enumerable.FirstOrDefault[TSource](IEnumerable`1 source, Func`2 predicate)
   at OutSystems.PackageManager.Solutions.SolutionUtils.GetManifestFromFile(Byte[] file)
   at OutSystems.PackageManager.Solutions.SolutionUtils.GetSolutionInfo(Byte[] file, DateTime& creation, Int32& schemaVersion, String& activationCode, String& productId, String& productName, ObjectKey& solutionUID, Boolean& containsAgilePlatformApplication, ObjectKey& solutionVersionUID, Boolean& isSolution, List`1& applicationKeys)
   at OutSystems.NssOMLProcessor.CssOMLProcessor.MssSolutionPackGetInfo(Byte[] ssFile, String& ssUID, DateTime& ssCreation, Int32& ssSchemaVersion, RCHEMessageRecord& ssMessage, String& ssActivationCode, String& ssProductId, String& ssProductName, String& ssSolutionUID, Boolean& ssHasAgilePlatformApplication, String& ssSolutionVersionUID, Boolean& ssIsSolution, RLTextRecordList& ssApplicationKeys)
Hi Gavin,

Are you you using Service Center > Factory > eSpaces > Upload & Publish...?

Your error mentions a bad .oap file (OutSystems Application Package) instead, and Sara's file is an .oml (OutSystems eSpace).

Regards!
Thanks Pedro,

I was in a rush and made a rookie error :)

Cheers,
Gavin
Hi,
I am not able to publish the attached oml file, looks like OMLProcessor extension is missing.

Thanks,
Thiru
Hi THiru,

It won't publish in Service Studio, you need to go into your Service Centre and publish via Factory>eSpaces> Upload & Publish an eSpace

Cheers,
Gavin


ok got it, thanks!