Continuing the conversation on Software Application Speed, I look at one of the means of improvement - Website Performance Optimisation. In this episode I introduce Website Performance Optimisation - what it is, why we do it and how to make a start.
Or listen at:
Published: Wed, 14 Jul 2021 16:38:54 GMT
Links
Google PageSpeed Insights page
Transcript
Hello and welcome back to the Better ROI from Software Development podcast.
In this episode, I'm going to continue talking about speed, the speed of our applications, as I introduced in Episode 91.
This time, I'm going to focus specifically on Web performance Optimisation.
While this episode will mainly be focussed on websites, a lot of the principles are still true for other types of applications; whether that be a mobile application or an internal application or maybe a B2B system. Many of the principles I described during this probably apply to almost all software systems. But as I say, today will be focussed on websites.
So what is Website Performance Optimisation?
Wikipedia describes Web Performance as:.
"Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance.
Faster website download speeds have been shown to increase visitor retention and loyalty and user satisfaction"
Optimisations are techniques for improving that Website Performance, which ultimately talks to speed, which ultimately talks to a better customer experience, better outcomes for you as an organisation.
And as I've talked in previous episodes, that speed performance, that website performance, will have an impact on your Search Engine Optimisation, your SEO. Google and other search engines will use the speed of your pages on your website to help rank results for customer searches.
There are a lot of different techniques that can be used within website performance optimisation - in this episode, I'm not going to cover all of them, mainly due to the fact there are so many.
I do, however, want to cover some top level categories. And in those top level categories, I want to talk about the purely technical, bloat, and functional efficiency.
The purely technical are the technical solutions that your development team can make to your website to make them faster. Now there's a lot of those out there as well, there's a lot of categories out there, and for this, a lot of it will come down to learning and research by your team.
I've said before that learning is probably one of the most important things we can do for our software development teams - helping them to learn, providing them training, providing them with the resources and the time to learn more, to take that learning and then apply it back to their work.
And certainly there are some very deeply technical subjects that can come in on Website Performance Optimisation - some are relatively easy, but some will take a level of learning and knowledge to get to a point where they can understand and apply effectively.
Some things may be fairly simple, for example, reducing the size of an image.
If you take a picture directly from your camera, upload it and put it onto your website, it will be very, very high quality - it will be photo quality. It will be a level that you'd expect to be able to use to print.
That's too high quality for web users, they don't need that level of quality, their displays aren't good enough to show at that level of quality, so you can reduce the quality of it, which reduces the size of it. By reducing the size, it's quicker to load. But reducing the quality doesn't affect the actual impact to the customer, the actual impact to the user.
But it's those small technical efficiencies that can soon add up on a large site, especially a site that's very image rich.
And there are similar techniques for other types of files that may be being used by your website.
Again, I'm not going to go too far into those in this episode, because to be honest, they're quite technical and they're better covered off by research and learning by a development team.
The next technique was looking at bloat.
Its quite often that we want to put everything on to our website, everything onto our shop window for the customers to see what we've got available. But as with most things, less is more.
Having too much on there has two affect;
Firstly, it can be confusing to the customer when you're bombarded with so many possible options, so many images, so many things trying to grab your attention - it becomes a mess. It becomes very difficult to see what you're there to do, becomes very difficult to see what you want to achieve.
Landing on a site that is so busy and full of distraction actually takes you away from what you went there in the first place for.
And the other thing is all of that is content, all of that has an overhead because it has to be transferred from your server to the customer's browser. So the more you're transferring from your server to the customer's browser, the slower the experience will be.
So bloat is very much a function of working with the software developers, working with the team that designed the website and making sure that you've got the right things on the website, that you pare it back, you minimalize it almost, back to what is important.
And it really does come back to what is core on your website.
I find a useful technique is to actually open your website in a mobile phone, ideally one with quite a small display. What do you see immediately? Is that what you want your customer to see immediately?
You have to forget about, you know, the website, you know, what is actually there, you know how to get to the various features and options and products that you're trying to put across - but the customer doesn't.
The customer sees what they see in that very small window when they load your website.
So if it isn't obvious from that first page, that first screen that you can see on a small mobile screen, wat your website is about and what it does, that's when you need to maybe think about redesigning it and removing bloat.
And this comes back a bit to the user experience that we talked about in the last episode, making sure the customer sees what is appropriate and gets the best experience they can get from that interaction with you - well your website in this case.
You'll find that designers talk about something called "above the fold". This is where, while you may have lots of information on your page, especially if you scroll down, you need to focus on what's important on the visible part of the page that the customer sees initially.
Now this will actually look different depending on what kind of device the customer is using. If they're using a very large screen monitor, they get a lot of your website up and visible. Laptop, slightly less. Mobile phone, less again. Maybe they're using a TV, in which case he might get even bigger amounts.
So your customer will see different parts of your page depending on the device they're using. Now you can monitor for what types of devices your customers are using, but it's a good place to start to assume it's going to be mobile. Thus, when I say use a small mobile phone, use one that your customers will be using. Use that to look at what they see when they hit your website.
Is what you're being shown when you hit that page the most important, the most critical, the most valuable thing for your customer.
And let's talk about functional efficiency.
I talked about this a bit when I talked about the UX/ UI design in the last episode. I talk about removing unnecessary steps, removing unnecessary steps.
Think about this in terms of Amazon and they're buy now button. It removes steps from the process of having to add a product to a basket, then going through a check up process - it's a one-click, buy-now - it goes through using your default settings.
These are functional efficiencies which help a customer use your website faster.
Let's move on to the process.
What sort of process should you go for when you're trying to work your way through Web Performance Optimisation?
Well, long term listeners aren't going to be surprised when I say an experimental mindset. A have a hypothesis, make the change, monitor, review, repeat. That small incremental change mindset of testing, seeing whether a hypothesis is correct and then taking steps based on the results of that experiment.
And that's true very much in this as well.
And a good place to start in that process is to use Google's own Page Speed Insights page. I'll provide a link in the shownotes, but it's a great place to start. You enter the page that you want to check, say, your home page for your website. It will then go through and produce a report of potential optimisations. It will actually give you a score of how well your page performs for performance.
It will then give you a list of possible improvements that you may want to apply to your website to move it up a grade. This is great for giving you some really actionable things to look at.
Not only does it allow us to monitor the state of that page over time - so if you're making changes and then repeating the exercise with the Google page Speed Insights page, not only can you see if you're actually having a positive effect, but you're also able to get an idea of what Google thinks you should be doing, which given that most of the Search Engine Optimisation traffic will come from Google, that's a useful place to look.
And certainly if your team is new to trying to do Website Performance Optimisation, that list of improvements can be a great place to really start the ball rolling. Not only does it provide potential improvements, but it also will then give you links to how you may potentially go about doing that. Which will, of course, help your team in the learning and research to understand how to apply those changes.
And using that insights page, you can also see how quickly does a customer see something, how quickly is a customer then able to interact with your website? Two very important characteristics in today's mobile age.
And you can also use the insights page to look at your competitors websites.
Do that now, look at your website versus your competitors. How well do you compare? If your competitor is faster, maybe you want to think about trying to catch up with them.
During any work you do to try and improve that Website Performance Optimisation, remember your audience. You need to know your customer. You need to know what sort of devices and speed they may be getting and keep that in mind.
We will often give our developers good equipment so that they are in a position to be effective and efficient in the work they do. They will also be likely very close to the website in terms of distance. They have good network connections. So when they're testing stuff, things may work really fast and they may think that's great, but that doesn't mean the customer is going to have the same experience.
The customer may be working on much slower equipment and almost certainly will be working a much slower network speed because they're not sat next to the servers.
And it really does matter what your customer will have in terms of internet speed and devices available to them.
Some countries, they have the top speed, they have the best devices. More developing nations, they won't. So if you're trying to interact with the more developing nations, you need to assume they're going to be using much slower devices and much slower connections.
So much so, you should probably think about investing in the devices that customers use. There are ways to emulate slow speed within the Web browser as a test, but I'd certainly always advise if you know your customers are using certain types of devices, then try to get those devices and try and emulate what the customer sees as much as you possibly can.
Website Performance Optimisation is a very broad subject, similar to the User Experience Design that I talked about in the last episode. This episode was here to serve as an introduction to how to get started, some of the tools that you can use, the process you should think about, and, of course, working in that small iterative change so that you can see whether or not your change is causing improvement or not, thus making sure you're managing your ROI, managing your return on investment.
There is a considerable wealth of documentation out there about Website Performance Optimisation. So certainly make sure that you're providing your teams the time and the resources to be able to exploit them and bring back that learning to help you improve your Website Performance Optimisation.
If you come across a specific technique you would like me to dig into further, please let me know. You can reached out to me directly or follow the link in the shownotes to the roadmap and add it there. I'm more than happy to try and research and provide advice on certain techniques. Please let me know.
Thank you for taking the time to listen to this episode. I look forward to speaking to you again next week.