Gone in 4 seconds   web performance optimization
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Gone in 4 seconds web performance optimization

  • 1,534 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,534
On Slideshare
1,519
From Embeds
15
Number of Embeds
2

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 15

https://twitter.com 13
http://www.linkedin.com 2

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