SVG and GZIP compression

Publishing help SEO
1

Hello Webflowers :wink:

Is there a way to improve GZIP compression especially for SVGs? Because Google just harden the rules and my site lost 10% Page Speed Score :pleading_face: ?

Thanks

2

Please provide a link to Google’s rule change if you could.

3

Hello, I have no link but I test my site with GTmetrix and my site has not changed. Still, my rating has dropped due to SVGs images. This is the first time I am in E grade. Last week, I was in grade B for GZIP compression for the same page. So I thought Google had probably still harden the rules…

Thanks

16
162090×1554 450 KB

4

So they are showing that you could save 57k by gzipping those assets right?

First, the bulk there is jQuery. It is served minified. The browser will be caching it as soon as the page loads and it is served from Amazon’s Cloudfront infrastructure means FAST. Cloudfront supports gzip compression of assets but that is controlled by the bucket, which we can’t touch. However it is on for that asset based on a test I performed of one of my Webflow hosted sites. See content-encoding.

ccess-control-allow-methods: GET, HEAD
access-control-allow-origin: *
access-control-max-age: 3000
age: 21
cache-control: max-age=84600, must-revalidate
content-encoding: gzip
content-type: application/javascript
date: Thu, 11 Jul 2019 16:02:23 GMT
last-modified: Thu, 03 Jan 2019 19:14:11 GMT
server: AmazonS3
status: 200
vary: Accept-Encoding,Origin,Access-Control-Request-Headers,Access-Control-Request-Method
via: 1.1 7b891ba5ffaf08dd209adf67026190db.cloudfront.net (CloudFront)
x-amz-cf-id: 6bY8tmVv5bznyqiJVswwYLgk-9XLdQIIONz0SIBDIZpCyEg5eW8Ynw==
x-amz-cf-pop: ORD52-C1
x-amz-version-id: cHtYhk1pPpTGdBKn5DyitHVFUrRwlEdb
x-cache: Hit from cloudfront

I am not a fan of third party performance measuring sites, since most are in the business of selling something or making recommendations (affiliate) to someone that does. I am not inferring that that is what GTmetrix is doing.

I do prefer to conduct performance testing from multiple endpoints. I use VPS’s in different data centers, on different networks running I use node and run lighthouse (open source auditing tool). You can run audits in a Chrome browser, as it is built in.

I would suggest concentrating on reducing the 10MB payload your images represent.

Let me know if you have follow up questions.

5

Ok thank you :slight_smile:
Webflow is it compatible with new generation formats? Image formats like JPEG 2000, JPEG XR, and WebP?
And if so what format do you recommend?

1 Like
6

Next Gen formats have spotty support (WebP = No IOS example). As a professional photographer, image quality is very important to me and my clients. I optimize based on the subject. Images are JPG, graphics are either SVG or PNG. I prefer to upload images that are optimized at the right starting size for my layout, so Webflow’s responsive image generation process won’t effect the desktop image. I can’t control that auto process for smaller breakpoints unless I provide a different optimized image for each breakpoint (which I do for background images normally).

I have complex internal tools and systems I have created to optimize images for sites. I have used them to process images for e-com sites with hundreds of thousands of products.

If you want to process images locally, create batch routines with complex evaluation and conditionals, and have a MAC, then I can wholeheartedly recommend using Lemke Software Graphic Converter.
https://www.lemkesoft.de/

There is currently no other tool that even comes close. It is shareware so you can test it. If you like it buy it. $40 is a steal.

Lately, I have been working extensively with Cloudinary.com, a cloud based DAM and media CDN with transformations. Cloudinary supports auto serving image formats to browsers based on support, among many many other things. Of course this means that now I am using embeds for images and not using Webflow assets for many images. I am in the process of creating a tutorial on its use with Webflow. Stay tuned.

2 Likes
7

Ok thank you for your feedback :slight_smile: I will try graphic converter. Cloudinary I already use on a collaboration with a developer React and NodeJS and it looked pretty good. I’m going to investigate that :wink:

Thanks

8

Does the Lemke Software Graphic Converter.teduce the image size more effectively than something like tinypng?

I would love to see that tutorial.

Thank you.

9

More controls on output that just about anything. Since it is shareware why not give it a go.

1 Like