Check out a free preview of the full JavaScript Performance course

The "Final Thoughts" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses final thoughts on performance as well as some paths for further research and topics not covered in this workshop.

Preview
Close

Transcript from the "Final Thoughts" Lesson

[00:00:03]
>> Steve Kinney: Closing thoughts, recommendations, and future research. [LAUGH] Hey, remember this tip, just make sure your app is in production mode whatever that means for your framework. Cuz there's a lot of actual stuff that happens in development mode that makes your life easier. That like there is no reason and I say this cuz like I have accidentally shoot my own app and development [INAUDIBLE] before.

[00:00:24]
I've gone to visit a production going, why is it orange? I got to him like order of web pack flagging is wrong. Like I said to production environment after I ran [INAUDIBLE]. So it was already [INAUDIBLE] knows all the checks were stripped out and then I set production mode right?

[00:00:40]
So definitely, it matters so much, right, that it's worth repeating one more time. So yeah, doesn't react. It takes up PropTypes, takes all the helpful warnings, doesn't do performance metrics. It's just generally speaking. And if you think you have a performance problem as you're developing code. Build it for production first, and see if you still have a problem.

[00:01:03]
I have lost days of my life, that I will never get back, tracking down performance problems that didn't exist. They only existed in development. You go and you look, and they're not there, right? That's why I'm repeating this one, because don't be like that, keep those days. [LAUGH] Don't go down.

[00:01:22]
I have the scar tissue here for you. You don't have to do this. I'm saying this enough times so that 20 minutes into debugging you'll be like, have I built for production? Let me built for production and see if that's a thing. And if I can save one person an hour at some point I'm going to call this entire thing a win.

[00:01:37]
You see it's orange when you're in production mode. It's black when you are in orange in development mode, black in production mode. Like with this help for error message if you click on it. Whatever your framework of choice is, likely has a different tool like this just make sure that you're using it.

[00:01:55]
Cool, so web performance is a giant topic, like more than a one-day topic. And there's a lot of things that we didn't get to talk about today. Server-side rendering is this idea that your JavaScript takes time to parse. It takes time to leg load. What if you sent them a regular, old HTML page and then you got everything else loaded?

[00:02:15]
Now, depending on your application, if it's the New York Times you can send them the content no problem. If it's Twitter, well you've got to do some figuring out their timeline, you need to do all of that server-side. Different frameworks have different level support for this. Ember was one of the first, I believe, Angular and React both have support for it but Backbone, for instance, might not.

[00:02:36]
So it might be something you can use or might not use. Image performance, we joked that taking out a megabyte of JPEGs is not as good as taking out a megabyte of JavaScript. But also taking out a megabyte of JPEGs is good. So you can see Medium does really interesting things.

[00:02:51]
Where they show you a blurred out version that's really low res. And then when you scroll to that part then they load the image. So you're not sending your images for like six pages down the article immediately. They wait until your scroll event gets that image and then they load it.

[00:03:05]
There's a bunch of cool stuff you can do there. One of the biggest bottlenecks on performance is web fonts. Who doesn't love a good web font, right? But they can be, you've seen the page where you're seeing nothing? Until the font loads, that's not great. Chrome actually has some really interesting tools, where it's basically, you can actually have a setting where you say, hey, this is the font I want.

[00:03:27]
But if it takes too long, just use this other font, like Georgia, or Helvetica, or whatever. And then finally, I kinda mentioned this before about progressive web applications. I think it's definitely, incredibly important and interesting field that's still emerging in Safari. And then beta will now support the service worker and so, yeah having upset work offline that can sync in the background.

[00:03:49]
And can show you a thing immediately while I find more stuff is incredibly powerful as well. It was a two day topic in and of itself, so like, hard to also squeeze in amongst everything else. Thank you so much.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now