>> There's nothing to support me.
I'm having to flex my abs a lot more than I'm
used to. They are there.
>> Is a workout.
>> Hi, I'm Bruke Holland.
>> I'm Nolan Lawson.
>> This is five things about web performance.
Do you get it because I was buffering.
>> I think I get it.
>> Number one, web performance is how
fast a browser can load and display a webpage.
Today, it takes around 10 seconds to load a full webpage;
22 seconds, if you're on mobile.
Why in the world are webpages getting so slow?
>> There's a lot of reasons for that.
But, you can look at archive.org for instance and
their statistics showing that
the size of an average page is increasing over time.
So, it's now surpassed the size of a Doom install,
it's somewhere worth of three
megabytes the average website.
And the share of
JavaScript of
that webpage is actually increasing as well.
So pages are just running
more and more JavaScript leading to
things like the laptop fan
suddenly starting to work to light.
>> Correct. So, you computer starts to take off.
So, you're saying we should stop using JavaScript?
>> I don't really like it anyway.
>> Oh, no, no, no. I love JavaScript.
I've used JavaScript throughout my career,
I think it's a great way to enhance webpages.
I think it is kind of overused today though.
We have to find ways to limit
its impact on webpage performance.
>> Okay. Well, I'm going to stop using it.
>> You can do that if you like.
You can actually go to your browser you can
disable JavaScript if you want.
Your experience on the web it's
not going to be so, great though.
>> I'm fine with that as long as we
not allowed to use JavaScript.
>> Number two, there are a lot of
different dimensions to web performance.
It's not just page load time.
What are some of the other aspects of web performance?
>> There's lots of ways you can
measure a webpage performance,
page load time is just one of them we
call PLT2 in the biz.
>> In th biz.
>> In the biz.
>> As well as.
>> It is a biz. So, there's PLT1,
which is the first cool cash page load.
There's PLT2, which is a warm cash pay load.
They can have very different performance
characteristics on top of that.
There's also things like animation frame rate,
input responsiveness,
how fast that page responds
when you try to tap it or try to
scroll on memory usage even battery usage.
Some websites might consume
more battery than other websites.
And, these are all good things to take into
consideration in terms of web performance.
>> So, can we just use PTL3 and make it all go away?
>> I mean if you want to just like configure
your browser to load every webpage
on the planet twice and then-.
>> It just seems like that would be faster.
I'm just saying.
>> It would be great. You would
blow through your browser's cache pretty
fast but that would solve
the problem with a big enough hard drive.
>> That's awesome.
Shawn Larkan gave me this Webpack shirt. Do you want it?
>> No thanks.
>> Number three,
most browsers offer tools to
help you speed up your applications.
What are some of the things that Microsoft Edge
will do for me to help me make my applications faster?
>> So, Edge has a lot of optimizations in place.
Most of them, as is the case,
with other browsers are geared around
moving operations off the main thread.
The main thread is where JavaScript happens is where
layout and styling happens.
So, the more you can free that up the better.
So, we've been doing work like
independent rendering which we
recently wrote a book was
about move rendering off the main thread.
>> What about tooling that I could use inside of Edge?
Is there any tooling that can help
me make my webpages faster?
>> We do have a "Performance" tab
inside of the F12 tools.
There's also Windows Performance
Analyzer that you can use to
analyze Edge performance just
as you would have any Windows Application.
But, the best advice is to use
the W3C standard performance API,
Performance.mark(), Performance.measure().
These intersection observers and
the one that just came out that
it's widely supported in browsers and
extremely useful for speeding up site performance.
>> Sounds very complicated.
>> It's a lot of buzz words
mostly but as long as you just
like look at whatever web standards
most recently got published.
Usually, they're pretty good.
>> Good idea. So, use
"IntersectionObserver" and then put it on your resume so,
you can get a new job because buzzwords.
>> Yes.
>> Call it Intersections of a Blockchain actually.
>> Intersection, yeah, exactly.
Intersections of a Blockchain,
Cryptocurrency Cloud, Docker.
>> Oh yeah.
>> Okay.
>> You'll be a millionaire.
>> Would you like to do GooGoo Cluster?
>> I have no idea what a GooGoo.
>> It's a GooGoo Cluster. They're from Nashville.
>> Okay.
>> It's a chocolaty thing.
>> Oh looks good.
>> Number four,
CDNs used to be a great way
to speed up your site by adding little caching.
Is that still something that people do?
Content Deliver Networks?
>> People are still heavily using CDNs, yeah definitely.
I think the conversation has got a little bit
more complex now with things like bundling.
So, the days of taking JQuery off of a CDN somewhere,
putting that in your website and then
coding around that as your framework.
>> Are those things over because I'm still doing that?
>> I mean these are only here if
you want you can live in my world if
you want but, a lot of people-.
>> I'm not leaving I'm going to stay there forever.
>> It's a comfy world.
It's perfectly comfy world and
habit but a lot of people are doing
bundling now with tools like Webpack, Browserefy, Rollup.
>> Did you want my Webpack shirt?
>> No.
>> Okay.
>> Yeah. So, when you've got this bundle of JavaScript,
it is less clear the value of putting that on a CDN.
But, it is still definitely something you can use.
But, using something like Azure Blob Storage
for hosting static files is like a super easy win,
really obvious thing to do for web performance.
In terms of moving
the files closer to the user's device so,
there's less latency when they downloaded it.
>> So, something like taking
images and putting images on the CDN,
but having all your scripts and your CS
actually bundled in your application.
>> That's a pretty common approach now. I would say.
>> That's what I do. Every day.
>> Every single day?
>> Every single day, every day I'm bundling.
>> Bringing back the 2012.
>> Yeah.
>> 2011.
>> What happened to LMFAO? Do we even need to know?
Number five, server rendering is
a great way to speed up your page.
But, I feel like we're
kind of going in circles here, right?
Like put your applications
on the server and then we were like,
"No, put them in the browser."
And they were like, "No, put them back on the server."
Is that what was happening?
Where should the application actually live?
>> Well,
I think it's a hard question and the reason we've been
going back and forth so much is because
there is inherent tradeoffs here.
Like when you have the classic server
rendered static site,
it's really fast for page load relatively.
But then, once the page is loaded,
maybe you don't have such fast in-app interactions
because you keep having to go back to the server.
Whereas with a client-rendered app,
maybe your first page load isn't so fast
because you have a larger
JavaScript bundle to download but then,
in-app interactions are really fast.
So, the new generation,
the new thinking is to do
this so-called isomorphic approach
where you get the best of both worlds.
>> So, renders on the server when you
can and render on the client when you
can based on the best of each one of those capabilities.
>> Exactly. Yeah. So, for instance,
there are frameworks like Next.js
or Next.js or Sapper.js,
they'll will try to do this automatically for you,
give you the best of both worlds,
so that for each route,
you're first going to the server and then from then on,
once you've got that JavaScript page load downloaded.
Then you do everything on the client.
>> I do like the best of both worlds.
But, not as much as I like this GooGoo Cluster.
>> I'm Bruke Holland.
>> I'm Nolan Lawson.
>> Now, you know five things about web performance.