A document for in-house training (live web site optimization).
Web site performance improvement
● Policy to improve performance
● How to research points to improve
● Case study
● Draw pages quickly
– This slide explains only about client side
performance but generally you also need to
care about server side.
What we should care
when developer improves performance?
● Start when you need, from most effective
– “premature optimization is the root of all evil”
– the law of the instrument: “Give a small boy a
hammer, and he will find that everything he
encounters needs pounding.”
● Understand pros and cons of your
– Optimization may make your product and/or
build system complex
● e.g. JS/CSS Minification, CSS Image Sprites
– Is it enough simple for long-life system? Tricky
solution may make maintenance difficult.
● Make your improvement evaluable
– Do not guess, just measure and verify it.
– Use objective evidence to evaluate your page.
● When does DOMContentLoaded event fire?
● When does load event fire?
● Is there any other good objective evidences?
Problem: How to find 'most effective point'?
● To build hypothesis, learn general
examples and best practices
– High Performance Web Sites (O'Reilly)
– Even Faster Web Sites (O'Reilly)
– Web Performance Best Practices
– Yahoo!'s Exceptional Performance
● To use correct tool, you need 'tool box'
– To choose, you need choices.
Useful tool to find bottleneck
● Tools to analyse your page
– Chrome Developer Tools
– F12 Developer tools
● Tools to check your site automatically
– Page Speed
Problem: How to evaluate my challenge?
Useful tool to archive performance
● HTTP Archive (HAR) format
– JSON based, supported by modern browsers
– Good to compare result with previous state
What is problem?
● 'Wait' means that browser waits response
– Latency problem: server is too far from client
● 'Receive' means that browser receives data
– Too much data to download
Which data is so huge?
– Image: 49 files, 593.2KiB
– YSlow reported that content isn't gzipped
– jquery.js (105.3 KB) is the
Does browser cache works?
● You can see that it still has requests and
– YSlow reported that static components has no
far-future expiration date.
● Browser should ask server that
are there any updated resources or not.
– Latency problem makes this problem severe.
– JS/CSS is not gzipped
– Size of images are too heavy
– No expiration date in HTTP response
● to solve, we need new server or CDN
Solution 1: mod_deflate
● Compress text data (JS/CSS)
105Kib -> 37.1KiB (x2.83)
15.3KiB -> 6.6KiB (x2.32)
text/html text/plain text/xml
Solution 2: Image compression
● JPEGmini and TinyPNG to compress images
– Result: 593.2KiB -> 453.8KiB (x1.3)
Solution 3: mod_expires
● Add expiration date to HTTP response
– Reduced requests from 57 to 2 (HTML and
– Good improvement for high latency
ExpiresDefault "access plus 1 day"
Result (without browser cache)
Before After Note
57 57 x1.00
Data size 754 KiB 629 KiB x1.20
1.61s 1.33s x1.21
Result (with browser cache)
Before After Note
57 2 x28.5
Data size 10.9 KiB 436 B x25.6
464 ms 178 ms x2.61
● Learn general examples and best practices
● Dig and find why your page is so slow
● Use proper method to make it better
Appendix: What is F5 (reload)?
Send request to
Clear cache Yes No
F5 (reload) Yes Yes if result is 304
Enter at address bar
No if cache isn't
● If you want to reproduce first access, you
need to clear cache and cookie.
● If you want to reproduce second access, you
need to use not F5 but enter at address bar.
Thanks for your reading!
Written by Kengo TODA (@eller86)
Visit http://career.worksap.com/ to join us!