How to get on top of your website’s performance
A faster website only bears fruit. None of your customers ever thought “Hm, slow down, this website is too fast”. On the contrary, they want an effortless and efficient user experience and your website’s speed plays a big part in that. Like we’ve told before: your customers’ time is your money. As your website loads faster, less people will abandon your website, they will stay longer and ultimately your bounce rate will benefit. A good performing website even impacts SEO, making sure it’ll be easier for (potential) customers to find you. A faster website improves conversion, it increases visitor satisfaction and it reduces visitor abandonment.
Behind the simplicity of the performance metrics hides a very complex reality. One where visual and UX design, technical limitations, chunky data monitoring tools, unreasonable requests from clients, tight deadlines and general sloppiness drag down the page performance. Weighing every decision against its performance impact can be bothersome and counter-productive, especially when the factual impact can only be measured once the website is up and running. Instead of hoping for the best, we present you some simple steps to follow to get up to speed on your website’s performance. They make sure to focus on the right things and thus set priorities in your decision making.
1. Set up real user monitoring
Real world data tells you how people in the wild experience your website. This is the data that truly matters, because these numbers will decide whether visitors are going to stick around or not. It can be found by default in the most common analytics tools (think Google Analytics), which many websites are already using. Do mind that running these tools will always result in a small performance hit, as they are javascript-dependent.
It’s as simple as inserting a little javascript into your website and your tool of choice will start sampling actual user load times. The only thing that may need some tweaking is the sample rate. Unless you have large visitor volumes (Google Analytics defaults to a 1% sample rate, assuming 1 million page views per day), if might be useful to increase the sample rate to get more stable and thus more valuable data.
2. Set up benchmark monitoring
The problem with real world data is that there are so many variables impacting the data, that it can be incredibly difficult to draw solid conclusions from them. Worse still is that some of the most important variables (like connection speed and processor load) are completely outside of your own control. For some people, your website will be slow no matter how lean and mean you manage to make it.
Which is exactly why benchmark data is almost as essential as real world data, especially if you plan to actively improve your performance. Benchmark data aims to remove as many variables as possible. It’s virtually impossible to create a uniformly stable benchmarking environment, but by loading a website from a single server, on a single connection at regular intervals you’ll get a much clearer idea of what exactly is slowing things down and how severe the impact of specific changes and proposed improvements are.
While it may yield very different results from real user monitoring, both approaches are useful in their own specific way. As such, you don’t have to make a choice between them, instead you can simply supplement one with the other in order to draw better conclusions from the data at hand.
2.1 Decide what pages to track
Benchmark monitoring works on specific URLs. These have to be manually picked, so simply monitoring the entire site is not an (easy) option. Ideally, you determine all the different page templates used on your website, after which you find a good representative page for each template. Since the data points themselves have relatively little value, it is recommended to pick the heaviest/slowest page available. This means you’ll be looking at a worst case scenario, but it also gives you the most information when you’re planning for areas to tackle later on.
2.2 Pick a tool
Benchmark data requires more specific tools like Pingdom or StatusCake. Setting these up takes some extra configuration work, but the upside is that these tools gather data without any impact on performance. The only thing to remember is that these tools pretend to be actual visitors, so you might want to exclude them in your real user monitoring tool to keep that data as clean as possible.
3. Define your performance goals
Before you start digging into your data, it’s important to define goals for load time, page size and page requests. These are the three key performance indicators that will help you come up with areas to improve. A fourth indicator that’s also useful is CPU load (on the client device), but since that data is hard to come by this is not something that can be monitored reliably right now.
3.1 Looking for Industry Standards
Getting hard data is not that easy. Faster and smaller is always better, but looking around the web there are some numbers that keep popping up. For page speed, Google suggests that you keep the page load under 2–3 seconds (real user data). For page size, 1MB is a solid goal. Number of requests is less defined and depends on various factors. Mind that these goals are quite tight already, so chances are your initial measurements will be exceeding them by quite a large margin.
3.2 Check your mobile vs desktop visitors
The balance between your mobile and desktop visitors is important, as this will largely determine what indicators to focus on. Mobile users are mostly constrained by connection speed and are best helped by reducing the size of the page, while desktop users are mostly constrained by processing power, meaning that the reduction of requests, code and other processor-heavy duties will have a bigger impact on performance.
3.3 Determine whether your site runs on http1 or http2
Another important thing to take into account is whether your website is served over http1 or http2. When it is served over http1, browsers will only be able to download a very limited amount of resources (think css, javascript, images) simultaneously, meaning that the browser is constantly waiting for one resource to be downloaded before starting on the next. In this case, reducing the number of request will have a sizeable impact on the overall performance. But when served over http2, browsers will be able to download all external resources at once. This means that splitting up files in smaller chunks and only servicing the code needed to render a page (greatly reducing code and page size, but increasing the number of requests) is a much better approach. Long story short, whether you should aim for a lesser or greater number of requests depends on which http protocol your websites uses.
4. Draw up a list of quick fixes
Once you have everything set up, you can start looking for ways to improve your performance. The important takeaway here is that there is no easy way to fix performance problems. When your website is slow, it’s rarely just one single thing slowing it down. But with the benchmark and real world data to delve into, it shouldn’t be too hard to draw up a list of quick wins that will eliminate some of the worst offenders. Improvements that target all pages are the most likely contenders, but it’s also useful to look at your most visited sections/pages and work on those a bit more extensively.
Common performance pitfalls to look for are lack of or inefficient caching, code bloat, unoptimized images, frivolous design elements and exuberant amounts of tracking solutions. Whether these problems are easy to fix though largely depends on the technical setup of a website and needs to be decided on a case by case basis.
5. Monitor your data by building graphs
It’s one thing to consult your data and draw up a list of areas up for improvement, keeping your performance in check over a longer period of time is equally important. A website is always in flux, performance is rarely considered when changes are made and when new things are added.
Building some graphs and dashboards can help a great deal with this. Most benchmarking and real user monitoring tools have options to export their data, which is ideal if you want to create a few dashboards that keep track of the day to day changes in performance. At Internet Architects we have set up an automated process where we extract the necessary data from our monitoring tools and use that data to rapport changes in page size, requests and load times, either per page or for the entire website. This way we can keep track of the performance at all times and act quickly when performance starts to slide below acceptable thresholds.
Even when there isn’t dedicated time or budget to work on performance, confronting people working on the site with these dashboards on a regular basis should be enough of a push to keep the performance within bounds. Setting them up takes relatively little effort, but the return is considerable. In the end, your users will benefit and when your users benefit, your website thrives. So track and recognize your pitfalls. Optimizing your images, page sizes, design elements and code by reducing their size or amount can be a good starting point to trim unnecessary bloat.
6. Getting your hands dirty
Once you’re passed the stage of quick wins, it’s important to dig a little deeper and get working on the more structural, thorough problems that drag the performance down. Split up css and javascript and load them only were needed, try to reuse components as much as possible and redesign elements to make them leaner. This will touch the core of your code base and involve rewriting certain parts in order to streamline the delivery of your pages. While this may seem daunting at first, this step is essential in guaranteeing the performance of your website over a longer period of time.
On top of that, challenge your website periodically. If your website performs good today, that’s great, but you have no certainty it will remain this way. Once you’ve optimized your website’s performance, you can’t just leave it there. Check regularly, improve continuously. Only in this way are you committed to an effortless customer experience.
By Niels Matthijs, Front-end developer at Internet Architects
This article first appeared on internetarchitects.be
