About this Book
The purpose of Web Performance in Action is to teach you how to create faster websites, and through the course of this book, I’ll help you get here. The techniques you’ll learn as you read should also come in handy for improving performance on existing websites.
Who should read this book
This book focuses heavily (though not exclusively) on improving website performance on the client side. This means that it’s targeted toward front-end developers who have a good command of HTML, CSS, and JavaScript. You, the reader, should be comfortable working with these technologies.
This book occasionally strays into the server side where appropriate. For instance, some server-side code examples are in PHP. These examples are intended to be illustrative of a concept, and are often peripheral to the task at hand. Chapter 10 covers server compression, including the new Brotli compression algorithm, which fits into the server-side category. Chapter 11 explains HTTP/2, so having an interest in how this new protocol can affect how you optimize your site can be helpful.
You should also be somewhat comfortable on the command line, but even if you’re not, you’ll still be able to follow along in the examples provided. Now, let’s talk about how this book is structured.
Roadmap
Unlike most other Manning titles, this book is not divided into parts, but it does follow a logical flow of sorts. Chapter 1 is an introduction to the fundamentals of web performance—bedrock stuff, such as minification, server compression, and so forth. If you’re already a performance-minded developer, this chapter will feel familiar to you. It’s intended for the front-end developer who’s new to the concept of web performance. Chapter 2 covers performance assessment tools, both online and in the browser, with a focus on using Chrome’s developer tools.
From there, we’ll venture into the realm of optimizing CSS. Chapter 3 is a grab bag of topics and examples of how you can make your CSS leaner, and use native CSS features that can help increase the responsiveness of your website to user input. Chapter 4 is about critical CSS, a technique that can give your site’s rendering performance a real shot in the arm.
Then, we’ll tackle image optimization. Chapter 5 focuses on different image types and how to use them, as well as how to deliver them optimally to different devices both in CSS and inline in HTML. Chapter 6 covers how to reduce the file size of images, automating the creation of image sprites, Google’s WebP image format, and how to lazy load images by writing a custom lazy loading script.
After all of that, we’ll turn our focus away from images toward fonts. Chapter 7 covers optimizing fonts. This ranges from creating an optimal @font-face cascade to font subsetting, using the unicode-range CSS property, compressing legacy font formats on the server, and how to control the loading and display of fonts with CSS and JavaScript.
Chapters 8 and 9 focus on JavaScript. Chapter 8 speaks more to the need for minimalism in JavaScript by advocating the use of in-browser features, rather than relying on jQuery and other libraries. For those who can’t abandon jQuery, I talk about jQuery-compatible alternatives that offer a subset of what jQuery does, but with less overhead. This chapter also talks about proper placement of the <script> tag, as well as how to use the async attribute, and animating with the requestAnimationFrame method. Chapter 9 ventures into the territory of JavaScript service workers. In this chapter, you’ll learn how you can serve content to users who are offline, as well as how you can improve the performance of pages for online users with this technology.
Chapter 10 is yet another grab bag of topics. It covers the impact of poorly configured server compression, the new Brotli compression algorithm, resource hints, configuring caching policies, and the benefits of using CDN-hosted resources.
Chapter 11 covers HTTP/2, the performance problems that it solves, how optimization practices differ between it and HTTP/1, Server Push, and a proof of concept of how you can adapt the delivery of your website’s content to accommodate both versions of the protocol.
Chapter 12 takes a good chunk of what you’ve learned and automates it with the gulp task runner. In this chapter, you’ll learn how to automate various aspects of optimizing your website’s performance, which will help you optimize your sites as you code them, saving you valuable time.
There are two appendixes. Appendix A is a tools reference. Appendix B highlights common jQuery functions and shows you how to accomplish the same tasks by native means.
Tools used in this book
While following examples in this book, you’ll have open your favorite text editor and a command-line window. Beyond that, two tools are used consistently throughout, so you’ll want to have them installed.
Node.js
Node.js, sometimes referred to as Node, is a JavaScript runtime that allows you to use JavaScript outside of the browser. It can be used for all kinds of crazy stuff that, some years ago, no one would have thought that JavaScript would be used for. I’m talking about task runners, image processors, and even web servers. All these things are installed using the Node Package Manager (npm).
In your optimization efforts throughout the book, you’ll use Node for all of that. You’ll often use it to run local web servers using the Express framework for examples that we’ll work through together. In chapter 11, you’ll even use it to run a local HTTP/2 server. You’ll use Node in chapter 6 to optimize images in bulk, and in chapter 12, you’ll use it to automate common optimization tasks with gulp. It’s used in nearly every chapter for one kind of function or another.
If you’re serious about working your way through this book, you’ll need to have Node installed. If you don’t have it set up, go to https://nodejs.org and head to the downloads section. If you’re feeling trepidation because you don’t know Node, don’t worry! Everything is explained, and if you follow the directions, you should be fine. But, if you feel that you’d benefit from a deep dive into how Node works later on, check out Node.js in Action, another title from Manning (https://www.manning.com/books/node-js-in-action). Just know that a deep knowledge of Node is not necessary to navigate through this text.
Git
Git is a version control system used for keeping track of changes in software applications. There’s a good chance you’ve used it, but if not, you’ll get to use it in this book. Git is used to download code for examples from this book’s collection of GitHub repositories hosted at https://github.com/webopt. You can download Git at https://git-scm.com.
Why use Git instead of downloading zip files of code examples? For one, using a version control system like Git on the command line makes it easier to grab things and go. The biggest advantage, though, is that you’ll be able to easily skip ahead to finished code examples if you get stuck or just want to see the final result.
If you’ve never used Git, don’t sweat it. All the instructions for using it are delineated clearly, and you’ll be able to follow along. If you prefer not to use Git, you can go to https://github.com/webopt and download zip files from each repository.
Other tools
Most of the tools you’ll use in this book will be installed by Node Package Manager, and are thus dependent on Node. There are two instances, however, where you’ll get an opportunity to use tools beyond Node.
In chapter 3, there’s an example where you’ll apply the DRY (don’t repeat yourself) principle to CSS, which entails combining redundant rules under multiple selectors. A Ruby-based tool named csscss is used in this example to detect redundancies. If you have a Mac or you’re running any other UNIX-like operating system, this may already be available for you. If you’re running Windows, you’ll have to download Ruby at http://rubyinstaller.org.
In chapter 7, there’s an example where you’ll subset fonts to make them smaller. You’ll use a Python-based tool called pyftsubset. Like Ruby, there’s a good chance that on UNIX-like systems, Python will already be available. If you use Windows, you’ll want to head over to www.python.org and grab the installer.
Code conventions
Code in this book is written in a fashion that most developers will be comfortable with. All source code in the book is in a fixed-width font like this, which sets it off from the surrounding text. In code snippets throughout the book, relevant portions are annotated for clarity. Changed portions of an existing snippet are typically set in bold font like this. Regarding the code you download from GitHub, indentations are done with tabs. When it comes to how many spaces you want a tab character to represent, that’s up to you. When I wrote the examples, I went with four spaces. The code snippets in the book follow that convention.
Source code for all working examples is available on the publisher’s website (www.manning.com/books/web-performance-in-action) as well as GitHub (https://github.com/webopt).
Author Online
Purchase of Web Performance in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum and subscribe to it, point your web browser to www.manning.com/books/web-performance-in-action. This page provides information on how to get on the forum once you’re registered, what kind of help is available, and the rules of conduct on the forum.
Manning’s commitment to our readers is to provide a venue where a meaningful dialog between individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author challenging questions lest his interest stray!
The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.