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).
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.
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:
Download and publish the attached application module (the publish must be done through Service Center)
Open the application in a browser and select the option to enable the feature
Restart the Deployment Controller service (optional)
Republish all applications to take effect
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!