If you are using a CMS / static hosting website to host your site, there may be a lot of restrictions.

You might want to add some request headers, apply some optimizations. However, all these might not be possible with tools like WordPress.org or GitHub pages.

What can you do with it?

The answer is Edge functions. Two examples that I have experience is AWS CloudFront’s Lambda@Edge functions and CloudFlare workers.

If you want to experience with it, you might transfer your DNS onto CloudFlare. First 100,000 Workers requests for each day is free!

So below I will include some CloudFlare worker script examples for such purposes.

Preload / Prefetch Assets

let body = await response.text();
const scriptRegExp = /<script[^>]*?src=“(.*?)”[^>]*?><\/script>/g;

let links = [];
for (var match in body.matchAll(scriptRegExp)) {
  let scriptUrl = match[1];
  links.push(`<${scriptUrl}; as=script; rel=preload>`);  // the first element is the whole script tag
}

/* Then assign the `links` into the response‘s `Link` header. */

Add Security Headers

For example, you can generate CSP header AFTER parsing your raw HTML content. If you do work on CSP, you must know that working with the CSP with scripts is not an easy task.

Image Lazy Loading

Google suggests that image lazy loading is a good and quick enhancement to your website.

It would be straightforward to e.g. apply the class=“lazy” data-src=“<original-url>” attributes in <img/> elements like the CSP example.

Automatically Add Other HTML Tags

It’s possible to generate some SEO tags, such as <link/> canonical tags, or ld+json script tags.

  • canonical
  • hreflang

The request headers such as host, origin or referer could be used as inputs for generating these tags.

Sounds difficult but still want to apply it to your business?

Contact me at email. I offer paid services that this :).