Page Speed Best Practices

In today’s digital world, everything comes down to speed. It doesn’t matter if you have the most complex and good-looking site if it takes forever to load. There are various reasons why your web pages may load slowly, but no matter the cause, today I’m going to show you some useful tips and techniques on how to improve your website performance and speed and ensure a smooth user experience.

Why Is Page Speed Important

Research shows that the amount of time a user will wait before losing focus is roughly from 0.3 to 3 seconds. If your website takes longer than that to display important information, the user will lose focus and possibly close the browser window. Websites that are faster will have lower bounce rates, higher conversion rates, higher ranking in organic search, and, of course, they will have an overall better user experience. The bottom line is that slow websites will cost you money and will hurt your brand. On the other hand, making your web pages load faster will positively impact traffic, user retention, and sales.

What Affects Site Speed

There are a number of reasons why your site load time might be lagging. It could be anything, but the most common factors are:

• Heavy CSS and JavaScript use

• Poor server/hosting plan

• Large image sizes

• Not using browser cache

• Too many widgets and plugins

• Hotlinking images and other resources from slow servers

• Traffic volume

• Older browsers

• Slow network connection (mobile devices)

That means there is a whole range of steps you can take to enhance page speed, which I’ll explain later in the post. But before you start troubleshooting to improve website performance, you need to test your page load time.

How to Measure Website Speed

Before making any changes, it’s important to measure first. Measuring specific metrics will let you compare your website performance before and after the changes, and will let you know if your changes are actually working. There are many metrics that you can measure as the website owner, but I would suggest focusing on Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. These three metrics are defined as Core Web Vitals by Google.

Best Practices to Speed Up Your Website

As you’ve seen, there are a lot of factors that influence how long it takes to load each page on your website. But there are just as many ways you can improve the performance of your website. Here are some of them:

• Reduce the Number of HTTP Requests

• Switch to HTTP/2

• Optimize Image Sizes

• Use a Content Delivery Network (CDN)

• Write Mobile-First Code

• Minify and Combine CSS, JavaScript, and HTML Files

• Reduce the Number of Plugins

• Use Website Caching

Conclusion

Improving website performance can be challenging, especially with the vast differences in devices, connectivity, browsers, and operating systems, but it will have a significant positive impact on your business if your business relies on your website as one of the main channels for reaching your customers.

Also, keep in mind that this is a process that doesn’t have a clearly defined start and endpoint. You don’t have to implement all of the suggested changes today. Spend some time looking into the monitoring tool results, make changes on the website, and then compare the performance before and after the changes.

What is a heatmap?

A heatmap shows you how visitors interact with your website and – just as importantly – how they don’t interact. In statistics, it’s a graphical representation of data where the data values are shown as colors.

Where other services like Google Analytics show static data such as session length, heat maps give extraordinary details about how your users actually use your site. This means you can pinpoint elements of your website layout that deserve extra attention and care.

Photo from Hotjar

The data on the left is the same as that on the right—but one is much easier to understand. The practice we now call heatmaps is thought to have originated in the 19th century, where manual gray-scale shading was used to depict data patterns in matrices and tables.

An early heat map showing population density in 19th Century Paris districts. Photo from Hotjar.

The term heatmap was first trademarked in the early 1990s, when software designer Cormac Kinney created a tool to graphically display real-time financial market information.

Analyzing your web traffic is extremely important when it comes to optimizing your site for conversions and user experience. Heatmaps are a great way of analyzing which parts of your website are popular with users and which parts need improvement. Mouseflow, Hotjar, Attention Insight and Visitor Analytics are definitely some of the best software.

The benefits of using heat maps on your website

Heatmaps help product managers and website owners understand how people interact with their website pages to find answers to critical business questions and goals such as ‘why are my users not converting?’ or ‘how do I get more visitors to take action?’ Using heatmaps, you can determine if users are:

• Reaching important content or failing to see it

• Finding and using a page’s main links, buttons, opt-ins, and CTAs

• Getting distracted by non-clickable elements

• Experiencing issues across devices

As a visual tool, heat maps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website. They're also useful on a wider business scale: heat maps let you show team members and stakeholders what’s happening and get their buy-in more easily when changes are needed—it’s hard to argue with a heat map!

What are the different types of heatmaps?

Heatmap is really an umbrella term for different heatmapping tools: scroll maps, click maps, and move maps. Knowing the difference is handy, as each type helps you investigate a slightly different aspect of your website and product performance.

1. Scroll Maps

An example scroll map

Scroll maps show you the exact percentage of people who scroll down to any point on the page: the redder the area, the more visitors saw it.

2. Click Maps

A click map example

Click maps show you an aggregate of where visitors click their mouse on desktop devices and tap their finger on mobile devices. The map is color-coded to show the elements that have been clicked and tapped the most (red, orange, yellow).

3. Move maps

A move map example

Move maps track where desktop users move their mouse as they navigate the page. The hot spots in a move map represent where users have moved their cursor on a page, and research suggests a correlation between where people are looking and where their mouse is—meaning that a move map gives you an indication of where people might be looking as they go through your page.

4. Desktop & mobile heatmaps

A desktop (left) and mobile (right) click map

Desktop and mobile heat maps help you compare the performance of your website on different devices. For example, content that is prominent on a desktop page might sit much further below the fold on a phone—and you need to see if interaction differs, and how.

Conclusion

Heatmaps are easy to create and understand, and they let you discover actionable insights that help you improve the user journey and your product pages to increase retention and sign-ups on your website!

Photo by Sharon McCutcheon on Unsplash

A/B Testing in UX Design: When and Why It’s Worth It

A/B testing (split testing) is a quantitative method of finding the best performing version of CTA, copy, image, or any other variable. To start A/B testing, prepare two or more versions of a single element, randomly split your user group in two, and see which version performs better. Great tools for A/B testing are Unbounce, VWO, or Optimizely.

Designing a digital product brings about numerous dilemmas: which font reads best? What call-to-action copy converts more? The multitude of options to choose from can give designers a headache. Sure, following best practices and gut feelings is a good place to start, but it won’t take you far in a business setting, and bad design choices can negatively impact your revenue stream. So, what should you do? Base all your UX decisions on solid data. Where do you get them from? Use A/B testing. Continue reading to learn all about it.

What is A/B Testing?

An A/B test – also called split testing – is a simple experiment where users are shown two variants of a design (e.g. background image on a webpage, font size or CTA copy on a homepage, etc.) at random to find out which one performs better. The variant that makes the most users take the desired action (e.g. click the CTA button) is the winner and should be implemented, while the alternative should be discarded.

What can be tested using this method? Well, pretty much everything – from text or phrasing on buttons, through different sizes, colors, or shapes of buttons, to button or CTA placement on the page.

Why is A/B Testing Important in UX?

As mentioned, A/B testing allows you to base your product design decisions on data rather than on an opinion or a guesswork. It both democratizes design and allows your users to participate in your decision-making. A/B testing can help you learn how small changes influence user behavior, decide which approach towards design to implement, and confirms that a new design is going in the right direction. Using A/B testing for different elements of your digital product will also improve the overall user experience over time, as well as increase your conversion.

Importantly, a good UX will make users stay on a website or in the app – or will make them visit it again – while bad UX will do the opposite. So, running A/B tests is a great way of conducting UX research while your product is live, and deciding what works and what doesn’t work for your target users. It’s a much more effective approach as it saves your time and resources spent on the expensive, environmental testing conducted before bringing a product to market.

How to Conduct A/B Testing Just Right

You need to base your A/B test on an educated guess – try to figure out what could be your target users’ pain point, i.e. what could be preventing them from taking a desired action. To conduct an A/B test you need to define a goal (e.g. I want my “Request a demo” page to generate more leads), formulate a solid hypothesis (e.g. I think that changing the CTA copy from “Contact us” to “Book demo” will engage our website visitors more and increase the number of leads), and two versions of a variable (e.g. Book demo and Contact us). The latter are called the altered test (test B, the variable), while the controlled test (test A) is what you compare your altered test against.

Create the two versions of a single variable and make your prototype ready to share for testing. Then monitor it to make sure the test is running correctly. For high-traffic websites, test the smallest change possible; for low-traffic websites you can go bigger and test e.g. two completely different versions of a web design.

Your test should run long enough to provide you with meaningful, statistically significant results. The bigger the sample size and the more information you collect, the more reliable your test results will be. Remember to only analyze the results of a completed A/B test and only implement the clear winner into your digital product. And what should you do with a “no difference” result? Well, be glad about it, as it proves that you can implement the design you prefer with no risk!

Remember: don’t be afraid to formulate different hypotheses and test them. In A/B testing there are no stupid questions! Just make sure you prioritize your tests according to what you know from your customer research.

A/B Testing Tools

There are a lot of tools dedicated to A/B testing out there. Among the most popular are:

• Unbounce – a drag-and-drop landing page builder that allows you create and publish them without the need to use coding. It is an easy-to-use and fast tool for getting more conversions from your traffic.

• VWO – the world’s leading web testing and conversion optimization platform. It allows you to conduct qualitative and quantitative user research, build an experimentation roadmap and run continuous experiments on your digital products.

• Optimizely – an experimentation platform that helps build and run A/B tests on websites. The service allows you to create and run a variety of experiments for making design choices that will increase your conversion rates.

Stop Guessing, Start Testing!

Photo by Adrià Tormo on Unsplash