Optimizing Your
Frontend Performance
Thomas Weinert
About Me
   Application Developer
     ▹   PHP
     ▹   XSLT/XPath
     ▹   (some) Javascript

    papaya CMS
     ▹   P...
How to scale you webpage?
   Hardware
   Backend

    Frontend




Thomas Weinert, papaya Software GmbH
Hardware
   More hardware
   Better hardware

    Moores Law
     ▹   Transistors doubling every 18 months
     ▹   Tra...
Backend
   External data sources are slow
     ▹   SQL
     ▹   Files
     ▹   Network

    Locking is slower

    Memo...
Mini/Micro Optimisations
   Myths
     ▹   echo vs. print
     ▹   ' vs. quot;

    Objects vs. functions vs. linear sou...
Mini/Micro Optimisations




                        DON'T DO IT


Thomas Weinert, papaya Software GmbH
Yahoo!
   Yahoo!'s Exceptional Performance team
     ▹   Yahoo!'s Exceptional Performance team evangelizes
         best ...
Results
   80% of the end-user response time is spent on
    the front-end.




Thomas Weinert, papaya Software GmbH
Firebug
   Firefox extension
   Analyze and manipulate
     ▹   requests, page structure, CSS

    Javascript debugger
...
YSlow
   Why (is your web page) slow
   Set of rules

    Firebug extension




Thomas Weinert, papaya Software GmbH
Yslow: Performance View




Thomas Weinert, papaya Software GmbH
Yslow: Stats




Thomas Weinert, papaya Software GmbH
Yslow: Components




Thomas Weinert, papaya Software GmbH
Yslow: Tools
   Print View
   JSLint




Thomas Weinert, papaya Software GmbH
Make Fewer HTTP Requests
   Combined files
     ▹   CSS
     ▹   JavaScript

    CSS sprites




Thomas Weinert, papaya ...
Combined files
   Release process
   CSS
     ▹   Consider URLs

    JavaScript
     ▹   Minify
     ▹   Obfuscate



T...
CSS Sprites
   Elements with fixed size
   Background image

    Disable repeat

    Negative positions




Thomas Wei...
CSS Icons
   Raster of icons
   No repeat

    Fixed size
    <div> or <span>




Thomas Weinert, papaya Software GmbH
CSS Backgrounds
   Gradient
   Repeat in one
    direction




Thomas Weinert, papaya Software GmbH
Minify Javascript
   Most JS libraries provide a minified version
   YUI Compressor: http://developer.yahoo.com/
    yui...
#2 Use A CDN
   Content Delivery Network
     ▹   Akamai Technologies
     ▹   Mirror Image Internet
     ▹   Limelight N...
Headers
   Expires
   Cache-Control
     ▹   Session-Management

    304 Not Modified




Thomas Weinert, papaya Softwa...
Expires
   Apache mod_expire

    <IfModule mod_expires.c>
        ExpiresDefault quot;access plus 1 monthquot;
        E...
Cache-Control
   nocache
     ▹   no caching
     ▹   default for sessions

    private
     ▹   cacheable in browser ca...
304 Not Modified
   Send Etag and Modfication date
     ▹   Etag: quot;some hashquot;
     ▹   Last-Modified: Thu, 12 Sep...
HTTPFox
   Firefox Extension
   Log of all HTTP requests

    Not only displayed content




Thomas Weinert, papaya Sof...
Gzip Components
   Gzip != Zip
     ▹   only compression
     ▹   no packaging
     ▹   tar.gz

    Good browser support...
Gzip in Apache
   mod_gzip
   mod_deflate
     ▹   filter chain, works on dynamic content, too


     ▹   http://httpd.a...
Gzip In PHP 5
<?php
    ob_start('ob_gzhandler');
    ...




Thomas Weinert, papaya Software GmbH
Gzip In PHP 5
<?php
    if (function_exists('ob_gzhandler')) {
        ob_start('ob_gzhandler');
    }
    ...




Thomas ...
Configure ETags
   Browser still asks webserver
   Server specific
     ▹    CDN
     ▹    Load balancer with multiple s...
Split requests across
                                      domains
   HTTP 1.1 suggests 2 parallel requests per
    doma...
Reduce DNS Lookups
   DNS maps host names to ips
   Needs time
     ▹   20-120 milliseconds

    Cached in browser




...
Avoid Redirects
   Obviously additional requests
   Only cached with explicit headers
     ▹   depends on webserver conf...
Put Stylesheets at the Top
   Progressive display of the page
   Page appears to load faster

    W3C specifications


...
Put Scripts at the Bottom
   Scripts block parallel downloads
     ▹   defer attribute in MSIE

    onload() event
     ...
Avoid CSS Expressions
   MSIE from version 5
     ▹   cross browser experience

    JavaScript inside CSS

    Evaluate...
JavaScript And CSS Files
   Do not embed JS/CSS in your pages
     ▹   No <script>...</script>
     ▹   No <style>...</st...
Remove Duplicate Scripts
   Team size
   Standard scripts
     ▹   XMLRPC, JQuery, Prototype

    Script module for you...
Make Ajax Cacheable
   Often AJAX applications avoid caching
     ▹   http://some.domain.tld/ajax.file?t=randomvalue

  ...
References
   Slides: http://www.abasketfulofpapayas.de/
   Yahoo Performance Team
     ▹   http://developer.yahoo.com/p...
Upcoming SlideShare
Loading in...5
×

Optimizing Your Frontend Performance

1,809

Published on

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

No Downloads
Views
Total Views
1,809
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Optimizing Your Frontend Performance

  1. 1. Optimizing Your Frontend Performance Thomas Weinert
  2. 2. About Me  Application Developer ▹ PHP ▹ XSLT/XPath ▹ (some) Javascript  papaya CMS ▹ PHP based Content Management System ▹ uses XSLT for Templates Thomas Weinert, papaya Software GmbH
  3. 3. How to scale you webpage?  Hardware  Backend  Frontend Thomas Weinert, papaya Software GmbH
  4. 4. Hardware  More hardware  Better hardware  Moores Law ▹ Transistors doubling every 18 months ▹ Transistors != Performance  Distributed systems are complex  Think about environment Thomas Weinert, papaya Software GmbH
  5. 5. Backend  External data sources are slow ▹ SQL ▹ Files ▹ Network  Locking is slower  Memory is faster ▹ but less secure Thomas Weinert, papaya Software GmbH
  6. 6. Mini/Micro Optimisations  Myths ▹ echo vs. print ▹ ' vs. quot;  Objects vs. functions vs. linear source  Template systems Thomas Weinert, papaya Software GmbH
  7. 7. Mini/Micro Optimisations DON'T DO IT Thomas Weinert, papaya Software GmbH
  8. 8. Yahoo!  Yahoo!'s Exceptional Performance team ▹ Yahoo!'s Exceptional Performance team evangelizes best practices for improving web performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Their best practices center around the rules for high performance web sites. ▹ http://developer.yahoo.com/performance/ Thomas Weinert, papaya Software GmbH
  9. 9. Results  80% of the end-user response time is spent on the front-end. Thomas Weinert, papaya Software GmbH
  10. 10. Firebug  Firefox extension  Analyze and manipulate ▹ requests, page structure, CSS  Javascript debugger Thomas Weinert, papaya Software GmbH
  11. 11. YSlow  Why (is your web page) slow  Set of rules  Firebug extension Thomas Weinert, papaya Software GmbH
  12. 12. Yslow: Performance View Thomas Weinert, papaya Software GmbH
  13. 13. Yslow: Stats Thomas Weinert, papaya Software GmbH
  14. 14. Yslow: Components Thomas Weinert, papaya Software GmbH
  15. 15. Yslow: Tools  Print View  JSLint Thomas Weinert, papaya Software GmbH
  16. 16. Make Fewer HTTP Requests  Combined files ▹ CSS ▹ JavaScript  CSS sprites Thomas Weinert, papaya Software GmbH
  17. 17. Combined files  Release process  CSS ▹ Consider URLs  JavaScript ▹ Minify ▹ Obfuscate Thomas Weinert, papaya Software GmbH
  18. 18. CSS Sprites  Elements with fixed size  Background image  Disable repeat  Negative positions Thomas Weinert, papaya Software GmbH
  19. 19. CSS Icons  Raster of icons  No repeat  Fixed size <div> or <span> Thomas Weinert, papaya Software GmbH
  20. 20. CSS Backgrounds  Gradient  Repeat in one direction Thomas Weinert, papaya Software GmbH
  21. 21. Minify Javascript  Most JS libraries provide a minified version  YUI Compressor: http://developer.yahoo.com/ yui/compressor/ ▹ JS and CSS  Packer ▹ Webpage, .Net, Perl, PHP ▹ http://dean.edwards.name/packer/ Thomas Weinert, papaya Software GmbH
  22. 22. #2 Use A CDN  Content Delivery Network ▹ Akamai Technologies ▹ Mirror Image Internet ▹ Limelight Networks  Bring the content to your users ▹ Geographic distance ▹ Physics is still here  Only for large sites  Dynamic content is complex Thomas Weinert, papaya Software GmbH
  23. 23. Headers  Expires  Cache-Control ▹ Session-Management  304 Not Modified Thomas Weinert, papaya Software GmbH
  24. 24. Expires  Apache mod_expire <IfModule mod_expires.c> ExpiresDefault quot;access plus 1 monthquot; ExpiresActive on </IfModule> Thomas Weinert, papaya Software GmbH
  25. 25. Cache-Control  nocache ▹ no caching ▹ default for sessions  private ▹ cacheable in browser cache  public ▹ cacheable in browser cache and proxies Thomas Weinert, papaya Software GmbH
  26. 26. 304 Not Modified  Send Etag and Modfication date ▹ Etag: quot;some hashquot; ▹ Last-Modified: Thu, 12 Sep 2008 11:00:00 GMT  Request headers ▹ If-Modified-Since: Tue, 12 Sep 2008 11:00:00 GMT ▹ If-None-Match: quot;some hashquot;  Response headers ▹ HTTP/1.1 304 Not Modified Thomas Weinert, papaya Software GmbH
  27. 27. HTTPFox  Firefox Extension  Log of all HTTP requests  Not only displayed content Thomas Weinert, papaya Software GmbH
  28. 28. Gzip Components  Gzip != Zip ▹ only compression ▹ no packaging ▹ tar.gz  Good browser support ▹ Accept-Encoding: gzip, deflate ▹ Content-Encoding: gzip Thomas Weinert, papaya Software GmbH
  29. 29. Gzip in Apache  mod_gzip  mod_deflate ▹ filter chain, works on dynamic content, too ▹ http://httpd.apache.org/docs/2.2/mod/mod_deflate.html Thomas Weinert, papaya Software GmbH
  30. 30. Gzip In PHP 5 <?php ob_start('ob_gzhandler'); ... Thomas Weinert, papaya Software GmbH
  31. 31. Gzip In PHP 5 <?php if (function_exists('ob_gzhandler')) { ob_start('ob_gzhandler'); } ... Thomas Weinert, papaya Software GmbH
  32. 32. Configure ETags  Browser still asks webserver  Server specific ▹ CDN ▹ Load balancer with multiple servers  Apache ▹ FileETag none  IIS ▹ http://support.microsoft.com/?id=922733 Thomas Weinert, papaya Software GmbH
  33. 33. Split requests across domains  HTTP 1.1 suggests 2 parallel requests per domain  Separate content by function ▹ www.domain.tld ▹ themes.domain.tld ▹ usercontent.domain.tld (security)  Optimisation tools change the option  Consider cookie domains Thomas Weinert, papaya Software GmbH
  34. 34. Reduce DNS Lookups  DNS maps host names to ips  Needs time ▹ 20-120 milliseconds  Cached in browser Thomas Weinert, papaya Software GmbH
  35. 35. Avoid Redirects  Obviously additional requests  Only cached with explicit headers ▹ depends on webserver configuration  http://www.domain.tld ▹ http://www.domain.tld/ Thomas Weinert, papaya Software GmbH
  36. 36. Put Stylesheets at the Top  Progressive display of the page  Page appears to load faster  W3C specifications Thomas Weinert, papaya Software GmbH
  37. 37. Put Scripts at the Bottom  Scripts block parallel downloads ▹ defer attribute in MSIE  onload() event ▹ used by most libraries  Problem: document.write() ▹ Counter ▹ Banners Thomas Weinert, papaya Software GmbH
  38. 38. Avoid CSS Expressions  MSIE from version 5 ▹ cross browser experience  JavaScript inside CSS  Evaluated ▹ page render ▹ resize ▹ scrolling ▹ mouse movements (hover) Thomas Weinert, papaya Software GmbH
  39. 39. JavaScript And CSS Files  Do not embed JS/CSS in your pages ▹ No <script>...</script> ▹ No <style>...</style>  Separate caching headers  Revision parameter (style.css?rev=1234) ▹ Get parameter ▹ Unique URL for browser Thomas Weinert, papaya Software GmbH
  40. 40. Remove Duplicate Scripts  Team size  Standard scripts ▹ XMLRPC, JQuery, Prototype  Script module for your template system  $templatesystem->addScript('foo.js'); Thomas Weinert, papaya Software GmbH
  41. 41. Make Ajax Cacheable  Often AJAX applications avoid caching ▹ http://some.domain.tld/ajax.file?t=randomvalue  A lot of requests  Use more static URLs Thomas Weinert, papaya Software GmbH
  42. 42. References  Slides: http://www.abasketfulofpapayas.de/  Yahoo Performance Team ▹ http://developer.yahoo.com/performance/  JS minimize ▹ http://developer.yahoo.com/yui/compressor/ ▹ http://dean.edwards.name/packer/  Apache GZIP ▹ http://httpd.apache.org/docs/2.2/mod/mod_deflate.html  No Etag in IIS ▹ http://support.microsoft.com/?id=922733 Thomas Weinert, papaya Software GmbH
  1. A particular slide catching your eye?

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

×