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.

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.

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.

:: 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.

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.

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.

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

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.

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.