Share
2 seconds or less.
That’s the number that Google set in 2018 as the magic speed number for desktop and mobile users.
This means that a mere two-second delay in website speed could profoundly impact how often your website shows up in the search results. In this article, we’ll discuss factors that are critical to keeping your website’s page load speed in shape, so your website doesn’t get slowed down in search rankings.
What is Page Speed?
Pingdom defines page speed as, "the time it takes to download and display an entire individual webpage. This includes all page elements, such as HTML, scripts, CSS, images, and third-party resources."
Page Speed and Visitor Behavior
Your website is the online "front door" to your business, and it should be very easy for browsers to access and interact with your business online.
According to Google, the difference in one second vs. three seconds of page speed time is an increased bounce rate probability of 32%.
If your pages take five seconds to load, the bounce rate probability skyrockets by 90%.
The longer your pages take to load, the more likely it is that potential leads won’t stick around.
Even though it’s only a few extra seconds, website visitors are accustomed to fast load times across the internet, so slower sites are penalized in search engines when users abandon the slower site in favor of a faster site.
Don’t be fooled into thinking that page speed is a secondary issue, it has a significant effect on your bottom line. Not only do slow page load times cause you to lose visitors, it also kills conversions, and leaves an overall poor impression of your brand.
Rendering vs. loading
Before we get to optimizing page speed, let’s first briefly discuss the basics of how a page loads. The moment a page link is clicked, it takes some time for the server to download the page content onto the browser — this is known as loading time. The file sizes and the number of files required on the page determine how long this stage takes.
Page rendering means taking all the downloaded content and displaying it on the browser’s viewport. Rendering performance largely depends on the layout, CSS, and browser efficiency.
When optimizing page loading speed, consider how long it takes to fetch the necessary data and how fast the page is presented to the user.
CDN hosting
A content delivery network (CDN) is a set of geographically distributed network servers that deliver web content upon a client’s request. Rather than relying on a single host network to answer every web request and push content, a CDN brings text, media, CSS, HTML, and PHP files closer to the client. Think of it as a physical cache system, literally bridging the gap between the host server and the end-user device.
The largest CDNs cover all internet hotspots across the globe. These reduce the loading time significantly, regardless of the user’s location. CDN hosting utilizes these distributed servers to store and relay web content.
Image compression
Images are among the largest files on most web pages and can have dramatic effects on site speeds.
Graphics and visuals play an important role in SEO and customer engagement, but be careful not to weigh down your site with massive image files.
A good rule of thumb is to keep the image library for each page under 500 KB by compressing the files. Lossless image compression tools like these can help you trim an image file’s weight without sacrificing visual quality. You can also resize and crop images to remove every unnecessary pixel.
Most web builders have built-in media compression tools or workarounds for large files. HubSpot, for instance, has an automatic image resizing and compression feature.
Keep in mind that web compression also applies to other large media files, including videos, PDF documents, and audio clips.
Largest contentful paint (LCP)
It’s physically impossible to load and render an entire page all at once simply because different web elements load at different rates of speed. Even so, the user needs reassurance that the page is loading correctly and quickly while they anticipate the entire page to load.
Be wary of using loading indicators like progress bars or splash screens, for these aren’t always accurate and may not do much to satisfy the user’s anticipation.
The best way to capture a user’s attention as the page loads is to show the largest web element first. It could be a text blurb, image, or main container.
Largest contentful paint (LCP) is one of Google's Core Web Vitals, and measures when the largest content element in the viewport becomes visible.
The reason that LCP is so critical is because, when your large content elements show up first and capture the attention of your browsers, it shows that your page is useful even before loading is complete. And when users can view and interact with a half-loaded page, it also leads to more conversions.
*Note: We’ve noticed LCP alerts in the core web vitals report that don’t get flagged by other page speed tools like GTMetrix.
Minified JavaScript & CSS
Minifying code is essentially “cleaning up the code.” To minify the code is to remove unnecessary characters and modules from the code, such as comments, line breaks, block delimiters, and white spaces.
These code elements may be useful in helping humans understand the code, but they take up space in the computer’s memory and consequently, extend the page loading time.
Scripts and CSS programs that have been minified reduce the size of the file to be downloaded and thus load faster than scripts and programs that have not been tidied up.
Minifying thousands of lines of code manually would be painfully slow and error-prone, so it’s best to use a compiler or minifier to trim the fat off your code in just a few clicks!
Cleaning up your JavaScript or CSS code with a minifier is a great way to improve the performance of your website, and it does not harm the functionality of the source code.
Deferring analytics
There is only so much you can do to a page’s code, architecture, and content to improve its loading performance. To shave more valuable milliseconds off the loading time, you must prioritize what to load first and what to defer until the page fully loads.
It’s obvious to defer heavy media content such as video, but that only works on a site with fast-loading primary content that’s part of the LCP.
Another great way to improve loading performance is to delay the loading of your site’s embedded analytical features.
Many sites have analytical features built into the site, and while they are very useful, it will serve you better to prioritize the customer experience first. Ensure that the user is getting a great experience (so they stick around to buy!) and then focus on collecting data.
To take this even further, consider delaying other secondary functions too, such as scripts and popups.
Browser caching
A cache is a temporary memory location that speeds up your website user’s experience by storing static page elements such as image files, CSS or JavaScript, or PDF/media files. Site visitors don’t have to keep downloading information on every new page, which means that every time they come back to your site, it will take less time for them to load the page.
The reason browser caching matters is because it helps visitors move around your site more easily and can help you keep them on your site longer. To leverage browser caching for your website, you can adjust your .htaccess file, or choose from several great plugin options.
Minimizing HTTP requests
HTTP requests happen when a browser submits a “request” to your server for information on a webpage. When a user visits a page on your website, your server obliges their request and sends the necessary files contained on that page to the user’s browser. The fewer HTTP requests that a website has to make, the faster it will load for the user.
More files on your website equals more HTTP requests. Bigger files on your website equal longer HTTP requests. So, just like many of the other tips in this article, getting lean is the goal.
To reduce the number of outgoing requests your website requires, you’ll need to consolidate smaller files, remove unnecessary images, or reduce the size of larger files.
Page performance tests
There are so many factors that contribute to page loading speed. Truly, the best way to get a handle on what is causing poor performance is to find the root problem with a tool like Hubspot’s Website Grader.
These tools help you gauge your site's performance against the industrial benchmarks and then analyze the results to pinpoint what needs to be done. Remember to assess both desktop and mobile speeds to cater to all internet users.
Some of our other favorite page speed tools and resources include
Regardless of how great your product or service is, if your website is slow to load, visitors aren’t going to stick around and you’re going to get dropped in search rankings.
If you’re spending the time to build a new website, upgrade your current one, or just improve your search rankings, make sure to take these 9 factors into consideration — otherwise your hard work won’t be as fruitful. As you’re building, be conscious about image and PDF file sizes, CSS and JavaScript, etc., and before you launch your website, test it for free with one of the tools mentioned above.
William McKee
As a managing partner of Knowmad, William creates sustainable growth for the agency by leading its future vision, driving new revenue, and empowering team member productivity and well-being.
