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 …
Tag Archives: performance
Pixels are expensive
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 …
Fixing a parallax scrolling website to run in 60 FPS
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”
The Illusion of Motion
CSS `will-change` Property
#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows …
Velocity.js – Accelerated JavaScript animation
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and …
Continue reading “Velocity.js – Accelerated JavaScript animation”
Parallax Done Right
Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …
60fps scrolling using pointer-events: none
Rendering Performance Case Studies
jquery.unevent.js
A jQuery/Zepto plugin I’ve been using a lot lately to debounce (= attach with delay) event handlers. To be applied on scroll events for example, as you don’t want one long single scroll to pull down the performance of your webpage by constantly triggering the attached handling function. $(window).on(‘scroll’, function(e) { // update stuff *after* …