responsive design in plone
TRANSCRIPT
High performant and maintainable Plone
themesDavid Ichim
Eau de WebRomania
Why do we need our theme to be performant?
Google now has more mobile search queries
Mobile trafic with various resolutions
Cost of internet around the world
It requires many different steps and skills...
How to make a performant theme?
● 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:
1. Measure2. Optimize3. Document4. Monitor
What do we need for a performant theme?
Step 1: Measure
How to keep a theme performant
From simple tools
To intermediare tools
To advanced tools
http://webpagetest.org
http://www.webpagetest.org/result/150926_Q4_EH1/
You should aim for high scores and low loading times
Step 2: Optimize
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
One bundle breaker
Second bundle breaker
Third bundle breaker
Empty can be removed
One bundle breaker
Second bundle breaker
Empty can be removed
Cleaned and organized resources
Score after better resource concatenation
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
http://www.webpagetest.org/result/150926_Q4_EH1/
Stable images that should be cached
http://www.webpagetest.org/result/150926_Q4_EH1/
Further optimizations
1. Optimize css2. Optimize javascript
Optimize css
Optimize css
Optimize css
Optimize css further reading
1. http://csswizardry.com/2015/04/cyclomatic-complexity-logic-in-css
Optimize javascript
Optimize javascript
Optimize javascript
Step 3: Document
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:
1. Why do we need a styleguide?
Why do we need a styleguide?
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:
Why do we need a styleguide?
2. Creating a styleguide
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:
Output of hologram after following readme
Manual styleguide how to
1. Use a page template that is added within site which anyone can use
2. Automate rendering of code examples
Manual styleguide how to
3. Automate the styleguide
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:
https://github.com/filamentgroup/X-rayHTML
DEMO
4. Maintain the styleguide
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
Document - more steps
Comments
Document - more steps
Step 4: Monitor
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:
Monitor for regressions - psi:
Monitor for regressions - alt:
https://speakerdeck.com/addyosmani/css-performance-tooling
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
Questions?