Developing fast loading pages is a complex task. Some have even defined it as an art. Large companies have dedicated professionals or hire external consultants to audit their applications for speed and responsiveness.
Here I provide some simple tips to speed up page loading in Liferay. Liferay also provides some in built features for fast page loading. Whenever available, Liferay support will be shown for each tip.
To share scripts across portlets, use the <header-portlet-javascript> tag or <footer-portlet-javascript> tag in the liferay-portlet.xml file. Similarly, use <header-portlet-css> tag or the <footer-portlet-css> tag in the liferay-portlet.xml file.
Adding to head tag:
The function
Adding to body tag:
The function
Liferay provides a minifier process that strips down both whitespaces and comments from script and css files. The minifier also shortens function and variable names to make the script even smaller. To enable the minifier, set the option in the
Another option Liferay provides is to load packed (compressed) versions of Liferay scripts and css. Enable it using
By default, both the options are true. Make sure, they are not false on production systems.
Here I provide some simple tips to speed up page loading in Liferay. Liferay also provides some in built features for fast page loading. Whenever available, Liferay support will be shown for each tip.
Tip 1: Sharing script and css files across portlets
For each script and css file included in a page, the browser makes separate requests to fetch them. This takes time. If the same file is included many times, the browser only makes requests the first time and for subsequent access, it picks from the cache. Therefore, common javascript code should be placed in a single file and this file should be included in all portlets that need it.To share scripts across portlets, use the <header-portlet-javascript> tag or <footer-portlet-javascript> tag in the liferay-portlet.xml file. Similarly, use <header-portlet-css> tag or the <footer-portlet-css> tag in the liferay-portlet.xml file.
Tip 2: Lazy loading of scripts
Sometimes, scripts are not immediately needed after page load but only after user takes some action. To prevent such scripts being loaded on page load, we can load in the background after the page has loaded. There are two ways for lazy loading. One, the script is added to the <head> tag and the other is to add it to the <body> tag.Adding to head tag:
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "";
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
window.onload = loadScript; The function
loadScript() above creates a dynamic script tag and adds it to the first head tag available. It registers this function to be called on load of the page.Adding to body tag:
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "";
document.body.appendChild(script);
}
window.onload = loadScript; The function
loadScript() above creates a dynamic script tag and adds it to the body. It registers this function to be called on load of the page.Tip 3: Minimize script, stylesheet and html output
Whitespace and comments in script file or html pages takes up bandwith and so slows down page load. While comments and whitespaces are necessary for development, in production they should be removed. It would be nice to not to change the source code for production while still be able to remove the comments and whitespaces. A simple technique for this would be to use server side comments in jsp files and not to use html or javascript comments. Whitespaces cannot be handled this way.Liferay provides a minifier process that strips down both whitespaces and comments from script and css files. The minifier also shortens function and variable names to make the script even smaller. To enable the minifier, set the option in the
portlet-ext.properties file.com.liferay.portal.servlet.filters.minifier.MinifierFilter=trueAnother option Liferay provides is to load packed (compressed) versions of Liferay scripts and css. Enable it using
javascript.fast.load=trueBy default, both the options are true. Make sure, they are not false on production systems.
Tip 4: Specify image and table width and height
If the browser can immediately determine the height and/or width of images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason,height and width should be specified for images and tables, whenever possible.
http://siteloadtest.com allows to test your site for all those things
ReplyDeleteOther important way of improvement is reduce the size of the images used. When a new user arrive to the portal needs to download all the resources of the web and if we use big images the load time will be too high.
ReplyDeleteTo solve this problem you must use images optimized in your themes. And if you have images contributed you can use 'Image Optimizer' from the Liferay marketplace, is an easy app recently published to compress images contributed on the portal.
I found this article easy to understand and very helpful. Can’t wait to see the other posts. Thank you for sharing!
ReplyDeleteMelbourne SEO Service
ReplyDeleteشركة تنظيف كنب بالقطيف
شركة تنظيف مجالس بالقصيم
شركة تنظيف مجالس بالرس