From the course: Developing for Web Performance

Automated optimization of JavaScript and CSS

From the course: Developing for Web Performance

Start my 1-month free trial Buy for my team

Automated optimization of JavaScript and CSS

“

- [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.

Contents