Tag Archives: performance

Efficiently render large lists and tabular data with react-virtualized

Just like Infinity.js, but then for React. The list is windowed (or “virtualized”) meaning that only the visible rows are rendered. Less DOM nodes = better performance 🙂 Also works with rows that have different heights, something not quite common … Continue reading

Elsewhere , , Leave a comment

Understanding the Critical Rendering Path

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial … Continue reading

Elsewhere , , , Leave a comment

JavaScript Start-up Performance

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has … Continue reading

Elsewhere , , Leave a comment

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson: JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). The … Continue reading

Elsewhere , , , , Leave a comment

10 things I learned making the fastest site in the world

Great writeup by David Gilbertson on creating this super fast loading website. Try not to make a slow site Do mobile first. Like, really do it. Be a benchmark hussy Client Side Rendering is expensive Don’t server-render HTML Inline stuff, … Continue reading

Elsewhere , , Leave a comment

DevTools Timeline Viewer

DevTools Timeline Viewer lets you share and view DevTools Timeline traces online, in the browser. Handy if you want to share a Timeline trace with someone to help you debugging. DevTools Timeline Viewer → DevTools Timeline Viewer Example →

Elsewhere , , , Leave a comment

Real–world HTTP/2: 400gb of images per day

Michael Mifsud of 99designs: We began a small-scale rollout for static assets earlier this year. After building confidence in our new infrastructure, we began transitioning our static assets to HTTP/2. Surprisingly, some sections of our platform felt noticeably slower. This … Continue reading

Elsewhere , , Leave a comment

CSS Containment

The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work. Yes, you – as a developer – gain control over (parts of) the pixel pipeline. Available in Chrome 52+ and Opera 40+ … Continue reading

Elsewhere , , , Leave a comment

How to animate “box-shadow” with silky smooth performance

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of … Continue reading

Elsewhere , , Leave a comment

Supercharging page load

Jake Archibald introduces how making simple changes to Service Worker can vastly improve the startup and load performance of your web site. In this video Jake shows how he has made his Wikipedia application not only work offline but amazingly … Continue reading

Elsewhere , , , Leave a comment