Your website’s visitors are frustrated. Maybe really frustrated to the point where they’re switching to your competitor because your website is too slow, creating a poor user experience. This costs you business. Want to fix this? Keep reading.
A great user experience (UX) starts with a fast-loading site. While speed is far from the only factor of a good user experience, a fast-loading site is basic enough that if this aspect of user experience isn’t up to par, the rest of the customer’s interaction with your site will be tainted.
The initial contact with your site and brand is of prime importance at setting expectations and positive feelings. Leverage our page speed optimization quick tips to create a better user experience and enjoy greater conversions.
But before we get into our top tips for optimizing page speed, let’s establish why this should be a Q1 2022 priority for your team with some jaw-dropping stats about page speed optimization.
The Business Case for Optimizing User Experience (UX)
We all know that a slow-loading site is annoying. However, you may not realize just how quickly and often that frustration translates into lost business.
According to a 2020 Deloitte study, if a site takes more than 1 second to load, people are seriously frustrated; beyond 10 seconds, most users will give up on the site (measured as bounce rate), and probably won’t ever return. In addition to negatively impacting search rankings, a slow-loading site negatively impacts user engagement, loyalty, brand perception and sales.
How much? This puts it in perspective:
Image data source: Deloitte
83% of customers say that the experience a company provides is as important as its products or services.
59% are willing to pay more for a great experience.
61% of customers have switched to a competitor who provides a better experience.
These are astonishing numbers and underscore the business case for an optimized user experience. So how do we reduce frustration and retain more of those lost potential customers? Read on for our best page speed optimization tips for a better user experience (UX).
Google considers the speed aspect of user experience so important that it incorporates a number of metrics, called the Core Web Vitals, into its ranking algorithm, designed specifically to measure how fast a site feels to a user.
For example, if the site is coded to load the above-the-fold content first, before the rest of the page, the site will feel like it is loading faster to the user because they will be able to see and use the content right in front of them right away, even if the content further down the page hasn’t loaded yet.
Google Prioritizes a Fast-Loading Website on Mobile Devices
Google initiated mobile-first indexing which rewards websites with a better user experience on mobile devices. This impacts your website from a SEO perspective as well as Google Ads, given user experience is part of how Google evaluates an ad’s landing page.
One thing is for certain, UX is highly important and will continue to be emphasized in 2022 and beyond. The three main Core Web Vitals metrics for page speed are:
- Largest Colourful Paint (LCP) measures how quickly the largest elements such as images, animations, or text show up.
- Cumulative Layout Shift (CLS) measures how much elements shift as the page is loading.
- First Input Delay (FID) measures how quickly a site becomes interactive and provides responses to clicks.
With these metrics in mind, here are our top 5 tips to speed up your site so it will feel blazingly fast to your users and will pass Google’s Core Web Vitals so your ranking will improve as well.
Optimize Image Size and Quality
This speed-enhancing recommendation is almost as old as the web itself, but it is so important it must be said again. Many websites have large images as the Largest Colorful Paint. Basically, make sure you serve the images in the size you need, and compress them well. Jpg works best for photos, while png is best for graphics. New image formats such as JPEG 2000, JPEG XR, or WebP shrinks image size while maintaining quality. Since it is so important to speed up the load time on mobile, you might consider removing the above-the-fold photo just on mobile, perhaps using a graphic or pattern instead.
As well as reducing the image file size, consider using a Content Delivery Network (CDN). A CDN is a network of servers in distributed locations, so the server closest to the user will serve up your content, speeding up the process. There are also image CDNs, which will give you more control over how your images are served up. At Stikky we use Cloudflare but there are other fast CDN providers worth considering.
Use Lazy Loading
Lazy loading speeds up the initial loading of a site by only loading those images that are within the viewport. As the user scrolls down the page images are progressively loaded. This technique is so popular and effective that WordPress added a native default loading to all images in version 5.5. This augmented reality software company’s site is a great example of lazy loading.
Use Internal or Inline CSS for Critical CSS
Critical CSS are all the style directives used to display and format the content in the above-the-fold area of a website. Most often, the style rules for a page or website are stored in at least one external file called a style sheet. The browser must fetch the external stylesheet before it is able to render the page. The more files the browser needs to fetch, the slower the load time.
You may have seen the term “render-blocking CSS”. This means that the page can’t be displayed until the CSS is fetched.
As a rule, inline style coding is frowned upon, but there are occasions for it, and speeding up the appearance of the critical part of a website — that part that a user sees first — is one of them.
To be clear, it doesn’t actually speed up the total load time of the page, it just makes it appear faster to the user. This is a job for your developer or ours, and they can either code it by hand, or use an application that will do it for them.
Reduce JavaScript Execution
JavaScript files can also block the rendering of a page, making it appear slow to the user. The browser needs to fetch JavaScript files and then execute those files for the page to become interactive among other things, which affects the FID (First Input Delay) score of the Core Web Vitals. If your site is deemed to have a poor FID, it means that it took more than 300 milliseconds to become interactive.
Besides minifying, compressing and consolidating your JavaScript files, you can also use defer JavaScript files that aren’t essential to the rendering of the page, speeding up it’s time to interactivity.
Specify Room for Images and Embeds
How annoying is it when a site is loading, you’re clicking a link, then suddenly the page shifts and an ad appears in that spot and that’s what you end up clicking?
To solve this, add width and height attributes to the img tag. This will allow the browser to determine the aspect ratio and leave space even before the image is loaded. This goes for ads or injected content as well. This won’t make your page actually load faster, but it will sure be less frustrating for the user!
To Sum Up Better User Experience in 1 Word: Fast
So there you have it: 5 tips to make your site feel fast and a pleasure to use. The benefits are far-reaching. Not only will your customers be happy and more apt to reward you with conversions and positive reviews, your Google ranking will increase. That means more people will come to your site, and on it goes. User Experience is all about details and small things matter, but they can add up to major benefits for both your customers and you!
Of course, if you need assistance with page speed optimization, we’re here to help.
