Make your website faster (resources optimization)

A page on a website is displayed in your browser using three technologies: HTML, CSS and Javascript. The HTML is responsible for the structure (sementic) and also to load resources. CSS and Javascripts are resources.

There are best practices around this and well described on the article: Web performance best practices by Google.

To follow these rules, the CMS Plone has great tools: the CSS resource registry aka portal_css and the Javascripts resource registry aka portal_javascripts.

This tool let you register a resource and manage options like the way you want to include it in the page (link, import, ...), if it can be merge with others, if it can be compressed, etc ...

In this article I want to show you a step often forgot: re-organize and adjust those configurations to have fewer http requests.

To manage this you just have to check order and understand how plone is merging resources, and how they should be merged. IMO you must first include libraries (960.css or jquery) and all resources for anonymous. Next you have to check the way they are included, it must be the same or the CMS will not be able to merge them. This apply also to cache option. To summarize this:

Put at the bottom all specfic resources (authenticated resources like member.css, or tinymce.js) and you will have an optimized configuration with only one css request for an anonymous visitor.

You just have to check the tab: "Merged composition" under ZMI to know how the CMS will merge your resources.

The result for CSS and JS configuration of a production website: