Killer page load performance
•Als PPTX, PDF herunterladen•
0 gefällt mir•601 views
Slides for a talk given at Asyncjs. Users don’t wait for slow sites to load, and they’re only getting more and more impatient. How do we keep up? The good news is that we can get very far by focusing on our perceived load time (as opposed to full page load time). These slides explain how.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Killer page load performance
Ähnlich wie Killer page load performance (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Killer page load performance
- 2. Jonas Ohlsson Front end developer at State Perf and tooling geek Author of Penthouse https://github.com/pocketjoso/penthouse/
- 6. Is the Web slow?
- 9. Are heavy JS frameworks responsible for the slow web?
- 10. Page Load
- 11. Perceived load
- 13. Start Render Total Page Load Time
- 15. SpeedIndex
- 16. 1 second to “break the glass” https://developers.google.com/speed/docs/insights/mobile
- 17. (Request) Latency kills mobile performance https://developers.google.com/speed/docs/insights/mobile
- 22. Page Load
- 26. WebPageTest CLI / Node module https://github.com/marcelduran/webpagetest-api Perf budget (grunt) https://github.com/tkadlec/grunt-perfbudget
- 30. Critical Path for rendering
- 32. <html> <head> <link rel=‘style’ href=‘styles.css’></link> </head> <body> … <script src=‘bundle.js’> </script> </body> </html> Start render HTML CSS JS
- 33. <html> <head> </head> <body> … <script src=‘bundle.js’> </script> <link rel=‘style’ href=‘styles.css’></link> </body> </html> Start render HTML CSS JS
- 35. <html> <head> <style> /* critical styles for page*/ </style> </head> <body> … <script src=‘bundle.js’> </script> <link rel=‘style’ href=‘styles.css’></link> </body> </html> Start render HTML CSS JS
- 36. <html> <head> <style> /* critical styles for page*/ </style> <script src=‘bundle.js’ async> </script> </head> <body> … <link rel=‘style’ href=‘styles.css’></link> </body> </html> Start render HTML CSS JS
- 37. <html> <head> <style> /* critical styles for page*/ </style> <script>function loadCss()… loadCss(‘styles.css’); </script> <script src=‘bundle.js’ async> </script> </head> <body> … </body> </html> Start render HTML CSS JS https://github.com/filamentgroup/loadCSS
- 38. TCP slow start First roundtrip only fits ~14kb
- 39. Styles needed to render immediately visible content ~ “above the fold” Per page Critical Path CSS https://github.com/addyosmani/critical/
- 40. Critical path css generators Manually http://jonassebastianohlsson.com/criticalpathcssgenerator Static content https://github.com/addyosmani/critical CLI or build process (node, gulp, grunt) https://github.com/pocketjoso/penthouse
- 42. grunt-penthouse penthouse: { home : { css : ‘styles/fullCss.css’, url : ‘localhost:8000/’, outfile : 'index.html.css', width : 1300, height : 900 } }
- 43. grunt-penthouse penthouse: { home : { css : ‘styles/fullCss.css’, url : ‘localhost:8000/’, outfile : 'index.html.css', width : 1300, height : 900 }, work : { css : ‘styles/fullCss.css’, url : ‘localhost:8000/work/’, outfile : 'work/index.html.css', width : 1300, height : 900 }, ..
- 44. Rewrite relative paths <link rel=‘style’ href=‘css/styles.css’> </link> // css url: (‘../fonts/Lato.woff’) // inline in <head> <style> url: (‘fonts/Lato.woff’) </style>
- 45. penthouse (Node) [ ‘localhost:8000/’, ‘localhost:8000/work/’ ].map(function(url){ penthouse({ css : ‘styles/fullCss.css’, url : url, width : 1300, height : 900 }, function(err, criticalCss) { if (err) return; fs.writeFile(someFileName, criticalCss); }); });
- 46. Using local files [ ‘index.html’, // will be rendered over file protocol ‘work/index.html’ ].map(function(url){ penthouse({ css : ‘styles/fullCss.css’, url : url, width : 1300, height : 900 }, function(err, criticalCss) { if (err) return; fs.writeFile(someFileName, criticalCss); }); });
- 47. Serving critical css <head> {{#if criticalCss}} <style>{{{ criticalCss }}}</style> <script> function loadCSS(){…} loadCSS(‘{{ stylesUrl }}’); </script> {{else}} <link rel='stylesheet' href='{{ stylesUrl }}' /> {{/if}} </head>
- 48. Serving critical css <head> {{#if criticalCss}} <style>{{{ criticalCss }}}</style> <script> function loadCSS(){…} loadCSS(‘{{ stylesUrl }}’); </script> <noscript><link rel='stylesheet' href='{{ stylesUrl }}' /></noscript> {{else}} <link rel='stylesheet' href='{{ stylesUrl }}' /> {{/if}} </head>
- 49. Flash Of Invisible Text
- 50. var ffObserver = new FontFaceObserver('Lato Web', { weight: 400}); var ffBoldObserver = new FontFaceObserver('Lato Web', { weight: 700}); window.Promise.all([ ffObserver.check(), ffBoldObserver.check() ]).then(function(){ document.documentElement.className += ‘ fonts-loaded’; }); FontFaceObserver https://github.com/bramstein/fontfaceobserver
- 51. body { font-family: sans-serif; }; .fonts-loaded body { font-family: ‘Lato Web’, sans-serif; } FontFaceObserver https://github.com/bramstein/fontfaceobserver