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.

1. #TechnicalThursday
Bandung Digital Valley
Gone In 4 Seconds
Web Performance Optimization
Yohan Totting
@tyohan

2. Why?

4. Response Time
Server
+
Network
10-20%
Load HTML
Browser
80-90%
Render HTML

5. Backend Optimization

6. Database Tuneup

7. Choose Right
Database and Engine

8. Data Structure
&
Field Index

9. Query All At Once
vs
Split to Multiple Query

10. Optimize Your
Configuration

11. Application Tune Up

12. App performance it’s not
about the language
It’s about your code

13. Lazy Loading

14. Cache is your nitro

15. Be careful with
looping

16. Use Framework

17. Web Server Tune Up

18. Use Nginx

19. Enable Compression

20. Don’t forget
necessary header

21. ETags
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

22. Expires
Expires: Wed, 17 Jun 2015 20:00:00 GMT

23. Use Caching Proxy

24. Front End Tune Up

25. Minimize
Loading Time

26. Reduce Dependencies
Fewer files to download means fewer HTTP requests and
faster loading times.

27. Reduce Dependencies
•
Combine & minify CSS & javascript
•
Parallelize downloads across hostnames
•
Combine images using CSS sprites
•
Minimize DNS lookup
•
Avoid redirect

28. Minimize Request Size
•
Keeping cookies and request headers as small
as possible.
•
Serve static content from a cookieless domain

29. Reduce Image Dimensions
On top of the extra download time, precious processing
power and memory are used to resize high-resolution images.

30. Reduce Client-Side Processing
Rethinking the use of JavaScript and keeping it to a
minimum are best.

31. RWD vs RESS

32. Use Font Awesome Icon

33. Mobile First

34. Test It

35. Thanks
Yohan
@tyohan