How to improve the performance of your website - FeWeb15

Web performance talk for FeWeb Congress edition 2015

1. By Thijs Feryn How to improve the performance of your website
2. Hi, I’m Thijs
3. I’m @ThijsFeryn on Twitter
4. I’m an Evangelist At
5. I’m a at board member
6. Web performance is an essential part of the user experience
7. Infrastructure
8. Code
9. Browser rendering
10. User location
11. Down Slowdown ~ downtime
12. Focus on the foundation first
13. Fast servers
14. Performance != Scalability
15. Performance: speed
16. Scalability: constant speed with increasing load
17. Add servers to maintain performance
18. Stability
19. Code efficiently
20. Identify slowest part
21. Optimize database
22. Optimize runtime
23. After a while you hit the limits
24. Don’t recompute if the data hasn’t changed
25. Cache
26. Memcached Redis APC
28. Optimize database Optimize runtime A void A void
29. Don’t recompute if the data hasn’t changed
30. Varnish
31. Normally User Server
32. With Varnish User Varnish Server
33. Caching in your architecture
34. Respect HTTP
35. Cache-control: public, max- age=3600, s-maxage=7200 Cache-control: no-cache, no- store VS
36. Cookies?
37. Edge Side Includes
39. Don’t cache header
40. Cache footer until 31/12/2015 23:59:59
41. Cache for a day
42. Cache for an hour
43. <!DOCTYPE html> <html> <head> <title>The Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> <script src=“/js/jquery-2.1.4.min.js"></script> <script src="/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <esi:include src=“http://mysite.dev/nav" /> </nav> <div class="jumbotron"> <esi:include src="http://mysite.dev/jumbotron" /> </div> <div class="container"> {% block content %}{% endblock %} <hr> <footer> <esi:include src="http://mysite.dev/footer" /> </footer> </div> </body> </html> ESI tags
44. Hit rate
45. Browser rendering
46. ✓Concurrency limitations ✓Slowband, bad mobile connection ✓First byte time ✓Rendering time ✓Limit resource size ✓Limit resource amount ✓Re-use TCP connections
47. Compress images, JS & CSS
48. Combine multiple JS & CSS into one file
49. Right image size for the right device
50. Non- blocking Javascript
51. Google PageSpeed Insights & Web Page Performance Test
52. User location
53. Caching in the edge
54. Content Delivery Network
55. Faster responses per request
56. Don’t saturate your own network