This blog is part of the Akamai Platform Release, where we’re giving you all the details about what Akamai has added and improved for developers! You can view all of our updates here.  

Akamai is adding a more powerful Brotli/Zopfli compression algorithm for delivering their SVG files! As of March 2020, Akamai Ion customers will automatically be able to turn this feature on. 

The benefit of fewer SVG bytes is that it improves your visual performance KPI’s (first meaningful paint, time to visually ready, SpeedIndex or the newest largest contentful paint).

SVG Performance - What You Need to Know

In a modern responsive web, using SVG's is a great way to have an ultra sharp look and feel on high resolution screens. It is commonly used for logos and various icons seen on webpages.

Loading your SVGs in time is crucial for the visual performance of a page. Pages are not visually ready and potentially not meaningful until above the fold SVGs are fully loaded. 

SVG performance can impact the load speed of other important hero elements, especially when referenced early in HTML (eg. logo, menu icons, search icon).

Example SVG From the Akamai.com Website

<svg id="playbutton" data-name="playbutton" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65">

<defs>

<style>.cls-1{fill:none;stroke:#009cde;stroke-width:3.5px;}.cls-2{fill:#009cde;}</style>

</defs>

    <circle class="cls-1" cx="32.46" cy="32.21" r="26.91"/>

    <polygon class="cls-2" points="43.81 32.29 25.34 21.62 25.34 42.95 43.81 32.29"/>

</svg>

SVGs, as any other text based format, compress very well. Serving them via Ion using the powerful Brotli/Zopfli variants is a really simple way to reduce network overhead. 

Impact of Resource Optimizer on SVGs

The impact of Brotli/Zopfli compared to GZIP varies based on the contents of your SVG. Below, you can see some examples that show the order of magnitude. 

Looking at a sample set of SVGs used by 25 popular brands, you can see an average of 30% byte savings (min. 10%, max 49%).

The HTTP Archive can be used to determine whether SVG optimization will have a positive impact on visual performance:

• Out of 5.2 million SVG requests, 23% of them were loaded prior to the StartRender metric being fired

• Out of 1.17 million sites that have SVG images, 42% of them have at least 1 SVG loading before render start

If you want more specific results for your SVG, you can simulate gains via Paul Calvano’s Compression tool.

Once your SVG is in production, you can use the Akamai Developer Toolkit Chrome extension to see byte savings per file (JS, CSS or SVG).

Prerequisites

In order to benefit from automatic optimizations, you’ll need to take a few prerequisites into account:

• Brotli only works on resources served over https://

• Akamai only optimizes cacheable resources with an Edge TTL of 60min or higher. (the higher the TTL, the better for performance)

• Akamai only applies Brotli compression to files served with the svg/css/js extension

• Brotli only works for browsers sending accept-encoding: br request headers. Other browsers will receive the gzip compressed version

Activate SVG Optimization 

SVG optimization is part of the Adaptive Acceleration behavior and is activated when the “Resource Optimizer” toggle is turned “On”.

Depending on your setup, you can easily activate this feature:

• Existing Ion configurations with Resource Optimizer turned on

  • Please create a new version and activate the configuration.

• Existing Ion configurations with Resource Optimizer turned off 

  • Modify the Adaptive Acceleration behavior and turn on “Resource optimizer” 

• Existing Ion customers without Adaptive Acceleration

  • Modify your existing property manager config and add the “Adaptive Acceleration” behavior with “Resource optimizer” turned on.

• If you’re not currently an Ion customer

  • Sign up for the free Akamai Developer Trial account to try this and a bunch of other great features.

Here are a Few More Tips

Compression just is one aspect of SVG performance, but there are many ways to ensure that your SVG will perform well. For instance, SVG performance depends on design. Sarah Drasner wrote an article that addresses a few best practices in designing high performance SVGs.

Here are variety of other techniques that can be applied to speed up your SVG delivery: 

• Minify your SVGs (Comments, whitespace, tabs...)

• Remove unnecessary headers. (Behavior: Remove outgoing response header)

• Lazy-load hidden or non-crucial SVG's (loading="lazy" in chrome or your existing JS lazy loading solution)

• Cache SVGs at the Edge (Behavior: Caching)

• Cache SVGs in the browser (Behavior: Downstream caching)

Summary

Having your SVG's load as fast as possible can help you reach your performance goals. Modern compression algorithms are a quick win and automatically available to all Ion customers.