# SEO / Speed Enhancements with Edge Functions (With Examples)

> Learn how edge functions like CloudFlare Workers or AWS CloudFront Lambda@Edge can help the SEO of your website, besides caching and speed enhancements.

- Author: Gabriel Koo (AWS Community Builder)
- Published: 2021-01-23
- Topics: csp, edge-function, cloudflare, cloudfront, lambda, structured-data
- HTML: https://gabrielkoo.com/blog/edge-functions/
- Original canonical URL: 

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](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

```javascript
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](mailto:hi@gabrielkoo.com). I offer paid services that this :).