performance

Fetch Inject

Fetching async loader and DOM injection sequencer for the Web.

:: JavaScript / ES2015 / Rollup

I conceived of a new technique for managing asynchronous dependencies hacking away at a coffee shop called 9-11 in Bali back in 2017. Fetch Inject is a tiny JavaScript library and Node module making it possible to deep link to full-sized After Dark Image Gallery images without blocking or slowing down page load.

Zero to HTTP/2 with AWS and Hugo

5 minute read Updated

A step-by-step guide to creating your own JAMstack site using Amazon Web Services and the Hugo static site generator.

So you found out how Smashing Magazine got 10x faster and want to create your own JAMstack website with Hugo. If so, you’re in luck because I’m going to show you how to do it using Amazon Web Services so you don’t end up paying through the nose for hosting or locked into a provider which might disappear.

Optimize Images with Sketch App

4 minute read Updated

Optimize your image assets for the Web using Sketch app.

You know the drill. When you’re building for the Web or mobile performance is everything. Out of the box Sketch does not lend itself to producing flyweight images. But that doesn’t mean you need a second image editor, or even another tool, just to create performant images. Use these techniques to reduce file sizes and optimize images with Sketch.

Putting WordPress into Hyperdrive

1 minute read Published

Increase the speed of stock WordPress more than 300% using a single plug-in.

Loading Pages Faster than the Speed of Light with Fetch Inject, Redis, Vultr, Load Impact and LEMP.

Turbocharge Your Jekyll Blog

5 minute read Updated

How to dramatically speed up your static blog.

The need for speed is upon us. Out of the box the speed of an Octopress site kinda drags. However, there are a number of things you can do to to speed it up without a complete overhaul. Learn how to turbocharge your Octopress blog.

Monitoring Progressive Webapp Performance

2 minute read Published

Progressive Monitoring for your Progressive Web Apps with Speed Tracker.

How do you monitor website performance? Is it monitored? Do you know if your website is getting faster? Slower? Do you know when it falls below critical performance thresholds? Are you receiving automated alerts? Do you even have alerts? If not, you could be. And it won’t cost you a dime to get started.

This post is going to talk about SpeedTracker. SpeedTracker is a free tool that allows you to monitor website performance over time. Use it to visualize your page speed scores, track Lighthouse metrics, receive alerts and even create a public dashboard consisting of multiple websites for quick reference.

PageSpeed 100 with Jekyll, S3 and CloudFront

11 minute read Updated

Perfect your Google PageSpeed with AWS S3 and CloudFront website hosting.

After moving this website from WordPress to Jekyll in 2013 I’ve written enthusiastically about Jekyll. But it wasn’t until recently that I was able to hit the elusive PageSpeed Insights score of 100 for both desktop and mobile performance. Here’s how I got there using Jekyll with S3 and CloudFront, and how you can too.

When Fast Isn't Fast Anymore

3 minute read Published

Websites that load in 200ms using open source tools.

Back in , while I was seated at a developer conference absorbing as Paul Irish was teaching us about the Foamy Rules of Rabid Tools, I also learned about building single-page apps with Backbone.js. BrowserSync wasn’t a thing yet, and most engineers I knew had never even heard of CoffeeScript and SublimeText. And hardly anyone I knew at the time in Chicago was using GitHub.

Fast-forward three years and my how things have changed…

Avoiding Front-End SPOF in Single Page Apps

3 minute read Published

Effective mitigation of common single points of failure in web applications.
This post originally appeared on the Trunk Club Tech Blog. Some links have been updated to point to their new canonical resource locations.

A couple years back Steve Souders gave a great talk at Fluent Conf titled Your Script Just Killed My Site (video). During the talk Steve explained front-end SPOF and pointed towards a nice tool for detecting it. Fast-forward a couple of years and front-end SPOF is still a concern in web development. And, when building a single-page app, SPOF is an even bigger deal as it can cause an entire web app to become unresponsive, putting users at the mercy of the browser to download and execute 3rd-party scripts prior to bootstrapping. Read on to learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache (BWP).

Learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache

Chaplin Collection Views Using Css Transitions

2 minute read Published

How to use the Chaplin library to animate routing transitions.
This post originally appeared on the Trunk Club Tech Blog. Some links have been updated to point to their new canonical resource locations.

My team at work is currently porting an e-commerce SPA from an older framework over to Brunch with Panache (BWP), our open source development framework for web clients. Like the old framework, BWP uses both Backbone and CoffeeScript. But to make composing applications easier BWP kicks it up a notch and adds in Chaplin, giving us Collection Views.

One of the downsides with the out-of-the-box Collection Views provided with Chaplin is that they use JavaScript-based animation to fade-in the item views once the collection has been fetched. And while this may be OK for many applications, it’s not ideal for apps with pages which have many collection views, or for mobile user agents in general.

Optimize Mobile Performance with Jdrop

2 minute read Published

How to use Jdrop to debug mobile browsers without a dev tools IDE.

Last month Steve Souders announced Jdrop, a JSON repository in the cloud. Using Jdrop and Souders’ Mobile Perf bookmarklet, developers can send mobile browser data to the cloud for more careful analysis on other devices.