![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/75/Going-on-an-HTTP-Diet-Front-End-Web-Performance-71-2048.jpg)
More Related Content
Similar to Going on an HTTP Diet: Front-End Web Performance
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 uplighter files II. Trim back on HTTP III. Keep things a-movin’ (avoid blocking)
- 8.
- 9.
- 10. Image Optimization Images areoften >50% of a page’s total weight!
- 11.
- 12. Leaner JPEGs: Quality
- 13.
- 14. Leaner JPEGs: Metadata
- 15. Leaner JPEGs: Metadata command line ahoy! > jpegtran -copy none -optimize src.jpg dest.jpg
- 16.
- 17. Professional PNGs: bit depth
- 18. Professional PNGs: 8bit
- 19. Professional PNGs: 8bitalpha 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
- 22.
- 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 HTTPRequests
- 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.
- 34. Fold print and mediaquery styles
- 35. Fold print and media query styles <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="print.css" />
- 36. Fold print and mediaquery styles /* Print styles in styles.css @media print { body { background: #fff; } }
- 37.
- 38.
- 39. use PS: Maybe use CSS opacity to cut down on the number of button states in an image sprite?
- 40.
- 41.
- 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.
- 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 (avoidresource 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
- 65.
- 66. How do weget around this?
- 67. How do weget around this? • Put stylesheets in the <head> using a <link> tag instead of @import
- 68. How do weget 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 weget 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 weget 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); }());
- 72.
- 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