Web site performance improvement ● Goal ● Policy to improve performance ● How to research points to improve ● Case study
Goal ● 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?
Policy 1 ● Start when you need, from most effective point – “premature optimization is the root of all evil” (Donald Knuth) – the law of the instrument: “Give a small boy a hammer, and he will find that everything he encounters needs pounding.” (Abraham Kaplan)
Policy 2 ● Understand pros and cons of your improvement – 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.
Policy 3 ● 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?
What is problem? ● 'Wait' means that browser waits response from server. – Latency problem: server is too far from client ● 'Receive' means that browser receives data from server. – Too much data to download
Does browser cache works? ● You can see that it still has requests and 304 response. – 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.
Problem ● Controlable – JS/CSS is not gzipped – Size of images are too heavy – No expiration date in HTTP response ● Uncontrolable – Latency ● to solve, we need new server or CDN
Solution 3: mod_expires ● Add expiration date to HTTP response header. – Reduced requests from 57 to 2 (HTML and Google Analytics). – Good improvement for high latency environment. ExpiresActive on ExpiresDefault "access plus 1 day"
Result (without browser cache) Before After Note HTTP 57 57 x1.00 Requests Data size 754 KiB 629 KiB x1.20 When load 1.61s 1.33s x1.21 event fired
Result (with browser cache) Before After Note HTTP 57 2 x28.5 Requests Data size 10.9 KiB 436 B x25.6 When load 464 ms 178 ms x2.61 event fired
Conclusion ● 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 Use browser download cache? resources? Clear cache Yes No F5 (reload) Yes Yes if result is 304 No if cache isn't Yes Enter at address bar expired ● If you want to reproduce first access, you need to clear cache and cookie. ● If you want to reproduce second access, you