Databases Reference
In-Depth Information
Reducing the number of CSS files
Similar to JavaScript files, CSS files are also an integral part of every web page, and a
web page can have many CSS files loaded through the
link
tag. Again, inline styles
through the
<style>
tag are not recommended. Similar to JavaScript merging, CSS
files can also be merged to reduce network overhead. Liferay provides configuration
to automatically merge CSS files of themes. This can be done by enabling the
following property in
portal-ext.properties
:
theme.css.fast.load=true
If this property is enabled, it will always merge all the CSS files into one and load the
merged CSS files on every page. By default this property is enabled by Liferay Portal.
During development it may be required to disable this property to solve CSS-related
issues. But in the production environment, this property should be set to
true
to get
the best performance.
This feature only covers theme-related CSS files. We can also have CSS files in
portlets. It is recommended to merge CSS files of the portlets into a single CSS file.
Using CSS image sprites
We looked at reducing the number of JavaScript and CSS file requests by merging
them into a single file. Similar to that, every web page will have many network
requests for images. Unlike CSS and JavaScript files, images are a different kind of
resource and they need to be placed on the HTML page at a certain location. Hence,
it is not possible to simply merge them, unlike CSS and JavaScript files, to reduce
network overhead. To reduce the number of image requests, a technique called
CSS
image sprites
is used. CSS image sprites are a pure HTML-and-CSS-based technique.
Liferay provides built-in support for CSS image sprites through its tag libraries.
Before we talk about Liferay Portal's CSS image sprites capability, let's understand
how CSS image sprites work.
Suppose we have a simple HTML response with multiple static images as follows:
<html>
<body>
Arrow Up : <img src='arrow_up.png' />
Arrow Down : <img src='arrow_down.png' />
Arrow Right : <img src='arrow_right.png' />
Arrow Left : <img src='arrow_left.png' />
</body>
</html>
As shown in this code snippet, we are loading four images in the browser. To reduce
the number of image requests, we need to combine all four images as shown:
