What Makes Your Website Fat And Slow? 6 Recommendations To Optimize Page Load Speed

by Salman Mehdi  March 6, 2014

I am a big advocate of having a balanced diet. We all know about how much balanced diet is essential for us. We all know that there are some basic constituents of a balanced diet. A balanced diet keeps you healthy. To remain healthy, you need to take balanced diet with adequate intervals in between. The ingredients of a balanced diet include: carbohydrates, proteins, vitamins, fats, minerals, water. Why I am so much concerned about balanced diet? Why I am just talking about it at length?

The reason behind emphasizing the concept of balanced diet is that I believe prevention is better than cure. A fat person always remains at risk from all sides, physical or emotional. The perception about being fat is never considered as “healthy”.

Now, imagine if a website is “fat”. Surely, the first thing that would be affected will be its speed. The issue of fat and slow website continues to hamper the performance of the organizations, and the problem continues to haunt the big businesses. A fat website is not healthy. A fat website is lazy. A fat and slow website is not good at all. Nobody likes a fat and slow website. A FAT AND SLOW WEBSITE IS A BAD WEBSITE!

In this blog, I will provide a detailed account of the reasons behind a website’s slow performance. I will also discuss the factors that contribute towards website’s “fatness” and “slowness”. In the end, I will provide recommendations to address this pertaining issue that continues to pose a serious threat to the performance of a website.

Factors influencing a website’s (slow) performance

There are many different factors that influence the performance of a particular website. In this section, I will highlight these factors one by one under separate headings, along with the so-called “exercise regime” – the measures web developers need to take in order to ensure their websites’ performance remains unperturbed. To start, analyze your website’s performance via Page Speed Insights by Google Developers. This tool provides us with the best practices for website performance.

Google Page Speed Insights

Screenshot of Google Page Speed Insights

Increased Page Load Time

Believe it or not, 55% of all websites are either fat or slow. This is really a daunting concern. It means that more than half of the websites launched are not optimized keeping in view the load time required for a single page to load. The longer the time a website takes, the more annoying it will be for its visitors. As the situation stands today, a website takes about 7.25 seconds to load (median value), which is way beyond a visitor’s expectations. On the contrary to this statistic, 65% of the visitors still expect a website to take a mere 2 seconds to load.

According to a research report by KISSMetrics, a 1-second delay in site load time has following effects:

  • It reduces page views by 11%
  • It reduces conversion by 7 to 15%
  • It reduces visitor satisfaction by 16%
  • More than 40% of the visitors held a negative opinion about the time an average website takes to load.

The above statistics only cover the non-mobile responsive websites.

As far as the statistics for mobile responsive websites are concerned, they tell the same story as above. It is a fact that only 28% of the websites are mobile responsive. More than 60% of smart phone users expect a website to take less than 4 seconds to upload. A whopping 85% of the website users held the opinion that websites load faster on mobile devices as compared to desktop computers.

Recommendations

A website’s performance is gauged by the page load speed. One thing is clear that you will have to optimize your web pages in such a way that all the roadblocks are removed and page load speeds improve.

Optimize Caching

Most of the websites have static resources which do not change. These static resources include image files, CSS files, Java Script files, etc. These files take a lot of time to load. It is necessary to get these files cached. Optimized caching with HTTP servers will do the job for you.

To get the maximum benefits of optimized caching, you need to set all the servers with customized headers and keep all the static sources there. There are some browsers that never cache static resources.

For leverage browser caching, we recommend you to:

  • Set aggressive caching for all static resources.
  • Do remember to use fingerprinting for dynamic caching.
  • Set header correctly for Internet Explorer.
  • Avoid conflicting URLs on Mozilla Firefox.

If you are using an HTTP server, then you can use leverage proxy caching. Preferably we recommend you:

  • Don’t use query strings in the browser.
  • Don’t use cookies-setting static resources for proxy caching.
  • Beware of the issues before caching CSS and JS files.

 

Analytics Scripts

It is really important for you to consider website analytics, including the page code and how the code functions. Before making any decision to host a website, you should always keep in mind how the code is going to work behind the scenes. If you are using Google Analytics (GA), you don’t have to worry about these scripts. Google uses asynchronous tracking mechanism to load a website. For other analytics services that provide live visitor data, asynchronous tracking mechanism does not apply. If you want your website to be more efficient, just get rid of these so-called analytics scripts, unless you want to flaunt your visitor data.

Recommendations

The number of lines of codes is directly proportional to weight of the website. Heavy scripts tend to generate fat and slow websites. How to counter this issue? Don’t worry! We have some time-tested recommendations for you.

Minimize round-trip times (RTT)

There is always a time delay factor involved when you send a query on a server, and the server fetches the answer to your query. This is called the round-trip time. It is an important factor that contributes toward the sluggishness of your website, depending on the files downloaded or number of searched pages. In order to reduce RTT, you can use following methods:

Minimize DNS lookups

Hosting a website is a step-by-step process. Before hosting a website, you have to define hostnames. Having less number of unique hostnames is beneficial for reducing RTT. We recommend you to:

  • Use complete URLs, but avoid using hostnames as much as possible.
  • For JS files, use the same hostname as used in the main document.

 

Minimize redirects

Redirecting a URL is not a bad practice. Websites are re-directed from one URL to another for a purpose to keep track of the pages visited. Redirects allow multiple domains for user-friendly approach on a particular website. But, there is a catch! Higher number of redirects adds to the agony of response-time delays, which influence the overall page load speed. To counter this, we recommend:

  • For every user-typed URL, use server re-writes.
  • Keep a track of website traffic in the background.
  • Use HTTP (301 or 302) redirects instead of JS or Meta redirects.

 

Avoid bad requests

Broken links are bad for your website. It is better to avoid them. Forbidden request 404/414 are examples of bad requests. It is recommended that you do not use redirects for broken links.

Combine external JavaScript

JavaScript files do hamper your page load speed. Combining external JavaScript files into as few files as possible will save you a great deal of time. We recommend you to:

  • Use JS minifying techniques to optimize JS files.
  • Ensure that JavaScript files are kept in the correct position within the document head.

 

Combine external CSS

Just like JavaScript files, external Cascading Style Sheets (CSS) also contribute towards slowing down a website’s speed, while making it fat.  Combining external CSS files into as few files as possible will reduce a lot of RTT. We recommend:

  • Use optimization to make partitions for style sheets.
  • Ensure that JavaScript files are kept in the correct position within the document head

 

Combine images using CSS sprites

Too many image files are harmful for your webpage. They simply slow down to your website’s performance. You need to combine them in as few files as possible, in order to get maximum website speed. We recommend you to:

  • Combine images that are to be placed on one page.
  • Select GIF and PNG files first.
  • Combine cacheable images on priority.
  • Use spriting service, such as SpriteMe.
  • Minimize empty spaces in images.
  • Combine images that have same color pattern.

 

Optimize the order of styles and scripts    

For better parallelization of styles and scripts, you need to optimize them. Optimization gives your website the required speed to launch in a matter of minutes. We recommend you:

  • Prioritize external style sheets ahead of external scripts.
  • Manage other resources ahead of inline scripts.

 

Avoid document.write

Using the function document.write() in order to get external resources will increase the total time required to get a webpage loaded. We recommend you to:

  • Mention all the resources in the HTML directly in the header.
  • Use asynchronous resources.
  • Use friendly iFrames.

 

Avoid CSS @import when possible    

Just like document.write function, the CSS @import function for external style sheet also slows down the page load speed of your website. We recommend you to:

  • Use <link> tag instead of CSS @import.

 

Prefer asynchronous resources

If you want to load your webpage fast – and without any blockage – then we recommend you to:

  • Use a script DOM element.
  • Load Google Analytics asynchronously.

 

Parallelize downloads across hostnames

If you are using two different hostnames to serve resources for your website, then it will increase the parallelization of downloaded pages. You can use multiple hostnames, but we recommend you to:

  • Distribute parallelizable resources across hostnames equally.
  • Ensure that external JS files do not block the parallel downloads.
  • Use a resource from the same hostname.

Toolbars

Too many cooks spoil the broth. Just like that, too many toolbars spoil the website. Toolbars are used to add site-wide functionality to your website, but the trend of using toolbars is reducing as functionalities are added to individual pages as required.  A lot of toolbars can sometimes become a headache.

Recommendations

Every time a new tab or toolbar is activated to initiate a new internet session, the browser takes more time to load a webpage. It is recommended to use toolbars with functionalities only when needed or simply avoid using toolbars at all.

Minimize request overhead

Too many requests generated at a time will have a negative impact on loading time of a webpage. Similarly, too many toolbars tend to slow down the speed of the website. To handle this issue, the TCP protocol uses the slow start algorithm. We recommend you to keep the uploaded bytes to a minimum to ensure fast page loading.

Minimize request size

To ensure fast page load, you should keep the number of cookies to a minimum. The HTTP request should not exceed 1 packet, with the limit of 1,500 bytes. We recommend you to:

  • Use server-side storage for most of the cookie payload.
  • Remove unused or duplicated cookie fields.

 

Serve static content from a cookie-less domain

Using a cookie-less domain to fetch resources ultimately reduces time for loading webpage. It is a fact that no cookies are required to download an image file. It is because image file is a type of static content. An alternative way is to use CDN, which might support cookie-less server to fetch resources. But, we recommend you to:

  • Enable proxy caching.
  • Don’t serve early loaded external JS files from the cookie-less domain.

 

Trust Seals

Security is one of the major issues with websites. Almost all of the websites are vulnerable to hackers or virus attacks. The problem remains unattended as most of the visitors do not know which trust seals, aka anti-virus software, should they use to protect their website without altering the speed and performance. It is a fact that trust seals tend to slow down your website.  According to a survey conducted by Baymard Institute, 36% of the respondents chose Norton, while 23% of the respondents favored McAfee. The interesting fact is that these respondents did not have any technical knowledge about how the anti-virus software affects the website’s performance. But one thing is clear: heavier the protective shield, slower the website. Now, here is the challenge for you to choose from a variety of trust seals available.

Recommendation

We recommend you to use only those trust seals that are most needed.

Ad Network JS

Have you ever tried to place an advertisement on your website? What happens? It takes time to load.

More ads mean more time for a website to load. Multiple ads can fetch millions for websites, but remember, it will be at the cost of time and speed.

Recommendation

We recommend you to serve minimum amount of ads and avoid using pop-ups.

Social Buttons

As mentioned earlier, using social buttons add up to page load speed time. I stand by my point. But hold on for a minute. Social buttons can also hamper your website. One thing that counts as a vital factor is the target audience. No website is for everyone. Therefore, before making your website social media friendly, give a thought as to whom you are going to target? Different audience are found on different social networking site you have to identify which of are best suited for your needs. You don’t need to opt for all social media to go viral. In fact, it is a bad and useless tactic.

Recommendation

We recommend you fewer the social buttons, faster the website performance. (And, do read the third heading “Configure critical social plug-ins for WordPress” in this link. It pretty much applies to all kinds of websites.)

Rich Media

High quality images and videos are good for websites. But there should not be too many of those. Beware! They are the real trap. These can take your website down the hill. It is because high quality images and videos do tend to make your website fat and eventually slow. It is a fact that infographics are an important ingredient in the content mix of today’s websites. These infographics can add value to your websites if they are tactically used. The same can be said for video tutorials. But, infographics and videos can backfire too, if not used correctly.

Recommendation

We recommend you to use your media files of lesser size. (You don’t need to use HD quality images for small sizes.) Plus, you can invest in a CDN service.

Make Your Website Fit!

In this blog post, our aim was to educate about the common ailments that make websites slow and fat. Every problem has a solution. In order to become fit, one should join a gym. Similarly, you have to devise some kind of regime to get your website on the right track, ensuring fast performance. And, our all-new Click&Go platform acts like a gym for fat websites as it works on a superfit optimization formula: Apache+Varnish+Nginx+Memcached. This formula helps in making websites fit, fast and strong.

Click the banner below to check it out for 3 days absolutely free!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Salman Mehdi

Salman Mehdi worked as Digital Content Producer for Cloudways. In his spare time, he reads books, blog posts, or anything that catches his fancy.

Stay Connected:

You Might Also Like...