Going on an HTTP Diet: Front-End Web Performance

564 views

Published on

Is your web site or web app feeling sluggish? Getting tired of watching your pages slowly render, the long seconds ticking away before your snazzy jQuery doohickey even has a chance to fire? Chances are it’s not that slow bit of code or that clunky database behind the scenes that’s to blame – 80% of the time spent loading most web pages is on the client side! At this talk, we’ll take a look at some of the easiest low-hanging fruit you can go after to help speed up web performance on the front end, from slimming down the size of content to optimizing HTTP requests, and more.

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

No Downloads
Views
Total views
564
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Going on an HTTP Diet: Front-End Web Performance

    1. 1. "Neverunderestimate the — CEO Eric Schmidt announcing Google Instant in September 2010
    2. 2. The Low-Hanging Fruit The 20 / 80 rule
    3. 3. I. Serve up lighter filesII. Trim back on HTTPIII. Keep things a-movin’ (avoid blocking)
    4. 4. SERVE UPLighter Files
    5. 5. The HTTP Waterfall
    6. 6. Image OptimizationImages are often >50% of a page’s total weight!
    7. 7. Leaner JPEGs
    8. 8. Leaner JPEGs: Quality
    9. 9. Leaner JPEGs: Progressive
    10. 10. Leaner JPEGs: Metadata
    11. 11. Leaner JPEGs: Metadata command line ahoy!> jpegtran -copy none -optimize src.jpg dest.jpg
    12. 12. Professional PNGs
    13. 13. Professional PNGs: bit depth
    14. 14. Professional PNGs: 8bit
    15. 15. Professional PNGs: 8bit alpha woes?•8bit PNGs CAN have full alpha support!•Use Adobe Fireworks instead•Or run them through pngquant
    16. 16. Professional PNGs: PNGQUANT command line ahoy! > pngquant 256 whatever.png
    17. 17. Professional PNGs: PNGCRUSH command line ahoy! > pngcrush -rem alla -reduce -brute source.png dest.png
    18. 18. smush.itThat’s the URL!
    19. 19. animated GIFs are back gifsicle can help
    20. 20. Slimmer Text Fil The Rudimentary Approach• class=“whatever” → class=whatever• http://www.utexas.edu/law/whatever.html → /law/whatever.html• <script type=“text/javascript”> → <script>• Use CSS shorthand!
    21. 21. Slimmer Text Fil Minify your scripts and other textjquery-1.6.3.js jquery-1.6.3.min.js
    22. 22. Slimmer Text Fil Minify your scripts and other text• YUICompressor• Googles Closure Compiler• Dojo ShrinkSafe• Packer• JSMin
    23. 23. Slimmer Text Fil Serious bandwidth savings with gzipFor Apache 2.x*:<ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css application/x-javascript</ifModule> * Note: don’t do this on Web Central…
    24. 24. Trim Back onHTTP Requests
    25. 25. The Problem with HTTP Requests HTTP/1.1 specifies 2 maximum simultaneous TCP connections Source: HTTP/1.1 specification, RFC 2616 8.1.4 http://www.w3.org/Protocols/rfc2616/rfc2616- sec8.html#sec8
    26. 26. The Problem with HTTP Requests HTTP/1.1 specifies 2 maximum simultaneous TCP connections (per domain) Source: HTTP/1.1 specification, RFC 2616 8.1.4 http://www.w3.org/Protocols/rfc2616/rfc2616- sec8.html#sec8
    27. 27. HTTP Waterfall IE7generated with http://www.webpagetest.org/
    28. 28. HTTP Waterfall - Chrome 14
    29. 29. Remove Duplicates &
    30. 30. Fold print andmedia query styles
    31. 31. Fold print and media query styles<link rel="stylesheet" href="styles.css" /><link rel="stylesheet" href="print.css" />
    32. 32. Fold print andmedia query styles/* Print styles in styles.css@media print { body { background: #fff; }}
    33. 33. CSS Image Sprites
    34. 34. CSS Image Sprites
    35. 35. use PS: Maybe use CSS opacity to cut down on the number of button states in an image sprite?
    36. 36. Data URIsbackground-image: url("data:image/png;base64,xKfsiO…ssseAdd==");
    37. 37. Data URIs
    38. 38. Data URIs• Prevents the opening of an additional TCP request
    39. 39. Data URIs• Prevents the opening of an additional TCP request• Faster download than a separate image request
    40. 40. Data URIs• Prevents the opening of an additional TCP request• Faster download than a separate image request• Can be created on the fly in PHP with base64_encode()
    41. 41. Data URIs• Prevents the opening of an additional TCP request• Faster download than a separate image request• Can be created on the fly in PHP with base64_encode()• Are only cached if included inside of a stylesheet (not inline)
    42. 42. Data URIs• Prevents the opening of an additional TCP request• Faster download than a separate image request• Can be created on the fly in PHP with base64_encode()• Are only cached if included inside of a stylesheet (not inline)• ~30% larger than “real” image files (~2% if gzip is enabled)
    43. 43. Data URIs• Prevents the opening of an additional TCP request• Faster download than a separate image request• Can be created on the fly in PHP with base64_encode()• Are only cached if included inside of a stylesheet (not inline)• ~30% larger than “real” image files (~2% if gzip is enabled)• Wide browser support, but no IE 7 or older (and IE8 only supports up to 32KB of data)
    44. 44. Cache: Far-Future Expires
    45. 45. Cache: Far-Future Expires
    46. 46. Cache: Far-Future Expires Stick this in your .htaccess<IfModule mod_expires.c>ExpiresActive on <FilesMatch ".(gif|jpg|png|js|css)$"> ExpiresDefault "access plus 5 years" </FilesMatch></IfModule>
    47. 47. Cache: Far-Future ExpiresWait, why are they still seeing that version?!
    48. 48. Cache: Far-Future Expires Wait, why are they still seeing that version?!• A good practice, but users might end up with old versions of styles and scripts…
    49. 49. Cache: Far-Future Expires Wait, why are they still seeing that version?!• A good practice, but users might end up with old versions of styles and scripts…• To force a fresh download you can rename the file (I hope you’ve got a CMS or build process that makes this easy!)
    50. 50. Cache: ETags
    51. 51. Cache: Disable ETags Another one for your .htaccess FileETag none
    52. 52. Cache: Disable ETags Another one for your .htaccess FileETag none Recommended by Microsoft and Apache! http://support.microsoft.com/? id=922733 http://www.apacheweek.com/issues/ 02-0-18
    53. 53. Stay in Motion(avoid resource blocking)
    54. 54. Blocking (IE7 example)
    55. 55. What can cause blocking?
    56. 56. What can cause blocking? in• External scripts cause blocking, case of a document.write() and to ensure proper order of execution
    57. 57. What can cause blocking? in• External scripts cause blocking, case of a document.write() and to ensure proper order of execution•Inline <script> can hang things up
    58. 58. What can cause blocking? in• External scripts cause blocking, case of a document.write() and to ensure proper order of execution•Inline <script> can hang things up•Scripts often don’t execute until stylesheets are finished downloading
    59. 59. What can cause blocking? in• External scripts cause blocking, case of a document.write() and to ensure proper order of execution•Inline <script> can hang things up•Scripts often don’t execute until stylesheets are finished downloading•CSS @import causes blocking in older IE
    60. 60. What can cause blocking? in• External scripts cause blocking, case of a document.write() and to ensure proper order of execution•Inline <script> can hang things up•Scripts often don’t execute until stylesheets are finished downloading•CSS @import causes blocking in older IE•iframes can block onload from firing
    61. 61. Cuzillionhttp://stevesouders.com/cuzillion/
    62. 62. How do we get around this?
    63. 63. How do we get around this?• Put stylesheets in the <head> using a <link> tag instead of @import
    64. 64. How do we get around this?• Put stylesheets in the <head> using a <link> tag instead of @import• Put your scripts as close to the </body> tag as possible (in most circumstances)
    65. 65. How do we get around this?• Put stylesheets in the <head> using a <link> tag instead of @import• Put your scripts as close to the </body> tag as possible (in most circumstances)• Use a script loader like LabJS or HeadJS
    66. 66. How do we get around this?• Put stylesheets in the <head> using a <link> tag instead of @import• Put your scripts as close to the </body> tag as possible (in most circumstances)• Use a script loader like LabJS or HeadJS• Use non-blocking script insertion techniques like XHR Injection **
    67. 67. Asynchronous Script Insertion(function () { var ga = document.createElement(script), s = document.getElementsByTagName(script)[0]; ga.type = text/javascript; ga.async = true; ga.src = (https: === document.location.protocol ? https://ssl : http://www) + .google-analytics.com/ga.js; s.parentNode.insertBefore(ga, s);}());
    68. 68. Forward-looking approaches
    69. 69. Forward-looking approaches• <script defer> (wide browser support, but execution order?)
    70. 70. Forward-looking approaches• <script defer> (wide browser support, but execution order?)• <script async> (HTML5, widening support, but no IE)
    71. 71. Forward-looking approaches• <script defer> (wide browser support, but execution order?)• <script async> (HTML5, widening support, but no IE)• Web Workers (Multi-threaded JS processing! But no IE…)
    72. 72. DEMOYSlow PageSpeed

    ×