Killer page load performance
Download as PPTX, PDF0 likes603 views
The document discusses web performance optimization strategies, particularly focusing on critical rendering paths and the use of tools like Penthouse for generating critical CSS. It highlights the effects of heavy JavaScript frameworks on page load times and emphasizes the importance of reducing request latency for mobile performance. Various resources and examples are provided for implementing these strategies in web development to enhance user experience.
![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);
});
});](https://image.slidesharecdn.com/killerperformance-150611060903-lva1-app6891/85/Killer-page-load-performance-45-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/killerperformance-150611060903-lva1-app6891/85/Killer-page-load-performance-46-320.jpg)
![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](https://image.slidesharecdn.com/killerperformance-150611060903-lva1-app6891/85/Killer-page-load-performance-50-320.jpg)
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
- 20. http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
- 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