When’s the last time you sat and waited more than a few seconds for a website to load? Can’t remember, can you? Don’t worry, it’s not that you’re suffering from a shortened attention span. Well, that’s not the only reason, anyway. It’s also because faster page speed has become more than just a nice feature over the last couple of decades or so. It’s a user expectation.
There was a time when sitting and watching images load line by line, pixel by pixel was standard. When websites took several seconds, maybe even a minute or more to fully load. And it was fine because the internet was new, and the whole thing was slow, so everyone’s sites were slow. That’s no longer the case: If a site takes too long to load now, it runs the risk of losing visitors to faster sites, and even failing due to lost traffic. You can prevent that by learning how to speed up web page loading time.
- Why is Page Speed so Important?
- Validate code with W3C’s markup validation service
- Use a WordPress caching plugin
- Employ a content delivery network
- Optimize images and videos
- Use asynchronous loading
- Keep the trailing slash consistent
- Reduce server requests
- Minify script files
- Disable pingbacks and trackbacks
- Improve Server Response Times
- Enable GZIP Compression
- Use Plugins Efficiently
- Implement Responsive Web Design
- Stay on the Ball
Why is Page Speed so Important?
Surely, if it’s something you need to pay attention to, it must be a ranking factor, right? Not so much. Page speed is actually only a small ranking factor as far as Google is concerned. How small? Gary Illyes, a Webmaster Trends Analyst at Google, went as far as to call it “teeny tiny”:
But rankings aside, page speed is a big part of the user experience, so a sluggish page may result in a higher bounce rate and fewer conversions.
That’s not just conjecture, either: Portent analyzed 26,000 landing pages across ten sites and found that between the zero and five-second mark, conversion rates drop by an average of 4.42 percent with each additional second of load time.
Now, I know what you’re thinking: So what’s a good page load speed? Google says a site should load in five seconds or less on a 3G connection.
Google also found faster is better with regard to visitor retention. As page load time goes from one second to three seconds, the probability of a visitor leaving increases by 32 percent.
Similarly, the data from Portent showed the first five seconds of load time having the biggest impact on conversion rates.
In other words, five seconds or less is good, but three seconds or less is great.
You can bring a site up to Google’s recommendations, improve the user experience and avoid losing visitors and those all-important conversions. All it takes is learning how to speed up web page loading time.
1. Validate Code with W3C’s Markup Validation Service
While coding doesn’t directly affect a web page’s ranking, it does affect how easy it is for users to view the page across different browsers and platforms.
This is known as browser compatibility, and improving it can positively impact user experience and speed.
Even Google’s own Webmaster Guidelines recommend using valid code:
That’s where W3C’s validator comes in. By entering a web page’s URL, you’ll be able to see any errors and room for improvement in its HTML code.
For instance, entering the URL for YouTube’s main page yields these results:
Once you’ve addressed the errors listed for a page, you’ll be left with valid, high-quality code that will help pages load more quickly across multiple browsers and platforms.
Besides improving browser compatibility and boosting page speed, Google says using valid coding can also:
- increase the rate at which Google crawls a website for indexable content;
- improve the user experience on a site;
- ensure browser compatibility;
- ensure Googlebot can recognize a site’s hreflang (language) tags; and
- ensure products submitted to Google Merchant Center stay approved.
2. Use a WordPress Caching Plugin
Caching is a process in which recently accessed copies of files are stored in a temporary repository called a cache. By accessing users’ caches, sites can load necessary files without downloading them from the original server.
For users, that likely means less time spent waiting for pages to load. For you, it means better page speed and more satisfied visitors.
The good news is, if a site is built on WordPress, the platform has some built-in caching capabilities. The better news is, it’s possible to further speed up web page loading time in a WordPress site by installing a caching plugin.
A couple of free options are W3 Total Cache and WP Fastest Cache. Whichever you choose, you’ll have access to a large user community ready to help you squeeze optimal performance from your chosen plugin.
Even better, both of those plugins include browser caching, which tells users’ browsers to save and reuse files.
You can also go with a paid option like WP Rocket. Paid caching plugins typically offer more customer support and a longer list of features than their free counterparts.
3. Use a Content Delivery Network
A content delivery network (CDN) is a network of servers scattered across various physical locations. Together, those servers can quickly deliver web-based content to users around the world.
In addition to boosting page speed, CDNs bring several other performance benefits, including:
- decreased server load;
- higher storage capacity;
- better protection from distributed denial-of-service (DDoS) attacks;
- reduced bandwidth consumption and costs, and
- lower network latency.
If you’re ready to begin researching CDNs, start with the most commonly used options. These include Cloudflare CDN, StackPath CDN, the budget-friendly KeyCDN, Google’s Cloud CDN, and Microsoft’s Azure.
Before implementing a CDN, it’s important to know they can negatively affect SEO if you don’t take a few key precautions:
- Create a custom subdomain attached to your site rather than the CDN provider’s site.
- Implement lazy loading to reduce page loading times.
- Ensure your CDN uses the canonical tag to avoid duplicate content.
- Remember to use the secure sockets layer security protocol on your CDN as well as the site to prevent security issues.
4. Optimize Images and Videos
Lots of large, high-resolution images can strain a site’s servers, increasing load times. Optimizing images and videos reduces that strain, which, in turn, increases page speed.
Beyond image size and resolution, a few other factors can contribute to long page loading times:
- synchronous loading (i.e., page components load one after the other instead of at the same time)
- using large, complex, or outdated file formats such as TIFF
- unspecified dimensions
- lack of caching information
Luckily, all those problems can be resolved with basic image optimization strategies:
- Fine-tune image size and resolution. Reducing image size without an appreciable drop in quality using lossless compression helps decrease page loading times and improve the user experience.
- Use lightweight file formats like PNG, JPG and GIF.
- Specify the dimensions of each image.
- Use a caching plugin.
If you want to expedite the optimization process even further, a few WordPress plugins can do most of the heavy lifting for you. The Smush compression tool, EWWW Image Optimizer and Optimole optimization service all allow for lossless compression.
Keep in mind some of the principles of image optimization also apply to videos. For instance, a site could take longer to load if you use an outdated video file format like Windows Media Video (WMV). To speed it up, you could switch to a compact and lossless file format like MP4.
To streamline things further, you can forgo video hosting altogether. Just upload the videos to a third-party hosting service like YouTube or Vimeo, copy the embed code, and paste it into the site’s page.
5. Use Asynchronous Loading
While it definitely benefits image optimization in particular, asynchronous loading also affects how quickly all page elements load.
Page elements can be broken down into several categories, including thetag (which contains metadata, links and more), snippets (small segments of text or source code) and A/B testing scripts (which compare two versions of a page).
With synchronous loading, all elements of a web page are forced to load in a certain order. This means that the user can’t see any portion of the page until every element has been loaded.
Asynchronous loading allows those page elements to download simultaneously and load as they’re available, reducing the amount of time it takes for a user to view the page. As an added bonus, asynchronous loading also allows you to choose which parts of the page you want to load first. For example, you can opt to load above-the-fold content (the first content users see without scrolling) right off the bat.
By using asynchronous loading instead of synchronous, you can significantly reduce page load times—and ensure each page loads just the way you want it to.
While implementing asynchronous loading is a bit complex in CSS, you can easily set it up in JavaScript with the async function, and in HTML with the async attribute.
If you want to avoid diving into a page’s code yourself, WordPress plugins like Async JavaScript, Asset CleanUp and Autoptimize can help.
6. Reduce Server Requests
When a website makes too many HTTP requests to a server, it overwhelms the server’s capacity and makes the website lag, thereby reducing page loading speed.
To check whether a website is sending too many requests, enter its URL into the GTMetrix tool:
On the results page, you’ll see the site’s PageSpeed performance score and YSlow score. Both can tell you how well a site is performing and make recommendations accordingly, but YSlow has the unique ability to show you how many HTTP requests the site is making.
The fewer requests there are, the faster the page will be. As YSlow advises, one way requests can be reduced is by combining multiple Javascript scripts into one.
KeyCDN provides a simple tutorial that explains how to combine Javascripts quickly and efficiently. You can also use it to combine external CSS files for even better performance.
7. Minify Script Files
Minification is the process of removing nonessential code from script files without compromising functionality. Nonessential code can consist of things like spaces, comments and any unused elements.
By minifying a site’s JavaScript, HTML and CSS files, you can increase page speed and cut down on bandwidth usage.
While it’s possible to modify code files manually, it’s more efficient to paste the code into a tool that can do the work for you, such as:
- HTML Minifier (HTML, JavaScript, CSS)
- Minify (JavaScript, CSS)
- JSCompress (Javascript)
- CSS Minifier (CSS)
For WordPress sites, you also have the option of using a minification plugin. Two plugins—W3 Total Cache and WP Fastest Cache—double as minifiers as well as caching tools. Other plugins to consider include Autoptimize, Fast Velocity Minify and Hummingbird optimizer.
8. Disable Pingbacks and Trackbacks
In WordPress, pingbacks and trackbacks are link notifications that notify site owners when other sites link to their content.
While they may have been useful in the early days of WordPress, pingbacks and trackbacks are now frequently abused by spammers looking to spread links. As a result, pingbacks and trackbacks can quickly clog up a WordPress site’s server requests, slowing it down.
The solution is to disable pingbacks and trackbacks in a WordPress site’s discussion settings.
9. Improve Server Response Times
Even if a page is lightning-fast in every other aspect, slow server response times can still hamper loading speed.
When a user navigates to a page, their browser sends a request to the page’s server. Upon receiving the request, the server responds by loading the page content in the browser. The longer the server takes to respond, the longer the page takes to load.
Server response time is also known as time to first byte, or TTFB. This refers to the amount of time it takes for a client to receive the first byte of information after making a request.
A slow server response time is classified as one that’s more than 200 milliseconds.
To check a site’s server response time, enter its URL into a server speed checker like Bitcatcha.
If the test results are less than ideal, you can improve them in several ways:
- Get specific recommendations with the PageSpeed Insights performance test.
- If the site has outgrown its current web hosting plan, consider upgrading to a better plan.
- Consider switching to a hosting provider with faster service.
- If the site is hosted on shared servers, consider switching to another type of hosting like virtual private server (VPS), dedicated or cloud hosting.
- Delve into the server log files to manually locate bottlenecks.
10. Enable GZIP Compression
GNU zip, or GZIP for short, is a file format and lossless compression program. Although it was originally created as part of the GNU Project, a free software initiative that began in the 1980s, GZIP remains a widely used compression tool.
GZIP compression works by reducing file sizes for web pages. Because the page’s files are smaller than before, the files can load more quickly.
In one page speed test from Pingdom, GZIP compression reduced page loading time by 48 milliseconds.
Without compression, total page size was 445.6 kilobytes and took 329 milliseconds to load:
With GZIP compression enabled, total page size was just 197.6 kilobytes and took 281 milliseconds to load:
With those results in mind, it’s not hard to see why more than 80 percent of all sites use GZIP.
To start using GZIP on a page, you’ll need to adjust the site’s server settings. You can do this by modifying the server’s configuration files, or with the help of a WordPress plugin.
WP Fastest Cache and Hummingbird both support GZIP compression, as does WP-Optimize.
To test whether a site has GZIP compression enabled, try using GiftofSpeed’s compression test.
11. Use Plugins Efficiently
WordPress plugins can save time, simplify complex tasks and add site features without requiring any prior coding knowledge. Plus, those available from the official WordPress plugin library are free.
Plugins aren’t without their shortcomings, though. If one or more plugins are demanding too many resources, page speed will suffer. This is true for all kinds of external scripts, from analytics to advertisements.
To enjoy the perks of plugins without giving up page speed, evaluate the plugins in use and eliminate any without apparent use or with a negative impact on load times.
When determining whether a plugin is necessary, you can use several tools and resources to find out whether it’s helping or hindering site performance.
You can even use a plugin to, well, evaluate your plugins. Using a plugin like Query Monitor, you can view a page’s database queries and filter them by plugin. The more queries a plugin is making, the more it’s slowing down pages.
It may also be helpful to check a list of the slowest WordPress plugins and remove any you find from the site you’re optimizing.
Or, you can enter a site’s URL into GTMetrix and click on the Waterfall tab. The waterfall chart shows each request made by the page as it was loaded, including those made by plugins.
The results for BBC America’s site show that its third request was made by a WordPress plugin:
If one plugin in particular is making a high number of requests, it’s likely slowing page speed.
To make sure you’re getting the results you want, remember to perform a page speed test both before and after removing any plugins.
12. Implement Responsive Web Design
By the end of 2019, 5.2 billion people (nearly 70 percent of the world population) subscribed to mobile services. That’s a staggering number of connected mobile devices, all of which can be used to access web-based content.
For SEO practitioners, this means sites need the ability to perform well and look good on any and all mobile devices in order to satisfy both users and search engine algorithms.
Using responsive web design, which automatically responds to each user’s device to deliver a speedy, smooth and customized experience, can help SEO professionals optimize content for both mobile and desktop platforms.
Responsive web design is a more agile version of adaptive web design, which involves creating multiple versions of the same site. Each version has a static, predetermined layout, and the version that loads depends on the user’s device.
Since screen sizes are always changing, adaptive web design can result in poorly optimized, incorrectly displayed pages. Plus, the amount of time it takes for the site to detect a user’s device and load the appropriate version can hamper page speed.
Responsive web design circumvents these limitations with dynamic web pages that instantaneously adjust to suit any device, rather than static pages unique to each device type.
Responsive web design is the safer choice for improving both site performance and user experience.
To make a WordPress website responsive, you can choose a responsive theme.
Or, if you want to learn how to create a responsive website from the ground up, take a look at Google’s free design course, Responsive Web Design Fundamentals.
13. Stay on the Ball
Learning how to improve page speed and taking the steps to do so is just the first step. Maintaining those speed gains is also important to protecting and improving site performance and user experience over time.
When updating or adding content to the site:
- validate and minify any new code;
- optimize any new images and/or videos;
- keep an eye on the site’s plugins, and eliminate or replace any that are slow, outdated or unused; and
- ensure everyone with access to the site and its pages is aware of best practices for content optimization, responsive design, etc.
Faster Page Speed Today, More Conversions Tomorrow
Optimizing page speed is about more than raw numbers. It’s about combining multiple techniques to deliver a site that runs smoothly, is easy for search engines to index, and is a pleasure to navigate.
Once you’ve learned how to increase page speed and created a plan to maintain it, you’ll be able to achieve better performance and higher conversion rates, all while providing users with a seamless—and speedy—experience.
Image Credits
Screenshots by author / March 2020
Illustrations by iloveseo.com / March 2020
