Website Performance Optimization: Lazy Loading, CDN, Image Formats, Security Headers, and Bundle Reduction

After joining an overseas R&D team, the author was assigned to improve the website's performance by the end of November due to complaints about slow page loads.

Initial front‑end work had already removed third‑party script errors, made third‑party scripts load asynchronously, applied lazy loading to non‑above‑the‑fold images, and loaded non‑SEO components asynchronously.

The first optimization version used v-lazy-load for lazy loading, but testing revealed the lack of a CDN‑accelerated non‑production environment, prompting the creation of a pre‑release environment with CDN support.

To stay within the domain‑name package limits, a domain‑convergence effort changed the wildcard pattern *.thethinkacademy.com to thethinkacademy.com/* , freeing up domain resources.

Performance was measured with WebPageTest and referenced against previous Lighthouse analyses. Key metrics included Security Score, First Byte Time, Keep‑Alive, GZIP, image compression, cache static, and CDN usage. First Byte Time and Security Score were the lowest, indicating server‑response latency and security concerns.

Image optimization identified several large (>600 KB) assets. The team evaluated AVIF and WebP formats, noting limited browser support and the need for fallback strategies. The solution involved replacing <img> tags with <picture> elements, as shown below:

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <source srcset="mdn-logo.avif" type="image/avif">
  <source srcset="mdn-logo.webp" type="image/webp">
  <img src="mdn-logo.png" alt="MDN">
</picture>

Using pngquant , a 1 MB PNG was compressed to roughly 400 KB, making the “Plan A” image‑compression approach the first rollout, with later experiments on AVIF/WebP.

Security headers were added via Koa middleware, improving the Security Score from F to A:

app.use(async (ctx, next) => {
  ctx.set('Strict-Transport-Security', 'max-age=63072000');
  ctx.set('X-XSS-Protection', '1; mode=block');
  ctx.set('X-Frame-Options', 'DENY');
  ctx.set('X-Content-Type-Options', 'nosniff');
  await next();
});

A corresponding CSP meta tag was also inserted:

<meta http-equiv="Content-Security-Policy" content="default-src https: http: 'self' 'unsafe-eval' 'unsafe-inline'; img-src data: https: http: 'unsafe-eval' 'unsafe-inline'; child-src https: http:; script-src https: http: 'unsafe-eval' 'unsafe-inline';">

Bundle analysis revealed that moment and moment-timezone (each >200 KB) were the largest contributors. After evaluating alternatives, the team adopted luxon , a modern library from the Moment team, replacing both Moment packages and reducing the bundle by nearly 200 KB.

The migration required code refactoring and adherence to the DRY principle to eliminate duplicated logic. Ongoing work focuses on further JavaScript and CSS size reductions and continued performance monitoring.