Fix Image Layout Shift in Gatsby with gatsby-plugin-image
Gatsby images can push content around and delay paint. Learn how gatsby-plugin-image reserves space, generates responsive srcsets, and lazy-loads assets at build time.
Loading…
ReadMeFeed / Community knowledge
#web-performance
Real questions. Useful conversations. Find the people who know your stack.
gatsbyHow Chrome’s Built‑In HTTP/3 Support Helps Low‑Latency Web Apps (and How to Verify It)
Learn why Chrome automatically switches to HTTP/3, how to confirm a request is using QUIC, and the caveats you need to watch for when deploying to production.
chromeHTML5 Canvas: Immediate-Mode Rendering Decisions That Affect Performance and Accessibility
Canvas gives you a bitmap and a clock—everything else is yours to build. This post covers DPR scaling, state discipline with save/restore, and the accessibility work you can't skip.
html5Phalcon Volt: Managing Compiled Templates and Inheritance
Learn how to configure Phalcon's Volt engine, implement template inheritance, and manage the compilation cache to avoid stale views and XSS vulnerabilities.
phalconHow the HTML5 <picture> Element Solves Responsive Image Delivery Without JavaScript
Discover how <code><picture></code> lets browsers pick the right image for any viewport, reducing bandwidth and improving performance. See a hands‑on example, trade‑offs, and next steps.
Managing Asset Pipelines in Hugo without Node.js
Stop managing separate Node.js build scripts for your static site. Learn how to use Hugo Pipes to compile SCSS, minify JS, and handle cache busting within a single binary.
hugoOptimizing SVG Paths in Inkscape – Simplify, Combine, and Export for Web Performance
Learn how to reduce node count, merge paths, and export clean SVGs in Inkscape. Follow a step‑by‑step guide to keep visual quality, drop file size, and improve web performance.
Offload array math to the GPU with WebGPU compute shaders
WebGPU compute shaders move parallel data work off the browser's main thread, but the explicit setup demands care. Here's how to decide if it's worth it.
webgpuChoosing the Right Client Directive for Astro Island Hydration
Learn how to choose between Astro's client:load, client:idle, client:visible, and client:only directives to optimize page performance and interactivity.