The speed of your website—how fast it loads into a user’s browser—is super important for two reasons, each of which can be expressed with a well-known acronym: UX and SEO.
UX, which stands for user experience, refers to how pleasant your site is for users to browse. One critical component of UX is how fast your site’s pages load into the browser. Fast-loading pages encourage users to view more pages and lead to a better overall experience on your site. Users have become far less tolerant of slow load times than in the past, especially as mobile network speeds have accustomed them to a snappier web experience even when on the go. If you want users to stay on your website longer, return often, and tell more friends about it, you definitely want a speedy site.
SEO, which stands for search engine optimization, refers to how well your site’s pages rank in search engines. Since 2010, Google has made it perfectly clear that page-load speed is a key factor in how the leading search engine ranks web pages. So, the faster your pages load, the better your site will rank, and the more traffic you can expect to receive.
To gain both of these key benefits, it’s important to ensure that your site’s pages load quickly. Fortunately, page-load speed is something you can easily improve. We recommend these 13 tips to ensure your web pages load as quickly as possible.
Tip #1 – Minimize the Size of Image Files
Most data sent by your web server to visitors’ browsers is probably in the form of images. So, condensing image files is an excellent way to reduce bandwidth and, therefore, increase site speed. There are three main ways to minimize the size of image files:
- Save image files in their actual display size. While it is easy using HTML or CSS to scale down a large image file to display in a smaller size, this can be a huge waste of bandwidth. Images should be saved in files at actual display size. If a bitmap image will be displayed in multiple sizes, save the image in different sizes and use HTML or CSS code to select the correct image for each size.
- Use the best file format.
- For photographs (and other images containing thousands or millions of different colors), the “lossy” JPEG format is best.
- Whenever possible, use vector images in the SVG format—SVG files are very small and scale with high quality to any size. SVG works well for diagrams, illustrations, and logos.
- When SVG is not an option, the “lossless” PNG format is the best for diagrams, illustrations, and logos.
- It is almost never recommended to use other image formats—such as GIF, BMP, or TIFF—which tend to be much larger files than the previously mentioned formats.
- Avoid saving unnecessary data in image files.
- Save your JPEG files using the lowest acceptable quality level setting. High-quality JPEGs can dramatically inflate the size of images with little or no visual benefit.
- For file formats with configurable color depth, use the lowest setting that doesn’t degrade the visible image quality.
- Make sure that any extraneous “header” data—such as comments, color profile information, and GPS location data—is not saved in the image files to be displayed on your web pages.
Tip #2 – Minify Site Code
Not everyone agrees that you should minify your HTML code, as it can sometimes cause problems. Also, some developers believe it is better to implement Gzip compression, which accomplishes almost the same thing (see Tip #8). Interested in minifying your site’s HTML code? Check out these tools: Minimize HTML, HTML Minifier, Kangax HTML Minifier, and BeautifyTools HTML Minifier.
Tip #3 – Use AJAX to Avoid Page Reloads
This is something your developer implements for you. Discuss with him or her the areas of your website that can benefit from using AJAX.
Tip #4 – Use Pure CSS Design
Years ago, the only way to implement certain types of page layouts was to use HTML tables, which tend to use lots of HTML code to achieve the desired page design. While HTML tables are still the right way to go when presenting certain types of information, CSS is often a much more code-efficient way to instruct a browser how to lay out a particular page.
Similarly, it was once necessary to use image files to show certain types of graphics on the page, such as borders, buttons, shadows, and animations. CSS is a much more bandwidth-friendly approach and should be used whenever possible. As an extra benefit, it also makes web pages easier to maintain.
Tip #6 – Enable Browser Caching
Browser caching is a technology that allows your visitors’ browsers to store copies of files “locally” (on their computer), something that significantly reduces the time it takes subsequent pages to load. Cached files can be images, scripts, CSS, and page content itself. Because the browser doesn’t need to fetch every file from the server every time a page loads, visitors will enjoy a much faster browsing experience.
There are different ways to enable browser caching, depending on your website’s platform. For example, if your site is running on WordPress, setting up the popular W3 Total Cache plugin will do the trick. Either do some research yourself to figure out the options you have, or ask your website developer to set this up for you.
Tip #7 – Use a Content Delivery Network (CDN)
One of the best ways to speed the delivery of web pages to users is to make use of a content delivery network (CDN). A CDN is a large setup of servers located all around the world that store and serve files from your website from geographical locations closer to your site’s visitors. Instead of having to communicate with your web server on the other side of the country (or the world), CDNs allow browsers to communicate with a server physically nearby.
CDNs also add the performance advantage of distributing the load of serving your site across many servers. In others words, CDNs help prevent your main web server from becoming overloaded with requests from visitors, slowing it down, or even causing it to crash in extreme usage scenarios.
Some of the more widely used CDNs to explore include MaxCDN/StackPath, SiteLock TrueSpeed, Cloudflare, Amazon Cloudfront (for AWS-hosted sites), and WP Engine (a WordPress hosting service that includes a CDN).
Tip #8 – Enable Gzip Compression
Just as we use a Zip program to compress large files before sending them by email, most web servers can compress the files they send to users’ browsers, and then the browser reverses the process to display the web pages. Since more than 90 percent of browsers now support Gzip, and using compressed files can speed up a website by 70 percent, the conventional wisdom is this is a great way to improve page load times.
How to enable Gzip depends on your particular web server. If you are using WordPress, there are plugins that enable this compression, although it is usually better to implement compression on the server level. Consult with your hosting provider and/or website developer about the best way to implement Gzip for your site.
Tip #9 – Minimize the Number of Required HTTP Requests
A large percentage of the time involved in a browser showing a typical web page is downloading the different parts of the page. Each request sent by the browser to the server—known as an “HTTP request”—adds to the overall page-load time.
Therefore, page-load speed can be improved by reducing the number of separate elements appearing on the page. Some ways to do this include combining multiple CSS files into a single file (requiring one HTTP request instead of many) and using CSS code to display elements such as buttons, borders, and shadows (instead of forcing the browser to request multiple image files).
Tip #10 – Remove Unnecessary Redirects
Redirects occur when a browser requests one URL, but the website sends the browser to a different URL instead. Some types of redirects are necessary and recommended, such as 301 “permanent redirects” that direct non-www URL requests to the www version of the domain name, which indicate the locations of new pages replacing old pages, or that direct mobile devices to the mobile version of the website.
However, unnecessary redirects slow down the website because they generate additional HTTP requests, leading to more back-and-forth between the browser and the server, which increases the time it takes before the user will see the page. Therefore, identify cases of redundant redirects and redirect “chains”—when one page redirects to another that redirects to another and so forth—and eliminate them.
Tip #11 – Remove Unnecessary Plugins
While they are an easy, effective way to add functionality to a website, plugins take their toll on website resources. Some generate many unnecessary server and/or database calls that can really slow down a website. That’s why it’s important to evaluate all the plugins running on your site and decide which ones are really necessary—and remove those that aren’t.
It’s a good idea to measure the website’s performance with and without any plugins that might slow down the site. (See Tip #13 for tools to assist you.) This will help you identify plugins with the highest cost in terms of website performance. If the functionality provided by a performance-draining plugin is absolutely necessary, look for alternative plugins that might deliver the goods at a lower performance cost, or consider developing a custom solution.
In some cases, you might have a plugin that is absolutely necessary but only for certain pages. If such a plugin is slowing down the site for all pages, find a way to ensure the plugin is only invoked for the pages really requiring it. Likewise, you might have a plugin offering a ton of functions of which you only use one or two; again, try to find a “lighter” alternative.
Tip #12 – Make Sure Your Server is Fast Enough
Even once you’ve addressed all the previously discussed issues, it’s possible that your website will still be too slow, if the server it’s running on is not powerful enough.
Not all servers are created equal. First, there are different types of website hosting environments—primarily, these are called dedicated, VPS, and shared—each of which offers a different level of performance. (While a dedicated server is doing nothing by serving your website, the other two types can be affected by the load of other websites hosted on the same physical hardware.) Second, each server’s configuration (including things like the number of CPUs, CPU speed, amount of memory, and the types of software running on it) will affect how well it performs. Third, there can be wide differences in the internet-connection speeds available to the server.
It’s important that your web server is fast enough so it is not responsible for inducing any delays in the end user’s browsing experience. Because of high competition in the website hosting space, you won’t have to pay a lot more to upgrade your web server, if necessary. So, if you determine that your site is not responding quickly enough after optimizing everything else you can, speak to your hosting provider about upgrading your site’s hosting environment.
Tip #13 – Continuously Monitor Your Site’s Performance
It is important to check how well your site is performing on a regular basis. This is because things are constantly changing—everything from modifications made to your website (that can introduce speed-draining factors like those already discussed in this article) to increased visitor traffic to your site over time (which is, of course, something you should aim for!).
There are many tools available to audit your site’s page-load speed. Three we recommend are Google’s free PageSpeed Insights, Oncrawl, and Pingdom. PageSpeed Insights is probably the most commonly used tool out there, while the other two are popular paid tools you can try for free.
Your website’s performance can have a significant impact on the performance of your business! Following the tips presented in this article will help you maximize the speed with which your web pages load, resulting in better user experience and search engine rankings.
Last modified: January 17th, 2018