Improve page load performance

To do this, add Adaptive Acceleration to your Ion property. It syncs with ​Akamai​ real-user monitoring to gather navigation and resource timing data and stores that data in a policy that's associated with your hostname. As requests for your hostname continue, policy data is gathered and reviewed to identify key resources. This allows Adaptive Acceleration to provide these resources to an end user's browser ahead of time, reducing the load and render time for your web pages.

Follow this process to set up this recommended feature.

👍

Prefer an API?

If you'd rather use an API to set up and manage, you can use a combination of ​Akamai​'s Property Manager and Adaptive Acceleration APIs. Check out the tutorial.

Before you begin

Before you can configure Adaptive Acceleration, you need to do a few things:

  • Your Ion property needs to be secure. You need to define property hostnames that connect the end user to the ​Akamai​ edge securely via HTTPS. You can use any of the secure methods ​Akamai​ offers: Enhanced TLS, Standard TLS, or the ​Akamai​ shared certificate.

  • Enable a beacon source. Timing data is collected in "beacons" and sent to a ​Akamai​'s real-user monitoring source, mPulse. Adaptive Acceleration communicates with mPulse to get this data. To configure it, use the mPulse RUM sub-rule, that's default included in a new Ion property.

  • Enable HTTP/3. The HTTP/3 behavior is automatically included and enabled in the Default Rule. It doesn't require any additional configuration. It just needs to be included in your rule tree where it'll be applied to requests that also apply the Adaptive Acceleration behavior.

📘

HTTP/2 is still supported

Older Ion properties automatically included the HTTP/2 behavior and it was required for use with Adaptive Acceleration. You can keep your property configured this way, but we recommend that you update it to use HTTP/3, instead.

  • Get access to the Adaptive Acceleration interface in ​Akamai Control Center​ (Optional). This interface lets you view policies of navigation and resource timing data that have been gathered for use with the Automatic Push, Preconnect, and Font Preload services. You can also use it to reset the data gathering mechanism. You need to have a ​Control Center​ account that's been granted access to this interface. If you're not sure, talk to your local ​Akamai​ admin, or contact your ​Akamai​ account team.

1. Add it in your Ion property

Adaptive Acceleration is added by default to the Accelerate delivery sub-rule in your property.

2. Apply your Beacon Data Source

To start, set Beacon Data Source to mPulse.

3. Set push and preconnect options

These options help optimize delivery using the beacon data gathered from mPulse. Here's roughly how these features interact with mPulse and Adaptive Acceleration:

  1. Adaptive Acceleration analyzes mPulse data for the most-visited pages on your site. It identifies the resources and resource domains on the critical rendering paths for those pages and creates a report.

  2. When subsequent end users request a page in the report, Adaptive Acceleration sends resources and establishes anticipated connections while the client is waiting for a response.

Set the options here as follows:

OptionDescription

Automatic Server Push

An average page on a website or app requires multiple resources, such as JavaScript, CSS, and images. References to these resources are in the HTML or container pages your origin server produces. Automatic Server Push uses the beacon data to recognize these resources and send them to the end user's browser while it's waiting for a response to the initial request for your website or app. Apply this based on the connection protocol you're using in your Ion property:

  • HTTP/3 (recommended). Set this to Off. Automatic Server Push is not supported with HTTP/3. Adaptive Acceleration will automatically preload the resources (.css, and .js) rather than pushing them.
  • HTTP/2. You can optionally set this to On. Chromium-based browsers have dropped support for the Server Push functionality, but other browsers may still support it. You can enable this for those browsers, but know that no server push will occur for clients using Chromium browsers.
  • Both. You can set it to On. If a client connects using HTTP/3, the resources will be preloaded and your property will ignore the Automatic Server Push functionality. HTTP/2 connections will attempt to apply it if the browser supports it.

Automatic Preconnect

Set this to On.

This lets browsers anticipate what connections the site needs, and establishes those connections ahead of time. But, it doesn't actually load or request anything.

Example of an Automatic Preconnect

This example shows how Automatic Preconnect establishes connections ahead of time. Assume the page www.moviememorabilia.com/shop/ contains the following resource URLs:

  • www.moviememorabilia.com/site/css/ctyles.css
  • www.moviememorabilia.com/site/js/splashslideshow.js
  • images.moviememorabilia.net/logo.png
  • images.moviememorabilia.net/splashimage1.png
  • images.moviememorabilia.net/splashimage2.png

Every visit to that page prompts the user's browser to establish a second connection to images.moviememorabilia.net. After sampling some requests for that page, mPulse gathers enough data to determine that www.moviememorabilia.com/shop/ requires a connection to images.moviememorabilia.net. Adaptive Acceleration then adds an Automatic Preconnect entry to the policy: When responding to requests for www.moviememorabilia.com/shop/, tell the browser to establish a connection to the images hostname as soon as it receives the page's HTML.

Automatic Font Preload

Set this to On.

This lets browsers preload the fonts they'll need before they fetch and process other resources. Beacon data from mPulse is used to identify the font requests made by the pages on your site. Font Preload uses this information to add browser-specific preload headers to each font. Once a preload header has been applied, the font will be ready to download before the browser has fully rendered the page.

Example of Automatic Font Preload

This example shows how Automatic Font Preload is used to load fonts before other resources are fully processed. Assume the page www.musicmemorabilia.com/shop/ uses the following fonts:

  • titletext.woff
  • productprice.woff2
  • productdesc.woff2

Every visit to a page prompts the user's browser to submit a separate request for each of the three fonts. After examining user requests for the page, the Adaptive Acceleration learning engine gathers enough data to determine that those fonts "belong" to that page. Adaptive Acceleration adds an Automatic Font Preload entry to the policy: When responding to requests for `www.moviememorabilia.com/shop/, tell the browser to start loading the font resources before it fetches and processes resources referencing the fonts.

4. Optionally add compression

Adaptive Acceleration offers multiple ways to compress and cache resources, such as JavaScript, CSS, and font files, using enhanced compression protocols. This can reduce page weight and potentially improve rendering time for your pages. You can choose from Resource Optimizer or Brotli Compression.

Compression feature comparison

In addition to the compression offered by Adaptive Acceleration, there are other ways to set up compression in your Ion property. Before you apply it here, take a look at this table to see how all of the available methods stack up.

Compression methodWhere the compression is appliedAdditional information

Brotli Compression

On the edge network.

You can enable this here in the Adaptive Acceleration rule. Brotli Compression looks to resolve several interoperability issues seen with Resource Optimizer. It automates the compression and delivery of .css, .js, .svg, and several other common web-based file types using Brotli compression. The compression is performed in real-time. It also offers these benefits:

  • It supports more content types than Resource Optimizer and Last Mile Acceleration (Gzip Compression).
  • It supports non-cacheable resource compression. This is an optional feature. None of the other compression features offer this support.
  • It applies compression in real-time. Instead of needing to perform the compression offline.

Resource Optimizer

On the edge network.

You can enable this here in the Adaptive Acceleration rule. It automates the compression and delivery of your .css, .js, and .svg content using a combination of Brotli and Zopfli compressions. The compression is performed offline, during a time to live (TTL) that the feature automatically sets.

Brotli Support

On your origin server.

You need to add a separate behavior to include this support.

This behavior serves compressed resources to requesting browsers. The resources need to be Brotli-compressed on your origin. So this doesn't offer dynamic compression, while Brotli Compression and Resource Optimizer do. If you know that all of your .css, .js, and .svg assets on your origin server are already Brotli compressed, this is what you need. Make sure that Brotli Compression and Resource Optimizer are disabled in Adaptive Acceleration, if this is the case.

Last Mile Acceleration

On the edge network.

This behavior is included in the Minimize payload rule that's automatically included in your Ion property. It automates the compression of various file types to gzip. The following apply to its use:

  • Brotli compression, Resource Optimizer, and Brotli Support provide a greater compression level than gzip.
  • The Minimize payload rule doesn't include .css, .js, and .svg files by default. These files are the primary target for Brotli Compression and Resource Optimizer.
  • Brotli Compression recognizes gzip compressed content. It then decompresses it, and recompresses it using the more efficient Brotli compression.

👍

If you use Brotli Compression, you should still configure the Minimize payload rule. If a conflict occurs, content will still be compressed using gzip.

Use Resource Optimizer

To enable this, set it to On. If you also have access to Brotli Compression, set it to Off. You can't use both.

What's compressed

Resource Optimizer compresses .css, .js, and .svg resources up to 10,485,760 bytes in size. This is the maximum decompressed file size supported for CSS and JavaScript files. It only compresses files that include the extensions.

During the compression, Resource Optimizer sets the downstream TTL of the file to 900 seconds (15 minutes).

What's served

Resource Optimizer serves compressed, cached content on HTTP 200 responses to a request. Both the original and the optimized resources are served under the same cache key: /L/origin-www.example.com/path1/path2/someobject.js cid=___RO_ENCODING=br.

Additional requirements

Before you save your property and enable it on any ​Akamai​ network, you need to apply a few more settings in your Ion property to ensure it's compatible with Resource Optimizer.

  • You want to use Caching with a Maxage of at least an hour. This applies to the Caching behavior in the Offload Origin rule. Use any of the settings to enable cachingCache, Honor origin Cache-Control and Expires, Honor origin Cache-Control, or Honor origin Expires and set its "maxage" field to at least one hour.

📘

There are several other caching-related sub-rules in the Offload Origin rule, too.

  • CSS and Javascript
  • Fonts
  • Images
  • Files
  • Other static objects

They're used to override the generic Caching maxage for these specific file types, based on recognized best practices. They all include a default maxage in excess of one hour. For best results with Resource Optimizer, keep these maxage settings as is.

  • Only use Resource Optimizer for GET requests. It should only initiate compression and serve compressed content for requests that use the GET method.

  • Remove Resource Optimizer from the failover actions. This will prevent JavaScript failover pages from being cached.

  • Ensure the Cache-Control header doesn’t contain a private directive. The Cache-Control header on your origin server can be used determine how caching should be applied. You can add the Private directive to it to block the caching of personally identifiable information (PII). This header can't contain this directive if you want to use Resource Optimizer. You can apply this as a setting when configuring Downstream Cacheability.

Add Resource Optimizer Extended Compatibility (optional)

In most cases, the standard Resource Optimizer feature provides the compression you'll need. We also offer this behavior to add more compression and to address some compatibility issues.

📘

This behavior needs to be added to your contract. Talk to your ​Akamai​ account team for details.

Latest Features

Enable this option to add more support and error handling. Features of note include the following:

  • Support for Fast Purge using Cache Tags. You can generate purges via our Fast Purge application using any Cache Tags you've configured in your Ion property.

  • Obey your time to live settings. Resource Optimizer uses its own time to live (TTL) threshold for content it caches. If you've set your own TTL for your content in cache, we'll honor that value. The standard Resource Optimizer feature in Adaptive Acceleration will ignore a custom TTL and apply its own value.

  • It helps to prevent 404 errors from Resource Optimizer back-end requests in ​Akamai​ traffic reports.

  • It can help optimize the final resource when using redirects.

Caveats and requirements

Consider these points when adding this behavior:

  • Put it in the same rule tree as Adaptive Acceleration. For the easiest application, include it as a behavior in the same rule to have it applied in place of the standard Resource Optimizer support. Or, include it in a child rule to the rule that includes Adaptive Acceleration. In this case, you can set it to a specific match criterion to apply its extended support for specific requests.

  • Resource Optimizer Extended Compatibility overrides standard Resource Optimization. Even if you disable the standard Resource Optimization feature in the Adaptive Acceleration behavior, adding a standalone Resource Optimizer Extended Compatibility behavior overrides these settings. This could also impact Brotli Compression if you have it enabled in the Adaptive Acceleration behavior. Either Resource Optimization Extended Compatibility or Brotli Compression will apply, as a single request can't use both features. ​Akamai​ will only execute the last behavior that matches the incoming request.

  • Resource Optimizer and Cloudlets. All forms of Resource Optimizer do not work with Cloudlets that modify the forward origin path.

  • Test this after you add it. If you're already delivering your site using the standard Resource Optimizer feature, you should thoroughly test your Ion property after adding this behavior.

Use Brotli Compression

To add this support:

  1. Set Brotli Compression to On.
  2. Select Enable for Non-Cacheable if you also want to your non-cacheable content to be Brotli-compressed.
  3. Ensure that Resource Optimizer is set to Off and you don't have any instances of the standalone Resource Optimizer Extended Compatibility behavior in your property. Both of these features are mutually exclusive with Brotli Compression.

📘

You may experience a slight increase in latency if you've checked Enable for Non-cacheable and you're using any of these content injection behaviors on your page:

This is because the compression-algorithm for Brotli is executed after its JavaScript object is included in your page. Cacheable objects are Brotli-compressed after they're first requested and then held in cache, so this latency doesn't occur.

What's compressed

Brotli Compression targets text-based content. Compressible content is identified in the Content-Type header of the metadata, or by the file extension. It returns Brotli-encoded responses to compatible browsers for resources with .css, .js, and .svg file extensions. It also returns Brotli-encoded responses for the following content-types:

  • application/+json*
  • application/+xml*
  • application/font-sfnt*
  • application/javascript*
  • application/json*
  • application/protobuffer*
  • application/text*
  • application/vnd.microsoft.icon*
  • application/vnd-ms-fontobject*
  • application/x-font-eot*
  • application/x-font-opentype*
  • application/x-font-truetype*
  • application/x-font-ttf*
  • application/x-javascript*
  • application/x-json*
  • application/xml*
  • application/x-mpegurl*
  • application/x-tgif*
  • font/eot*
  • font/eot*
  • font/opentype*
  • font/otf*
  • font/ttf*
  • image/svg+xml*
  • image/vnd.microsoft.icon*
  • image/x-icon*
  • text/*

5. Optionally enable A/B testing

You can use A/B testing to compare two versions of a webpage or app against each other to determine which one performs better. If you'd like to include Adaptive Acceleration-related data in your A/B testing model, enable it based on how you've set it up in your Ion property.

Method 1: Enable using Cloudlets

Cloudlets bring a site's business logic closer to the end user by placing it on the edge of the content delivery platform. ​Akamai​ offers several Cloudlets you can configure to support A/B testing:

If you've set up A/B testing using any of these Cloudlets:

  1. Select Enabled using Cloudlets from the drop-down.

  2. If you have multiple Cloudlets set in your Ion property, ensure that the Cloudlet you want to use for A/B testing is set lowest in the rule order. With Property Manager and these three Cloudlets, the last one in the list takes priority.

Method 2: Enable Manually

This applies A/B testing by redirecting a request to one of two origin servers, based on the contents of a cookie file included with the request. The cookie will use the same file name, but its content will vary, based on the desired site experience. So, when the cookie file is read, origin "A" or origin "B" is contacted to deliver the appropriate site experience.

Before you begin

This process assumes you already have an A/B testing model in place using a cookie in the request. You'll need to know the name of this cookie file.

Set up process

  1. Open the Accelerate delivery sub-rule in the Default Rule.
  2. Click the Adaptive acceleration child rule.
  3. Set A/B Testing Method to Enabled manually.
  4. In the Cookie Name field that's revealed, enter the name of the cookie file that you've configured for use in your A/B testing model.

6. Finish your property, test it, and go live

Continue configuring your Ion property, considering features that are incompatible with Adaptive Acceleration. Then you can finalize it, test it, and go live to deliver your site.

Incompatible features

Adaptive Acceleration isn't compatible or has known issues with other features offered in Property Manager.

FeatureIncompatibilities

Adaptive Acceleration

The match condition Percentage of Clients doesn't work with Adaptive Acceleration.

This would only be an issue if you were to add an instance of the Adaptive Acceleration behavior to another rule and you tried to set the Criteria to Percentage of Clients.

Automatic Push, Preconnect, and Font Preload

  • You can't use Manual Server Push in any rule that also uses Automatic Server Push, via Adaptive Acceleration.

  • You can't use Manual Preconnect in any rule that also uses Automatic Preconnect, via Adaptive Acceleration.

Resource Optimizer

  • Cache key manipulation isn't supported. Any instance of the Cache Key Query Parameters behavior that applies to the same request needs to be set to Include all parameters (preserve order from request). This is the default setting for this behavior in the Configure the Offload Origin rule.

  • Cloudlets that modify forward origin aren't supported. For more information on Cloudlets see the Cloudets User documentation.

  • Edge Side Includes (ESI) is partly incompatible with Resource Optimizer. If you decide to include ESI, you'll need to include it in a rule with its match criteria set to exclude CSS and JavaScript.

  • Web Application Firewall (WAF) is partly incompatible with Resource Optimizer. If you decide to include WAF, you'll need to include it in a rule with its match criteria set to exclude CSS and JavaScript.

  • Brotli-encoded objects don't support body inspection rules when Resource Optimizer is enabled. Resource Optimizer uses Brotli to compress your .css, .js, and .svg file assets. Any rule that typically inspects these file formats won't work after the compression.

Brotli Compression

Brotli compression may not be performed if these features also apply to the request:

  • ESI
  • POC2
  • Fingerprint/ContentMd5
  • Akamaizer
  • Graph QL Caching. This only applies if “Cache 2xx Responses with GraphQL Errors” is set to Off.

If any of these incompatibilities exist, you don't need to turn off Brotli Compression or any of the incompatible features. If an incompatibility is discovered, gzip or uncompressed resources are served instead.

7. Wait for data to be gathered and used

With your property live and mPulse enabled as your beacon data source, give it some time to gather data. Data for the Automatic Push, Automatic Preconnect, and Automatic Font Preload settings is gathered and stored in a "property report." This report is used to determine "high usage" assets for your site or app, for use with Adaptive Acceleration.

Additional resources

​Akamai​ offers additional services you can use with Adaptive Acceleration.

The Adaptive Acceleration interface, API, and CLI

You can use these tools to interact with the beacon data collected in the policies for the Automatic Push, Preconnect, and Font Preload features.

  • View the policy data. See what Adaptive Acceleration has identified in your policies for early delivery. The Adaptive Acceleration interface on ​Akamai Control Center​ also lets you view warnings and event logs for the policy for troubleshooting.

  • Reset the policy. If you've changed your site or you don't want to wait for earlier data to drop out of the analysis, you can manually reset the data-gathering mechanism.

View reports

Check out the mPulse reports to access monitoring and reporting tools for beacon data used by Adaptive Acceleration.