Ichim David: High performance maintainable themes

Use the PageSpeed tool to measure your page and get hints for improvement.

Move javascript from the head to the bottom.

• You can do that with Diazo rules or through the web.
• But you can get flashes of unstyled content. Check this. There is no one silver bullet solution. See if you can do some transformations not in javascript but in a different way with css.
• Random javascript could break, if it expects jQuery or other javascript already available, especially if they get loaded inline. Usually loading on document ready should solve this.
• Plone core may move the javascript to the bottom some day, there is discussion.

On Plone 4, with portal_css and portal_javascripts, you can reorder the css and javascript to fit more together. Currently you often have for example member.css in the middle, restricted to only members, and this condition splits the top and bottom css files in two. Move the member.css and then anonymous users need just one combined css.

Check the caching rules, especially for files like the favicon and the logo that will almost never change.

Online tools and background information for css:

• Use http://csslint.net to check your css.
• Another tool: http://www.stylestats.org
• Make your css as simply as possible: http://csswizardry.com/2015/04/cyclomatic-complexity-logic-in-css/

Optimize your javascript:

• PhantomJS-based web performance metrics collector and monitoring tool: https://github.com/macbre/phantomas

Document decisions and best practices in a style guide.

• Eric Steele: "I think we should set up a style guide for the core UI." See https://github.com/plone/Products.CMFPlone/issues/589
• There are automated style guides, for example kss-node, StyleDoccu, DocumentCSS, Hologram. Many need different stacks, and the generated guide may come out very ugly.
• The EEA style guide: http://www.eea.europa.eu/code/design-elements
• Plone has the test_rendering page that has all (or most) design elements of Plone. We could run https://github.com/filamentgroup/X-rayHTML over this. Add a data attribute and then this shows the generated page and makes the html itself visible.
• Make it easy to maintain, by having the style guide in the same website that it is meant for.
• Further reading: http://styleguides.io
• Documentation: add comments in css explaining why you do something.

We need to monitor for regressions.

• Automate tests with Travis, using headless browsers.
• psi command line tool
• Grunt-PerfBudget

In closing:

• Measure your site performance regularly.
• Presentation by Addy Osmani: https://speakerdeck.com/addyosmani/css-performance-tooling
• Style guides from github: https://github.com/styleguide