Deadsimple Lazyloaded Images in Svelte

2 minute read Published

Easy to implement lazyloading in Svelte perfect for image galleries.

Next to text compression image lazyloading is one of the best ways to improve performance on a website. And with Svelte its no different. So here I’m going to share a radically simple way to accomplish lazyloading with Svelte.

Monitoring PWA Website Performance

2 minute read Updated

Monitoring the speed of your Progressive Web Apps over time.

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.

Putting WordPress into Hyperdrive

2 minute read Updated

Prepare for Ludicrous Speed with a 300% improvement in page load time.

After giving a talk once in Bali – where I showed how to use a $5 Vultr box and Redis with Load Impact to support up to 7000 concurrent WordPress users – I was asked to help turn some of the performance optimization work demoed into a WordPress plug-in.

It’s the first of it’s kind — and like no other performance plugin to precede it. Based on initial tests it speeds up the stock Twenty Seventeen theme about 300% and I suspect time will show even greater gains for other themes. It builds on top of a performance optimization technique called Fetch Injection, enabling external scripts to download asynchronously in parallel while preserving execution order.

Fetch Inject

Fetching async loader and DOM injection sequencer for the Web.

:: JavaScript / ES Module / Playwright / SvelteKit / Node.js

I conceived of a novel 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.

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.