Gone in 4 seconds web performance optimization

  • 1,290 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,290
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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