Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car

If you're on a mission to conquer Google search rankings, you already know you're at the mercy of Google's search algorithm. What you may not know is that your page loading speed has a profound impact on how much a search engine values your website. This includes the loading times for both the desktop and the mobile versions of your pages.

If you're struggling to improve your page speed and tired of seeing your bounce rate climb, read through these tips below to discover how you can start winning the page speed race.

Google's Goal to Improve the Internet

To better understand the intent behind Google's search algorithm, take a look at their mission statement: Our company mission is to organize the world's information and make it universally accessible and useful.ā  Within this statement, we can extrapolate a desire to discover and collect accurate, meaningful information that any person can access at any place in the world with any device.

However, we as website owners are the only ones that can control how optimized our website is. For this reason, Google puts the pressure on us to improve by heavily factoring your page loading speeds and mobile-friendliness into your search rankings. Even if a site is loaded with killer content, it won't rank high if it's bulky and cumbersome. This matches up with public impression, as 40% of consumers will bounce from your site if it takes longer than three seconds to load.

In addition to this, you can't afford to neglect your mobile visitors, either. Google created an initiative known as Accelerated Mobile Pages (AMP). This happened because, even now in 2021, over 50% of web traffic on Google comes from a mobile device. For this reason, AMP imposes a set of guidelines that requires web developers to make mobile sites just as fast and responsive as their main counterparts.

How to Improve Page Speed Score?

Now that you understand Google's rationale for factoring page speed and mobile-friendliness into your site score, let's examine what you can do to start improving today.

1. Use a Minimalistic Theme

A theme is generally the starting point for any website, especially when you're using simplified builders like WordPress. This determines the layout of your site, the color, the structure of content, and the navigation. While that sexy theme you chose seems to fit your brand's personality perfectly, there's a chance it could be bloated and impairing your loading times.

Certain themes feature certain graphical design choices or items that a simplified theme would not have. With every additional item on-page, there is more data to load when opening your site. This extra data can add full seconds to the loading time even before you start adding content, images, videos, and links to your pages.

However, a more robust theme does not necessarily mean worse performance. Each theme is created by a unique web developer. This developer may or may not be more skilled and better able to optimize features of a theme to account for load speed. For this reason, you should perform speed tests on your site when implementing a theme to see the actual results before making a decision. Tools like Google PageSpeed Insights are excellent for this.

As a rule of thumb, you can't go wrong with a more minimalistic theme that features fewer assets to load, lightweight code, and a simplified CSS stylesheet. Don't fall into the trap of believing that your site needs to have flashy features galore to get the job done. Provide your visitors with excellent content and a site that delivers that content faster than any of your competitors. Your rankings will thank you for it.

2. Cut Down on HTTP Requests and Redirects

Continuing from lightweight themes, you should seek opportunities to minimize the number of HTTP (Hypertext Transfer Protocol) requests your site sends when loading. An HTTP request occurs when a web browser sends a request to the server to access information on a website.

Essentially, a new visitor enters your domain in a browser. Then, the browser begins to request data including text, images, and videos from the server. The server responds to this request and sends back the data for the browser to download. After the request completes, the site will fully load on the visitor's device. If an HTTP request fails or is unresponsive, it may continue making attempts to access the server until the request is met.

Image Source

The speed and efficiency of these requests depend upon upload and download times. This means that your website host impacts how efficiently these HTTP requests are handled. However, we have no influence over visitor connections, leaving us with the choice to cut down on these requests as much as possible.

Using tools like Google PageSpeed Insights (mentioned above), Google Search Console, and Google Analytics allow you to run regular audits of your domain. They will assist you by pinpointing every error on your website, while also providing recommendations to remedy problems and further optimize your pages.

It's important to audit your website as the issues affecting your load times will be unique and depend upon file size, file quantity, HTML, CSS, and your website host. You can then utilize Google's help library to learn more about specific issues that are discovered. Google will classify each issue by severity. Certain issues require immediate resolution, while others are suggestions for optimization that you should consider.

To further simplify HTTP requests, understand that every new file adds a new request. The more requests that take place, the more time it takes to transfer data from the server. Also, the larger the files, the longer it will take for the browser to download each file. You will learn strategies for optimizing files on your site further on in this article.

3. Defer Javascript

A very simple way to improve page speeds is to assign the Defer attribute to your javascript. There are generally three types of languages that make up your average website: HTML which controls the structure, CSS which controls the style, and javascript which makes the page interactive and dynamic.

However, a browser must identify, fetch, and load any javascript each time a user accesses a site. This means that precious seconds elapse while the attempt is made to grab and download the script to finally load the webpage. This means that if a user is accessing your site from their mobile phone with a slower data connection, they just see a blank screen for what seems like an eternity. While slower connections may be out of your control, the visitor will simply bounce away and find another site.

Fortunately, you can alleviate this common javascript issue by assigning the Defer attribute to the request. While this is a complicated topic for non-developers, it effectively allows the HTML and CSS of your site to load immediately, while still waiting to execute the script. This solution can shave seconds off of your load time without any additional optimizations.

An alternative method is to assign the Async attribute to your javascript. While Defer waits for HTML to finish, Async will continue downloading java while parsing HTML but pause HTML to execute the script. Either solution will allow your website to load in the most efficient manner possible without delaying any elements as a result of waiting on something else.

Image Source

You can check out the tutorial on how to implement Defer or Async here.

4. Enable Browser Caching

Now that we've explained how a browser must request and download files, wouldn't it be nice if you could utilize a visitor's hard drive space to improve your speed? That's exactly what browser caching does.

By enabling browser caching on your website, you make it so that a visitor does not need to make repeat HTTP requests if they previously visited your site. Those elements are placed in temporary storage on the visitor's hard drive, which then loads the files instantly on future visits. Users, however, should keep an eye on the state of their device's storage and clear cache on the computer regularly.

You can generally find the option to enable browser caching in your website editor settings, though the process will vary depending on your platform. You should look to enable both browser caching and object caching to improve your load times. This data typically gets stored anywhere between one week and one month. However, if a user deletes their browsing data, their browser will need to execute the HTTP requests once again.

5. Utilize GZIP to Compress Your Files

Compression is the process of reducing file size for faster downloads and uploads. Different compression software offers varying results, with some often causing some small loss of data, while more powerful tools can provide lossless compression. File compression is used everywhere and is necessary for optimizing website load times.

GZIP is the industry leader for file compression and can help you compress all content on your website. This essentially takes larger files, finds a way to decrease the file size by abbreviating repeated segments, transfers the smaller file, then decompresses the file on the other side to its normal size. According to Pingdom, this can improve your load times by as much as 15%.

Image Source

While GZIP is incredibly fast and efficient, it's not the only tool available. You will need to look into the various plugins available to you depending on your website builder platform. Make sure to enable HTTP compression, and check out how reduced your file sizes are as a result of this easy change.

6. Optimize Your Images without Reducing Quality

With how incredible camera technology has come, image file sizes can be enormous. While showing off that incredible quality to your audience is desirable, remember the impact that the HTTP request will have on your page loading times.

For this reason, optimizing images is one of the easiest recommendations we can give if you want to improve your page speed. You should aim to compress your image file size as much as possible, while still delivering the best quality possible. Factors that can influence this include the image file type you use and choosing to resize an image whenever possible.

PNG and JPG are the two most commonly used image file types on websites. The former is closer to lossless compression while the latter generally results in some loss. Look to resize those larger images to an acceptable size that still captures the quality. Then, save your edited image as one of these two file types.

Image Source

Google's website performance tools mentioned above will also provide you with opportunities to further optimize images throughout your site. After making your images lean, your GZIP compression tool will be able to further compress these elements whenever possible for even faster requests and speedier load times.

7. Use External Hosting When You Can't Reduce File Size

In some cases, you may feel that your large image or video file is necessary to include on your website. We're confident that you know what's best for your brand, but there's still more you can do to lessen the impact it has on your site quality.

Your website server only provides you with a set amount of storage space. Unless you're paying for premium web hosting, you're likely sharing that space with other domains that pay for the same service. If you upload your media directly to that server, it's going to result in a laggy, miserable experience that takes forever to load anything.

Instead, take advantage of other platforms online to host your media-related content for you. A perfect example of this is to upload all of your videos to a branded YouTube account. YouTube handles the file hosting, while you simply need to copy the embed code onto your website page. Whenever a user accesses that video on your website page, the YouTube player is handling the request, not your web host.

There are countless hosting tools available to you online depending on your needs. For videos, YouTube is the go-to choice, but Vimeo and Wistia also work well. For photos, check out Google Photos, Imgur, or Flickr.

8. Utilize Lazy Loading

There are two primary ways to load content on a web page. Eager loading is the act of loading and preloading all of the resources available on a site whether they are currently in use or not. Lazy loading allows your site to load files in segmented chunks based upon navigation or actions taken on a web page. Lazy loading is recommended for content that appears above the fold or that is currently within the visitor's viewport.

Think of a home page that might feature a dynamic banner with content along with the main navigation bar. The rest of the page further down contains images, text, and videos that the visitor is currently unaware of. Because we know the visitor will take a moment to consume the content that immediately appears above the fold, we delay loading of the content further down to prioritize faster loading of the initial content.

Image Source

While lazy loading is not always a necessary strategy, you should consider it for any media-heavy pages that exist on your website. This way, you can still include those high-quality images to support your content without causing your visitors to bounce away because of painfully long load times.

You can learn more about how to apply lazy loading as a strategy by reading up on the developer documentation here.

9. Optimize and Minify Your CSS

Your CSS, or custom style sheet, is the code used to properly render the look of your website within a browser. This controls fonts, sizes, colors, page formatting, and much more. The more you add to your style sheet, the more that the browser needs to load.

We just discussed a strategy for improving CSS load times with the lazy loading strategy above. This effectively creates a priority system and tells a browser what styles it needs to load first. However, this alone isn't enough if our CSS code is outdated, repetitive, or messy.

Your ability to optimize your CSS will depend on your skill and experience as a developer. In many cases, there is generally a way to reduce your sheet size by condensing code snippets, while eliminating redundant lines that essentially tell a browser to load the same styles more than once. A browser by default will read through the sheet top to bottom. It will need to work through those redundancies before getting to the next lines of code, consistently creating unnecessary additions to your load times.

Though it will take longer to build, you can wait to minify your CSS after you build your sheet. After you know that your code is functional, you can then begin to eliminate unnecessary text to create a simplified version of the same sheet. You can check out this help article here to see some examples from experienced web developers.

10. Purchase a Better Hosting Plan

Finally, you may need to consider upgrading your hosting plan if your site speeds are still adversely affecting your score. As with most things in life, you get what you pay for, and that cheap web hosting option you signed up for might not be providing the storage and bandwidth you need to get the job done.

Shared hosting is the most common hosting option used by site owners as it's cheap and will generally get the job done for your basic website. However, if you've been continuously optimizing and adding content to your site, you're likely seeing an increase in visitors. This means a higher volume of requests that can seriously impact page speed. Getting slammed with requests without the server power to support it can make it impossible to access your site temporarily.

When shared hosting isn't cutting it, you're left with two options: VPS (Virtual Private Server) hosting or a dedicated server. The former is a step-up from shared hosting but still requires you to share a server with some sites, while having a dedicated server gives your website exclusive resources.

VPS hosting sees you sharing a server with a few other websites. However, unlike shared hosting, you receive a dedicated segment of resources that are exclusively yours on that server. You are responsible for honoring the terms of agreement for that space and will not have to worry about other websites impacting your performance. However, you still face some restrictions with this option.

Using a dedicated server gives you free rein to use all of the resources available. No other websites are being hosted and you have access to huge amounts of bandwidth and storage space for all of the content hosted on your site. However, these benefits come with the most expensive costs as a result.

Closely examine what you need for your website and choose the best plan for you. If your site evolves and you find your server struggling to meet demands, consider upgrading to see how it impacts performance.

Conclusion - Optimization is the Key to Winning the Page Speed Race

While improving your website speed is challenging, and most likely will require the help of a skilled developer, you can't afford to ignore it. In addition to how important it is in Google's search algorithms, consumers will not respect your time if you waste theirs. Optimizing your page speed will force you to closely examine your website strategy and focus on what you need to drive traffic and conversions.

Remember - simplistic themes are generally the way to go. The fewer files and the less data a browser needs to download, the faster your pages will load. You can also defer javascript and utilize lazy loading tactics to ensure that users always have access to the content in their viewport. Minifying your style sheets will also improve the time it takes for your content to appear on the screen. If you can't part with a larger file, host it on an external server and have them provide the bandwidth.

Finally, consider upgrading your hosting plan if your web traffic is putting a strain on the server. Sometimes, the only solution to a problem is to gain access to more resources that can work in your favor. In conclusion, page speed is a significant factor in successfully doing business online. Start employing these tactics and start winning the page speed race today.