Page Speed Optimization with Modern Techniques

Why every millisecond matters

Your website’s speed directly impacts revenue. According to Cloudflare’s measurements, every 100 ms improvement in load time can increase conversions by up to 7%. Google’s data shows that if a page takes more than 3 seconds to load, 53% of visitors simply close the browser.

This isn’t just about user experience. In 2026, Core Web Vitals directly influence Google’s search rankings, and the standards have tightened. If your competitor’s site is faster than yours, they rank higher and you lose organic traffic.

Core Web Vitals: the three numbers that matter

In 2026, Google places even greater weight on mobile performance in rankings, and INP has become one of the most critical factors. Slow interactions directly hurt your position.

Measure these via PageSpeed Insights and Google Search Console. PageSpeed Insights shows two types of data: lab data (simulated testing with Lighthouse) and real user data (CrUX, Chrome User Experience Report). Rankings are based on real user data.

Image optimization: maximum impact, minimum effort

Images typically account for 50-70% of a web page’s bandwidth consumption. If you only do one thing from this article, make it this.

Modern image formats: WebP and AVIF

• WebP: ~30% smaller file size than JPEG, 97% browser support
• AVIF: ~50% smaller than JPEG, 95% browser support

The ideal solution is the <picture> element with fallbacks:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="630">
</picture>

Astro 5 and Next.js 16 both include built-in image optimizers that handle this conversion at build time. Astro’s <Image> component automatically converts to WebP and generates responsive srcset attributes.

Lazy loading strategies

Native browser lazy loading is simple and effective:

<img src="product.webp" alt="Product" loading="lazy" width="400" height="300">

<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="630">

Instant page navigation: Speculation Rules API

Beyond the classic <link rel="prefetch">, Chromium browsers (Chrome, Edge, Opera) now offer a far more powerful tool in 2026: the Speculation Rules API. It doesn’t just prefetch the next page, it fully pre-renders it in the background.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/services/*" } }
  ]
}
</script>

The result: when the user clicks a link, the page appears instantly, zero wait time. Google’s own search engine uses this on its results page. Browsers that don’t support it simply ignore the directive, safe as a progressive enhancement.

View Transitions API

The View Transitions API reached stable status in both Chrome and Firefox by 2026 (Baseline Newly Available). It lets you add animated transitions between page navigations from CSS, no JavaScript required:

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.2s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.2s ease-in;
}

Astro’s built-in View Transitions support (ClientRouter) automatically uses this API.

Taming third-party scripts with Partytown

Google Analytics, Facebook Pixel, Hotjar, chat widgets, these third-party scripts are often the biggest main-thread blockers. On a typical marketing site, third-party scripts can add 800-1,200 ms to Time to Interactive.

Partytown’s solution is elegantly simple: it moves third-party scripts into a Web Worker, so they don’t block the main thread.

<script type="text/partytown">
  // Google Tag Manager
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>

Partytown makes window and documentAPIs available as proxies within the Web Worker, so scripts believe they’re running on the main thread while actually not blocking rendering.

Resource hints: telling the browser what’s coming

Preconnect

If you know you’ll be loading resources from an external domain, preconnect establishes the connection early (DNS lookup + TCP + TLS):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

This can save 100-300 ms on the first request.

Prefetch and preload

• Preload: immediately download critical resources (e.g., the hero image or primary font)
• Prefetch: pre-fetch the next page’s resources in the background

<!-- Preload critical font -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Prefetch next page -->
<link rel="prefetch" href="/en/services/web-development">

Font optimization

Fonts are often invisible performance killers. A poorly configured font loading strategy can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text), hurting both LCP and CLS.

The right approach

1. WOFF2 format: smallest file size, near-universal browser support
2. font-display: swap: shows text immediately with a fallback font, then swaps
3. Subsetting: load only the characters you actually use (e.g., Latin only instead of full Unicode)
4. Self-hosting: host fonts yourself instead of loading from Google Fonts, one fewer DNS lookup and TCP connection

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0150-0151, U+0170-0171;
}

CDN and edge computing

Serving static files from a CDN is table stakes in 2026, but you can go further. With Cloudflare Workers, Vercel Edge Functions, and Deno Deploy, you can run server-side logic on the edge server closest to the user:

• TTFB (Time to First Byte): typically 50-100 ms from the edge, versus 200-500 ms from a centralized server
• Global reach: users in Budapest, Tokyo, or São Paulo experience similar speeds

Astro 5 natively supports edge deployment via the Cloudflare adapter, combining the benefits of static generation with server-side flexibility.

Critical CSS and code splitting

Critical CSS

The browser can only render the page once all CSS is loaded. With critical CSS, you inline the styles needed for above-the-fold content directly in the HTML <head>, then load the rest asynchronously:

<head>
  <style>
    /* Critical CSS - only above-the-fold styles */
    .hero { ... }
    .nav { ... }
  </style>
  <link rel="preload" href="/styles/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
</head>

Tree shaking and bundle analysis

Modern bundlers (Vite 7, Rollup, esbuild) automatically remove unused code (tree shaking). But this only works effectively when:

• You use ES module imports (import { x } from 'lib' vs const lib = require('lib'))
• Packages are exported in a tree-shakeable format
• You don’t import entire libraries when you only need one function

Use bundle analysis tools to visualize file sizes:

# In a Vite project
npx vite-bundle-visualizer

# In a Webpack project
npx webpack-bundle-analyzer

Common surprises: moment.js (~300 KB) can be replaced with date-fns (~30 KB after tree shaking), or lodash (~70 KB) with lodash-es (tree-shakeable, only used functions remain).

Priority order

If you’re not sure where to start, here’s a priority list based on typical ROI:

1. Image optimization (WebP/AVIF + lazy loading + fetchpriority), biggest impact, least effort
2. Font optimization (WOFF2 + swap + subsetting), often overlooked, but significant improvement
3. Speculation Rules API + View Transitions, a few lines of HTML/CSS, instant page navigation
4. Resource hints (preconnect, preload), a few lines of HTML, immediate results
5. Third-party scripts (Partytown or defer/async), dramatic impact especially on marketing sites
6. CDN + edge, if you’re not using a CDN yet, this is step one
7. Critical CSS + code splitting, advanced technique, but worth the effort

Speed optimization isn’t a one-time project, it’s an ongoing practice. Set up regular monitoring (monthly PageSpeed Insights audits, Search Console monitoring), and measure the performance impact of every new feature you ship. If you need help, the AppForge team is here. Get a quote.

Frequently asked questions