Jeremy Wagner's

Web Dev Blog

Without Net Neutrality, Performance Will Matter More Than Ever

18 May, 2017 (updated 19 May, 2017)

I read and write often about web performance. As time has gone on, I've found myself less drawn to the technical aspects of the issue — the human side of web performance proves far more intriguing. I'm interested in how our actions as designers and developers makes life easier for users. Performance is a vital part of the user experience. Those who appreciate its importance aren't simply improving performance metrics, they're improving users' lives. I find my work most rewarding when I know I've built a site that's fast, or if I've remedied performance problems on ailing sites. To me, that's the good fight, and I sleep best when I've fought it.

Read More »

Faster Bulk Image Optimization in Bash

20 April, 2017

In an earlier post, I talked about how you could use the find command in bash to find all files of a specific extension and pass them along to the image optimizer of your choosing. In instances where I don't have time to automate this task with a tool such as gulp, this has proved incredibly valuable.

Lately I've had to convert large batches of images for various projects. The find command, while serviceable in its own right with the -exec flag, only allows for serial processing of the files it finds. This is where xargs came in handy. With xargs I had a way of doing this work in parallel. I recently optimized a batch of about 500 JPEGs using jpeg-recompress. Below was the non-xargs way of accomplishing this task:

Read More »

Bulk Image Optimization in Bash

9 March, 2017

Have you ever needed to optimize a bunch of images in a folder on your computer, but you don't want to go through the hassle of writing an build system to take care of it? Then bash and your image optimization binary of choice are your best friends. I've had situations where I just needed to pull down files from a website already in production, optimize images, and re-upload everything. The exact syntax depends on the optimizer you use, but your workhorse will be the find command.

find is a command that, well, finds stuff. For example, if I wanted to find all files in the current directory and its subdirectories with a .jpg extension, I could run this command:

Read More »

Tips for Writing a Technical Book

21 January, 2017

I spent the last year writing a technical book for Manning Publications, and it's finally out! The book is called Web Performance in Action. The process was something I wanted to fully document, but it became clear to me that nobody would find such an overly-specific, long-winded screed worth reading.

So instead, I said "to hell with it" and slapped a clickbait title on this thing. If you've ever entertained the notion of writing a technical book, these are some tips that served me well during the process. Well, for me at least. Your mileage will vary, of course.

Read More »

HTTP/2 in Developing Nations

6 October, 2016

Hey, everyone! I talk about HTTP/2 (and other stuff) in my upcoming book from Manning publications on web performance. Maybe check it out if that's your kind of thing. In any event, I hope you like this post!

I've been doing some research on HTTP/2 use across the world in preparation for an article on another outlet. In doing so, I've observed some compelling relationships between HTTP/2 support by browser, the developing world, and internet infrastructure quality.

In developed nations, we see often see that internet infrastructure quality is pretty good in comparison to developing nations. That's not to say that some developed nations couldn't stand to do better, but they're often better by comparison. Let's take a quick look at this graph of average and peak connection speeds in the world's top 8 developing nations by population, courtesy of Akamai's second quarter State of the Internet Report for 2016:

Read More »

Stop Using the Protocol-relative URL

22 July, 2016 (updated 5 March, 2017)

Paul Irish wrote about the protocol-relative URL way back in 2010. It was a convenient little post that advised developers to abandon absolute protocol URL schemes using http:// or https:// in favor of a protocol-relative variant that looks something like this:

<script src="//"></script>

This convenient syntax eliminates the need for developers to construct URLs based on the user's current security context. If this syntax was used on an HTTP page to include something from a CDN, it retrieved the HTTP version. If the user used it on an HTTPS page, it retrieved the HTTPS version. Seems like a hell of an idea, right?

Read More »

Cutting Cruft with an SVG Media Query

25 May, 2016

This isn't a huge success story, but I thought it was sufficiently spiffy to warrant a short post about an SVG media query that helped me to cut an unnecessary image from a client's website while still accommodating their design. Who knows? This short post may help you some day.

Not too long ago, I developed a static site for Weekly Timber & Pulp, a logging business in Central Wisconsin. The designer on the project whipped up some comps with two breakpoints: One for phones and tablets in portrait view, and another for tablets in landscape view and larger. The designer is a good friend of mine, and loves to throw me a curve ball every now and again. So he gave the site's logo a different treatment for each breakpoint.

Read More »

Using WebP Images

25 April, 2016 (updated 26 September, 2016)

This article has been updated to reflect changes in the imagemin API.

We've all been there before: You're browsing a website that has a ton of huge and beautiful images of delicious food, or maybe that new gadget you've been eyeballing. These images tug at your senses, and for content authors, they're essential in moving people to do things.

Except that these images are downright huge. Like really huge. On a doddering mobile connection, you can even see these images unfurl before you like a descending window shade. You're suddenly reminded of the bad old days of dial-up connections.

Read More »