The Page Speed Issue

….and what to do about it.

In a fast-paced world, no one likes to wait, especially your website visitors. You could have the most visually appealing landing pages, with perfectly placed CTAs, visuals, and compelling copy. However, if a well-crafted website doesn’t load at an appropriate speed, all your effort goes to waste. For that reason, page speed is an essential component of UX design. 

A poor page speed score means that the content on your page takes too long to load. It’ll bore the visitor, and they’ll bounce to a better-optimized web page. 

In this article, we’re going to break down the process of improving your page speed, step by step. We’ll also list essential tools that you can use to test and monitor your page speed. 

Let’s dive right in. 

What Is Page Speed and Why Does It Matter?

Page speed is the time it takes for your web page to load. It’s a crucial factor that directly affects the visitor’s retention on your website. 

Some people often mix up the term with “site speed.” However, site speed is the total time that it takes for your entire website to load. It indicates how quickly a website responds to the user’s web requests. Page speed is the time it takes to load a single web page.  

You can gauge the page speed by evaluating the following performance indicators:

• First Input Delay (FID): FID is the time between the user’s interaction on your website and the browser’s response to that action.  
• Time to First Byte (TTFB): TTFB is the amount of time between a user’s HTTP request and the first byte of information they receive on their browser.
• First Contentful Paint (FCP): This is the time your page takes to display the first piece of content saved in your DOM (Document Object Model). 
• Largest Contentful Paint (LCP): LCP is the time required for the largest piece of content to appear on the viewport. 
• Cumulative Layout Shift (CLS): CLS is the unexpected shift of elements (videos, images, buttons, etc.) on the page while loading. 

By taking care of these essentials, you can set up your website pages to load quickly. 

A good step would be to check the average page speed for your industry and compare it with your website to see where you stand.

Now, let’s look at the two main reasons that page speed is so important.

• Speed Is a Direct Ranking Factor

First and foremost, speed impacts SEO.

Google officially declared site speed as a direct search ranking factor a long time ago. This includes the performance of the individual web pages of a website.

Simply put, sluggish landing pages could be one of the many reasons that you’re often unable to bag the first spot on the SERPs.

It could also very well be the only reason in rare cases, where other factors such as quality and depth of content, domain rating/authority, and backlinks have all been accounted for.

With SEO, the more thorough your efforts are, the better, so why leave anything to chance?

• It Can Make or Break the User Experience

As discussed, speed has become a critical element of web UX.

Landing pages that take their sweet time to load, are sluggish, and are just overall difficult to use could drive users away from your website.

In fact, nearly 53% of visitors will leave your website if it takes longer than 3 seconds to load.

How to Improve Page Speed? [A Step-by-Step Guide]

We’ve established that webmasters can’t compromise on page speed. 

But how do you improve it?

Let’s take a look.

Before Anything Else, Run a Test on Google PageSpeed Insights

Google PageSpeed Insights is a tool that analyzes your website’s performance and provides suggestions to improve it. It scores websites and pages on a scale of 0-100 and even provides smart suggestions to improve the score. 

The method for running a Google PageSpeed Insights test is quite simple. 

Paste the URL of your webpage into PageSpeed Insights, and click Analyze. It will then run a quick scan of your page or the entire website and generate an in-depth report, including:

• Your score.
• The potential issues.
• Suggestions for solving them.

After getting these suggestions from PageSpeed Insights, you’ll need to buckle down and get to work.

While the suggestions will obviously vary from report to report, all the underlying page speed-related issues can be tied to a handful of factors.

Some of these areas can be dealt with right away, whereas others might take more time (and authorization).

Steps That You Can Take Right Away

Here are low-hanging fruits when it comes to improving page speed.

• Compress Images

Make sure that you use appropriately-sized image files on your web pages. You can use Photoshop to maintain the quality of your PNGs and JPEGs.

You can also use an online tool like tinypng or a plugin like Smush (if you’re on WordPress).

Furthermore, you can use CSS sprites to add your frequently used images (e.g., buttons and icons) in a template for your site. 

CSS sprites combine all your images into one larger image that loads at once and saves your page from making multiple HTTP requests for each page. This reduces the user’s overall waiting time that otherwise increases when loading multiple images. 

• Minify the Source Code

While coding, programmers often add comments, formatting, and other redundant characters, like spaces and commas. 

They may be necessary for decluttering and simplifying your code, but they’re irrelevant for the search engine (and not really required for the end product to function). 

Therefore, try minifying the source code of your web page using tools like Minifier (for CSS and JS) and Minify Code (for HTML).

• Compress the Source Code

In addition to removing unnecessary characters and whitespace, you might also need to compress all your CSS, JS, and HTML files that are larger than 150 bytes. 

Compressed files are easier to read and process; hence, they reduce the page speed.

There are myriad online tools and WordPress plugins that can help with that.

• Use Browser Caching

Browser caching is, in the simplest of terms, a time-saving technique. 

With browser caching, your user’s browser temporarily saves the information of your web page so whenever they revisit, it won’t have to reload it from scratch. 

You can use tools like GTMetrix to leverage browser caching to your pages.

Steps That May Take More Time (and May Require Authorization)

There are a few more methods to reduce the page speed that may require technical assistance and authorization. Therefore, they might take longer to accomplish. 

Nonetheless, they provide long-term results and can drastically improve your website’s efficiency. 

• Use a CDN (Content Distribution Network)

First things first, consider using a Content Distribution Network (CDN).

CDNs enable fast content delivery by distributing the delivery load across different servers. 

These distributed servers are set across different geographical locations. 

This way, when a user makes a web request from a particular region, it goes straight to the nearest CDN and fetches the necessary information, improving the speed for that user. 

• Improve Server Response Time

Your server response time is compromised by slow routing, slow database queries, and lack of memory. 

Analyze all these performance-snagging issues, and improve your response time by fixing them.

Your Google PageSpeed Insights report might be able to identify those culprits.

• Decrease the Number of Redirects

Whenever one of your pages redirects the user to a different page, they have to wait for an additional HTTP request-response cycle to complete. 

For that reason, use redirects only when necessary, and check your website for nonessential redirects.

• Use Accelerated Mobile Pages (AMP)

Nearly half (51.53%) of the world’s population uses mobile devices to access the web.

However, an average mobile device isn’t as efficient as an average desktop (in terms of processing speed and stable connectivity).

With that in mind, optimizing a website for mobile entails taking additional steps and a slightly different approach than what you’d do for regular desktop optimization.

To help simplify the process, Google launched accelerated mobile pages (AMP), which is basically an open-source framework. It’s a subset of HTML, which when used to develop a web page, hands over most of the loading process to Google.

The basic rules of creating AMP pages are simple:

• Limit the use of CSS and JS.

• Use AMP-provided tags.

Since that’s a completely different discussion, we suggest heading over to the main resource website for AMP where you can learn more or simply asking one of your devs to handle it.

Ending Note: Keep Monitoring That Page Speed

It’s essential to monitor your websites regularly to provide the best experience to your users. 

In fact, with everyone cooped up at home due to COVID-19, this might be a good marketing task to focus on right now.

While the steps discussed above should suffice (and don’t necessarily require you to be a professional coder), consider taking help from a professional to leave no stone unturned.