Testing Front End Optimization (FEO)

Testing Front end optimization generally requires three main steps

  • Navigating to the correct environment
  • Validate FEO is applied
  • Compare behavior between optimized and unoptimized versions of the page

Testing Environment

Testing processes vary from customer to customer to best suit their development process and needs. Typically FEO will be applied on a production server, as well as a UAT environment. This methodology allows new versions of code to be tested with FEO prior to go-live.

  • When asked to test your site, confirm the following
    • Is the site UAT or production?
    • Akamai Staging network or Production network?

Validating that FEO Has Been Applied

There are three general methods, any of which can be used, to validate that FEO is being applied

  1. “Optimized” title
  2. When working on the Akamai Staging Network you will see a title prefix “Optimized:”. This feature is off by default on the Akamai Production Network, however it can be enabled in a UAT environment for testing as part of your implementation.
  3. The use of domain shards
  4. When the page is transforming you should see the optimized resources requested from FEO shards on the Network tab in Browser’s Developer Tools.
  5. Response debug header
  6. Add the header Pragma: akamai-x-feo-trace to see the FEO debug headers. Note that the debug headers are visible, by default, on the Akamai Staging Network.
  7. Find the “X-Akamai-FEO-State:” header and look for the values: - X-Akamai-FEO-State: TRANSFORMING. - The page is being optimized! - X-Akamai-FEO-State: TRANSFORMING_NOOP. - The server is waiting for more information. If you receive this header value, please wait 90 seconds and then issue the request again. Ensure you are not serving content from cache by forcing the browser to fetch the HTML from the server each time. Repeat this until you see a TRANSFORMING value. If after 5 iterations or 5 minutes you are still not seeing a TRANSFORMING value, please inform your Akamai PS contact. - X-Akamai-FEO-State: NEED_CONFIG or X-Akamai-FEO-State: NEED_TRANSFORMATIONS - Also valid values, however no transformations will occur while in these states.

Requesting un-optimized page

The easiest way to test what FEO changed is to compare optimized version to un-optimized. To get un-optimized version just request the page with a query string “?akamai-feo=off”. For example, http:///www.example.com/products/item.html?akamai-feo=off

What to Test?

It is recommended that you validate not only that the optimized page looks and renders similarly to the original page, but also that the optimized page functions correctly. This validation should be done with the top browsers of your target audience. Below are a few of the recommended items to test:

  • Adding items to the shopping cart.
  • Logging in to an account/profile.
  • Viewing third party content such as advertisements.
  • Content carousels that rotate between images, videos or different content.
  • Pop-ups such as email list signups, advertisements, etc.
  • Ad tracking and end user data capturing/monitoring.

FAQ

The following is a collection of frequently asked questions. For more information, or if a question is not answered below, please feel free to reach out to your Akamai account team or support contact.

  • I have new application code that I’m deploying, when do I test?
    • Test in your pre-production/UAT environment with FEO prior to moving to production. When you have a new build, please purge Akamai Cache and then purge FEO in the Luna Control Center
  • What testing recommendations do you have?
    • First verify you are in the right environment (staging/prod)
    • Check each request to make sure it is transforming
    • Test for performance (RUM/Synthetic) and functionality across browsers

Troubleshooting

  • Images do not appear
    • If images do not appear, confirm with your Akamai PS contact if the domain shards have been CNAMED. If they have not, you will need to add these shards to your host entry.
  • FEO Headers are missing
    • If you are not seeing FEO headers automatically, confirm that you are making requests to Akamai Staging and not Akamai Production. You can confirm which network you are testing against by looking for the X-AKAMAI-STAGING: ESSL or X-AKAMAI-STAGING : EdgeSuite headers. If you do not see either of these headers, then you are probably making the request to Production.
    • Also note the header should only be added to the HTML base page, and not on the embedded JS/CSS/image resources.