This document discusses various techniques for improving front-end website performance, including reducing the number of HTTP requests, leveraging caching, optimizing images, minifying code, and lazy-loading content. It provides specific metrics on performance gains from techniques like CSS/JS aggregation and image optimization. Recommendations cover optimizing markup, leveraging newer technologies like CSS sprites and SVG, and tools for auditing and improving front-end performance.

1. Front-end performance.

3. ● 44 requests for anonymous user
● 60 requests for administrator

6. ● 28 requests for anonymous user
● 39 requests for administrator

7. Why it’s important?

8. ● Better user experience
● Higher conversion rate
● SEO

9. Numbers

10. ● 80-95% of performance happens in the front end
● Amazon: 100ms cost 1% of sales
● Yahoo: 400ms improvement ~9% traffic
● Firefox: 2.2s improvement ~15.4% downloads

11. Tools

12. ● Yslow
● PageSpeed
● Chrome DevTools
● Firebug

13. ● Use fewer HTTP requests
● Use CDN
● Avoid empty src or href
● Add Expires header
● Compress components with gzip
● Put CSS at top
● Put JS at bottom
● Make JS and CSS external
● Reduce DNS lookups

14. ● Minify JS and CSS
● Avoid URL redirects
● Remove duplicate CSS and JS
● Configure ETags
● Make AJAX cacheable
● Use GET for AJAX requests
● Reduce number of DOM elements
● Avoid HTTP 404 error
● Reduce cookie size

15. ● Use cookie-free domains
● Avoid AlphaImageLoader filter
● Do not scale images in HTML
● Make favicon small and cacheable

16. Advanced CSS/JS Aggregation
● gzip CSS/JS
● Bundler: groups files together
● CSS/JS compression
● CSS/JS validation
● JS to the footer
● lot-lot more options

17. Advanced CSS/JS Aggregation
● 23.4KB vs 4.5KB gzipped CSS
(~80% decrease)
● 93.9KB vs 32.3KB gzipped JS
(~65% decrease)
● 23.4KB vs 4.4KB gzip + minify CSS
(~81% decrease)
● 93.9KB vs 28.5KB gzip + minify JS
(~70% decrease)

18. CSS

19. Write your styles cleverly
● SMACSS
● BEM
● Object Oriented CSS

20. Write your styles cleverly
● SMACSS
● BEM
● Object Oriented CSS
● SASS / Compass
● Less
● ...

21. Use CSS3!!!

22. Do not do a lot to support
legacy browsers!!!

23. Remove unused CSS
WTF?

24. Remove unused CSS
Omega

25. Remove unused CSS
Adaptive Theme

26. Remove unused CSS
Tao
function tao_css_alter(&$css) {
$exclude = array(
'misc/vertical-tabs.css' => FALSE,
'modules/aggregator/aggregator.css' => FALSE,
'modules/block/block.css' => FALSE,
'modules/book/book.css' => FALSE,
'modules/comment/comment.css' => FALSE,
//...
'modules/update/update.css' => FALSE,
'modules/user/user.css' => FALSE,
);
$css = array_diff_key($css, $exclude);
}

27. Use CSS sprites
3.85KB
2.5KB

28. Also
● Icon Fonts
● SVG

29. jQuery Update
Default:
1.4.4 (2010.11.11)
jQuery Update:
1.7 site’s theme + 1.5 admin pages

30. Images

31. Do not set 100% quality

32. 100% quality
Original JPEG:
640x480px, 49.38KB
● No effects: 151KB
● Rotate 360°: 151KB
● Scale 2000px x 100%, no upscaling: 151KB
● Scale & Crop 480x360px: 139KB

33. 100% quality
Original JPEG:
640x480px, 49.38KB
● No effects: 151KB
● Rotate 360°: 151KB
● Scale 2000px x 100%, no upscaling: 151KB
● Scale & Crop 480x360px: 139KB

34. ● Image Lazyloader
● Picture + Breakpoints

35. Markup
● Fences
● Views style settings

36. See also
● CDN
● Magic
● Speedy
● Minify
● Core Library
● UglifyJS

37. Thank you