Frontend performance tips

[felix]

As some of you might have noticed recently there has been a large "Frontend Performance Talks Offensive" (not only) by Google Engineers.

Here are some high quality (regarding content) Videos which i enjoyed very much and thought you also might be interested in.

A Rendering Performance Guide for Developers by Paul Lewis:

Performance Tooling by Paul Irish

Your browser is talking behind your back by Jake Archibald

Gone In 60fps – Making A Site Jank-Free by Addy Osmani

http://addyosmani.com/blog/making-a-site-jank-free/

Any suggestions for more interesting performance related stuff are welcome!

[felix]

Well. Even if no one seems to be interested i'll keep updating this if i stumble upon interesting links. Maybe this will help someone in the future

Here we go.

How to prioritize visible content: http://www.feedthebot.com/pagespeed/prioritize-visible-content.html

[3fingers]

I'm interested and always reading and watching everything about front-end performances and related tools.

Thanks for posting them (and keep up the good work on the new admin interface...let's code it and make us play with it )

[felix]

I'm interested and always reading and watching everything about front-end performances and related tools.

Thanks for posting them (and keep up the good work on the new admin interface...let's code it and make us play with it )

Thanks a lot!

I'm about to post something on this in a few minutes (current status: writing )

[felix]

http://jankfree.org/

Strapped for time or just getting started with eliminating jank from your projects? These are our must-see resources!

[ryan]

Well. Even if no one seems to be interested i'll keep updating this if i stumble upon interesting links. 

Actually this is very applicable stuff and I think everyone here is interested. I know I am. Thank you for posting! please keep doing so. 

[felix]

Setting a class which disables pointer events while scrolling = no more (re)paints when accidentally hovering elements <3

http://www.thecssninja.com/javascript/pointer-events-60fps

[Martijn Geerts]

Keep up the 60fs

[felix]

(Javascript) Memory Management Masterclass with Addy Osmani

Efficient JavaScript webapps need to be fluid and fast. Any app with significant user interaction needs to consider how to effectively keep memory usage down because if too much is consumed, a page might be killed, forcing the user to reload it and cry in a corner. Automatic garbage collection isn't a substitute for effective memory management, especially in large, long-running web apps. In this talk we'll walk through how to master the Chrome DevTools for effective memory management. Learn how to tackle performance issues like memory leaks, frequent garbage collection pauses, and overall memory bloat that can really drag you down.

[felix]

As I did a lot of performance optimization stuff for a client's website recently I thought I'll share some of my findings:

- optimizing for "time to first byte":

Apart from fixing performance issues with your php code there is an easy way to "get things started":Chunk your Output!

Doing an ob_flush (or {% flush %} if you're using twig) here and there is an easy way to split your page into chunks that are instantly (and in parallel) served to the client instead of rendering the whole page at once. This is especially handy if you're using the next technique:

- Inlining "above the fold" content

I must admit that I'm not a big fan of inlining things. In my opinion it's against anything I've learned about keeping things "dry, clean and separated". That's why i refused to do it until now. But if you're using grunt/gulp (and especially criticalcss) you're not doubling anything and the inlining is just another task in your gruntfile. 

There is a pretty easy step by step guide by Jeremy Keith at https://adactio.com where he explains why inlining css on the first visit will gain your site a massive (perceived) performance boost on the first load (this is especially handy on mobile devices). I'll post a recipe to processwire-recipes.com how to achieve this with processwire in the next days

- Avoid loading Webfonts directly but do it asynchronous as "Progressive Enhancement" (+ Store them in localstorage to load them super fast afterwards) to avoid blank pages: http://bdadam.com/blog/loading-webfonts-with-high-performance.html

Just implementing these 3 (pretty easy) things made the pagespeed score climb up by 15 points and lowered the perceived loading time by at least 2 seconds below the "critical hurdle" of 1-2 seconds.

[arjen]

Thanks felix for posting. Looking forward to your recipe.

[tpr]

Thanks, great tips. I usually stop further optimizing when only "above the fold" issues left according to PageSpeed. Imo it doesn't worth the trouble.

Recently I discovered http://fontello.com/ which allows subsetting icon fonts (plus picking icons from different fonts). This can be handy if you need only a few icons instead of the whole set, saving many kilobytes.

[felix]

As promised here is the recipe: https://processwire-recipes.com/recipes/inline-critical-css/

[Sergio]

As I did a lot of performance optimization stuff for a client's website recently I thought I'll share some of my findings:

As promised here is the recipe: https://processwire-recipes.com/recipes/inline-critical-css/

Extremely useful recipe and tips, Felix! I was planning to do that (critical css) for my next project and you just saved me precious time with your recipe. Thank you very much! 

One more thing I'd like to add is the removing of unused CSS on the whole project, using gulp uncss from Addy Osmani. Especially if you are using a front-end framework (Bootstrap, Foundation etc) or working on someone else's code: https://github.com/addyosmani/gulp-uncss-task  You can get a great reduction on your final css file size, even 90% reduction sometimes. 

[Torsten Baldes]

@felix

thanks for these great ressources!

do you use or is it possible to use the processwire template caching with flush and/or critical css?

thanks!