● mobile view● tablet view● edit view● anonymous view
● size● speed● weight● power
● document ● maintain● enforce ● test
What do we need for a performant theme?
1. Cater to different aspects of the site for different users2. Measure key site sections for performance3. Keep it performant, understandable and maintainable
We need to:
Optimize - first steps
1. Upgrade jQuery to the latest 1.x version for a big improvement in overall page speed especially on mobile!2. plone.app.jquerytools needs to use a newer version as well compatible with the newer jQuery.
See: http://blog.jquery.com/2014/01/24/jquery-1-11-and-2-1-released/
Easy to do by pinning the following versions:[versions]plone.app.jquery = 1.1.12plone.app.jquerytools = 1.7.0
Optimize - first steps
3. Load the development profile of plone.app.jquery in order to install jquery-migrate plugin as well
Load minimum amount of js
1. Load only jQuery within head from a cdn sistem.2. Load only jquery.domready
ex: https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js
Load minimum amount of js<html> <head> ... <metal:topslot define-slot="top_slot" /> <metal:headslot define-slot="head_slot" /> <metal:styleslot define-slot="style_slot" /> <!-- Insert jquery only in the head --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js">
</script> ... </head> ...</html>
Load minimum amount of js - alt<html> <head> ... <metal:topslot define-slot="top_slot" /> <metal:headslot define-slot="head_slot" /> <metal:styleslot define-slot="style_slot" /> <!-- Insert jquery dom ready script only in the head inlined --> <script src="https://github.com/addyosmani/jquery.parts/”
“blob/master/jquery.documentReady.js"> </script>
... </head> ...</html>
Avoid javascript render blocking
Move the javascripts out of the head in order to avoid render blocking
Move js to the body - diazo
<!-- Copy script tags from Plone head to end of body -->
<after css:content="html head script" css:theme-children="html body" />
Move js to the body - ttw
Classic theme approach:
1. Customize Products.ResourceRegistries.browser.resourceregistries.pt2. Remove <tal:scripts replace="structure provider:plone.resourceregistries.
scripts" />
3. Customize main_template.pt4. Move <metal:javascriptslot define-slot="javascript_head_slot" /> to end of body5. Move scripts removed from resourceregistries.pt to the end of the body 6. Measure performance change
<html> <head> ... </head> <body> …
<tal:scripts replace="structure provider:plone.resourceregistries.scripts" />
<metal:javascriptslot define-slot="javascript_head_slot" />
</body></html>
Move js to the body - ttw
Flash of unstyled content:a. Quicker loading can mean the introduction of content that
could be transformed by javascript.b. http://www.learningjquery.com/2008/10/1-way-to-avoid-the-
flash-of-unstyled-content
Move js to the body - side-effects
Random javascript could break:a. Could be avoided by adding domready script to the headb. https://github.com/plone/Products.CMFPlone/issues/1043
Move js to the body - side-effects
Dealing with compression problem
1. Install plone.app.caching
2. Enabled gzip compression and caching
3. Measure performance change both for mobile and desktop score
Dealing with resource caching
1. Inspect merged composition
2. Arrange resources in order to have a minimum number of requests
3. Remove styles or javascript the site doesn’t use
Dealing with static content cache
1. Import caching strategy
2. Add images that should have a long cache to the strong cache policy
3. Set strong policy cache to expire in 1 year
Document - first steps
1. Why do we need a styleguide?2. How to create a styleguide3. How to automate the styleguide4. How to maintain the styleguide
Styleguides:
Why do we need a styleguide?
1. Having a living documentation of visual code2. Provide a one stop place for anyone on the team to
reference it when a design element is needed3. To provide consistency when system is made up
from several components made by different teams
We need a styleguide for:
Creating a styleguide
1. Use a style guide generator - with automatic or manual templating
2. Create a manual page template as the styleguide
Automated styleguide generators
1. KSS - https://github.com/kss-node/kss-node
2. StyleDoccu - https://github.com/jacobrask/styledocco/
3. DocumentCSS - http://documentcss.com
4. Hologram - https://github.com/trulia/hologram
Automated styleguide generator
1. Made with different languages requiring different technology stacks:
eg. PHP, Nodejs, Ruby
2. Only some tools will make a template out of the commented markup
3. Will not load the site css by default and you need to style the templates
4. You need to spend a lot of time to configure them with good defaults
5. They will not integrate with the site styles acting like a blackbox test
Disadvantages of automated styleguides:
Manual styleguide how to
1. Use a page template that is added within site which anyone can use
2. Automate rendering of code examples
Filament Group X-ray js plugin
1. Automatically adds pre tags with the demo markup which avoid repetition
2. Can be used with Prism.js to provide syntax highlighting for the demo code
What it does:
Maintain the styleguide
1. Make it easy to maintain by having it placed within the site with the actual site styles loading
2. Make a habit of enforcing styleguide update every time there is feature added
3. Look for ways of automating the styleguide through styleguide generators
Advice for maintaining the styleguide:
Styleguides further reading:1. http://alistapart.com/article/creating-style-guides
2. http://styleguides.io
Monitor for regressions:
1. http://docs.travis-ci.com/user/gui-and-headless-browsers
2. https://github.com/addyosmani/psi
3. https://github.com/macbre/phantomas
4. https://pypi.python.org/pypi/phantomas
Automate performance tests with:
Final advice:
1. Measure your site performance periodically
2. Keep your styleguide up to date
3. Consider setting a performance budget
4. Focus on what matters the most to your users
Further reading:
1. https://speakerdeck.com/addyosmani/css-performance-tooling
2. https://speakerdeck.com/dafed/managing-css-projects-with-itcss
3. https://speakerdeck.com/jonrohan/githubs-css-performance
4. https://github.com/bjankord/Style-Guide-Boilerplate
5. http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello