Find below my summary of the chapters and what I thought was important, for his own summaries go to his blog at http://stevesouders.com/efws/blogposts.php
Chapter A:
%80-%90 of
response time is because of front end problems not back end ones.
Chapter B:
Chapter 1:
Make fewer http requests
There are
several things that can be done here.
-Combine
images and use image maps or css sprites so that for a page only one image is
downloaded instead of multiple small images.
-Combine
javascript into one minified file
-Combine CSS
into one file.
The majority
of a pages download time is spent downloading images, scripts and stylesheets
so by limiting the number of files a page has to download you eliminate
expensive overhead caused by multiple HTTP requests for the individual files.
Chapter 2:
Use a CDN
A CDN is a
server specifically for static content, these servers should be located closer
to users, since they only host the static content, fewer are required to serve
the same load. Page load times decrease because the data is closer to the user.
Chapter 3:
Add Expires Headers
Adding a
max-age or expires header tells the browser how long the file should be cached
for. On Apache you can set a default that will be used for all files of a
certain type,
<FilesMatch
“\.(gif|jpg|js|css)$”> ExpiresDefault “access plus 2 months”
</FilesMatch>
Chapter 4: Use
gZip
Compress all
html, scripts and css. Don’t compress images or pdfs because they are already
compressed and compressing them again could increase file size. Configure
apache to compress automatically if file sizes are greater than 1-2k. The
improvements seen will depend on the size of the file, the users connection
speed, and the distance the packets have to travel. gZipping does add load to
the server.
Apache 2.x
uses the mod_deflate module. Use AddOutputFilterByType DEFLATE text/html
text/css application/x-javascript to compress html, css and js files.
Chapter 5:
Put stylesheets at the top
All
stylesheets should be in the HTML <Head> </head> tags, if they
aren’t then you risk one of two problems. Either the user won’t see any of the
page until everything is downloaded which makes the page look like it’s frozen,
or you show the user portions of the page before the style is downloaded, so
they see it unstyled and then styled when the css is downloaded, both are bad
user experiences. If style sheets are kept in the <head> tag then the
page can be loaded progressively and styled correctly.
Chapter 6:
Put scripts at the bottom
Scripts
block parallel downloading so having a script at the top or middle of the page
causes the entire page to wait for it to download. Putting scripts at the
bottom of the page lets all the content that can be downloaded parallel to
finish before the scripts start, that way most if not all of the content on the
page is displayed before the scripts start downloading. Sometimes you can’t
move a script because the layout of the page depends on it. If you can move it,
you should.
Chapter 7:
Avoid CSS Expressions
If you have
to use an expression, have it call a javascript function that overwrites the
expression so it is only evaluated once. Expressions can be evaluated thousands
of times if they aren’t overwritten.
Chapter 8:
Make JavaScript and CSS external
Move
javascript into external files so that the files can be cached which will
reduce the number of http requests for primed caches. Using the future expires
with this will help speed things up even more because a user’s cache will stay
primed longer. Inlining javascript will make for fewer http requests but no
caching will be possible, and the page size will be bigger.
If you have
to inline, you could try dynamically inlinning. This is where in your
php/jsp/.net code you copy the js/css file contents into a
<script>/<style> tag when the page is requested and then write some
javascript that will download the files separately after the page has loaded,
then you set a cookie and in the jsp/php/asp file you check for that cookie and
only inline the javascript if the cookie doesn’t exist. This way the user gets
the files when they aren’t doing anything else anyway, but the next time they
hit the page they won’t have to download the javascript again, resulting in
faster page loads and fewer http requests when users access the same page
multiple times.
Chapter 9:
Reduce DNS Lookups
Have fewer
domains to go to on a page, try to put everything on the same domain so it only
has to do one lookup.
Use
keep-alive so more data can be retrieved on a connection
Chapter 10:
Minify JavaScript
Gzip
combined with JSMin can reduce javascript files sizes by almost 80%
JSMin
probably has a version that will work with jsps so we can minify inline scripts
Chapter 11:
Avoid Redirects
Instead of
using server redirects, server aliases, mod_rewrite and DirectorySlash can be
used to accomplish the same task.
Programming
to the root instead of the current folder helps because then urls like
something.com/something don’t have to be changed to something.com/something/
To track web
page use, instead of using redirects you can use referrer logging, where you
log the referrer site for all traffic.
Chapter 12:
Remove duplicate scripts
If you have
the same script included twice IE will download it twice and won’t allow it to
be cached, increasing page load time every time.
Functions in
duplicated scripts will be executed as many times as the script is duplicated.
So slower run times, and potentially invalid results.
Chapter 13:
ETags
Make sure
etags are set up right. Etags allow you to give content a unique id, however
they don’t work across domains so multiple server setups probably shouldn’t use
them.
Chapter 14:
Make Ajax Cacheable
Use query
strings when making ajax requests and make sure they have far future expire
dates so that ajax requests that do the same thing each time don’t have to go
all the way to the server to get that data. Some obviously can’t be cached
because they return different data each time.
Use the
YSlow firebug plug in to get help improving page load times.
No comments:
Post a Comment