Snowcat Web Browser

Building Faster Websites in 2023

Snowcat's photo
Snowcat
·

2 min read

Speed is becoming more critical for the web. With new frameworks, APIs, and best practices we can build ridiculously fast user experiences - if we know how.

In this post, I'll share my top tips for optimizing site speed in 2023 and beyond.

Core Web Vitals Pave the Way

Google has been pushing site speed as a ranking factor for years. But Core Web Vitals crystallized exactly what "fast" means for real users.

Focusing on:

  • Largest Contentful Paint (LCP)

  • First Input Delay (FID)

  • Cumulative Layout Shift (CLS)

Optimizing against these metrics directly improves user experience. And it could mean better search rankings.

I recommend treating Core Web Vitals as the North Star for any speed efforts.

Critical Render Path Optimization

The key to fast rendering is optimizing the critical render path - the resources needed to render basic site structure and content.

  • Minify HTML/CSS/JS - Reduce file size through minification and compression.

  • Code Splitting - Only load JS needed for the initial route. Lazy load other chunks.

  • Prioritize Resources - Frontload critical CSS/fonts using preload tags.

  • Reduce Requests - Concatenate and bundle CSS and JS files.

  • Async JS Loading - Dynamically inject non-critical JS to avoid blocking.

  • Caching - Set proper cache headers so resources load instantly on repeat visits.

Choose Lightweight Frameworks

Many popular web frameworks are packed with features that can bloat page weight.

For faster sites, consider lightweight options like:

  • Alpine.js

  • Svelte

  • Lit

  • Hyperapp

Or optimize existing apps with methods like code splitting.

Optimize Images and Media

Images and media are often the biggest page weight culprits.

  • Responsive Images - Use srcset to serve properly sized images for device resolution.

  • Image Formats - Prefer next-gen formats like WebP and AVIF over JPEG/PNG.

  • Lazy Loading - Only load offscreen images when scrolled into view.

  • Compression - Reduce image file sizes with lossless tools like TinyPNG.

  • SVG Over Raster - Use resolution-independent SVG for simple graphics.

Check Real World Performance

Test speed regularly in the wild:

  • Lighthouse - Great metrics on lab performance for Core Web Vitals.

  • WebPageTest - Reveals optimization opportunities on real devices.

  • SpeedCurve - Tracks performance changes over time.

  • Snowcat Browser - My open-source browser optimized specifically for speed.

Fast performance directly impacts bounce rates, conversions, and revenue. Users have high expectations - we need to deliver.

What tips do you have for optimizing site speed? Let me know in the comments!

Programming TipsWeb Developmentwebdev