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.
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…
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)
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!)
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
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
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 **
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…)