No one likes to wait.
In fact, people hate waiting so much that many companies offer ways to avoid it. Magical theme parks offer fast passes that let you skip long lines. Airlines offer the opportunity to board before everyone else for an extra fee. Order-ahead apps offer a way to beat the dinner rush at your favorite restaurant.
It’s no different for your B2B business. Online customers hate waiting for websites to load.
If you don’t find ways to speed up your site, users will leave. On your mobile site, especially, the likelihood of users experiencing outside interruptions increases and the importance of page speed magnifies.
When discussing mobile page speed, the magic number seems to be three seconds or less.
That’s the amount of time you have for your page to load before most users will leave your site entirely. For businesses, more bounces on your mobile page mean fewer conversions and lost revenue.
If you want to see for yourself, Google’s Impact Calculator will show you how improving your mobile site speed could impact your revenue.
So what can be done to help improve your website’s page speed? Below are six ways to move the needle.
Improve page speed with these 6 tips
Though all of these tips are useful for improving page speed (especially on mobile sites), we’ll spend the most time on reducing image size because of the variety of image types out there. Cutting down your image size is the easiest way to speed up your site.
If you already know how to reduce image size, or you don’t really use images on your site, jump to tip two.
1. Reduce image size
The average mobile webpage is 2.2 MB, and 68% of that is from images. That’s bad news; a website shouldn’t be larger than 1 MB.
Compress your images
The best practice for mobile is to aim for an overall page weight of less than 500 KB. To get there, you can compress images and remove unnecessary metadata from raster images.
There are a few types of website images to consider when prioritizing what you’re going to compress:
- Background images: This one’s pretty obvious. Make sure they’re serving a purpose if they’re increasing your page speed.
- Screenshots: Don’t let enthusiastic product teams talk you into compression forgetfulness, as you can still achieve both quality and smaller image size.
- Logos, icons, and branded images: These tend to be easily overlooked since they appear to be small on the page. However some can be carelessly uploaded as large file sizes.
Use the appropriate file type for images
As a rule, JPEG images are better for page speed because they’re more compressible. Use JPEGs when you can, especially for photographic images.
However, PNGs are better for simple-color images where crisp lines are needed, as the quality loss with compression on a JPEG file might be too great. Generally, software screenshots should be PNGs, but be sure to test which is best in terms of both quality and page speed.
Finally, SVG files are the best format for multi-device viewing because they’re resolution- and scale-independent. But keep in mind that SVG images are only the best option if the code to support them is lighter than or equivalent to other options. In general, logos are usually a great option for the SVG format.
Upload images at the appropriate file size
Best practice for image size depends on your site. For example, Shopify recommends that image files on an eCommerce website be less than 70 KB.
Capterra analyzed dozens of software websites to offer you some insights for the best B2B software screenshot size.
We focused on screenshot images of the software’s desktop view and only included them if:
- It is as close to an actual view of the platform as possible—meaning it is not “cartoonized” or simplified with graphic shapes, etc.
- It is as close to the whole view of a desktop screen as possible—not cropped down
- The text within the screenshot is still decipherable—the quality is still good enough to read the majority of the text instead of being blurred out
These screenshot characteristics were chosen because they give a baseline for what the high end of an image’s size should be. Desktop version images are more complex than a mobile screenshot of your software. Legible text images indicate the screenshot takes up a good portion of space on the web page.
Below are two examples that demonstrate these characteristics:
A screenshot of Airtable, a spreadsheet and database software (Source)
A screenshot of Pipedrive, a CRM solution (Source)
The average size of the B2B software screenshots analyzed was 211 KB, which is nearly half of the suggested maximum of 500 KB for overall page weight.
We also analyzed these same screenshots on the mobile version of the software company’s website.
Bad news for mobile load times on B2B sites: Far fewer than half of these websites served up different file sizes for their mobile pages. Most either used the same file size as they did for their desktop sites, or removed the image entirely.
For those that did use a smaller image size on their mobile site, the average file size was 54.1 KB.
Keep in mind that there are lots of ways to display screenshot images, and it’s up to you to run tests to see which images resonate most with your users.
For example, you may opt not to show screenshots but to instead use icons or make your screenshots appear more cartoon-like. You can also crop and zoom to make it easier to digest a particular feature.
Finally, you could also opt to provide screenshots that blur certain elements, such as text, to better highlight what the software looks like and how it will perform.
However, make sure that you aren’t sacrificing the ability to build credibility in front of prospects or losing an advantage over competitors who are offering ungated, high-quality screenshots to build their brands.
One last tip related to image size: Try to upload images as close to the size that they’ll appear on your site as possible. For example, if an image is going to appear as 280 pixels wide, don’t upload it at 1,500 pixels wide.
2. Reduce the number of resources on a page
Conduct an audit of your website’s resources to make sure you’re only displaying the most relevant and valuable content and images to your prospects and customers.
Elements or resources such as moving carousels, for example, are saturated with navigation images and options. Having multiple screenshots of your software on the same page is another example of content that starts out as useful but can quickly become overwhelming.
Using too many of these images increases your page load time and decreases the effectiveness of the “snapshot” purpose they were meant to serve.
However, don’t start removing content left and right. Have a conversation between your webmaster, product, and marketing teams to get consensus before removing anything.
3. Don’t host video on your site
After this image discussion, you might think that removing video will save you a ton of space. But videos still offer a valuable medium for users to learn about your product.
Instead, to save space, host your videos on third-party sites such as YouTube, Wistia, or Vimeo instead of uploading them directly to your site.
4. Reduce font size
Reduce the number of different types of fonts on the page and consider using Google Fonts or Adobe Typekit.
Why? Fonts served by the Google Fonts API are automatically compressed. Once they’re downloaded, they’re cached in the browser and reused by any other web page that uses the Google Fonts API.
5. Improve your site’s code
Clean up your site code to improve page speed (Source)
Only resources that are absolutely necessary to convey your value proposition to users should be marked as critical. Hopefully, these resources are already positioned above the fold on your site. You can use lazy loading for below-the-fold elements and other images and data that aren’t needed in your initial page render.
Finally, run an audit of all of your tracking pixels to remove anything that’s no longer needed and make sure all of your teams—especially the marketing and product teams—don’t add tracking pixels without considering their impact on page speed. One helpful tip to keep in mind is that, even though some tools recommend a pixel be fired upon page load, it’s not always necessary. Where it makes sense, consider changing the default firing to when it’s DOM-ready or when the window is loaded.
As marketers, we need crucial reporting metrics to continue allocating marketing budgets wisely and optimizing lead gen elements such as CTAs. However, that doesn’t mean we should go overboard with them. Marketing should be cognizant of the increase in page speed that might result from adding images, data, or code to a particular page and weigh the potential leads lost because of slower load speeds against potential leads gained.
6. Consider a few other speed improvement areas
Other improvement areas include caching your website resources appropriately based on how frequently they get updated or whether they’re more static, such as some images, PDFs, etc. You can reduce your server response time by ensuring you have the right hosting service.
Finally, consider using a CDN that can cache your site on global servers. CDNs enable you to process requests on servers that are geographically closer to your end-user with the goal of providing high availability and high performance. Crazy Egg has a great discussion of some of these options, which is much more in-depth than we’re going to go here.
Improving page speed is easy … and necessary
We’ve given you a lot of information to work with here, but improving your page speed doesn’t have to be daunting.
Though you might have to make tweaks to your site based on some of our suggestions, you can also use these guidelines to create standards and norms for your site content going forward.
These steps are also necessary to complete if you want to be properly prepared for upcoming Google updates—which we’ve outlined in this article—and ultimately, if you want to win more leads.
When going through this process, be sure to include all your subject-area experts. For example, a marketer, designer, or product team member can easily review images on your website, a developer can look at code, and leadership teams can communicate priority initiatives which can be translated into a more hierarchical approach to your web pages (e.g., removing above-the-fold clutter will speed up your website without sacrificing essential resources).
Do you have any other page speed related questions or want to share a page speed improvement at your company? Leave me—and your peers!—a comment below.
Looking for eCommerce software? Check out Capterra's list of the best eCommerce software solutions.