Skip to Content (Press Enter)
2021-01-27 15-47-47
Sara Gonçalves
Staff
498Views
24Comments
Amsterdam: CSS optimization
Discussion
OS Certified
Performance
Announcement
CSS
UX

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!


CSSConcatenation.oml
4
0
30 Apr 2015
Copy Link
2013-11-21 00-40-55
Curt Raddatz
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?
1
0
30 Apr 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
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 :)
 
1
0
04 May 2015
Copy Link
2017-07-05 18-13-21
Tiago Neves
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...
1
0
01 May 2015
Copy Link
2017-07-05 18-13-21
Tiago Neves
I have just read on the Ideas section (here: https://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
1
0
03 May 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
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.


2
0
04 May 2015
Copy Link
2013-11-21 00-40-55
Curt Raddatz
That's good news - thanks!
1
0
04 May 2015
Copy Link
2017-07-05 18-13-21
Tiago Neves
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?
0
0
04 May 2015
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
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.
0
0
06 May 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
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.
 
2
0
06 May 2015
Copy Link
2016-04-21 20-09-55
J.
 
MVP
I am a bit worried as well, since other frameworks do gain the advantages of optimizing css, js.


0
0
06 May 2015
Copy Link
2017-07-05 18-13-21
Tiago Neves
Being a one-time change is obviously great.
I just wonder, will you include this by default in upcoming releases?
1
0
06 May 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
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 :)
2
0
06 May 2015
Copy Link
2024-01-05 16-00-17
Filipe Lourenço
Where is the OMLProcessor espace?
0
0
25 May 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
Filipe Lourenço wrote:
Where is the OMLProcessor espace?
 Hi Filipe,
You must publish the CSSConcatenation eSpace through Service Center :)
 
0
0
25 May 2015
Copy Link
2024-01-05 16-00-17
Filipe Lourenço
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().....
0
0
25 May 2015
Copy Link
2021-01-27 15-47-47
Sara Gonçalves
Staff
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!
 
0
0
25 May 2015
Copy Link
2015-04-11 11-32-52
Tama
Hey Thanks for this update. Thumbs up
0
0
29 May 2015
Copy Link
UserImage.jpg
Gavin Horne
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)
0
0
19 Feb 2016
Copy Link
2020-03-19 14-14-27
Pedro Gonçalves
Staff
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!
0
0
19 Feb 2016
Copy Link
UserImage.jpg
Gavin Horne
Thanks Pedro,

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

Cheers,
Gavin
0
0
21 Feb 2016
Copy Link
UserImage.jpg
Thirupathi Rao Veerla
Hi,
I am not able to publish the attached oml file, looks like OMLProcessor extension is missing.

Thanks,
Thiru
0
0
24 Feb 2016
Copy Link
UserImage.jpg
Gavin Horne
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

1
0
24 Feb 2016
Copy Link
UserImage.jpg
Thirupathi Rao Veerla
ok got it, thanks!
0
0
24 Feb 2016
Copy Link
UserImage.jpg
Joris van Geffen

We used CssConcatenation on OS9.0 and OS9.1, but now we've upgraded to OS10 and OMLProcessor can't be found anymore. Is there a new version of this e-space available or another way to control this on OS10?

1
0
28 Dec 2017
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.