Your SlideShare is downloading. ×
0
Template tuning
for high performance


                           Chris Davenport




          Website performance optimi...
About me



Joomla Leadership Team
Production Working Group
Documentation Coordinator


Web developer
Clickingmad Limited
...
Quick overview


Template tuning for high performance:
Optimisation for Joomla template developers
(not looking at things ...
Performance matters




+500 ms   -20% traffic     @ Google
+100 ms   -1% sales       @ Amazon
Google takes site speed into account
What tools should you use?

You can't manage control what you can't measure



                +
Using the Firebug Net Panel
Using YSlow




http://developer.yahoo.com/yslow/
Web page timeline
                                     c. 20%    c. 80%




                                              ...
Anatomy of a single request



                            Where is www.joomla.org?
                                   Cac...
So, why the staircase?
Optimising JavaScript
                       What's the problem?




                                              CSS


J...
Optimising JavaScript
         Parallel download limits




http://www.browserscope.org/
Optimising JavaScript
                       Older browsers have lower limits




Expect at least 25% of visitors to have
...
Optimising JavaScript
                  Move JavaScript to the end




             JavaScript here




Moved here
Optimising JavaScript
Move JavaScript to the end
Optimising JavaScript
                   Use Google AJAX Libraries API




                                 Make sure you ...
Optimising JavaScript
                                        Remove unused JavaScript


   For example, if you don't need...
Optimising JavaScript
Minify JavaScript
Optimising JavaScript
                                 Minify and compress JavaScript


http://code.google.com/p/minify/
D...
Optimising JavaScript
                                    Minify and compress JavaScript


Modify your template index.php
...
Optimising CSS



Move CSS to the head



Remove unnecessary CSS rules



Merge, minify and compress CSS files
    (Minify...
Optimising CSS
Optimising images



Start downloading large images early


Merge and compress image files


Serve images from a cookie-fr...
Optimising images
                                              Use CSS sprites



Sprites reduce the number of HTTP reque...
Optimising images
                            Generating CSS sprites



                                    http://spriteg...
Optimising images
Use Smush.it ™
Optimising images
Use Smush.it ™
Other Optimisations
Content Delivery Networks
Suggested optimisation process

At all times during development
    Keep CSS in the head and JavaScript in the tail

Durin...
Questions?
http://clickingmad.com
This presentation is available for use under the
      Joomla! Electronic Documentation License
             http://docs.j...
Upcoming SlideShare
Loading in...5
×

Template tuning for high performance

2,762

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,762
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Template tuning for high performance"

  1. 1. Template tuning for high performance Chris Davenport Website performance optimisation for Joomla template developers
  2. 2. About me Joomla Leadership Team Production Working Group Documentation Coordinator Web developer Clickingmad Limited www.clickingmad.com
  3. 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. 4. Performance matters +500 ms -20% traffic @ Google +100 ms -1% sales @ Amazon
  5. 5. Google takes site speed into account
  6. 6. What tools should you use? You can't manage control what you can't measure +
  7. 7. Using the Firebug Net Panel
  8. 8. Using YSlow http://developer.yahoo.com/yslow/
  9. 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. 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. 11. So, why the staircase?
  12. 12. Optimising JavaScript What's the problem? CSS JavaScript CSS JavaScript blocks other browser activity
  13. 13. Optimising JavaScript Parallel download limits http://www.browserscope.org/
  14. 14. Optimising JavaScript Older browsers have lower limits Expect at least 25% of visitors to have low parallel download limits
  15. 15. Optimising JavaScript Move JavaScript to the end JavaScript here Moved here
  16. 16. Optimising JavaScript Move JavaScript to the end
  17. 17. Optimising JavaScript Use Google AJAX Libraries API Make sure you request the right version http://code.google.com/apis/ajaxlibs/documentation/
  18. 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. 19. Optimising JavaScript Minify JavaScript
  20. 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. 21. Optimising JavaScript Minify and compress JavaScript Modify your template index.php Note: Minify also sets far future expiry date headers
  22. 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. 23. Optimising CSS
  24. 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. 25. Optimising images Use CSS sprites Sprites reduce the number of HTTP requests Removes latency when applying hover effects
  26. 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. 27. Optimising images Use Smush.it ™
  28. 28. Optimising images Use Smush.it ™
  29. 29. Other Optimisations Content Delivery Networks
  30. 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. 31. Questions?
  32. 32. http://clickingmad.com
  33. 33. This presentation is available for use under the Joomla! Electronic Documentation License http://docs.joomla.org/JEDL Copyright © 2010 Chris Davenport
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×