How To: increase website speed

Categories How To

How fast does your website take to load? 10 seconds? 5 seconds? 2 seconds? Your load time from the moment that first request is sent from the user’s computer to the final element loading on their screen is a huge factor that many companies disregard entirely. Both the client and the web designer can overlook this crucial element, but a slow website has multiple effects on the company’s success. First, let’s look at why website speed is even a problem.

Why You Should Care

If your website takes more than 3 seconds to load, you are missing about 40% of your potential customers (source: Econsultancy).

Based on a case study performed by Radware, a 2 second delay in load time during a transaction on an e-commerce website will result in a loss of up to 87% of your customers, a 17% increase from the normal abandonment rate of 70%. This means that the customers have decided on a product, added it to their cart and are looking to purchase it; however, you lose the customer because the checkout process was simply too slow or too complicated.

We live in a day and age where we want our information and we want it now, not in 5 seconds, or even 3. If you don’t believe me, think back to the last website you visited and stayed on for more than a few seconds. How long did it take to load? Most people would say no more than a second or 2. Imagine how few people would use Facebook if every time you wanted to go to your friend’s page or even refresh your own profile page you had to wait 5 seconds. The average time on site would drop significantly as frustration rises.

As frustration rises, conversions drop…a lot.

x-default

Besides the conversion rate, the overall traffic your site receives also drops. From the SEO perspective, Google has admitted that faster sites rank higher than slower sites. Google wants to give the highest quality sites the highest rankings, and high quality websites don’t take more than 3 seconds to load.

Finding out Your Load Time (Exactly)

Screen Shot 2014-11-06 at 11.29.23 AM

So, how fast is your website? You could get a rough estimate by visiting your homepage and holding down CTRL and pressing F5. This will refresh your page with a cleared cache, as if you’ve visited it for the first time. You can count how long it takes to load, or you can use any of the following speed test tools for the most accurate results:

I recommend GTmetrix as it is the easiest-to-use and gives fast and accurate results. To find out why your website may be slow, take a look at Google’s PageSpeed Insights tool and follow their recommendations.

google image

Quick (and permanent) Fixes

If your website loaded in a little over 3 seconds, the following suggestions will likely reduce your load times a good bit, sometimes up to a whole second. These suggestions also apply for websites that loaded faster than 3 seconds.

  1. Compress Images – I’m going to go out on a limb here and say your website has images. Actually, it probably has quite a few images on the homepage, doesn’t it? Images are one of the most common causes of slow websites. Compressing your images is a great way to ensure a faster website. If you can compress the image before uploading it to the website, then great. Once it’s up, however, you can compress it further with the use of add-ons and plug-ins. If you use WordPress, I recommend Bulk Smush It. For Joomla users, you can try out Imgen for your image compressions.

image compression

I use Smush It often, and in the past have had websites drop multiple seconds off of their load time. One website in particular had an 11 second load time because of large, uncompressed images. With one click from Smush It, the load time decreased to around 5 seconds.

  1. Reduce Server Response Time – Your website lives on a Web server. As you may have guessed, the longer it takes for the server to respond, the slower your website. Most companies do not have a physical Web server in their building; however, if you do, upgrade the network card(s), hard drive(s), and processor(s). Then ensure all of the hardware is running properly. If you’re using all of your bandwidth, it may be wise to upgrade your speed through your ISP.For the rest of us, there’s Web hosting companies like GoDaddy and Host Gator. Contact your hosting company and ask them what you can do to reduce server response time. Generally the way it works is you are placed on a very high-end server with advanced hardware along with dozens of other websites. The server is set with a particular bandwidth and you pay for a set amount of this bandwidth. In most cases, you can increase this bandwidth simply by asking the hosting company for an upgrade. In other cases, you may need to switch servers by request. This is generally unnecessary unless tools like the Google PageSpeed Insights tool say the server response time is dreadfully slow, but it is an option nonetheless.Tip: For GoDaddy users with DNS response time issues, you should consider upgrading to GoDaddy’s Premium DNS service. This should help your website’s load speed drastically and it’s not too expensive either.

godaddy premium dns

  1. Caching Documents – Earlier I mentioned you could check your site’s load time by pressing CTRL+F5 to clear the cache and refresh. Well, without the CTRL key, your site will load faster simply because you’ve been there before. Your computer caches recent and the most popular files for faster load times on repeat visits to websites. For an example, go to Facebook.com and see how long it takes to load. Now press CTRL+F5 to clear your cache and refresh the page. Now how long did it take? More than likely, it took a little longer to load. As Facebook is a giant, their response time is extremely fast, but even a cache can reduce the load time by .2 or .5 seconds.The same concept occurs on the backend of a website. When a user requests a page, your website (or, more specifically, your Web server) goes to find this page and all of the documents associated with it. In the case of your home page, it will find the slider images, text, buttons, navigation bar, footer, and any other elements you have on your page. There are caching programs, such as WP Super Cache and WP Fastest Cache that will cache specific files for faster access. This can reduce your load time by ~.5 seconds for most sites.
    Important Note: Caching plugins can be dangerous for your website if used improperly. Your site could load a cached version of your page instead of the newest version, causing potential update and CSS issues. Ask your web designer/developer to integrate caching for you to lower your chances of having a problem.
  2. Reducing HTTP Requests – Your webpage is made up of all sorts of elements that need to be loaded. These elements take up the vast majority (80% according to Yahoo) of your load time, and can include:
  • Image requests
  • Scripts
  • Flash (including ads)
  • Stylesheets

Logically speaking, this makes sense. The less requests your website has to make, the less responses your website (and, in turn, the user) has to wait for.
To do this, you should reduce or remove any Flash elements. For websites built primarily in Flash, you should consider a redesign to HTML5, which will give you use of a Flash-like element, but it will reduce your load time. Above all else, images are the primary concern. To reduce the external image requests, you should use CSS sprites, which is a fancy way of saying to combine all of your background images into a single image. Similarly, you can use image maps to combine general images into a single image. The less images being called on the faster the site will load. You can something similar by combining multiple stylesheets into one. For more information on combining multiple CSS files into one, take a look at this in-depth post by Code Project.

Note: This does not mean you have to sacrifice your website’s unique design for speed; you can have the best of both worlds.

Last but not least, reduce or remove the number of scripts and put them at the bottom of the page.

  1. Remove Unnecessary Plugins/Extensions – Website owners and designers love to overload plugins during the design stage. While speed is important, it’s generally not on the top of the designer’s mind when creating or redesigning your website. It’s a matter of functionality at that point of the design process. Near the end you should go through and find out which plugins/extensions you actually need. Find that balance between functionality, aesthetics, and ease-of-use.Some plugins are very slow at loading and can cause the front-end of your website to be slow as well. For example, if you use a plugin for your slider and you notice that the slider is the last object to load by ~0.5 seconds, then consider finding a new slider. The fact of the matter is some plugins are coded better than others. Some plugins are merely focused on their core job, whereas others take on extra jobs that you really didn’t ask for.

p3 profiler

(Image source: WordPress)

I recommend using the P3 Profiler plugin for WordPress to find the speed-hogs and eliminating or replacing the plugin with a faster one. For a more in-depth look at the plugin and how to use it, take a look at this post on WPmudev.

  1. Use a Content Delivery Network (CDN) – A CDN is essentially multiple servers deployed all around the world that deliver the same content, faster. Instead of hitting one server (which is limited in most browsers) with all of the requests simultaneously, you can hit multiple servers to download the images, videos, and other large files.

Conclusion

To improve your website’s speed you should contact your web designer and ask if he/she can implement the following changes to your website:

  • Discover and remove or replace slow plugins
  • Contact your hosting provider for information on bandwidth limitations and a potential server switch, if necessary
  • Use a caching plugin
  • Combine CSS files wherever possible
  • Combine image files wherever possible
  • Compress images
  • Use a CDN

Ryan Gavin is a writer for Ignition72, a web design company. He writes articles on web design, graphic design, and various internet marketing topics and loves following trends, new technologies, and tips from other designers.