Episode 33 - Web Frontend Performance with Mannuel Ferreira

We're getting up to speed with the fascinating world of web frontend performance. Concatenation, compression, optimization and more delivered in one speedy package this week!Kenneth, Kevin & Len are joined by Mannuel Ferreira, a web designer and developer from Superbalist.com. Mannuel shares with us some practical experiences he's had at his current job making Superbalist fast, as well as the work he did at World Wide Creative on a recent relaunch of the IOL website. Mannuel has a lot to share with practical tips and tricks to help all of us make our websites performant.Follow Mannuel online:- http://themwebs.me- https://twitter.com/manidf- https://github.com/manidfHere are some resources mentioned during the show:* PageSpeed Insights - https://developers.google.com/speed/pagespeed/insights/* Website Speed Test - http://tools.pingdom.com/fpt/* SpeedCurve - https://speedcurve.com/* Load Google Fonts asynchronously for page speed - http://bit.ly/1QTsiYh* Understanding the critical rendering path - http://bit.ly/22fjmnf* Quick guide to webfonts via @font-face - http://bit.ly/1nJJALE* Google Web Font Loader Events - http://bit.ly/1RhP6D7* Font Face Observer - http://bit.ly/1TJywME* HTML5's async Script Attribute - http://bit.ly/1RhPhOR* Gulp - http://gulpjs.com/* Bourbon - http://bourbon.io/* Neat - http://neat.bourbon.io/* How to optimize your site with GZIP compression - http://bit.ly/250Kplk* Grunt: The JavaScript task runner - http://gruntjs.com/* webpack module bundler - https://webpack.github.io/* broccoli.js - http://broccolijs.com/* Working with quotas on mobile browsers - http://bit.ly/1pqd9DV* Mobile Browser Cache Limits, Revisited - http://bit.ly/1S0xwR6* CSS Transitions - http://bit.ly/1pqdwhC* Add two variables using jQuery - http://bit.ly/1pHxe8D* fetch API - https://davidwalsh.name/fetch* A window.fetch polyfil from Github - https://github.com/github/fetch* Essential reading list for getting started with Service Workers - http://bit.ly/1Ln7MPJ* Offline First! - http://offlinefirst.org/* Leverage Browser Caching - http://bit.ly/1U2dIkd* HTTP/2 - https://http2.github.io/* HTTP/2 on CloudFlare - https://www.cloudflare.com/http2/* HTTP/2 on Akamai - https://http2.akamai.com/* HTTP/2 on nginx - http://bit.ly/1QSQicL* HTTP/2 on Apache httpd - http://bit.ly/1RhP3an* Forgo JS packaging? Not so fast - http://bit.ly/1pqdsyp* HTML5 picture element - http://mzl.la/1RiKzKs* Built-in Browser Support for Responsive Images - http://bit.ly/1P92DoY* Picturefill: a responsive image polyfill - https://scottjehl.github.io/picturefill/* How to avoid duplicate downloads in responsive images - http://bit.ly/1Mj60tv* Modernizr - https://modernizr.com/* Responsive logos with SVG - http://bit.ly/1RiKOoP* CSS Only Image Preloading - http://bit.ly/1SO01Uj* Prefetching, preloading, prebrowsing - http://bit.ly/1S0xMPS* HTML5 Link Prefetching - http://bit.ly/1RKeL1x* AngularJS Server Side Rendering - https://github.com/saymedia/angularjs-server* From AngularJS to React: The Isomorphic Way - http://bit.ly/1QSQcC1* Ember FastBoot - https://github.com/tildeio/ember-cli-fastboot* AMP (Accelerated Mobile Pages) Project - https://www.ampproject.org/* Designing for Performance - http://designingforperformance.com/And finally our picksKevin:- statsd - https://github.com/etsy/statsd- Chrome Developer Tools - https://developer.chrome.com/devtoolsKenneth:- High Performance Browser Networking - http://chimera.labs.oreilly.com/books/1230000000545Mannuel:- CSS Stats - http://cssstats.com/- Big Rig - https://github.com/GoogleChrome/big-rig- SpeedCurve - https://speedcurve.com/pricing/Thanks for listening!Stay in touch:* Socialize - https://twitter.com/zadevchat & http://facebook.com/ZADevChat/* Suggestions and feedback - https://github.com/zadevchat/ping* Subscribe and rate in iTunes - https://itunes.apple.com/za/podcast/zadevchat-podcast/id1057372777

Hosted on Acast. See acast.com/privacy for more information.