WEB Performance Optimization

Transcript

1. WEB Performance optimization Maris Cilitis www.ithouse.cc
2. Critical Rendering Path DOM -> CSSOM -> Render tree -> Layout -> Paint
3. Tokenizer start tag / end tag
4. <html> <head> </head> <body> </body> </html>
5. Incremental HTML delivery
6. CSSOM • Render Blocking • More specific rule is more costly (p{} < div p {}) • Selective matching is not the performance bottleneck in most cases • Measure First, Optimize Second
7. You cannot optimize what you cannot measure
8. Viewport browser’s default 980px
9. <meta name=“viewport” content=“width=device-width”/>
10. Render tree == DOM + CSSOM
12. Scope styles using media queries
13. <link rel=“stylesheet” src=“style.css”/> <link rel=“stylesheet” src=“print.css”/> <link rel=“stylesheet” src=“style.css”/> <link rel=“stylesheet” src=“print.css” media=“print”/>
14. JS
15. JS == parsing blocking
16. JS runs only when browser downloads CSS
17. CSS blocks rendering and JS blocks execution
18. async <script type=“javascript” src=“http://…” async />
19. async doesn’t block CRP
20. Optimization strategies
21. Minify (minimize bytes)
22. Compress
23. Cache
24. Inline CSS (reduce number of critical resources)
25. Minimize parsing blocking resources
26. Delay JS execution
27. Use async
28. use small files <= 14 KB
29. Browsers have preload scanner
30. Preload scanner fetches parsing blocking scripts while it downloads the CSS
31. Tools • Chrome developer tools (CMD + Option + I) • Page Speed Insights
32. Measure First, Optimize Second
33. Maris Cilitis @princeoflatvia