Performance
Every millisecond matters. Improve loading times, Core Web Vitals, and browser efficiency with practical web performance techniques.
Browse 21 articles in this topic. View all topics.
- Why content-visibility Often Needs contain-intrinsic-size
contain-intrinsic-size reserves space while content-visibility skips rendering. See how auto remembers sizes and how to choose useful placeholder values.
- Can content-visibility Make Long Pages Render Faster?
CSS content-visibility can defer rendering work on long pages. See where auto helps, why placeholder sizes matter, and what to check before keeping it.
- Why I Keep Fonts, CSS, and JavaScript With My Site
Self-hosting CSS, JavaScript, and fonts keeps critical dependencies versioned, predictable, and close to the page that needs them.
- WebP vs AVIF vs JPEG for Websites in 2026
Choose an image format by measured size and visual quality instead of assuming the newest option always wins.
- Choosing Between srcset and picture
Choose srcset when the image stays the same and picture when the crop, composition, or format needs to change.
- Why My Personal Website Does Not Use Analytics
I do not need visitor profiles to publish articles, projects, and photographs, so my personal site collects less and loads less.
- What a 2 MB Page Costs Your Visitors
Two megabytes can still mean slow downloads, expensive JavaScript, wasted mobile data, and a page that depends on ideal conditions.
- Where CSS Performance Problems Come From
Focus CSS performance work on stylesheet weight, layout, painting, DOM size, and unused rules before benchmarking ordinary selectors.
- How Much JavaScript Does a Website Really Need?
Start with the page's job, use the browser's native features, and add JavaScript only where its behaviour justifies the cost.
- Keeping Page Weight Under Control With a Performance Budget
Put simple limits on page weight, JavaScript, images, third-party code, and user-facing performance before small additions accumulate.
- Why Images Need width and height Attributes
Width and height attributes tell the browser an image's aspect ratio early enough to reserve space and prevent layout shifts.
- When to Use fetchpriority on Images
Give a genuinely important image a priority hint without marking every request urgent or combining contradictory loading instructions.
- Cache Repeated Hugo Template Work With partialCached
Use Hugo partialCached for expensive repeated template work without accidentally reusing page-specific output.
- Why PageSpeed Tests Give Different Results
Why PageSpeed Insights and Lighthouse scores vary between runs, and which measurements are worth following.
- The Back/Forward Cache Makes Return Visits Feel Instant
See how the browser back/forward cache restores pages when visitors navigate back or forward, and what can prevent it.
- How Third-Party Scripts Slow Down Websites
See how analytics, ads, chat widgets, embeds, and other third-party scripts affect loading, privacy, and reliability.
- Why You Shouldn't Lazy-Load Every Image
Lazy loading helps below the fold, but adding loading=lazy to every image can delay important content and hurt Largest Contentful Paint.
- When to Use preload, prefetch, and preconnect
Choose between preload, prefetch, and preconnect without turning resource hints into extra work for the browser.
- Responsive Images With Hugo’s Image Processing
Build responsive images in Hugo with one reusable partial. Generate srcset, preserve dimensions, handle fallbacks, and choose image loading carefully.
- AVIF Images: Smaller Files With a Sensible Fallback
AVIF can produce small image files while supporting transparency, animation, HDR, and modern colour formats.