Page speed optimization: What it is and how to improve it?

Imagine ordering food at your favorite restaurant, but the waiter takes forever to serve you, how would you feel about that? Ultimately, you would probably let someone know you were unhappy, first by letting the restaurant now and then by letting everyone else know by way of a bad review.

In the same vein, imagine users waiting a long time for your site to load before it displays the search results; they may become impatient and shift to a faster loading, competitor site. They could even choose to let others know about it.

We’ve known for a long time that Google takes page speed into consideration when it comes to ranking. However, slow page speed affects not only your search engine ranking, but also the on-page user experience and overall site traffic. How so? Let’s take a closer look at page speed, why it is important and what you can do to optimize it.

What is page speed?

In 2010, Google announced that page speed would impact site rankings. This important metric that Google wanted to look at refers to the time a visitor has to wait until your page is completely loaded. On average, load time for an e-commerce site takes seven seconds while the ideal load time is around three seconds or less. When users visit your website, they want instant information.

A survey about bottom line loading time shows that over 47% of users expect a page to load within two seconds, and over 40% click away if the load time exceeds three seconds. A good goal should be a 2.5 second load time. Anything longer than that can lead to a high bounce rate and ultimately a lower SERP ranking.

Where does page speed have an impact?

While many SEOs analyze and measure what elements impact site performance, it’s extremely difficult to know exactly how the Google algorithm works.

However, the recent Google leak has given us some valuable insights into Google’s innerworkings and some information has confirmed that the search engine actually demotes websites that produce a poor user experience.

Therefore, we can safely assume a slow website will impact a number of elements.

SERP ranking

Google uses page speed as a ranking factor for both mobile and desktop. Page speed, as part of the “page experience” system was removed from Google’s ranking systems documentation in 2023 which raised a lot of eyebrows.

This change came about shortly after the Helpful Content Update, leading many to believe that Google was making a conscious shift to focus more on the quality of content than the speed at which it is delivered. However, page speed is still a consequential ranking factor. According to Google:

“A search result for a resource having a short load time relative to resources having longer load times can be promoted in a presentation order, and search results for the resources having longer load times can be demoted.”

Conversion rate

Conversion rate is the percentage of users who take a desired action on your website; an action may involve making a purchase, filling out a form or clicking on a call-to-action button.

Sites that load fast have a higher average time on page and a stronger conversion rate as compared to low-speed sites. For example, when Walmart improved its load speed by one second, its conversion rate increased by 2%.

Source: Portent

User experience (UX)

User experience is another one of Google’s top priority metrics, and capitalizing on it can improve your SEO. When users have to wait longer for content to load, this can also lead to frustration, a high bounce rate and ultimately a loss of revenue.

What can lower your page speed?

Auditing your site’s performance with tools like Oncrawl can help you identify where your problems lie in regards to loading speed. But once you’ve identified the where, you’ll need to figure out what’s causing it.

Some common issues for lower page loading times can include:

• Your host server: Pick the right host that fits your business’ size and needs.
• Large images: Images that are too heavy to load can significantly impact your page speed. It is often due to extra data included in the comments or to a lack of compression.
• External embedded media: External media like videos are highly valuable but can also lower your load time.
• Unoptimized browser, plugins and app: Test your website on all browsers since they don’t all load in the same way.
• Too many ads: Aside from the fact that they can be bothersome, a lot of ads have the drawback of slowing down your page speed.
• Your UI: Some intricately designed user interfaces, containing a lot of effects can penalize your load speed.
• Widgets: Social media buttons or comment areas can also impact how fast your page loads.
• Double-barreled code: If your HTML/CSS is not efficient or too dense, it will lower your page speed.

Best practices for improving page speed

I think we have sufficiently identified why page speed can be important, so let’s now look at some best practices for optimizing it. Faster load times provide users with a seamless experience and it elevates your online presence. Here are some actionable tips I’ve found useful in the past.

Compress and optimize images

Eye-catching images and graphics boost user engagement, but if they are in large files, they slow down your site. Compared to HTML and CSS files, images take longer to load, but you can optimize them to lower the load speed.

Here are different ways to optimize your images.

• Change the image dimension: Use image editors like GIMP or Photoshop to crop to website display size.
• Reduce your image file size: Use lossy and lossless compression algorithms. Lossy compression helps you reduce any redundant pixels while lossless compression reorganizes your image data without affecting the pixels.

Below is the screenshot from Shortpixel of an HD image showing approximately 68% lossy compression. If you’re not showcasing products or photography skills, the image looks fine even after the high compression level. If you compress 10 such images before uploading them to your website, you’ll save 1.13 MB. Every little bit helps.

• Compress your images: Use available online tools like tinypng or Smush, or npm if you are a developer.
• Use lazy loading: This delays image loading until the user needs it. Instead of the image loading at once, the browser delays the request until the user scrolls to where the image is located. You may use plugins or add a lazyload to your theme to speed up your page load time. However, It’s not suggested to lazy load the media above the fold.
• Reduce the overall number of images: Are all your images really necessary? Remove images that add no value and cause image bloat. Instead, replace them with CSS styling to reduce the bloat and redundancies.

Apply GZIP compression

GZIP compression reduces file sizes transferred between your server and the user’s browser. When the web server sends the file to the browser, GZIP compression shrinks the HTTP content request and sends it to the browser in a compressed form. The browser then unzips and displays the content to the user. The technique removes unnecessary file spaces and characters, significantly improving load speed.

To enable GZIP compression, use server-side software like Apache or Nginx or a caching plugin that supports this compression. Ensure you correctly configure GZIP compression to avoid placing an extra load on the server.

The GZIP compression works in 2 steps:

1. Compressing original files which takes less space in the server.
2. Sending compressed files to the visitor’s browser and decompressing.

Both steps take milliseconds, thus benefiting both the visitors and site owners.

You can verify that your GZIP compression is enabled by:

Using built-in developer tools

If you’re looking for a quick and efficient solution, you can use your browser’s built-in developer tools to analyze your website and identify areas of improvement.

In my opinion, this is the best method because it’s straight to the point and doesn’t require any third-party tools. To use this method, open the website you wish to analyze in your browser, right-click on the page and click Inspect.

The Network tab lists all the resources, or all the files, that make up the webpage you’re viewing.

Choose any one and then click on Headers. Under Response Headers, you’ll find a content-encoding field that lists the type of compression method used.

Here’s an example of what it looks like when the GZIP compression is enabled.

Using speed test tools

Speed-checking tools provide detailed information about what elements can be fixed to achieve a higher speed score. There are tools available that can help you identify issues that might be slowing down your page speed. We’ll look at those in more detail below.

The image below shows a page speed report generated by Pingdom that has analyzed a webpage and identified certain areas for improvement.

Using GZIP compression testing tools

If your website has the GZIP feature enabled, you can use tools like Small Tools GZIP compressor and Gift of Speed. Here’s a screenshot of a website checked from Gift of Speed with compression disabled detailing how much of the site can be compressed.

To enable GZIP compression, you can use the .htaccess file or CMS plugins.

.htaccess file

Nowadays, most hosting providers offer the option to enable it from the control panel. If it is not available, you can add a few lines in the .htaccess file. The Apache web server uses this file and it is present on most CMS platforms.

Here’s the code to add before # END WordPress in .htaccess file:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

This code will compress the XML, fonts, CSS, javascript and HTML.

CMS Plugins

Content Management Systems like WordPress provide numerous plugins to get this work done; this includes plugins such as Enable GZIP Compression, WP Rocket, Hummingbird and WP Fastest Cache. Since plugins are easy to use, this method is highly recommended for beginners looking to improve their website speed.

Use a Content Delivery Network (CDN)

A CDN is a group of servers distributed across different geographical locations that promptly serve content to the end user. It utilizes caching, which helps reduce hosting bandwidth and prevents service interruptions.

Note that the same hardware receives all your user requests when you use a single server hosting. So, the time to process every request increases, extending the load time. But, when you use CDN, every user request is routed to the nearby server, and the user gets the content faster.

Let’s say your site’s original server is in California, and a user tries to access it from Belgium. A CDN will find the nearest server in your user’s network (let’s say the Netherlands) and deliver your site’s cached version to the user thus improving your site’s loading speed.

Though more expensive, a CDN benefits your website through:

• Scalability: A CDN can handle any level of traffic, it scales up and down quickly and delivers most of your assets faster.
• Boosting performance metrics: Increased page speed means users can easily access your content, which can help to boost your placement in the SERPs.
• Security: A CDN acts as a virtual security fence to block spammers, content scrapers, and false bots and protects your website from DDoS attacks.

Clean up your database

If you are using a WordPress database, it accumulates and stores all your web data (pages, media files, comments), which can lead to site bloat. As the database expands, it may take longer to process data, in turn slowing down your page speed and overall website functionality.

When you clean your database, you’ll not only improve site speed and performance, but it helps to improve backup and recovery, enhance security, and lessen server strain. Just be sure to backup your data in a safe place like a cloud space, where you can easily retrieve it before doing any cleanup

Here are some plugins to help you clean up your WordPress database.

WP-Optimize

This is one of the easiest plugins to use and it allows you to schedule periodic cleanups. To use the plugin, navigate to the database menu. Under Options, click Show advanced option and then on Run all selected optimization to optimize. You may also check the other buttons to clean up comments, spam, or trashed posts and comments.

WP-Sweep

Install and activate this plugin, then navigate to the Tools section and select Sweep in the menu. Next to each of the identified components displayed, click the ‘Sweep‘ button to clean them.

WP-DBManager

This plugin has added customized options and features and is designed for more advanced users. WP-DBManager helps you restore and repair a corrupted database and clear tables. Though it has many features, it cannot clear bloat, so you should use any other method if that is your priority.

Limit the use of external scripts

Depending on the size, external scripts may lower load speed or cause content jumping- delayed web page load. This delay may lead to problems, especially for your mobile users or those with a slow internet connection since their browsers have to execute each requested script.

To limit any potential problems that could arise from external scripts, review all of them and remove those that add no value to your website. Then, optimize the loading strategy for those you decide to keep.

Here are some ways to optimize your external scripts and improve performance.

• Use async or defer attributes on script tags: The async attribute helps the browser download the script asynchronously as it parses the HTML file, after which parsing is blocked as the script executes. For the defer attribute, the browser downloads the script asynchronously as it parses the HTML file and runs the script until pursing is finished.
• Self-host the script: This gives you more control over important script loads, such as less DNS time and enhanced HTTP caching headers. However, you need to manually update the scripts because such hosting doesn’t automate API changes.

Optimize fonts

Keep in mind that every additional font means an extra file, which adds extra weight to your page. So, to optimize your load speed, use at most 6 font variants.

When you reduce and optimize your web fonts, you refine your design and improve page speed, giving your user an enhanced experience.

Let’s look at some actionable tips to help you optimize your fonts.

• Font display: Using a font-display technique like the CSS font swap helps you clarify how the font displays as it loads. You should specify different fonts for various screen sizes and devices, which improves webpage loading and overall performance.
• Font file optimization: FontSquirrel Webfont Generator may help you reduce and optimize your font files.
• Font-hosting service: You may host your fonts with a third-party tool like Google Fonts or Adobe Fonts, which have faster servers and optimized font delivery methods.
• Use system fonts: These improve your website performance because users don’t need to download them, they are already installed on their devices.
• Font subsetting: The technique helps you apply only the characters in your content instead of all the available font characters. Every font you use on your website requires a separate file to be downloaded by the user’s browser. The more fonts you have on your website, the more files there are to download, which slows down your website’s loading time. Each font has thousands of characters, but your website uses a fraction of them. Subsetting will help you include the specific characters you need to reduce the file size.

Tools to check and help improve your page speed

Speed test tools analyze your load speed and check your site’s overall performance. Let’s look at some of the best tools you can try today.

Pingdom Web Speed Test

This tool analyzes your website load speed and helps you monitor your website’s performance and interactions.

Here is how to test your page speed using this tool:

1. Navigate to Pingdom, type your web url in the search bar, and click start test.

2. The tool will run your site and display your results, including page load time.3. The report also informs you of areas where you can take action to improve your page performance.

PageSpeed Insights

This classic tool displays a page speed score between 0 and 100 and gives you all the keys and advice to improve your page load.

To use this tool to test your load speed:

1. Go to PageSpeed Insights, type your site url in the search bar, then click analyze.

2. The tool runs the analysis and displays both mobile and desktop results, giving you a sense of your users’ experience.

3. The results also show your website performance score and list the metrics used to calculate it.

GTmetrix

To use this tool to test your site load speed:

1. Navigate to GTmetrix, type your web url in the search bar, and click Test Now.

2. The tool takes a few seconds to fetch your site and display the results, which includes an overview of speed visualization.

3. You also get additional page information about top issues to address regarding your website and other page structure audit results.

Page speed performance in Oncrawl

Oncrawl offers a clear overview of your page speed performance and helps you identify which pages you should optimize at a glance. After running a crawl, the analysis dashboard will show you how indexable compliant pages are distributed by load time evaluation.

Wrapping up

A fast-loading page gives users a good experience across all devices and boosts your conversion rates. People simply don’t have the patience to wait for pages to load when there is a plethora of choices just one click away. So, working on page speed is key for all sites.

However, it’s important to keep in mind that while optimizing your page speed can help to improve your SERP rankings, it is just one of the many things to consider in a holistic SEO strategy.