Cloudflare Worker Performance Optimizations

gs-optims.js

/* Started from https://andydavies.me/blog/2020/09/22/exploring-site-speed-optimisations-with-webpagetest-and-cloudflare-workers */

const site = 'www.gymshark.com'

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)

  // Disallow crawlers
  if (url.pathname === '/robots.txt') {
    return new Response('User-agent: *\nDisallow: /', { status: 200 })
  }

  // When overrideHost is used in a script, WPT sets x-host to original host i.e. site we want to proxy
  const host = request.headers.get('x-host')

  // Error if x-host header missing
  if (!host) {
    return new Response('x-host header missing', { status: 403 })
  }

  url.hostname = host

  const bypassTransform = request.headers.get('x-bypass-transform')
  const acceptHeader = request.headers.get('accept')

  // If it's the original document, and we don't want to bypass the rewrite of HTML
  if (
    host === site &&
    acceptHeader &&
    acceptHeader.indexOf('text/html') >= 0 &&
    (!bypassTransform ||
      (bypassTransform && bypassTransform.indexOf('true') === -1))
  ) {
    const modifiedHeaders = new Headers(request.headers)
    const modifiedRequest = new Request(url, request)
    modifiedHeaders.headers.delete('x-host')
    modifiedHeaders.headers.delete('x-forwarded-proto')
    const originalResponse = await fetch(modifiedRequest)
    const responseHeaders = new Headers(originalResponse.headers)
    responseHeaders.append(
      'Link',
      '<https://cdn.shopify.com>; rel=preconnect,<https://cdn.gymshark.com>; rel=preconnect',
    )
    const response = new Response(originalResponse.body, {
      status: originalResponse.status,
      statusText: originalResponse.statusText,
      headers: responseHeaders,
    })

    const deferSelectorSrcs = [
      'cdn.cookielaw.org/scripttemplates/otSDKStub.js',
      'www.datadoghq-browser-agent.com/datadog-rum-eu.js',
      'polyfill.io/v3/polyfill.js',
      'cdn.gymshark.com/js/commons.js',
      'js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js',
      // 'cdn.shopify.com/s/files/1/0156/6146/t/227/assets/jquery-2.2.3.min.js',
      'cdn.shopify.com/s/files/1/0156/6146/t/227/assets/vendor.js',
      'www.googleadservices.com/pagead/conversion.js',
      // 'cdn.shopify.com/s/files/1/0156/6146/t/227/assets/jquery-2.2.3.min.js',
      'cdn.gymshark.com/js/search.js',
      'www.googleadservices.com/pagead/conversion.js',
      'cdn.auth0.com/js/auth0/9.10/auth0.min.js',
    ]
      .map((x) => `head > script[src*='${x}']`)
      .join(',')
    return new HTMLRewriter()
      .on(deferSelectorSrcs, new deferHandler())
      .on('head > style', new asyncHideHandler())
      .transform(response)
  }

  const modifiedRequest = new Request(url, {
    body: request.body,
    method: request.method,
    headers: request.headers,
    redirect: request.redirect,
  })

  modifiedRequest.headers.delete('x-host');

  // Otherwise just proxy the request
  return fetch(url, modifiedRequest)
}

class deferHandler {
  element(element) {
    element.setAttribute('defer', true)
  }
}

class asyncHideHandler {
  text(text) {
    text.replace(text.text.replace(/async-hide/, 'async-hide-noop'))
  }
}