Do not host videos on the website
Posted: Wed Feb 12, 2025 8:17 am
On the contrary: people are so reluctant to wait that many companies offer their customers ways to avoid any waiting time. Theme parks sell special tickets that allow you to skip long lines. Airlines allow you to board right at the beginning of boarding and before everyone else for a fee. With ordering apps, you can be the first to be served at your favorite restaurant, even during peak times.
It's basically no different for your B2B company: online, too, customers hate having to wait for a website to load.
Man wonders how to improve his page speed
If you don't find a way to improve website performance, many will abandon the site before it's even built. With mobile websites, add to that the fact that users are often interrupted by something outside of their site - and page speed becomes even more important.
When it comes to mobile page speed, the magic number seems to be three seconds or less.
This is how long your page can take to load before most people abandon it. For companies, this means one thing: the more people abandon your mobile website, the fewer conversions and the less revenue there will be.
You can get an idea of how mobile loading speed can affect your revenue using Google's Impact Calculator .
So how can you increase the speed of your website? The following six methods will help you get into the green zone with ease.
6 Tips for Higher Page Speed
All of the following tips are very useful for improving page speed (especially on mobile sites), but given the many different types of images, we'll focus on image sizes, as smaller images are the fastest way to increase loading speed.
If you already know exactly how to reduce image size or don't use images on your website at all, you can skip this tip.
1. Reduce the image size
The average mobile web page is 2.2MB in size – and 68% of that is images. This is a problem because no website should be larger than 1MB.
Compress images
For mobile websites, it is recommended to aim for a total size of less than 500 KB per page. This can be achieved by compressing images and removing unnecessary metadata from raster graphics.
With tools like the Image Analysis Tool from Website Speed Test or Page Weight imgIX you can check the images on your website and see compression options.
If you are considering reducing the size of the images on your pages, you should do so in a specific order:
Background images: This one is pretty obvious. Make sure any background images serve a purpose and don't just slow down your site.
Screenshots: Don't let enthusiastic product teams convince you to upload uncompressed images: high image quality is possible even with a smaller image size.
Logos, icons and branding: These types of images are easily overlooked because they appear small on the page . However, if you're not careful, you can easily end up uploading these images in high resolution.
There are numerous tools that you can use to compress images, such as TinyPNG , Compressor.io ,
GIMP or Photoshop . In Photoshop, you can adjust the image size using the Save for Web or Export As options.
Use the correct file type for images
JPEG images are generally better for page speed because they can be compressed more. Use JPEGs whenever possible, especially for photographs.
However, for images with few colors and clear lines, the loss of quality when compressed as JPEG may be too great. A PNG is usually better for software screenshots, but be sure to test for yourself what is best in terms of quality and page speed for your specific use case.
Ranking of file types for Page Speed
SVG files are the best format for displaying on multiple devices, as resolution and scaling are not important. However, with SVG images, remember that the code used for them should not be larger than the other options. In general, the SVG format is very suitable for logos, for example.
Upload images in the correct file size
The optimal image size depends on your website. For example , Shopify recommends that image files on e-commerce websites should be 70 KB or less.
Capterra analyzed dozens of software websites to give you tips on the optimal size of B2B software screenshots.
We focused on screenshots of desktop views of the software and only included them if they offered:
A view of the actual platform that is as faithful to the original as possible, i.e. they were not "cartoonized", simplified by graphic shapes, etc.
If possible, an uncropped overall view of the desktop
Still legible text in the screenshot or sufficient image quality to be able to decipher most of the text
We have created these criteria because they represent a kind of upper limit for image size. Images of desktop versions are much more complex than mobile screenshots of software. If the text is still readable, this means that the screenshot takes up quite a lot of space on the web page.
The following examples illustrate these properties:
1. Example:
A screenshot of the spreadsheet and database software Airtable
A screenshot of the spreadsheet and database software Airtable ( source )
2nd example:
A screenshot of the CRM solution Pipedrive
A screenshot of the CRM solution Pipedrive ( source )
The average size of the analyzed B2B software screenshots was 211 KB, about half of the recommended maximum of 500 KB for the entire web page size.
We also analyzed the same screenshots on the mobile version of the software companies' websites.
Bad news for mobile load times of B2B websites: Only far less than half of these websites offered different file sizes for their mobile pages. Most either used the same file as for the desktop website or removed the image altogether.
For those who used a smaller image size on the mobile site, the average file size was 54.1 KB.
Remember that there are many ways to display screenshots: run tests to find out which images resonate best with your users.
You can also consider replacing the screenshots with other, smaller representations or creating cartoon-like mock-ups. Alternatively, you can crop screenshots and enlarge sections to point out certain features while making the image smaller.
It is also possible to take screenshots in which certain elements, such as text, are only blurred in order to focus on how the software looks and works.
But make sure that you don't miss the chance to present yourself credibly to potential customers or lose a competitive advantage over competitors who offer detailed, high-quality screenshots.
One final tip on image size: try to upload images at the same size as they will be displayed on the website. If an image is only going to be displayed at 280 pixels anyway, there's no point in using a sledgehammer to crack a nut and uploading it at 1,500 pixels wide.
2. Reduce the offer on websites
Go through your website carefully and make sure that you only show your (potential) customers the most relevant content and the images with the highest added value.
Elements or resources such as slideshows contain a lot of navigation graphics and options. Also, multiple screenshots of a software on a subpage may seem useful at first, but quickly become overwhelming.
Too many of these images increase the loading time of your website and reduce the impact of the individual images, which are actually intended to be “snapshots” that attract attention or illustrate individual points.
But be careful: don't start removing content from everywhere. Talk to your webmaster and product and marketing teams before you start deleting.
After talking about images for so long, you might be thinking that you can save india telegram data a lot of space by removing videos. However, videos provide a valuable way for your users to learn more about your products and therefore should not be eliminated per se.
Host your videos on third-party sites like YouTube, Wistia or Vimeo instead of uploading them directly to your website.
4. Reduce fonts
Reduce the number of different fonts on your site and consider using Google Fonts or Adobe Fonts.
Why? It's simple: fonts provided through the Google Fonts API are automatically compressed. Once downloaded, they are cached in the browser and reused by any other website that uses the Google Fonts API.
5. Improve the website code
Website code with good page speed
Clean up your website code to increase loading speed .
It's basically no different for your B2B company: online, too, customers hate having to wait for a website to load.
Man wonders how to improve his page speed
If you don't find a way to improve website performance, many will abandon the site before it's even built. With mobile websites, add to that the fact that users are often interrupted by something outside of their site - and page speed becomes even more important.
When it comes to mobile page speed, the magic number seems to be three seconds or less.
This is how long your page can take to load before most people abandon it. For companies, this means one thing: the more people abandon your mobile website, the fewer conversions and the less revenue there will be.
You can get an idea of how mobile loading speed can affect your revenue using Google's Impact Calculator .
So how can you increase the speed of your website? The following six methods will help you get into the green zone with ease.
6 Tips for Higher Page Speed
All of the following tips are very useful for improving page speed (especially on mobile sites), but given the many different types of images, we'll focus on image sizes, as smaller images are the fastest way to increase loading speed.
If you already know exactly how to reduce image size or don't use images on your website at all, you can skip this tip.
1. Reduce the image size
The average mobile web page is 2.2MB in size – and 68% of that is images. This is a problem because no website should be larger than 1MB.
Compress images
For mobile websites, it is recommended to aim for a total size of less than 500 KB per page. This can be achieved by compressing images and removing unnecessary metadata from raster graphics.
With tools like the Image Analysis Tool from Website Speed Test or Page Weight imgIX you can check the images on your website and see compression options.
If you are considering reducing the size of the images on your pages, you should do so in a specific order:
Background images: This one is pretty obvious. Make sure any background images serve a purpose and don't just slow down your site.
Screenshots: Don't let enthusiastic product teams convince you to upload uncompressed images: high image quality is possible even with a smaller image size.
Logos, icons and branding: These types of images are easily overlooked because they appear small on the page . However, if you're not careful, you can easily end up uploading these images in high resolution.
There are numerous tools that you can use to compress images, such as TinyPNG , Compressor.io ,
GIMP or Photoshop . In Photoshop, you can adjust the image size using the Save for Web or Export As options.
Use the correct file type for images
JPEG images are generally better for page speed because they can be compressed more. Use JPEGs whenever possible, especially for photographs.
However, for images with few colors and clear lines, the loss of quality when compressed as JPEG may be too great. A PNG is usually better for software screenshots, but be sure to test for yourself what is best in terms of quality and page speed for your specific use case.
Ranking of file types for Page Speed
SVG files are the best format for displaying on multiple devices, as resolution and scaling are not important. However, with SVG images, remember that the code used for them should not be larger than the other options. In general, the SVG format is very suitable for logos, for example.
Upload images in the correct file size
The optimal image size depends on your website. For example , Shopify recommends that image files on e-commerce websites should be 70 KB or less.
Capterra analyzed dozens of software websites to give you tips on the optimal size of B2B software screenshots.
We focused on screenshots of desktop views of the software and only included them if they offered:
A view of the actual platform that is as faithful to the original as possible, i.e. they were not "cartoonized", simplified by graphic shapes, etc.
If possible, an uncropped overall view of the desktop
Still legible text in the screenshot or sufficient image quality to be able to decipher most of the text
We have created these criteria because they represent a kind of upper limit for image size. Images of desktop versions are much more complex than mobile screenshots of software. If the text is still readable, this means that the screenshot takes up quite a lot of space on the web page.
The following examples illustrate these properties:
1. Example:
A screenshot of the spreadsheet and database software Airtable
A screenshot of the spreadsheet and database software Airtable ( source )
2nd example:
A screenshot of the CRM solution Pipedrive
A screenshot of the CRM solution Pipedrive ( source )
The average size of the analyzed B2B software screenshots was 211 KB, about half of the recommended maximum of 500 KB for the entire web page size.
We also analyzed the same screenshots on the mobile version of the software companies' websites.
Bad news for mobile load times of B2B websites: Only far less than half of these websites offered different file sizes for their mobile pages. Most either used the same file as for the desktop website or removed the image altogether.
For those who used a smaller image size on the mobile site, the average file size was 54.1 KB.
Remember that there are many ways to display screenshots: run tests to find out which images resonate best with your users.
You can also consider replacing the screenshots with other, smaller representations or creating cartoon-like mock-ups. Alternatively, you can crop screenshots and enlarge sections to point out certain features while making the image smaller.
It is also possible to take screenshots in which certain elements, such as text, are only blurred in order to focus on how the software looks and works.
But make sure that you don't miss the chance to present yourself credibly to potential customers or lose a competitive advantage over competitors who offer detailed, high-quality screenshots.
One final tip on image size: try to upload images at the same size as they will be displayed on the website. If an image is only going to be displayed at 280 pixels anyway, there's no point in using a sledgehammer to crack a nut and uploading it at 1,500 pixels wide.
2. Reduce the offer on websites
Go through your website carefully and make sure that you only show your (potential) customers the most relevant content and the images with the highest added value.
Elements or resources such as slideshows contain a lot of navigation graphics and options. Also, multiple screenshots of a software on a subpage may seem useful at first, but quickly become overwhelming.
Too many of these images increase the loading time of your website and reduce the impact of the individual images, which are actually intended to be “snapshots” that attract attention or illustrate individual points.
But be careful: don't start removing content from everywhere. Talk to your webmaster and product and marketing teams before you start deleting.
After talking about images for so long, you might be thinking that you can save india telegram data a lot of space by removing videos. However, videos provide a valuable way for your users to learn more about your products and therefore should not be eliminated per se.
Host your videos on third-party sites like YouTube, Wistia or Vimeo instead of uploading them directly to your website.
4. Reduce fonts
Reduce the number of different fonts on your site and consider using Google Fonts or Adobe Fonts.
Why? It's simple: fonts provided through the Google Fonts API are automatically compressed. Once downloaded, they are cached in the browser and reused by any other website that uses the Google Fonts API.
5. Improve the website code
Website code with good page speed
Clean up your website code to increase loading speed .