Front-end optimization involves everything that's delivered to the browser. We're looking to optimize HTML, CSS, JS, and images in such a way as to allow the browser to download and render these objects as quickly as possible.

1. Front-End Web
Performance Optimization
BucketSoft.com

2. Why performance matters
• Google found that the page with 10 results took 0.4 seconds to
generate. The page with 30 results took 0.9 seconds. Half a
second delay caused a 20% drop in traffic.
• Every 100 milliseconds in page load delay costs Amazon.com
1% of sales.
• By speeding the page load times up by 5 seconds, Shopzilla.com
increased their conversion rate by 7-12%.

3. wposample1.bucketsoft.com

4. Set Cache-Control: max-age
• By setting the max-age parameter for static content (CSS, JS,
and images) you effectively tell the browser to cache those files
for that amount of time.
• Eliminating all of those 304 Not Modified responses makes a big
difference for return visitors.
• The recommended max-age setting is 1 year. But max-age is in
seconds, so that's 60 x 60 x 24 x 365 = 31536000.
• If your CSS file changes, for example, you should change the file
name or append a querystring, e.g. href="/screen.css?v=2"

5. Waterfall view from webpagetest.org

6. Unoptimized
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
1.333s
1.623s
LOAD TIME
LOAD TIME
2.080s
2.545s

7. GZIP Compression
• Has been around since IE4 days.
• Can compress HTML, JS, and CSS files to about 1/3 or 1/4 their
original size.
• We might have opted to not do dynamic compression in the
past on older servers. But processing speeds today are much
higher.
• Bottom line: Always enable GZIP on your server.

8. GZIP Compression
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
1.121s 15.9% faster
1.411s 13.1% faster
LOAD TIME
LOAD TIME
1.880s 9.6% faster
2.466s 3.1% faster

9. Move JS to bottom of HTML
• JavaScript exhibits a blocking behavior in the browser as it's
being downloaded and parsed.
• Moving JavaScript references to the bottom of the HTML just
before the </body> tag will allow the page to start rendering
sooner.

10. Move JS to bottom of HTML
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
0.457s 59.2% faster
0.855s 39.4% faster
LOAD TIME
LOAD TIME
1.766s 6.1% faster
2.244s 9.0% faster

11. Combine files / CSS sprites
• There is latency and overhead in every request, so you should limit the number of requests.
• Here's an example of a single request to Google...
• GET http://www.google.com/ HTTP/1.1 Accept: application/x-ms-application, image/jpeg,
application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel,
application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, / AcceptLanguage: en-US User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
Trident/4.0; GTB0.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media
Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3) Accept-Encoding: gzip, deflate
Connection: Keep-Alive Host: www.google.com Cookie:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

12. Combine files / CSS sprites

13. Combine files / CSS sprites
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
0.440s 3.7% faster
0.818s 4.3% faster
LOAD TIME
LOAD TIME
1.575s 10.8% faster
2.182s 2.7% faster

14. Minify CSS and JS
• Minification strips out unnecessary whitespace and comments.
• While GZIP does a good job in compressing text, minification
has some language-specific optimizations that GZIP alone can't
give you.
• Bottom line: Use both minification and GZIP.

15. Minify CSS and JS
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
0.352s 20.0% faster
0.665s 18.7% faster
LOAD TIME
LOAD TIME
1.554s 1.3% faster
2.030s 7.0% faster

16. CDN
• A CDN (Content Delivery Network) solves the problem of global
latency.
• A CDN is worth using whenever you have a global audience.

17. CDN
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
0.417s 18.5% slower
0.620s 6.8% faster
LOAD TIME
LOAD TIME
1.592s 2.4% slower
1.835s 9.6% faster

18. Overall improvement
Dulles, VA
Amsterdam, NL
START RENDER
START RENDER
68.7% faster overall
61.8% faster overall
LOAD TIME
LOAD TIME
23.5% faster overall
27.9% faster overall

19. Recommended Reading
• My Favorite WPO Tools and Services
http://www.bucketsoft.com/articles/favorite-websiteoptimization-tools-and-services
• Performance is a Feature
http://www.codinghorror.com/blog/2011/06/performance-is-afeature.html