The Downside Of Slow Loading Web Pages – And What You Can Do To Speed Them Up!

Written by:

SEO ZONE: On-Page SEO, Website Design

There are few things as nagging as a slow loading webpage. Anyone who has ever visited such a webpage knows this. Just sitting there, waiting – as page elements take forever to appear – can be frustrating, exasperating, and downright annoying.

Now, in the days of slow dial-up internet connections, people were quite tolerant of slow loading web pages. However, in the modern era of super-fast internet, not many people can put up with them.

Both anecdotal evidence and research studies have proved that slow loading web pages can increase the bounce rate, lower the conversion rate, reduce the likelihood of user recommendations and hurt the page’s SERP rankings.

Therefore, if you own a website, the first thing you need to do is ensure that your web pages load fast. At a minimum, they should load as fast as your competitor’s web pages. Otherwise, you may find yourself playing catch-up in terms of web user experience (UX), conversion rates and SEO rankings.

The ultimate question is: how can you ensure that your web pages load as fast as possible? Well, there are a number of measures which are used to optimize your web pages for speed. Here are a few of them:

Website Design

The most common cause of slow loading is bloated webpage designs. These are simply web pages that have been designed in a way which makes them heavy. The primary reason for this is an inefficient use of HTML, CSS, JavaScript and images.

Here is a quick look at how the inefficient use of these aspects can lead to slower loading web pages, and how to optimize the web pages for faster loading.

1. HTML

The way HTML is used on a webpage can determine its overall size, and hence loading speed. There are certain practices which can bloat the webpage, and make it slower to load. Examples include the following:

  • Using HTML tags to achieve visual effects (e.g. a tag to add extra space) may be tempting but doing so adds unnecessary HTML tags on the webpage. Tags are supposed to be strictly for mark-up. All styling should be left to CSS.
  • Lots of comments are great during development. However, they can add unnecessary kilobytes on the webpage. When deploying a webpage, comments should be removed.
  • Adding in legacy attributes can also weight down your page. In HTML5, the type attribute for style and script tags is irrelevant. So, unless your webpage is designed in HTML 4.01, adding type=”style”, for instance will bloat your webpage for no good reason.

2. CSS

The way CSS is used on a webpage can seriously affect its loading speed. There are three CSS practices which can cause the webpage to load slowly.

a. On-Page CSS

The biggest cause of page bloating is using inline styles. In-line styles increase the overall size of a webpage, thus causing it to load slowly. Similarly, internal/embedded styling also increases page size. Internal styles are more efficient than inline styles, but not the most efficient.

The most efficient way to use CSS is using external stylesheets. This is because an external stylesheet can be cached. As such, for any subsequent pages which use the stylesheet, there will be no need to load it from the server.

Multiple Stylesheets – having too many stylesheets can slow down the loading speed of the webpage. This is because every stylesheet has to be loaded separately. A more efficient way is to combine all stylesheets into one or two max.

Uncompressed Stylesheets – compressing stylesheets makes them smaller and therefore faster to download. This enables the page to load faster. Using uncompressed stylesheets can increase loading time.

3. JavaScript

The CSS practices which can slow a webpage’s loading speed also apply to JavaScript. Using inline scripts, multiple scripts and uncompressed scripts can have analogous effects on a webpage.

However, one other JavaScript practice which can affect loading speed is excessive use of JavaScript libraries like jQuery. Such libraries increase script processing time on the browsers. As such, JavaScript libraries should be used for only complex tasks. Simpler tasks should be implemented in native JavaScript.

Some JavaScript coding practices are inefficient. For instance, using “switch” statements is more efficient than “if/else” statements for handling 3 options or more. Other inefficient practices include, performing lots of global DOM searches and browser reflows. Each of these increases the processing time of JavaScript.

There are numerous techniques for writing more efficient JavaScript code. Most are too lengthy and too complex to cover right here. So, we’ll not address them in this article. The point here is that optimizing JavaScript is one of the key strategies for improving a webpage’s loading speed.

4. Images

Images are essential for making a webpage look great. However, poor usage of images can lead to heavy web pages which load slowly. There are two image practices which can lead to bloated web pages.

a. Wrong Formats

Images come in a number of formats e.g. JPG, PNG, GIF, and many others. Each of these formats has different sizes, and capabilities. JPG is great for photos, GIF is great for vector images and PNG is great for complex graphics. Using PNG for simple drawings or photos is a waste. This is because PNG images are heavy, and thus load slowly.

Beyond the formats, images have to be optimized for web viewing. This makes them not just lighter, but also display better. Popular programs like Photoshop and Illustrator can be used for optimizing images for the web.

b. Too Many Images

The use of too many images on a webpage slows down the loading time. This is because each image has to be downloaded from the server. Where there are lots of buttons, icons or other small images, a good technique for handling them is CSS spriting.

CSS sprites basically combine numerous images into a single file, it then uses CSS to display specific portions wherever an image needs to be displayed. Using CSS sprites reduces the overall number of images which have to be downloaded from the server.

Auxiliary Features/Services

There are certain features and services which are necessary for a webpage to function properly. Some of these are implemented as part of the website design. Others are third-party services which are essential for a website to function normally.

These auxiliary features and services include 3rd party plugins, databases (e.g. MySQL), Content Management Services (CMS frameworks such as WordPress, Drupal or Joomla) and scripting languages (e.g. PHP). Each of these has the potential to slow down a webpage – depending on how it is implemented.

a. Plugins

Generally speaking, 3rd party plugins tend to lead to slow loading web pages. This is because the plugins have to be downloaded from the server. To prevent plugins from making a webpage slow, there are a number of things to observe:

  • Do not use a plugin unless it is absolutely necessary!
  • Keep updating your plugins so that you use the most recent working version. The keyword here is “working”. Avoid beta versions because sometimes their performance hasn’t yet been fine-tuned.
  • For plugins which are available on Content Distribution Networks (CDNs), do not keep a local copy on your server. Use the CDN instead. CDNs tend to load faster.

b. CMS

If you are using a CMS platform like WordPress or Joomla make sure you are using the latest working version. Also, almost every CMS has its own tricks and hacks which can be used to optimize it for faster loading. Look out for such hacks.

c. PHP/MySQL

For a website which uses MySQL, make sure that you are using the latest stable version. The same applies for PHP. There are also certain coding techniques which can speed-up the loading time of a php webpage. For instance, you can use sessions to store some vital information on the browser. This reduces the number of HTTP requests to the server, thus reduces loading time.

Techniques For Making Web pages Faster

There are a number of techniques which can be used to make web pages load faster. Three of the most useful ones are the following:

1. Preloading

Preloading is based on tracking and analyzing how visitors use a website. It predicts which pages a visitor is likely to go to, and pushes them to the visitor’s browser. So, before even clicking a link, the page is on the browser. Upon clicking the link, it loads instantly.

Preloading can also be used with specific website components like images, plugins and videos. Basically, while a visitor is on one page, the resources for the other pages are loaded on their browser. As soon as they navigate to the other pages, there is no need to fetch those resources from the server. As such, the webpage loads faster.

2. Caching

Caching is simply storing some vital information on the visitor’s web browser. These include things like scripts, stylesheets, images, plugins or even web pages. This makes a webpage to respond faster, since it doesn’t have to fetch every resource from the server.

3. AJAX

Asynchronous JavaScript and XML (AJAX) is a technique which can reduce the number of HTTP requests to the server. Using AJAX, you can load specific sections of a page. As such, instead of downloading the full page on every navigation, common features like headers, navigation menus, logos, sidebars and footers are loaded only once. Every subsequent request only loads what is required. This reduces the overall loading time.

4. Responsive Web Design (RWD)

RWD is an approach used for creating webpages which display differently according to the device. RWD is invaluable for creating faster web pages. This is because it enables you to tailor the webpage to the unique characteristics of the device. As such, key aspects like scripts, images, content and media can be optimized for different devices. This makes a webpage load faster on every device.

5. Website Hosting

When a webpage loads slowly, it isn’t always the fault of the web designer. Sometimes, the problem is with the server. The server may process HTTP requests slowly, and such make the webpage appear to load slowly.

When it comes to webservers, there are three aspects which can impact the loading speed of a webpage. These are: server specifications, server software and hosting plan.

a. Server Specs

Servers are computers. As such, they have specs like RAM, processor speed, storage space, etc. Aspects like RAM and processor speed can affect how fast a server processes requests.

However, the spec which is most likely to affect a webpage’s loading speed is the amount of bandwidth on the server. Every server has a specific bandwidth. Roughly speaking, bandwidth is the number of requests which the server can process at a given time.

When a server is nearing its full bandwidth capacity, it tends to slow down. This of course happens when many people are trying to access a website at the same time. As such, if a website is perennially slow, it is possible that its bandwidth is too small compared to the number of visitors it receives.

b. Server Software

Each server has specific software which is used for processing HTTP requests. The most common server softwares are Apache and nginx. Now, there is actually a running debate about which of the two is faster. We’ll not get into that right now but will in another article.

The most important thing to remember is this: both types of software can be fine-tuned to process requests faster. As such, if a website’s pages load slowly, it could be that the server hasn’t been fine-tuned. Most of the tricks which are used for optimizing both Apache and nginx are in the public domain.

c. Hosting Plans

This is actually tied to the server specs. Different hosting plans, will get you different specifications. Generally speaking, there are three kinds of hosting plans i.e. shared hosting, virtual private servers (VPS) and dedicated servers.

The hosting plan which is most prone to serving web pages slowly is shared hosting. This is because the server’s resources (i.e. RAM, bandwidth, processor, etc) are shared among different websites. And in most cases, you don’t know how many other websites use the resources, and the number of their visitors.

Shared hosting plans are marketed with slogans like “unlimited bandwidth”, which are clearly erroneous. Even dedicated servers (which are much more expensive) have bandwidth specifications. So, how can a cheaper hosting plan have “unlimited bandwidth”?

VPS and dedicated servers are less prone to getting slowed down by bandwidth problems. And when it happens, it is easy to know. This is because they often come with bandwidth specifications.

Ultimately, the only way to find out whether or not slow loading web pages are as a result of the hosting plan is through analytics. Using analytics, you can analyze the traffic flow to your website and tell whether the resources available via your hosting plan can handle that amount of traffic.

Helpful Tools

Before attempting to optimize a website’s loading speed, it is important to know what the speed actually is. There are a number of tools which can help with that. The most popular ones are:

  • Pingdom Tools (tools.pingdom.com)
  • GTMetrics (https://gtmetrix.com/)
  • WebPagetest (http://www.webpagetest.org/)
  • YSlow (http://yslow.org/)

Each of these provides a number of testing options. For instance, they can test from different browsers (Chrome, Firefox, Safari, etc), different locations (e.g. US, Germany, Australia), or different devices (PCs, phones, tablets).

Each also offers different metrics which can be used to analyze the webpage. Most of the metrics can act as optimization points which can be used to improve the page’s overall loading speed.

The Wrap Up…

Slow loading web pages can severely curtail a website’s overall effectiveness. They can reduce UX, lower the conversion rates, increase the bounce rate and ultimately hurt a website’s SERP rankings.

Therefore, if you are dedicated towards maximizing the potential of your website, then you need to first of all fine-tune its loading speed. The numerous tips outlined above can help you with that.

However, if you prefer to have an expert optimize your website for faster loading, then kindly contact our company at 303-200-1000 today or by email at [email protected]! We’ll ensure that your visitors enjoy the fastest loading speed possible across multiple devices.

To contact us right away, you can also fill out the form on this page and we can send you a FREE analysis of your website and show you first hand where and how to fix your website if you’re experiencing page slowness.

Mike
Your SEO Guide to the Top!
Call 303-200-1000 for a Free Consultation.
SEO Zones | Reach New Heights


Back to Top