Allô #Clarity2017

1st, thank you so much for the warm reception. It was my 1st time ever @ a Design Systems event, and even more so @ a design event. Thank you for making it such an inviting environment. Thanking everyone again @ Clarity Conference and of course Jina.
I have never had such sparse slides, so this an addendum to the talk, with some links where possible to provide some clarity.
The theme again was around the idea that design decision can impact the performance of a page, SPA or anything you're trying to render onto a screen. Let's go through the deck. <span style="color:pink; background-color: black";>Performance By Design, and you can dowload it here.

The Jokes? See bottom of the page for more. Let's get to the content!

Slide 1-23: this was a simple story about how a essentially via some preparation and training at the track, was able to achieve my goal of breaking the 20min barrier. Preparation lead to fast times + results. The same can be said about anything that you want to post online. Performance By Design is just about these design decisions.

Slide 24-25: I refer to what once was: onload event as a measure of the page's speed. But this is a metric of yesteryear - one which could not reflect the user experience of today's single page apps. Their complexities have demanded for better metrics.

Slide 26-30: These are some of the new metrics that are being employed, ones that better describe the current status of performance, the page load and specifically user experience. We are now measuring times where pixels are being painted onto a screen, right down to when the page is ready and @ least interactive - and this is specifically what is above the fold or on the screen. First paint, first meaningful paint, first contentful paint and time to interactive are all metrics part of the panoply of new measurements. You can read more about it here.

Slide 32-34: I referenced the November 26th event: this is when the popularity and usage of the mobile device to access the internet finally passed the desktop. This essentially and officially marks the time that designing for mobile 1st (or even in some cases only) must be top of mind. I added that you had to design with constraints. The days of lavish and elaborate layouts can no longer apply. I mentioned a quote by a google engineer reminding us that the average mobile device is a mid to lower tier Android handheld, and not the shiny devices we are seeing advertised @ bus shelters and highway billboards.

Slide 35-37: This was a quick mention and reference of a study by DoubleClick around online ads and the challenge they had become, with the emphasis on mobile. This study will also detail the now infamous 19s statistic that was so awfully but poignantly exemplified by a meme of 45.

Slide 38: The Critical Rendering Path is the minimum amount of resources needed to load all assets above the fold or on the viewport as quickly as possible. This is key, in creating the best user experience possible.

Slide 40-42: This is where I outline the need to stay cautious about the amount of javascript and CSS that is used. They are both blocking resources and must both be parsed. In many cases, you can have too much of each, or at least, a large amount of unused code. In both cases, you can see either the unused portions and or the time needed for the execution of say javascript (when you peek into DevTools). When you factor that number into the amount of time required (say 3s) before you experience a near 50% fall off in users, this is worth noting and considering.

Slide 43-44: Battery mention was to highlight another item that has fallen on the watch of performance, and that's battery drain. A 2012 study out of Stanford outlined the battery drain which is directly associated to CSS and javascript parsing, and I do point out later than the actual amounts of images also factors in to the taxing effect. You can read the study here.

Slide 45-49: Web fonts, a designer favourite, are a challenge in their usage online. As I described both FOUT (flashes of un-styled text) and FOIT (flashes of invisible text), are realities in the realm of user experience. Even though much has been done in browser engineering to curtail both patterns, font loading is a dark art. The quote that I posted was from a thought leader in the space of font loading: Zach Leatherman. You can enjoy more of his writings on the subject at his blog.

Slide 50-52: This is one of my favourite areas, images. As I likely mentioned, I can spend a few hours on this topic rehashing history to present, and then more discussing interesting parts of the future, but one thing stands as an timeless hurdle: images are a user experience nuisance let alone a technical one. From loading to place holders, the internet isn't short of debate and discussion on the topic. Design absolutely has a place in the discussion. From understanding the format that you're using to even the art direction you might take. I may not have addressed this directly, but for example - subtle changes in contrast in a JPEG allows for the format to compress well, more so than big changes in contrast. This is what Netflix was able to do when authoring a new series. That would also include things like desaturating an image, blurring parts of it and also not having an alpha channel, as that will also help with memory management by not having any transparency. And as you might recall, I mentioned memory being a culprit in android phone issues. I also mentioned say when using SVGs, reducing the complexity of the design will result in less points, which will also provide some performance gains as it will likely require much less code to render, making it smaller in bytes, and then simpler to transfer as a request. You can take advantage of your image performance through design and art direction.

Slide 53-57: Tampering with colour data is another area that can contribute to savings. The most obvious way is by using the PNG format. By reducing the # of colours to 256 or less, you can use a PNG-8 instead of PNG-24 (or greater). With the JPG and it's compression, we employ something called chroma subsampling where the colour data is essentially slightly reduced. This may or may not have much visual impact as the colour data removed is from frequencies that should be much less perceptible. Nonetheless, I do mention colour data for the simple fact that sometimes colour fidelity is extremely important. I think of retailers and the idea that their purple tank top could have 3 different shades on three different screens. These issues are falling under both design and engineering. And this is where Wide Colour Gamut displays are coming in to throw possibly another wrench. The Wide Colour Gamut displays (like the iPhone 7 and up), are providing much richer colours than previously available. What was once 8bit per channel is now 10bit which takes our available colours from 16 million to 1 billion. This is quite a bit of colour data, and if you recall - capable devices running iOS11 (like some iPhones) are authoring using HEVC and the HEIF format which renders in this new colour space.

Slide 58-59: Ultimately, the above still has to do with images, and earlier I likely mentioned memory in passing, as well as battery. The bigger the images and the greater the colour channels, the more memory is used up. The larger the image, the greater the amount of colour data, the bigger the image will be. We get back to where design can have very tangible impact to performance.

Hope this provides some clarity to the deck, which is unusually sparse for me, but I do hope this helps and feel free to hit me up if you have q?s. Thanks for your time, and attending my talk.

The Jokes: Did you like or laugh at the rap jokes I started with?? You may love this. I had a few of these pins to give away at the closing party. But if you werent' of teh lucky ones, Use CLARITY201715 for 15% off until xmas.