This document provides tips for optimizing website performance, including optimizing the loading sequence, HTML, CSS, images, JavaScript, headers, fonts, and other resources. It emphasizes measuring performance before and after optimizations to identify bottlenecks and areas for further improvement. Key recommendations include minifying files, reducing file sizes, caching resources, optimizing the critical rendering path, and using a content delivery network.

1. Performance web
optimizations

2. Optimizations
First page load
Repeated page load

3. Importance
1. Sequences/Blockers
2. HTML
3. CSS
4. Images
5. JavaScript
6. Headers
7. Fonts
8. Tracking resources

4. Before start
Measure!
Making sure you’re optimizing
Can brag later
Find bottlenecks

5. HTML
PHP response time
DB calls
Network calls
HHVM
PHPNG (PHP-7)
Nginx cache (without Set-Cookie ;) )
No redirects

6. Aug 2014

7. HTML
Delete unnecessary
No HTML comments (except conditional)
Minify (careful with new lines)
Optimize size (1 roundtrip = 14KB)

8. CSS
Minify
Optimize selectors (avoid duplicate resource load)
Remove not needed
Inline if(“we optimize for first load” && “it’s not too big”)
Minimize requests count if(“one request is not too big”)

9. JavaScript
Minify
Use single, async file if possible
Don’t count on it for rendering the page
Make sure you’re optimizing with late-
loading

10. Gzip
Gzip level ~6
Gzip static
Build foo.js to foo.js.gz and bar.css to bar.css.gz in build time

11. Headers
HTML:
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
CSS, JS, Images, fonts
Cache-Control:max-age=604800
Date:Mon, 12 Jan 2015 16:23:25 GMT
ETag:"54aa848a-1609d"
Expires:Mon, 19 Jan 2015 16:23:25 GMT
Last-Modified:Mon, 05 Jan 2015 12:33:14 GMT

12. Images
Optimize file size
Use progressive rendering
Use sprites when possible
Use Base64 (don’t shoot yourself)
Use responsive design
Specify image dimensions if possible
Check for duplicates

13. Fonts
No custom fonts if possible (fight to the last drop of blood)
Light fonts if possible (zh)

14. Sequences
DNS lookup
HTML size
Blocking CSS
Blocking JS
Concurrent downloading (~100KB max)

15. CDN
Check for blocking DNS lookups
If CSS is inline change the
relative paths to absolute

16. After finish
Measure
Find bottlenecks
Find imperfections
No imperfections ? “brag” : “optimize again”

17. Examples

18. Tools
http://www.monitis.com/pageload/
http://gtmetrix.com/
http://www.webpagetest.org/
https://developers.google.com/speed/pagespeed/insights/
Chrome audit

19. Thank you!