Hot Topics
Security Bloggers Network 
SBN

Accelerate SVG Delivery with Ion (A2)

by Tim Vereecke on March 25, 2020

As of March 2020, all Akamai Ion customers will benefit automatically from the more powerful Brotli/Zopfli compression algorithm for delivering their SVG files.

The benefit of fewer SVG bytes is a positive impact on your visual performance KPIs (First Meaningful Paint, Time to Visually Ready, SpeedIndex, or the newest — Largest Contentful Paint).

SVG performance — what you need to know svgionone.png

In a modern responsive web, using SVGs 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 web pages.

Loading your SVGs in time is crucial for the visual performance of a page. Above-the-fold SVGs are critical resources since until they are visible the page is not visually ready, and potentially not meaningful either.

When referenced early in HTML (e.g., logo, menu icons, search icon), their performance can also impact the loading of more important hero elements, such as the main article/product image.

Example SVG from the Akamai.com website

svgionthree.PNG

SVG, like any other text-based format, compresses very well. Serving them via Ion using the more powerful Brotli/Zopfli variants is an easy 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 the SVG. Below we provide some examples to show the order of magnitude.

ionsvgfour.png

It works! Here you see an svg file served with content-encoding: br

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

ionsvgfive.png

Akamai Developer Toolkit showing byte savings for a set of sample SVG files

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 one render-blocking SVG

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

Once live, 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 need to take into account the below prerequisites for your SVGs:

  • Brotli only works on resources served over https://
  • Akamai only optimizes cacheable resources with an Edge TTL of 60 min. 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

Other SVG tips

Compression is one aspect of SVG performance, and a variety of other techniques 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 SVGs (loading=”lazy” in chrome or your existing JS lazy loading solution)
  • Cache them at the edge (Behavior: Caching)
  • Cache them in the browser (Behavior: Downstream caching)

SVG performance can also be influenced by their design. Sarah Drasner wrote an article that addresses many things you can do to design High Performance SVGs.

How to get this feature activated

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

svgionsix.png

Adaptive Acceleration behavior with the Resource Optimizer toggle at the bottom

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

  • Existing Ion configurations with Resource Optimizer turned on
    • There is no action needed — this will be automatic
  • 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

Summary

Having your SVGs load as fast as possible helps you reach your performance goals. Modern compression algorithms are a quick win and automatically available to all Ion customers.

*** This is a Security Bloggers Network syndicated blog from The Akamai Blog authored by Tim Vereecke. Read the original post at: http://feedproxy.google.com/~r/TheAkamaiBlog/~3/9Bdpl9dHMSU/accelerate-svg-delivery-with-ion-a2.html

Tim Vereecke ,