Image Speed Test: The new Analysis Tool for websites

We know the beginning of 2020 was not the start that most of us expected. It started "kind of different" challenging and isolated. Maybe your plans to grow, to invest, to evolve are different now. But with how's the world today, we want to be helpful. It's an excellent opportunity to enhance the online experience, and that's why we launched a new product — The Image Speed Test.

After months of hard work, iterations, and beta testings, we decide to launch on Product Hunt and share the Image Speed Test with the world.

It started as a stand-alone script, and now it's a fully automated tool to measure and understand your website's performance.

The main goal is to help you learn and take action on how to make your website faster, understanding the opportunities you have to improve.

The report has five sections that we explain below.

Part 1: Overview

At the top of the screen, you'll be able to switch between mobile and desktop. The card, metrics, and other elements will update based on the device you select.

Then there's the cards recommendations. You can have from one or many different cards that will help you solve each problem detected.

Total page weight, page load time, and total images weight are three critical metrics for any website. They have a significant impact on the bounce rate, conversions, and user experience.

• The lighter your images, the lighter your website
• The lighter your website, the less time will take to load.
• The faster your website loads, your users will have a better experience - probably your sales and traffic will grow. (continue reading more about this concept)

The performance score is a calculation we make based on serval metrics we are able to identify. The goal is that you can understand the status of your website. You can improve it by following the recommendations that arise in the report. By applying all these recommendations, your website can improve to match the calculated potential performance score (blue percentage on the right side).

If you don't have enough time to apply the recommendations one by one or just because you have a big website with a lot of images, you give Piio a try.

Part 2: Image Optimization Comparison

This part is about the opportunities you have to optimize your images. This card shows you the worst-performing image on you website, comparing it to how it would look like if that image was properly optimized.

It is self-explanatory, but you'll be able to see things like the format the image is saved, the dimensions, and if you are using WebP (what's WebP?)

Although not all the browsers support the WebP format, it's our favorite in terms of weight-quality and size. If you decide to install Piio, our technology will choose the correct size and format for each image, depending on the browser and devices that are visiting your website.

Part 3: Devices

Have you ever thought that your website loads differently on an iPhone than on a Samsung or a Tablet?

In this section, we highlight the differences in how your website will load the images on the most common desktop format and the most common mobile screen size.

• Name file
• Dimensions
• Format (actual and the recommended)
• Weight (original and optimized)
• Savings on each image

You can also download the optimized image and use it on your website. (icons above the savings percentage).

Part 4: Opportunities

Now, we know what's page weight, load time and potential savings, we are ready to introduce a more technical part (or maybe you can discuss it with your dev. team)

The page requests are detailed by content type. It's not all about images. The CSS, JavaScript, HTML and other elements on your website have an impact on the total weight of your site. That's why in this section, we introduce you to the lazy loading concept.

Lazy loading is a web design technique where particular objects on a page are not loaded when the page is first pulled up by the user. Instead, placeholders are used, and objects are only loaded as they are needed when the user scrolls down the page. All the users notice is that the page is fast and that everything is ready when they need it, read more about the lazy loading technique.

Part 5: Monitor

This is one of our favorites and one of the big values we added to the tool.

You can subscribe for free to receive a monthly Image Speed Test report of the page you tested. But you can do it with all the pages you want to track!

This Monitor will help you to understand how your website is doing and what's changing. You will also receive exclusive member recommendations on how to improve your web performance and the quality of your content.

Have you already tested your website? See How much faster can your website go

Let's build a better Internet together, and thanks for your support during the Image Speed Test launching on Product Hunt.

If you still have questions, let us know them here!