Optimization Tutorials

  • By
    Fixing Cumulative Layout Shift Problems on DavidWalshBlog

    Over 50 thousand developers visit DavidWalshBlog every month from around the world to learn JavaScript tricks and fix problems in their code. Unfortunately, some of them have a slow experience on the site.David tracks the performance of his Core Web Vitals and overall performance with

  • By
    How Hacker News Crushed David Walsh Blog

    Earlier this month, David’s heartfelt posting about leaving Mozilla made the front page of Hacker News. Traffic increased by 800% to his already-busy website, which slowed and eventually failed under the pressure. Request Metrics monitors performance and uptime for David’s blog, and our metrics...

  • 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
    Website Speed Test by Cloudinary

    Making your website as fast-loading as possible is not only an art but a necessity these days.  Slow-loading websites cause users to bail, leading to lost revenue and loss of credibility.  Add that Google now factors site speed into search results and you realize how important...

  • By
    JPEG Compression with Guetzli

    A little while ago Google released its Guetzli JPEG encoder, which claims a 20-30% improvement in file size over libjpeg. Being intrigued, I decided to give it a go. My tool of choice for optimizing JPEGs has long been jpeg-recompress, one of the...

  • By
    How to Reverse Engineer OS X and iOS Software

    The question of why we need to employ reverse engineering is an easy one to answer. When there is an executable, but no access to the source code, yet you still need to understand the inner workings of this particular software, you apply reverse engineering to...

  • By
    Responsive Images with Client Hints

    It doesn't take being a performance fanatic to know that images can really slow down a page's load time.  We've come a long way when it comes to images, from lazy loading them to using better image formats like WebP, but they all involve loading the...

  • 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
    Remote Debugging with Charles Proxy

    The most difficult part of supporting TV apps when you didn't create them and don't have access to the source code is debugging them when asked for help.  It's almost an unfair request -- "we wont give you access to edit the code but we want you...