This slide show some main techniques to optimize speed for front-end.

1. Heavy Web Optimization FRONT-END Vo Duy Tuan – CEO/Founder

4. Front-end Optimization 1

5. 1.1. Where is Front-end? “ 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”

8. Minification 2

10. 2.2. Minification example: JS

11. 2.2. Minification example: CSS

13. 2.3. Minify in APC

14. 2.3. Minify library

15. CSS Sprite 3

16. 3.1. CSS Sprite: Case study Menu with 3 icons & Hover change icon effect. Total 6 images.

17. 3.1. CSS Sprite: Case study Merge 6 icons & using CSS magical background-position property to use CSS Sprite

18. 3.1. CSS Sprite: Case Study After:

19. 3.2. CSS Sprite Showcase

21. 3.4. CSS Sprite

22. Domain Sharding 4

23. 4.1. Domain Sharding

24. 4.1. Domain Sharding

26. 4.3. Domain sharding

27. Image Optimizing 5

28. 5.1. Image Optimizing 5

29. 5.1. Image Optimizing 5

30. 5.2. Photoshop Output 5

32. HTTP Caching 6

33. Way #1: Automatic 6

34. Way #2: ETag - Automatic 6

35. Way #3: Manual with Apache Mods 6

38. 6.4. Example: Before 6

39. 6.4. Example: After 6