JSFoo 2016

This is not anymore hidden that web has become fat. By fat, I mean that average size of a web app has grown enormously since last few years. This is due to large images, animations, ads, widgets and not to forget frameworks. And as the size of web app increases, app loading time also increases and as a result of it, the user is left to see a blank screen or loading spinner for significant amount of time. But, why is that a problem, because all these things that have made the web fat are intended to be the enhancements to the web platform. So why should they make basic web performance suffer? Why should UX suffer because of UI?

We can do better
This is the notion on which the web has survived for so long and is going to survive a lot more. So solution to above problems that have made the web fat lies in Improving critical rendering path.
I can explain it better with an anatomy, suppose you are a user who wants to read news online. So, you navigate to a site named xyztimes.com. As a user what you want to see is article loading first, not ads,videos, animations, comments and widgets. So as a developer you need to ensure that first thing you deliver is Critical resources, then you can progressively load the rest. You have to manually decide and research about what is critical to the user. So that user could see the critical content first and rest of the things later. That is going to produce following two outcomes

• Making your web app resilient.
• Improving UX directly proportional to more engagements and hence more revenue

That is exactly notion behind Critical Rendering Path, that you should load what is critical to your user first and then progressively enhance the rest.
Progressive enhancement is best thing that happened to web.

But, in how much time shall we deliver the critical resources as Time to render is also UX metrics.
Answer is 1000ms. Yes only 1s and out of which majority of time will be spent by HTTP and server, so your browser has only around 300 ms to do everything required to render a page.

So, how do you do it? We would explore those options in this talk.

Outline

In this talk, we will see how to improve first rendering of your page and make it fit under our 1000ms budget of first render.

Slide :- https://tarungarg546.github.io/jsfoo-slides/

Requirements

Basic knowledge of web practices

Speaker bio

I am a fresher from YMCA University, Faridabad.
I have been into web development since last 2 years, so you can safely assume that I love web and it’s complexities. Lately, I have been learning and practicing a lot about how to improve the performance of a web app because #perfmatters and performance is what makes the engagement of user easy for developers. I have been learning about, how would you improve first render of your page quite a lot and I have tested each and every practice manually before believing anything, because web keeps changing and evolving. So, everytime you see something in web space, don’t guess it, test it.

My area of interest and research are ECMASCRIPT, critical render path, Service Worker{ offline web apps} and Node JS. I like coding standards pretty much because i believe in saying Your code is written once but it’ll be read many times, so I tend to adhere to those principles when programming either professionaly or in FOSS contributions.

Currently, I am working extensively in Angular JS, NodeJS{ mainly with express and build tooling} and Ionic. I also have grasp on build tools like gulp.

Links

• https://github.com/tarungarg546
• https://tarungarg546.github.io/

Slides

https://tarungarg546.github.io/jsfoo-slides/