Tip:
Highlight text to annotate it
X
Hi, I'm Ilya Grigorik, developer advocate, and web performance engineer at
Google. Which is to say, I like to make things fast.
>> And I'm Cameron Pittman. I'm a course
developer here at Udacity. Pretty new to web development,
which means I've made a few pages in the
past, but never optimized any of them for speed.
>> Developing a great website requires that you
understand your users and what they want to
achieve, but also how the browser works, so
you can build a fast and great experience.
>> Right. You know, I recently
ran my page through PageSpeed Insights. And I, well,
my score was pretty low, and I got some suggestions
I didn't quite understand. Like, for instance, how do
I remove render blocking JavaScript, and what are asynchronous scripts?
>> You know what, those are great
questions. And you're definitely not the only one.
Both of the optimizations that you've asked about
have to do with critical rendering path, which
is the sequence of steps the browser goes through to render the page. And I
think a lot of us take it for granted that the browser does all the work,
but once you understand how the browser
constructs dom, the cssom subject model layout
and paint, you can reliably build pages that rendered in less than one second.
>> Wow. One second. That is awesome. I would love to have all my
pages rendered in less than a second. What do I need to get started?
>> Well, to start how about an hour of your
time. We're going to take a ground up view of how the
browser constructs the page and once you know that I
think you'll be in great shape to answer your own questions
about how to optimize your own page.
>> Awesome. Let's do it.
>> Actually, one more thing before we get
started. I want you to write down some thoughts
about what you want to get out of this course and what you would like to learn.
>> Okay.