Optimization Tutorials
![Don’t Wait for ServiceWorker: Adding Offline Support with One-Line]()
Don’t Wait for ServiceWorker: Adding Offline Support with One-Line
The HTML5 Application Cache should make building offline-friendly web apps possible. In practice, its unforgiving nature makes it very challenging to use at all, giving it a uniquely negative reputation among front-end developers. It's expected that apps continue to work offline—most users don't won't care about...
![Convert Image to Data URI with JavaScript]()
Convert Image to Data URI with JavaScript
Whenever I go on a "performance run" on a website, the first place I look is imagery. Why? Because you can save an image out of Photoshop, push it into ImageOptim or even TinyPNG, and save 70% on its file size. What do most developers not consider? Taking tiny image...
![Reducing Memory Leaks when Working with Animations]()
Reducing Memory Leaks when Working with Animations
I have been doing a lot of work with Snap.svg recently and you may have already seen an article a while back regarding SVG animations. After the article had been published, I took some time out to review the code I had written and found that...
![WebP Images & Performance]()
WebP Images & Performance
It's said that a picture is worth a thousand words, but online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a Web page's total size on average. With this in mind, image...
![Font Loading Techniques]()
Font Loading Techniques
It seems as though most websites use non-default fonts these days and who can blame them? System fonts are all pretty boring and custom fonts add a bit of flare and freshness to a site's design. The problem with using custom fonts, however, is they can really...
-
![Enable GZIP Compression on nginx Servers]()
Enable GZIP Compression on nginx Servers
Speed kills, and there's nothing like a speedy website. When you come to this blog, I want you to have a great experience, which is why I've worked tirelessly to compress every asset and avoid unnecessary synchronous interactions. In reviewing my site with Google Pagespeed...
![CSS vs. JS Animation: Which is Faster?]()
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...
![JavaScript Debounce Function]()
JavaScript Debounce Function
One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function. If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it...
![Shaving Bytes on JavaScript Conditionals]()
Shaving Bytes on JavaScript Conditionals
Whenever you work with JavaScript code, it's as though there's always a shorter way to code something. You thought that a code set was basic until you found out that something was basic...er. One of those code shortcuts can be found with conditions, specifically short if...
![JavaScript: Avoiding Repeated Work]()
JavaScript: Avoiding Repeated Work
I love to scavenge the source code of the web's large sites, looking for patterns to both apply to my coding and to find hacks or techniques I'd not heard of before. One problem I often find with the coding of large sites is repeated operations.
