- [Instructor] Web developers face an interesting conundrum.
To write code that is understandable and maintainable,
it has to make sense to us humans,
but the machines we write the code for
don't care about human readability at all.
They want highly optimized code,
ideally so optimized it becomes unreadable for humans.
This is especially true when it comes to web optimization.
The code we write is optimized for humans,
but if we want the code to be as fast as possible
and to be performant, it needs to be rewritten
for size and effectiveness,
and that makes it unreadable for us humans.
The good news is we now have tools to do this job for us
in the form of code minimizers, packagers,
bundlers, and more.
To use these tools effectively, though,
they need to be part of a build process
with two or more pronged development environments.
At minimum, you'll need a development track
where the human readable code is stored
and a production track where the highly optimized
and compressed machine-readable code is stored.
In this build tool, the two main focus areas
are JavaScript and CSS because these are
the two types of code we can optimize the most.
As JavaScript has transformed from adding
a sprinkling of effects on top of HTML and CSS
to becoming the de facto development language
for the modern web,
JavaScript weight has become a real performance issue.
JavaScript is now the second largest contributor
to performance bloat,
and much of this bloat is caused by
popular frameworks, like React.
And it's not just the size of JavaScript bundles
that cause performance issues.
The rendering and operation of JavaScript
can also slow down both initial load times
and ongoing functionality,
which impacts perceived and actual performance.
How and when we compress, bundle, load, modularize,
and execute JavaScript is becoming more and more important
to improving performance.
The same can be said for CSS.
Gone are the days when we could serve up
a gigantic style sheet for an entire site.
Modular and inline CSS, progressive loading,
and other performance techniques are now essential
to ensure the style of a site or application
doesn't slow down its delivery.
In this chapter, we'll take a closer look
at how to optimize both JavaScript and CSS for performance
while maintaining a functional
and human readable development environment.