We all know what waiting means, and we don’t want it. It’s awful to be waiting in line, wait for something you bought to be delivered, or click on a link and wait for a website to load, especially if it is your website. You don’t want to be that company that users slip away because the website didn’t load properly.
Let’s get into the topic, what is Web Performance? In this article, we are going to talk about web performance in a way that everybody can understand, and define the next steps to improve the performance of your website.
I’m Nico Bistolfi, and I’m the CEO at Piio. A company that helps websites to accelerate their experiences for the users and deliver the content faster. I also love building things in many ways; I built my own race car with my father, built our own house with my wife, and co-founded the largest eCommerce company in my home country. We got to $25M annual revenue, which I exited in 2015. I’m also obsessed with Speed, and that’s why Piio started.
Not everything can be fixed, but everything can be measured
There are many excuses and things that are completely valid and true. That’s why we are going to take a look at different tools and tests, in a way that you can check what you can do, see what the results are, and define your mid/long-term goal for your website.
We hear very often the phrase: “our software is too old” — or — “we need to change service providers” — or — “our platform has limitations”. And all these “excuses” are valid and true, we know it! All these excuses involve spending money, but sometimes money it’s not the issue, knowledge is. Eg, the images from the content marketing team are too big, there are things we can do to solve or improve that.
First of all, we need to measure, in order to understand what do we need to change or which problem do we need to solve. If you don’t have a website yet and you are thinking about web performance, think about how to have a great experience for your users. It’s not just about design, and it’s not just about the user flow. Performance it’s really important and we have different ways of doing it.
The key elements to improve and test web performance
If we talk about key elements that you can use to understand what do you need to do and what you can do to improve and test your web performance:
Synthetic testing -Test on a simulated environment. We recommend having a starting point of reference. It gives you a consistent result time over time and allows you to monitor your web performance.
Real User Monitoring — You can set it up on your website and it would constantly measure the performance on your site. How it’s loading on your user devices and in different scenarios. This is really good because it helps you to understand based on your demographics how things are changing. If you have users using the latest mobile phones, computers, and powerful devices, you don’t need to worry very much about web performance. But, if you are in the other way that you have people with more legacy devices, or with devices not that powerful, then you really need to look at web performance.
Browser Manual Testing — just, too technical for today. But as it says, it’s manually testing and measuring the performance on different devices.
Synthetic Testing
We have hundreds of tools, some of the key tools that we’ve found very useful are:
**Page Speed Insights** (or Lighthouse) designed by Google that works very similarly. With Lighthouse you can run your test on your own browser which is going to change a little bit the results, it’s a kind of manual testing. But Page Speed Insights is going to give you something else: the Core Web Vitals. These metrics are measured by Google across the different devices that your users are accessing your website. And that’s very interesting! The Core Web Vitals are focused on Loading, interactivity, and visual stability of your website (I’m going to talk about them later).
**GTMetrix** is another tool that when you get used to the interface, it’s really easy to find what’s wrong and what’s working well for you. Another extra point for GTMetrix that I find very useful is the Waterfall feature. It allows you to visualize the different resources that are being loaded for your website in the specific test you are running.
**Image Speed Test** is designed by us, at Piio. It’s completely free and you can set up to receive emails with a new test every month at no cost. This tool is extremely focused on images and how you can improve the image loading on your website.
Page Speed Insights
Let’s take a random website as an example, using the Page Speed Insights tool. In the picture, we can see two pieces of content that are very important to us.
Metrics (blue rectangle)
The blue rectangle contains the Core Web Vitals and we are going to focus on the Largest contentful Paint (LCP) — First Input Delay (FID) and Cumulative Layout Shift (CLS).
First Contentful Paint (FCP) it’s important but if you focus on LCP you are going to fix the FCP automatically.
Google is showing us how well that metric performs for all the devices or users that are accessing the G2 website. We can see on the right side, the First Input Delay and the Cumulative Layout Shift are in the threshold that is considered good. The 0.0 seconds for the Cumulative Layout Shift is considered good for 90% of the users that are accessing the G2 website.
This is very useful because we can see that there’s no real need to work on the First Input Delay or in the Cumulative Layout Shift. But on the FCP or in the Largest Contentful Paint, there is a real need! We can see that for almost 20% of the users the LCP is in the poor performance threshold, and of course, that is something that we do want to work in.
The hard thing about this is that really working on the LCP could be really hard and really technical. Usually what happens, or what I see with different people, is that they end up working on the complete Page Load and that ends up speeding up a little bit the LCP. But it’s not something really easy to identify. You might need someone technical to help you with that process.
More metrics (red rectangle)
On the red rectangle, we’re going to have more metrics that are useful too, like the Speed Index or the Time to Interactive (when the user is going to be able to start interacting with your website). In the G2 case is 4.9 seconds. Maybe they can start reading something before that, but they are not going to click on anything or write on any input. This is something that can definitely be improved (The blue flags icons explain to you more of how you can improve those metrics or what the metric means).
GTMetrix
Moving to GTMetrix, this can be difficult to read. In the beginning, you can focus on the base Page Speed Score or YSlow Score. If you try to get above 85–90% on each one of those tests, you are in a good position!
Something to clarify about GTMetrix is that their Fully Load Time is actually the Fully Load Time, meaning that they’re going to miss you till every resource of your website gets loaded and it’s completed. We’re used to hearing that is recommended for a website to load in less than 3 seconds, and yes that’s true!
If your website takes more than two seconds to load, people are more likely to abandon your website. In this case, you can’t use the 3 seconds rule, because maybe your website is already completely loaded at 3 seconds, but you have more things like a chatbot, pop-ups, or something more related to behavior, that is loading on the background, and the user doesn’t really need to at the beginning. GTMetrix is not going to count that, and just going to wait until everything is loaded and going to stop the timer there. I would say if you are below 5 seconds could be good or even if you are around 8 seconds could be a good scenario too.
Total Page Size
We do recommend for the Total Page Size to be less than 1.5 MB and regarding the requests keep it as slow as possible. Having fewer requests means the user device or the browser is going to ask for fewer resources and that means less network usage (improving the page load time automatically). If you click on one of those metrics you attach an explanation on how you can improve that and what are the things that you can do. But something more interesting about this is that you are also going to be able to identify that, from your website. That’s the waterfall effect, I will explain it in another chapter.
Image Speed Test
Last but not least, the Image Speed Test. What we do and what we are trying to tell you, is that there more things than page load. This test is extremely focused on images and how they can be optimized and improved.
We can see that for the image that is analyzed on the comparison, we’re having like a 97% of savings if we were properly to optimize that image. That means that we could have 97% better results on that image, and this will impact on the general results of the whole website.
The interesting thing is that this test is focused on educating and giving useful information to you. Below the image, you can see some advice and suggestions, for example, the size of the image. It’s 100px square and based on the simulation for desktop, the Image Speed Test identifies it should be 80 x 80 px, and this is a huge change! Other suggestions that you can find are the correct or better image format you should use to optimize your image. All these improvements will decrease Image weight.
Images: the biggest part of your website
In the next report box, you can visualize the potential savings by optimizing all your images (not specifically one as we see on the report above). Reaching this number means applying all the techniques and suggestions given. In the G2 case you can go from 1.38 MB to less than 700 KB. This would really speed up your website!
Usually, images are taking the biggest part of your website, and are the heaviest resource that e-commerce, or any website in general, has. Try this tool, run a test of your website, and see how much you can save by optimizing your images. If you want to get deep into this tool and learn how to take advantage of the Image Speed Test, here is an article with all the data you need.
Set a Monitor or an alarm for web performance
This is really important. If you are not going to set a monitor or an alarm, just go away… I really recommend keeping a close eye on your web performance. If you haven’t done it today, today is the day to start.
Change your mindset and keep track of it(not just for 2 or 3 weeks). Web performance is about constancy and keeping track of your progress. The websites are dynamic and constantly changing, that’s why this is a task you must have under control. Keep the work and effort during the time, otherwise, it’s very easy to lose everything.
This is an example when you update something on your website, and this could impact your web performance. We can see here that the performance score went down from 95% to less than 60%. Looking at the other graph, we see that the total page weight, on another date went up from 500 KB to 2.5 MB, and the same happened with Page Load.
We can understand that we are adding something very heavy for our website, and that is affecting web performance. This is the perfect time to call our team and see what’s happening to take action.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away”
Antonie de Saint-Exupéry
Conclusion
Keep an eye on your Website Performance- and not just for a couple of weeks. Set an alarm or receive an email with your report.
Don’t try to solve everything- Prioritize
Involve your team, tell which are your goals in terms of performance.
Thanks for reading!
Post first published at: https://blog.piio.co/web-performance/web-performance-for-humans/
Top comments (0)