Digital Quark
Spread The Knowledge

Tutorial: Importance of Page Speed aka Website Loading Time

There are various factors that influence search engine results. Usually, these factors are either related to on page SEO (the Title tags, Meta Description, URL structure, and headers, etc.) or off page SEO (number and quality of inbound links, etc.). In 2010, Google announced page speed aka website loading speed would be one of the search engine ranking factor. In simple words: the speed at which someone could view the content from a search result would be a factor.

Google has been intentionally unclear on the exact definition of “site speed”. Also, further adding to the mystery, Google’s Matt Cutts announced that slow-performing mobile sites may soon suffer lower search rankings.

Why would Google do this?

The answer is fairly obvious. A poor performing website results in a poor user experience. Therefore, a slow performing website deserve less promotion in search results.

This is not to say that it is the single most important factor. Relevant content is still the single most important factor. Hence a slower website may still rank higher than a faster website if its content is more relevant, and richer. Then comes the next big question:

So Why Page Speed Is Important

High Page Load Time Can Drastically Decrease Conversions:

Google conducted an individual study on load times and their effect on conversions. The study found that just a 0.5 second increase in load time caused a 20% decrease in traffic. Amazon conducted an internal study to determine how a website’s load time affected its sales. They discovered that for every 100 ms increase in load time, their business saw a 1% decrease in sales. And it translates to a loss of millions of dollars in a year.

Here are some facts based on research done by Akamai and Gomez.com :

  • First of all 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • Almost 51% of mobile internet users say that they’ve encountered a website that crashed, froze, or received an error.
  • About 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
  • Most notably 47% of consumers expect a web page to load in 2 seconds or less.
  • Furthermore 40% of people abandon a website that takes more than 3 seconds to load.
  • A 1 second delay in page response can result in a 7% reduction in conversions.
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

The following infographic details the effects of loading time on user conversions:

page speed website load time

Courtesy: Kissmetrics

How to Improve Website Loading Time for New Websites

Most websites are built on WordPress platform. The following factors are important before and while building your website:

  • Pick a fast Theme: A fast theme ensures that you do not have to separately take care of technical issues that slow websites down. Technical issues are usually related to HTML code, CSS, Java scripts, etc. So choose the right theme based on fast framework.
  • Choose Plugins wisely: Plugins make life easier by automating the operations. It is necessary to do research to see how they perform and stack with rest of the plugins. Importantly, it is wise only to pick the ones you need else they slow the website loading speed.
  • A good Hosting Service: A fast theme and well-selected plugins will perform slowly if hosting service is slow or unreliable. Therefore it is very important to make an informed decision based on past track record, reliability, and features provided. A blog may be hosted on cheaper, slower hosting service. An E-Commerce website would need to be hosted on faster Hosting Service.
  • CDN (Content Delivery Network): A content delivery network or content distribution network (CDN) is a globally distributed network of proxy servers deployed in multiple data centers. The goal of CDN is to serve content to end-users with high availability and high performance.  Essentially, it increases your website’s global performance.You may want to consider free CDN services by CloudFlare. Most notably, MaxCDN makes a good case for itself by proven track record.

How to Improve Website Loading Time for Existing Websites

Note: The following information applies to some new websites as well.

There are many best practices with regards to improve loading times. A good theme certainly helps a lot. However, custom web design, content, plugins, SSL certificate, etc. may cause the website to slow down.

  • Enable compression

Gzip should be used for file compression. It reduces the size of CSS, HTML, and JavaScript files. It should be used on files that are larger than 150 bytes. A good theme has these files in compact form.

Do not use gzip on image files. Rely on a good plugin to compress image after it is uploaded to your WordPress website.

  • Minify CSS, JavaScript, and HTML

Minify means optimizing your code (including removing spaces, commas, and other unnecessary characters). It can increase your page speed. A Good Hosting service provides you with the option to minify the code in cPanel.

Use YUI Compressor for both CSS and JavaScript if your Hosting Service do not have in-built option. YUI compressor is recommended by Google.

  • Reduce redirects

Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. For example, if your mobile redirect pattern looks like this: “example.com -> www.example.com -> m.example.com -> m.example.com/home,” each of those two additional redirects makes your page load slower. Intelligent DNS records may help you with reducing redirects. Also never reference URLs in your pages that are known to redirect to other URLs.

  • Leverage browser caching

Web browsers are designed to cache CSS, images, JavaScript files, etc. So when a visitor returns to your site, the browser doesn’t have to fetch the entire page again.  YSlow can provide you with a cache expiration date set for your content. You may choose to set your “expires” header for how long you want that information to be cached. A year is a reasonable time period for caching if your website design does not change frequently. Also you may want to read Google provided information here.

  • Server response time

Server response time depends on a good Hosting Service, and the hosting plan you choose. Because hosting plan decides how much resources (CPU, RAM, and bandwidth) your webpages may utilize at a given time. However, some server response time issues may be related to design. So there may be performance bottlenecks like slow database queries, slow routing, etc. The optimal server response time is under 200ms. Learn more technical details about optimizing your time to first byte.

  • Optimize images

Consider the image size before you upload it to your website. Also consider the right image format. Notably, PNGs are generally better for icons, favicons, etc. while JPEGs are generally better for photographs. Image may not look good below a particular file size. Hence use plugins for compression and reduce their size further. While they are compressed on server and delivered such to user, they are presented in decompressed form on user’s system.

Another good way to optimize images is to combine them into one large image that loads at once. The images would be frequently used on your site like buttons and icons. This results in fewer HTTP requests and faster load time. CSS sprites must be used to accomplish this.

Following technical video details best practices for Page Speed. You are assumed to have CSS, Script, etc. technical knowledge. Nonetheless, it is a good video by Google.

Then there are HTTP Keepalives and Critical Rendering Path. Look for them below in suggested read.

Page Speed Related Tools

Page speed diagnostics

  • PageSpeed
    Google offers browser extensions for both Firefox and Chrome for Page Speed. Page Speed is the tool which identify multiple problem areas with regards to load time for your website/webpage.
  • YSlow
    This Firefox browser extension features a grading system to help you quickly see how well your site is performing and offer advise on how to improve your site speed. However, it needs to be used along with Firebug(another extension).
  • org
    Provides report on how a page is performing.
  • GTMetrix                                                                                                                                                                                                                                               This is the best web based tool that combines page speed, YSlow. Hence it gives you a complete picture and complete information. Tip: Logged in users get priority in testing queues.

Code compressor

Suggested read for Page Speed aka Website Load Time

About the Author Rajat Khanna

Leave a Comment: