A Faster Web

Because Performance Matters

Linting Responsive Images

By Shawn MaustMay 29, 2017

When building a responsive web page, one of the goals–by definition–is to make sure the page works well on a wide variety of screen sizes. This includes how it displays any images it contains. But when an image needs to be displayed at a variety of sizes, you run into a dilemma: You want to make sure the original image is large enough to not get scaled up (and thus look pixelated) when filling the space. But at the same time, you want to avoid the performance hit of using an image that is significantly bigger than is necessary when displayed on smaller viewports.

Continue Reading →

Using Chrome Dev Tools to Identify Unused Code

By Shawn MaustApril 30, 2017

One of the fundamental ways of improving webpage performance is to reduce the size of the files that are being sent over the wire. Images are often an early target for optimization, but other files — like those used for HTML, CSS, and JavaScript — can provide plenty of room for improvement. The CSS and JavaScript files used for a site, for instance, can grow fairly large now days, especially if 3rd party framework are involved. So how do you reduce the size of these files?

Continue Reading →

Google’s Guetzli Promises Smaller, Better Looking JPEGs

By Shawn MaustMarch 31, 2017

Earlier this month, Google announced a new JPEG encoding algorithm that promises high quality images with a savings of up to 35% in file size. Guetzli (Swiss German for cookie) is Google’s new, open source method of encoding JPEGs that “strikes a balance between minimal loss and file size…”(source). Meaning, there tends to be fewer artifacts, thus creating an image that is both smaller and looks better.

Continue Reading →

Shining Light on Performance with Lighthouse

By Shawn MaustFebruary 28, 2017

Lighthouse logo
If performance is important to you, having the right tools to test it is critical. These tools could include the developer tools that we find within modern browsers, or online tools like WebPageTest or Google’s PageSpeed Insights. Today, we’ll be looking at another tool. But unlike some online tools out there, it can be installed locally, giving us the ability to test pages (including local pages) from both the browser as well as the command line.

Continue Reading →

Upgrading Your Service Worker Cache

By Shawn MaustJanuary 31, 2017

In the previous post, we set up a basic cache using services workers – one that simply cached responses to requests coming in so we could pull them from the service worker cache instead of over the network. And while this simple cache has some usefulness, there are a number of ways we can improve upon it. In this post, we’ll look at a few ways to level up our basic service worker cache, giving us more flexibility and precision in how we handle requests and responses.

Continue Reading →

Got any Cache? Basic Service Worker Caching

By Shawn MaustDecember 31, 2016

One of the major features of service workers is their ability to act as network proxies. Since they can intercept and handle requests from the pages they control, they give developers an incredible opportunity to customize how certain resources are handled. This includes control over how resources are cached, as well as over how these cached resources are utilized. This ability provides an opportunity for performance gain – especially when a resource is used on multiple pages on the site – as well as a chance to customize and enhance the offline experience. In today’s post, we’ll be looking at how to set up a basic cache using service workers. This includes getting a cache initialized and populated with an initial set of resources, as well as adding additional resources to the cache as the user browses the site.

Continue Reading →