Performance Tutorials
![Fixing Cumulative Layout Shift Problems on DavidWalshBlog]()
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
![Limit Promise Concurrency with pool]()
Limit Promise Concurrency with pool
Methods like
Promise.all,Promise.allSettled,Promise.race, and the rest are really excellent for managing multiple Promises, allowing for our apps to embrace async and performance. There are times, however, that limiting the number of concurrent operations may be useful, like rate limiting or simply not wanting...
![How Hacker News Crushed David Walsh Blog]()
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...
![Vital Web Performance]()
Vital Web Performance
I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do...
![Observing Intersection Observers]()
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...
-
![Detect WEBP Support with JavaScript]()
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...
![Image Optimization with Cloudinary]()
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...
![JavaScript Promise API]()
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...
![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...
