Tag Attributes

Modification & Control

Modification and control attributes change the way Edgemesh® Server optimizes the given tag.

data-em-disable

Disables all optimizations on the given tag.

This attribute is a boolean and does not require a value.

<img src="https://example.com/image.png" data-em-disable />

data-em-modify

Modifies the given tag. The attribute value defines the modification to perform. The available values are:

• remove: Removes the tag. Useful for removing development tags for production.

<meta name="robots" content="none" data-em-modify="remove" />

Image Optimization

Image optimization attributes provide additional instructions to the Edgemesh® Server image optimizer.

data-em-optimize

Automatically optimize the given img or srcset tag. The value is the sizes attribute for the source set. If no value is supplied the size 100vw is used in order to cover all use cases.

<img src="https://example.com/image.png" data-em-optimize />

<img src="https://example.com/image.png" data-em-optimize="
  ((min-width: 50em) and (max-width: 60em)) 50em,
  ((min-width: 30em) and (max-width: 50em)) 30em,
  (max-width: 30em) 20em" 
/>

data-em-lossless

Instructs Edgemesh® Server to skip optimizations on this img or srcset tag. Similar to ?em-format=lossless but in attribute form.

This attribute is a boolean and does not require a value.

<img src="https://example.com/image.png" data-em-lossless />

Script Loader

Script Loader attributes provide a way to enable the benefits of script loading without losing functionality when you visit the page with ?em-bypass=server enabled.

data-em-load

Instructs the Edgemesh® Client on how to load the given script tag. The applicable values are:

• beforeInteractive: Loads the given script before the page becomes interactive. This setting is appropriate for scripts that are required to render the page, but shouldn't block parsing of the DOM.

<script
  type="application/javascript"
  src="https://example.com/script.js" 
  data-em-load="beforeInteractive">
</script>

• afterInteractive: Loads the given script after the page has become interactive. This setting is useful when you want a script to load after the page can be interacted with by the user. Use this setting for important scripts that are not required to load the page.

<script
  type="application/javascript"
  src="https://example.com/script.js"
  data-em-load="afterInteractive">
</script>

• lazyOnLoad: Loads the given script after the page is fully loaded. This setting is useful for heavy javascript that is not immediately required by the page. For instance, most third-party analytics and apps can be lazy-loaded.

<script
  type="application/javascript"
  src="https://example.com/script.js"
  data-em-load="lazyOnLoad">
</script>

• worker: The ability to off-load a script to another thread via Web Workers is coming soon. Coming Soon

<script
  type="application/javascript"
  src="https://example.com/script.js"
  data-em-load="worker">
</script>

Dynamic Fragments

Dynamic fragment attributes power the Dynamic Fragment Edge Expansion feature of Edgemesh® Server.

dynamic

Specifies an element's children as dynamic. This is an alternative to the dynamic element.

<div dynamic class='cart-bubble'>
  <span>{{ cart.item_count }}</span>
</div>

src

Instructs Edgemesh® Server where the dynamic content should be fetched from at the edge and injected into the page as the inner content of the owning dynamic tag.

<dynamic src="https://example.com/?view=popout-cart"></dynamic>

default

The default content to populate the dynamic fragment with when it is returned from the server. This is for placeholder content while the dynamic content is fetched and populated. The value can be any valid HTML or the keyword preserve.

• HTML Content: The HTML content will be used as the default content while the dynamic content is fetched and populated. Good for loading indicators.
• preserve: The HTML content will be preserved instead of removed and then replaced with the dynamic content. Good for situations where you want to retain the HTML structure and can tolerate a few moments of stale content.

This is designed to provide better feedback to your users while dynamic content is loading and to reduce layout shifts. This works both with element and attribute based dynamic fragments.

<dynamic default="<img src='spinner.gif' />">
  <div class="cart-bubble">{{ cart.item_count }}</div>
</dynamic>

<dynamic default="preserve">
  <div class="cart-bubble">{{ cart.item_count }}</div>
</dynamic>