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.
- svgomg (Web)
- Image Shrinker (Mac)
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 Cloudflare, Fastly, KeyCDN, 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:
- 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.
- 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
CDN URLs is fine, but I’d try to avoid moving image URLs too much, so I’d tend towards using your own domain/subdomain (via CDN).
ā š John š (@JohnMu) October 17, 2017
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.
Add comment