Optimization Tutorials

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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...

  • By
    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.

  • By
    Incredible Analytics with Crazy Egg

    Analytics tracking is an important part of ensuring the success of any website or app, and the better information you get, the more you can do with that information.  I've always loved and appreciated what Google Analytics provides in the way of basic information, but GA's...