web performance optimization - Raoul Kramer

gracefully deprecating your legacy codebase

You're running a legacy codebase, supporting browser from 2013 and you want to avoid that your users are unable to use your service with your next release or you want to enrich your user experience with a new feature, but not writing more legacy code and not ship more polyfills.

web performance optimization

.avif .webp images css background usage progressive enhanced with image-set

Part 3 of my new image formats as background-image journey (part 1, part 2). Avif and webp images bring a positive impact on every webpage's payload performance. Today (March 16 2021) avif works only in chromium based browsers and webp have "partial support" in macOS safari, we cannot use one-for-all.

web performance optimization

avif and webp images as css background images

UPDATE: I was late at the image-set party, please read this blog post, how to support avif and webp images in your project.Safari is late at the webp party, whilst Firefox and chromium-based browsers heading to the avif party. This means I need to extend my webp feature detection

nuxt.js

nuxt.js static page generator with dynamic pages

With Nuxt.js you have the choice - will you deliver server side rendered pages over a node.js infrastructure, will you take the single page application approach like a Vue.js app or will you use Nuxt.js as a static site generator with npm run generate? Static site

web performance optimization

LazyScripts v0.3.x released

LazyScripts 0.3.x released - with MutationObserver support

web performance optimization

Remove dust from a legacy project

Years go by, platform code grows, browser platform support changes, and there you are: +300 Kilobytes of minified JavaScript code is shipped, same in CSS and the Chrome Code Coverage Tool shouts a huge blob of unused code in your face… Your legacy project collected dust along the way! In

web performance optimization

Lazy Load JavaScript[s]

my idea of lazy loading javascript files - like you already do with images and iframes…

frontend

WebP image and background usage in web projects

UPDATE: I was late at the image-set party, please read this blog post, how to support avif and webp images in your project.With Firefox 65 joining the WebP party and thanks to the incredible squoosh app, WebP becomes more than just a lighthouse proposal. So it is time to

plain js

javascript - choosing the right timeout is easy

Every once in awhile I see code that debounces expensive events like resize or scroll: someTimeout = window.setTimeout(debounceScroll, 10); and I wonder about the magic numbers, developers choose. magic numbers In the example the dev thinks 10 milliseconds is a good time to debounce this event. The whole code