Gone in 4 seconds web performance optimization

1,624 views

Published on

How to prevent your web users leave you in 4 seconds because your website is not loaded. This slide is provide overview how to optimize your website from backend to frontend.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,624
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Gone in 4 seconds web performance optimization

  1. 1. #TechnicalThursday Bandung Digital Valley Gone In 4 Seconds Web Performance Optimization Yohan Totting @tyohan
  2. 2. Why?
  3. 3. Response Time Server + Network 10-20% Load HTML Browser 80-90% Render HTML
  4. 4. Backend Optimization
  5. 5. Database Tuneup
  6. 6. Choose Right Database and Engine
  7. 7. Data Structure & Field Index
  8. 8. Query All At Once vs Split to Multiple Query
  9. 9. Optimize Your Configuration
  10. 10. Application Tune Up
  11. 11. App performance it’s not about the language It’s about your code
  12. 12. Lazy Loading
  13. 13. Cache is your nitro
  14. 14. Be careful with looping
  15. 15. Use Framework
  16. 16. Web Server Tune Up
  17. 17. Use Nginx
  18. 18. Enable Compression
  19. 19. Don’t forget necessary header
  20. 20. ETags HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195
  21. 21. Expires Expires: Wed, 17 Jun 2015 20:00:00 GMT
  22. 22. Use Caching Proxy
  23. 23. Front End Tune Up
  24. 24. Minimize Loading Time
  25. 25. Reduce Dependencies Fewer files to download means fewer HTTP requests and faster loading times.
  26. 26. Reduce Dependencies • Combine & minify CSS & javascript • Parallelize downloads across hostnames • Combine images using CSS sprites • Minimize DNS lookup • Avoid redirect
  27. 27. Minimize Request Size • Keeping cookies and request headers as small as possible. • Serve static content from a cookieless domain
  28. 28. Reduce Image Dimensions On top of the extra download time, precious processing power and memory are used to resize high-resolution images.
  29. 29. Reduce Client-Side Processing Rethinking the use of JavaScript and keeping it to a minimum are best.
  30. 30. RWD vs RESS
  31. 31. Use Font Awesome Icon
  32. 32. Mobile First
  33. 33. Test It
  34. 34. Thanks Yohan @tyohan

×