Page speed optimization: be fast to be first

Page speed is one of the key factors for your business success. This sentence has a series of side effects which could be hard to grasp at first sight. In this article we will try to give you a better understanding on what page speed is, where it takes effect and how it could drastically change your website’s performance. Plus, it’s a really cheap way to improve your Return on Investment once you master it properly.

What is Page Speed?

Let’s start with a basic example: a user typing the url of your page into a browser. Doing so, the user sends a request to a server (the one hosting your page) which is located somewhere in the world and from there the information travels all the way back to his browser (client side). This journey, which can normally take from a few milliseconds to 4 seconds, could practically reach the opposite side of the world (about 20.000 Km) and back, providing to the user with an amount of data that is virtually unlimited.

Page speed, by definition, is the speed at which media content is taken (downloaded) from a server into a browser. What you want to focus on if you want to increase your performance is the way back. Here bandwidth and content size determine the rate at which the information is downloaded. Sounds confusing? Let’s put it simply: you need to speed up the transmission from the server to the user so he can get what he needs as fast as possible.

Why is it so important?

According to recent studies, 25% of users leave a website if it takes more than 4 seconds to load. This is an impressive percentage, especially if applied to really big e-commerce platforms: for a 1-second delay companies like Amazon could lose $1.6 billion a year! With these numbers in mind, you could easily understand why big industries strive to deliver data in the blink of an eye! In most cases, customers that are unsatisfied with a web page will not come back. The loss sums up over time (since you lose new potential clients), reducing the chance of having returning customers on your site. The point is to give the users a smooth experience through your pages, avoiding frustrating waits and dissatisfaction, that generally affect parameters like CTR, number of page views and conversions.

A study from the Aberdeen Research Group analyzed the behavior of users after delaying page speed by “just” 1 second – the results were somehow tragic: page views and conversion rates dropped 11% and 7% respectively. Now imagine that you can reduce your page speed by approximately the same time: your clients will thank you for that, especially in terms of conversions.

You probably know that a better user experience and happy clients will lead you to better search engine rankings, due to the improved retention of clients on the pages and higher traffic (which leads to more page views). The interconnection of these factors creates a cascade effect that could bring your business a lot of deals, particularly when they help to deliver organic traffic, really valuable for online business since it’s the one coming naturally from search engines. Once you get the big picture, by understanding the relationship between these factors, page speed becomes an essential gear in the machine, that needs to work flawlessly.

How to check your website’s speed?

There is an easy way to check your site’s speed. Google itself provides a tool to do so: Page Speed Insights. In a few seconds, you can run an analysis on your domain, receiving a report with possible optimizations. One easy fix could be applied to HTML and CSS resources and consists of compacting lines of code to speed up the downloading process. These optimizations are suggestions that in most of the cases deal with reductions of lines of codes and media size. The latter reduction mostly refers to image optimization, which we will cover in the following paragraph. One of the keys to understand Pagespeed Optimization is to comprehend the process behind server-client communication.

Before we move further, there are a couple of takeaways emerging from what we said so far:

Optimizing the speed of your website is one of the cheapest way to improve your ROI, giving you a remarkable outcome at a really affordable price (when not for free).

It’s important to have page speed in mind while building your website. The best practice is to think in terms of speed optimization across all the steps of a website development, not at the very end of the process.

Image Optimization

The best representation of a product is most likely offered by images since your customers could hardly touch and see the machines itself. Having good looking pictures along with detailed descriptions heavily increases the chances of having more conversions on your website. Customers often rely on images while purchasing the product they need. So, it’s important to include them in your product pages. But that’s just one of the things that should be taken into consideration while shaping the layout of your pages.

Image size is crucial to determine the speed of a page since they take the majority of bytes downloaded into your browser. To reduce this amount of bytes, it makes sense to optimize your images for web usage. It is essential to find a balance between image quality and file size, aiming for both high resolution and fast content delivery. If your page takes time to display really big images, search engines like Google could lower your site ranking, discouraging users from entering your website.

Usually, images are implemented on the web in formats such as JPEG and PNG. While the latter can offer transparency, which allows you to put pictures on different backgrounds and it’s the best option for logos, JPEG is probably the most diffused image format on the internet. Product images strongly rely on this format, due to the wide range of colors it guarantees and the flexibility between quality and size. You can save JPEGs at nearly any desired quality, making it possible for you to adjust online pictures according to your needs.

There are several softwares that allow you to save images “for web” – Photoshop and Gimp are just some of the most famous examples. Along with these software, there is a huge variety of online tools and apps, that reduce your image size without affecting quality and resolution. These kinds of reductions aim to delete lots of metadata (like GPS location and capture method), which are a bit useless if your purpose is just to show the product in itself.

It is also important to keep in mind the way and the context in which you are going to use an image. A big background usually needs an image that is big enough to look sharp on big screens. A favicon, the small images that appear on the tab next to the page title, can even be just a dozen pixels wide. The size of an image should not be adjusted after the upload on your website but always before, so that the user doesn’t download an unnecessary amount of Kilobytes. As a matter of fact, images take a big percentage of a page’s total size, leaving a way bigger footprint than .js and .css files. Because of that, you want to be careful with the number of pictures (being decorative or not) that you are going to place on your site.

That said, have fun customizing your website, styling it nicely and making it the fastest domain on the web.