Template tuning for high performance

  • 2,602 views
Uploaded on

Presentation given at the J and Beyond conference on 31 May 2010.

Presentation given at the J and Beyond conference on 31 May 2010.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,602
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
66
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Template tuning for high performance Chris Davenport Website performance optimisation for Joomla template developers
  • 2. About me Joomla Leadership Team Production Working Group Documentation Coordinator Web developer Clickingmad Limited www.clickingmad.com
  • 3. Quick overview Template tuning for high performance: Optimisation for Joomla template developers (not looking at things like PHP, SQL or server optimisation) Tools to measure performance Optimising JavaScript Optimising CSS Optimising images Optimisation process
  • 4. Performance matters +500 ms -20% traffic @ Google +100 ms -1% sales @ Amazon
  • 5. Google takes site speed into account
  • 6. What tools should you use? You can't manage control what you can't measure +
  • 7. Using the Firebug Net Panel
  • 8. Using YSlow http://developer.yahoo.com/yslow/
  • 9. Web page timeline c. 20% c. 80% 80% of the time to render a page is waiting for files to download This is the only time where Joomla Is directly involved
  • 10. Anatomy of a single request Where is www.joomla.org? Cached DNS server 206.123.111.172 User's web browser Opens TCP connectionre-used Connection to 206.123.111.172 Request resource: GET / HTTP/1.1 Server at Server sends requested resource back 206.123.111.172 Closes TCP connection Connection re-used
  • 11. So, why the staircase?
  • 12. Optimising JavaScript What's the problem? CSS JavaScript CSS JavaScript blocks other browser activity
  • 13. Optimising JavaScript Parallel download limits http://www.browserscope.org/
  • 14. Optimising JavaScript Older browsers have lower limits Expect at least 25% of visitors to have low parallel download limits
  • 15. Optimising JavaScript Move JavaScript to the end JavaScript here Moved here
  • 16. Optimising JavaScript Move JavaScript to the end
  • 17. Optimising JavaScript Use Google AJAX Libraries API Make sure you request the right version http://code.google.com/apis/ajaxlibs/documentation/
  • 18. Optimising JavaScript Remove unused JavaScript For example, if you don't need MooTools, remove it. Note: This code can be placed anywhere in the template index.php to prevent MooTools from loading.
  • 19. Optimising JavaScript Minify JavaScript
  • 20. Optimising JavaScript Minify and compress JavaScript http://code.google.com/p/minify/ Download the Minify zip file Extract into your template root directory Set paths in min/config.php Set up groups of files in min/groupsConfig.php
  • 21. Optimising JavaScript Minify and compress JavaScript Modify your template index.php Note: Minify also sets far future expiry date headers
  • 22. Optimising CSS Move CSS to the head Remove unnecessary CSS rules Merge, minify and compress CSS files (Minify script used for JavaScript also supports CSS) Consider using a Content Delivery Network (CDN)
  • 23. Optimising CSS
  • 24. Optimising images Start downloading large images early Merge and compress image files Serve images from a cookie-free domain Consider using a Content Delivery Network (CDN)
  • 25. Optimising images Use CSS sprites Sprites reduce the number of HTTP requests Removes latency when applying hover effects
  • 26. Optimising images Generating CSS sprites http://spritegen.website-performance.org/ Upload zip file containing images Open-source Written in PHP Can be run locally
  • 27. Optimising images Use Smush.it ™
  • 28. Optimising images Use Smush.it ™
  • 29. Other Optimisations Content Delivery Networks
  • 30. Suggested optimisation process At all times during development Keep CSS in the head and JavaScript in the tail During final stages of site build Create CSS sprite images Update CSS to use the sprites and test Crush images Minify and compress CSS Update template index.php and test Minify and compress JavaScript Update template index.php and test After site has gone live Evaluate, reflect and improve
  • 31. Questions?
  • 32. http://clickingmad.com
  • 33. This presentation is available for use under the Joomla! Electronic Documentation License http://docs.joomla.org/JEDL Copyright © 2010 Chris Davenport