Hello Sunil
Image-Optimization-Web-Performance

Image Optimization for Best Web Performance in 2022

Here are the suggestions for optimizing SVGs:

  • SVG files should be minified to reduce their size.
  • SVG files should be compressed with GZIP.

Recommended tool to minify SVG files is svgo. If you are not comfortable with command line tool as motioned then try following.

Small note on Gzip compression, it is something that is enabled at the server level. Use this tool to check whether Gzip compression is enabled on your server. Follow these instructions to enable it if not.

20. Host images on a CDN

Most commonly, the entirety of a website will be hosted on one server. If we assume that your web server is in India, then your images donā€™t have to travel far when someone from India visits your website.

But let’s imagine a scenario where a website is hosted in the Europe but is visited by a user somewhere in USA. In this case, images have to travel much further to reach them. That decreases the speed at which your website loads.

Content Delivery Networks (CDNs) solve this problem by caching your files across a global network of servers. Now, when someone visits your website, the images will be loaded from the server closest to them.

A content delivery network, or CDN, is a geographically diverse network of servers that helps speed up page load time by reducing the distance between the website visitor and the server.

Hereā€™s a cool GIF from CloudFlare which depicts this process perfectly:

An image CDN lets you handle the transformation, optimization and delivery of images. You can determine what loads when and how that should work.

For instance, you can say that all your PNG images should be converted to webp on-the-fly because these load fastest and give the best image quality. An image CDN has loads of options to fine-tune the process, but thereā€™s often a default setting thatā€™s probably best for the majority of sites.

There are loads of image CDNs to choose from, like CloudflareFastlyKeyCDN, Amazon CloudFront, Sirv, Cloudinary, Google Cloud and Imagekit.

You can also easily set up a CDN on WordPress through plugins such as W3 Total Cache, or for further guidance, you will find helpful integration guides from each provider, such as this from Cloudflare.

Still, itā€™s worth noting that your CDN will have a URL like :

xyz.cdnprovider.com

That isnā€™t great for SEO for the following reasons:

  1. Your images are effectively hosted on a separate domain. If someone chooses to embed one of your images and link to you, thereā€™s a chance they will link to the CDN instead. That means you miss out on a link.
  2. It can cause problems if you wish to change CDN provider in the future. You will have to change (or redirect) all of your image URLs, etc.

Hereā€™s John Muellerā€™s advice when it comes to CDNs

For that reason, we would recommend setting up a CNAME record. Think of this as an alias that can be used instead of the ugly URL that gets assigned to you by the CDN provider.

So instead of xyz.cdnprovider.com, your CDN can be cdn.yourdomain.com.

Therefore, the best practices are:

  • Just because something is “trendy” doesnā€™t mean you should follow it like a sheep. Determine if it is really the best move for your website first.
  • If your website is doing tons of business every month, then a CDN is most likely a good idea since it can help solve bandwidth issues.
  • If your site only gets thousands of visitors a day right now, chances are your current hosting situation can handle the load.

21. Leverage browser caching

Browser caching is where images (and other files – CSS, JS, HTML) get stored in your visitorsā€™ browsers. The result is that things load faster for them if and when they visit your website in the future.

Sunil Pradhan

Hi there šŸ‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there šŸ‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.