Performance Tutorials

  • By
    Observing Intersection Observers

    As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck - rendering. It's because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more...

  • By
    Detect WEBP Support with JavaScript

    Image optimization is a huge part of improving front-end performance.  We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.  If you go to a site like GIPHY in Chrome you'll...

  • By
    Image Optimization with Cloudinary

    We're always looking for ways to improve site speed; we lazy load, minify and concatenate, create sprites, experiment with caching, and just about everything else we can think of.  With all of the performance optimization strategies available, the best way to decrease page size always comes back to...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

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

  • 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
    Optimize GIFs

    I've written a lot about converting different media types lately, especially GIFs, including Convert Video to GIF or GIF to VideoDetect if a GIF is Animated, and Get the First Frame of an Animated GIF with ImageMagick, but whether it's ImageMagick or ffmpeg doing the work, GIFs do not always...

  • By
    Measuring Performance

    Clients care deeply about web performance and they depend on us to articulate and measure how well their website is performing. If you have a service level agreement (SLA) with your client, and you should, then learning how to measure key metrics is crucial...