A rather geeky/technical weblog, est. 2001, by Bramus
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, …
Continue reading “Real–world HTTP/2: 400gb of images per day”
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 …
Continue reading “How to animate “box-shadow” with silky smooth performance”
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 …
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. …
Continue reading “rafscroll – chain your scroll events to requestAnimationFrame”
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 …
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 →
Critical CSS opens a page in a browser from the command line, sets the window width to a specified width and height (default is 1200 x 900), and analyzes which styles are applied to elements that fall within the visible portion of that viewport. It then writes those styles to a file that you can …
Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline: Recalc styles Layout Paint Composite Layers If you like reading more than watching a video, a write-up is also available: Pixels are expensive …
I recently visited a parallax scrolling website that was just one of thousands of different parallax scrolling websites out there. One thing that I immediately noticed was that the scrolling FPS of that page was really bad. I suspected that there would be room for improvement in their parallax implementation, and I wanted to take …
Continue reading “Fixing a parallax scrolling website to run in 60 FPS”