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 greatest win to me is the visualization in the Dev Tools timeline. After installing it […]

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, probably Preload, then load Reward good behaviour Service workers: like me in high school (cool […]

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 post will cover our investigation into the performance regressions we experienced by adopting HTTP/2. So, […]

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 mimicking the same effect, however, with minimal re-paints, that should let your animations run at […]

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 performant too. Jake, in his typical Jake style. Love that guy! One might argue that […]

rafscroll – chain your scroll events to requestAnimationFrame

new rafscroll(function() { // Do your thing here. }); Your monitor refreshes at 60 frames per second (fps). Scroll events, on the other hand, do not. Chaining your scroll events to a requestAnimationFrame ensures that your transitions and animations will refresh each time the monitor refreshes, rather than each time a scroll event is fired. […]

Blackfire Profiler

Blackfire Profiler automatically instruments your code to gather data about consumed server resources like memory, CPU time, and I/O. But Blackfire Profiler is more than figures; its interactive Callgraphs make it straightforward to find bottlenecks and improve performance. Moreover, profile comparisons let you understand the impact of your changes. Blackfire Profiler — Fire up your […]

PerfMap: front-end performance heatmap

A bookmarklet to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API. Wait for a page to fully load and then click the bookmarklet to overlay a performance heatmap. A browser with support for the Resource Timing API is required. PerfMap: front-end performance heatmap →