This document discusses how to optimize a website for speed. It recommends identifying performance bottlenecks by measuring the speed index and load times. Specific optimizations include minimizing JavaScript and CSS files, inlining critical CSS, loading scripts asynchronously, enabling gzip compression, reducing the number of HTTP requests, and optimizing images. The document emphasizes that bandwidth, latency, and parallelization all impact performance.
18. Why
is
it
important
?
You can’t optimize
what you can’t measure
Www.Marcocasario.Com 28
Friday, April 11, 14
19. Why
is
it
important
?
Learning how the browsers
load your web pages, helps you:
make better decisions,
justify the approaches and the
development best practices.
-- Paul Irish
Www.Marcocasario.Com 28
Friday, April 11, 14
21. Browser’s
rendering
flow
It’s not a linear flow.
Each time a resource needs to
be downloaded, it blocks the
rendering.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Www.Marcocasario.Com 28
Friday, April 11, 14
22. How
to
opCmize
In order to optimize you:
1. identify & mesure a scenario
2. define what the fastest you
can get is
Www.Marcocasario.Com 28
Friday, April 11, 14
23. How
to
opCmize
The Speed Index
Www.Marcocasario.Com 28
https://sites.google.com/a/webpagetest.org/docs/
using-webpagetest/metrics/speed-index
Friday, April 11, 14
24. How
to
opCmize
The Speed Index is the average time at
which visible parts of the page are
displayed. It is expressed in
milliseconds and dependent on size of
the view port.
It measures when pixels are shown on
screen.
Www.Marcocasario.Com 28
Friday, April 11, 14
25. How
to
opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the
curve" calculated in ms and using 0.0-1.0
for the range of visually complete.
Friday, April 11, 14
26. How
to
opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the
curve" calculated in ms and using 0.0-1.0
for the range of visually complete.
Friday, April 11, 14
27. How
to
opCmize
Identify the Load Time & the
End of Activity
Www.Marcocasario.Com 28
Friday, April 11, 14
31. How
to
opCmize
Focus on:
the speed index value
the total load time
the render time
the bandwidth
Www.Marcocasario.Com 28
Friday, April 11, 14
32. How
to
opCmize
Is the bandwidth so important
for faster pages ?
Www.Marcocasario.Com 28
Friday, April 11, 14
33. How
to
opCmize
For getting fast pages, what is
the right number of requests
and optimal page size ?
Www.Marcocasario.Com 28
Friday, April 11, 14
34. How
to
opCmize
Measuring performance by the KB is
like measuring effectiveness of your
diet by the pound.
Measuring performance by the number
of requests is like measuring your diet
by number of things you ate - in both
cases, who cares about what you
actually ate, right ?
Www.Marcocasario.Com 28
Friday, April 11, 14
35. How
to
opCmize
Moreover, not all requests are
made equal.
Where are they initiated?
What part of the UX do they
block ?
Www.Marcocasario.Com 28
Friday, April 11, 14
36. How
to
opCmize
Moreover, not all the bytes are
made equal.
Bytes of different content-types
have different impact on
performance.
Www.Marcocasario.Com 28
Friday, April 11, 14
37. How
to
opCmize
What's the critical path on
loading a page ?
Www.Marcocasario.Com 28
Friday, April 11, 14
39. How
to
opCmize
You need to understand the
components of an HTTP
request
Www.Marcocasario.Com 28
Friday, April 11, 14
40. How
to
opCmize
1. DNS lookup to resolve the hostname
to IP address
2. New TCP connection requires a
handshake roundtrip to the server
3. HTTP request requires minimum of a
one roundtrip to the server plus server
processing time
Www.Marcocasario.Com 28
Friday, April 11, 14
42. How
to
opCmize
Focus on:
DNS Lookup
TCP connection
HTTP requests
Bandwidth used
Www.Marcocasario.Com 28
Friday, April 11, 14
43. How
to
opCmize
What does it happen when
there is a gap in the bandwidth
chart ?
Www.Marcocasario.Com 28
Friday, April 11, 14
44. How
to
opCmize
Www.Marcocasario.Com 28
http://chimera.labs.oreilly.com/books/1230000000545/
ch10.html#LATENCY_BOTTLENECK
Friday, April 11, 14
45. How
to
opCmize
Latency is the performance
bottleneck for HTTP as well as
all the web.
Www.Marcocasario.Com 28
Friday, April 11, 14
46. How
to
opCmize
Focus on how resources that
are requested from a different
origin consume network time
http://www.webpagetest.org/video/compare.php?
tests=140410_AT_DST-r:1-c:0
Www.Marcocasario.Com 28
Friday, April 11, 14
47. How
to
opCmize
What will your gain be if you
load zeptojs instead of Jquery ?
What if you reduce the blocking
resources and make parallel
loading ?
Www.Marcocasario.Com 28
Friday, April 11, 14
48. How
to
opCmize
How can you write better code
to render the page faster ?
Www.Marcocasario.Com 28
Friday, April 11, 14
49. How
to
opCmize
Eliminate render-blocking JS
Load JS asynch
Www.Marcocasario.Com 28
Friday, April 11, 14
50. How
to
opCmize
<script src="file.js" defer></script>
<script src="file.js" async></script>
Www.Marcocasario.Com 28
Friday, April 11, 14
51. How
to
opCmize
Use a library like RequireJS
Www.Marcocasario.Com 28
Friday, April 11, 14
52. How
to
opCmize
Double check the size of the
Cookies
(Resources Tab of the Dev Tools)
Www.Marcocasario.Com 28
Friday, April 11, 14
53. How
to
opCmize
Serve the content in the initial
part of html
Avoid redirects for html
Www.Marcocasario.Com 28
Friday, April 11, 14
54. How
to
opCmize
Use Gzip.
http://www.gidnetwork.com/tools/gzip-
test.php
Www.Marcocasario.Com 28
Friday, April 11, 14
55. How
to
opCmize
No really, Use Gzip.
Www.Marcocasario.Com 28
Friday, April 11, 14
56. How
to
opCmize
Don't F*#k Around, use gzip.
Www.Marcocasario.Com 28
Friday, April 11, 14
57. How
to
opCmize
Have a look at SPDY: An
experimental protocol for a
faster web
Www.Marcocasario.Com 28
Friday, April 11, 14
59. How
to
opCmize
Minimize your JavaScript and
CSS files.
It's easy and it can be
automated.
Www.Marcocasario.Com 28
Friday, April 11, 14
60. How
to
opCmize
Minimize render-blocking CSS:
separate critical from non
critical CSS if your CSS payload
is larger that 15kb
Avoid including large data URIs
Www.Marcocasario.Com 28
Friday, April 11, 14
61. How
to
opCmize
Talking about rendering, how
you can write better CSS to
render the page faster ?
Www.Marcocasario.Com 28
Friday, April 11, 14
62. How
to
opCmize
External CSS stylesheets are
render-blocking, meaning the
browser won’t paint content to
the screen until all of your CSS
– specifically, media=’screen’
CSS – arrives.
Www.Marcocasario.Com 28
Friday, April 11, 14
63. How
to
opCmize
The solution to this is inlining
the initially needed (above-the-
fold) CSS for your page and
loading the rest of your CSS
when the page is ready.
Www.Marcocasario.Com 28
Friday, April 11, 14
64. How
to
opCmize
Inline CSS
Ready and available for the
page.
Single HTTP request to view
content.
Www.Marcocasario.Com 28
Friday, April 11, 14
65. How
to
opCmize
Inline CSS
Shave 500-700 ms off start
rendering the
DOMContentReady
Use only for the critical CSS
Www.Marcocasario.Com 28
Friday, April 11, 14
66. How
to
opCmize
How can you define your critical
content?
What the user expects to first
see on the page when it’s
loaded.
Www.Marcocasario.Com 28
Friday, April 11, 14
67. How
to
opCmize
Load CSS from local storage
http://addyosmani.github.io/
basket.js/
Www.Marcocasario.Com 28
Friday, April 11, 14
69. How
to
opCmize
Www.Marcocasario.Com 28
Op9mize
images
Use
the
Sprite
technique.
h>p://alistapart.com/ar9cle/sprites
h>p://spriteme.org/
Friday, April 11, 14
71. How
to
opCmize
Compress images
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/
Www.Marcocasario.Com 28
Friday, April 11, 14
77. Yeoman
Before Yeoman
Make a list of libraries to use in your
project (es. Bootstrap, HTML5
Boilerplate, Backbone etc)
Download the libraries
Organize the folders
Include the libraries to the project
Write the code
Maintain and update the libraries
Www.Marcocasario.Com 28
Friday, April 11, 14
78. Yeoman
With Yeoman
yo webapp
HTML5 Boilerplate
Twitter Bootstrap
Project Structure
RequireJS (optional)
Modernizr (optional)
Build process
...
Www.Marcocasario.Com 28
Friday, April 11, 14
79. Yeoman
yo webapp
# scaffold out a skeleton web app
project
bower install underscore
# install a dependency for your project
from Bower
grunt
# build the application for deployment
Www.Marcocasario.Com 28
Friday, April 11, 14
80. Yeoman
One of the sub-tsk that Grunt executes
is the -usemin that makes the following:
<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
After your grunt build task completes,
you will end up with this:
<script src="scripts/c155266f.main.js"></script>
Www.Marcocasario.Com 28
Friday, April 11, 14