Tag: optimization

The blog post explores the current state of web development, highlighting the tension between optimization demands from major players like Google and the emergence of new, faster build tools. It expresses the author's personal experience with these new tools and their potential to streamline the development workflow.

Optimizing images for the web is crucial for Core Web Vitals, but the process is overly complex. While tools like Squoosh and web.dev guides offer help, developers still struggle with image optimization. This difficulty stems from needing to consider file size, resolution, codec support, lazy loading, and more. CDNs offer a solution but introduce centralization. To simplify this, I created a prototype tool (https://just-gimme-an-img.vercel.app/) that generates optimized HTML for images, handles AVIF conversion, creates multiple image sizes, and does it all client-side using Squoosh's CLI. The tool aims to make image optimization easier and more accessible, especially for common use cases like hero images. I'm hoping this sparks further discussion and improvements in image optimization tooling to simplify the process for all developers.

I've created a lighter fork of the SimpleImage tool for Editor.js! It addresses a couple of issues I had with the original. First, it now uses blob URLs instead of base64, which saves memory. Second, it adds the ability to select an image file directly, rather than only drag-and-drop. Check out the fork on GitHub!

Building web experiences for low-end devices in developing markets presents significant performance challenges. Limited memory, slow network speeds, and slow JS execution necessitate different development strategies. While developers in established markets might not prioritize these users, their numbers are growing rapidly. We must continue focusing on web performance to ensure the web remains the platform of choice.

Emscripten is a great tool for compiling to WebAssembly, but it can introduce unnecessary overhead. It's important to minimize the runtime size for any language compiled to WebAssembly. This post explores how to use Emscripten with a minimal runtime, avoiding excessive magic and focusing on efficiency.

I couldn't find an easier way, so I built it myself

I love (actual love) the `window.performance` API. Use it to help speed up your site.

I recently used Page Speed Insights for Mobile to improve my blog's page load time and one of the key recommendations was to reduce render-blocking CSS above the fold. This led me to explore the concept of critical CSS, which is the minimum CSS required to render the initial view of a page. I developed a proof-of-concept tool (bookmarklet and devtools snippet) that analyzes the DOM and extracts the critical CSS by iterating through visible elements and using window.getMatchedCSS(). This tool helps identify unnecessary CSS, integrate into build processes for optimization, and potentially generate page-specific CSS files for improved performance. It currently has limitations, working only in WebKit/Blink, ignoring media queries, and not handling pseudo-elements.

At Google IO, we were asked how to optimize Google Fonts for mobile performance. We focused on visual appeal by using mobile-friendly fonts like Droid Sans and Lato. To minimize requests, we leveraged App Cache, storing the CSS and font files for faster subsequent loads. While the Web Font API abstracts URLs, we found the font URLs within the CSS response and cached them. Although subsetting fonts is possible, we didn't use it given the potential character range needed for news articles.