![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);
}());](https://image.slidesharecdn.com/httpdiet-111028161048-phpapp01/85/Going-on-an-HTTP-Diet-Front-End-Web-Performance-71-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Going on an HTTP Diet: Front-End Web Performance (20)
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
Going on an HTTP Diet: Front-End Web Performance
- 2. "Never underestimate the — CEO Eric Schmidt announcing Google Instant in September 2010
- 6. The Low-Hanging Fruit The 20 / 80 rule
- 7. I. Serve up lighter files II. Trim back on HTTP III. Keep things a-movin’ (avoid blocking)
- 10. Image Optimization Images are often >50% of a page’s total weight!
- 11. Leaner JPEGs
- 12. Leaner JPEGs: Quality
- 14. Leaner JPEGs: Metadata
- 15. Leaner JPEGs: Metadata command line ahoy! > jpegtran -copy none -optimize src.jpg dest.jpg
- 17. Professional PNGs: bit depth
- 18. Professional PNGs: 8bit
- 19. Professional PNGs: 8bit alpha woes? •8bit PNGs CAN have full alpha support! •Use Adobe Fireworks instead •Or run them through pngquant
- 20. Professional PNGs: PNGQUANT command line ahoy! > pngquant 256 whatever.png
- 21. Professional PNGs: PNGCRUSH command line ahoy! > pngcrush -rem alla -reduce -brute source.png dest.png
- 23. animated GIFs are back gifsicle can help
- 24. 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!
- 25. Slimmer Text Fil Minify your scripts and other text jquery-1.6.3.js jquery-1.6.3.min.js
- 26. Slimmer Text Fil Minify your scripts and other text • YUICompressor • Google's Closure Compiler • Dojo ShrinkSafe • Packer • JSMin
- 27. Slimmer Text Fil Serious bandwidth savings with gzip For 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…
- 28. Trim Back on HTTP Requests
- 29. 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
- 30. 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
- 31. HTTP Waterfall IE7 generated with http:// www.webpagetest.org/
- 32. HTTP Waterfall - Chrome 14
- 33. Remove Duplicates &
- 34. Fold print and media query styles
- 35. Fold print and media query styles <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="print.css" />
- 36. Fold print and media query styles /* Print styles in styles.css @media print { body { background: #fff; } }
- 39. use PS: Maybe use CSS opacity to cut down on the number of button states in an image sprite?
- 41. Data URIs
- 42. Data URIs • Prevents the opening of an additional TCP request
- 43. Data URIs • Prevents the opening of an additional TCP request • Faster download than a separate image request
- 44. 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()
- 45. 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)
- 46. 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)
- 47. 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)
- 48. Cache: Far-Future Expires
- 49. Cache: Far-Future Expires
- 50. 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>
- 51. Cache: Far-Future Expires Wait, why are they still seeing that version?!
- 52. 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…
- 53. 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!)
- 54. Cache: ETags
- 55. Cache: Disable ETags Another one for your .htaccess FileETag none
- 56. 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
- 57. Stay in Motion (avoid resource blocking)
- 58. Blocking (IE7 example)
- 59. What can cause blocking?
- 60. What can cause blocking? in • External scripts cause blocking, case of a document.write() and to ensure proper order of execution
- 61. 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
- 62. 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
- 63. 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
- 64. 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
- 66. How do we get around this?
- 67. How do we get around this? • Put stylesheets in the <head> using a <link> tag instead of @import
- 68. 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)
- 69. 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
- 70. 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 **
- 71. 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); }());
- 73. Forward-looking approaches • <script defer> (wide browser support, but execution order?)
- 74. Forward-looking approaches • <script defer> (wide browser support, but execution order?) • <script async> (HTML5, widening support, but no IE)
- 75. 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…)
- 76. DEMO YSlow PageSpeed
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n