Apply these 7 Rules for Explosively FAST Web Sites!

The fact is, that for most web pages in cyberspace, less than 10-20% of the end user’s response time is spent receiving the HTML document from the web server to your browser.

If you want to dramatically reduce your web page loading times, you will need to focus on the remaining 80 to 90% that is causing the delays (longer loading times).

I used to think that if I optimized the heck out of my site through compressing images, cleaning up my CSS and reducing HTTP requests, I would be golden.

I was actually on the right track for one of them, and the others didn’t hurt my cause either, but boy did I have a lot to learn.

Reducing the HTTP requests was a big help, but there were many more rules to understand and apply if I wanted a super-fast website.

NOTE: This article’s main focus for applying the following Rules, for Faster-Loading web sites, is concentrated on the WordPress-based website, but can be applied to any site… Let’s Begin!

The 7 Rules to Begin Your Journey to Blistering Fast Web Sites

The following 7 rules are in order of priority.

There are many more rules to apply that will make the online GTMetrix tool happy (Web Site and Performance Optimization), which in turn will make Google happy (it’s a good thing), and we will cover those rules in future articles.

But, for now, we will concentrate on the rules that, if applied, will give you a less problematic and faster loading website… let’s begin.

Rule #1 – Make Fewer HTTP Requests

The ‘Performance Golden Rule‘ reveals that only 10 to 20% of the end user’s response time involves retrieving the requested HTML document (the basic parts of the page, written information, etc.).

The remaining 80 to 90% of the time is spent making HTTP requests for all the additional components (the add-on’s that make the page more user-friendly and exciting), to include: images, scripts, stylesheets, Flash, etc.

I have been witness to some web sites that have gone over-board, with their bells and whistles, causing an excess of 200+ HTTP requests, requiring many additional ‘Phone Calls’ (figure of speech), to many different servers across the globe, to retrieve the information.

TIP – Reduce these calls and you will speed up your web page loading times.

Today’s dynamic web sites and their beautifully tailored web pages may include many components that require a call to a server for information.

A first-time visitor to your web page will most likely require several, behind the scenes, HTTP requests. But, by using a future Expires Header, you can make those components cache-able for the following clicks on links, or even down-the-road visits to your web pages.

An Expires Header is a simple piece of scripting that is placed within your site that states “if you’ve been here before and the CSS files, JavaScript files and images are the same as your last visit, we don’t need to make the additional ‘Phone Calls’ to the server and download the script(s) or image(s) again.”

Tip – Add an Expires Header to allow a simple HTTP header to dramatically improve your page loading times by using the browser’s cache.

Rule #3 – Gzip – Mod_Deflate Certain Components

Using this rule will decrease loading times by reducing the size of the HTTP file, in turn, reducing the response time.

This rule #3 is for compressing certain file-types, which is done by your server using the ‘Mod_Deflate’ module.

NOTE: Some web-host companies disable mod_deflate due to it taking too many resources… you will need to ask your web host to enable it for you (if willing).

Once enabled, the mod_deflate scripting can be applied to any directory or your entire site, allowing targeted compression of specific file-types.

The sites that don’t compress all of their HTML, stylesheets, and scripts are missing the opportunity to reduce their page’s weight by 70% or more.

Tech Talk – If an HTTP request results in a smaller response, the transfer time decreases, because fewer packets must travel from the server to the client.

Once the scripting is placed within the root .htaccess file, these directives will tell Apache (Server’s Software) to compress all of your web sites text, HTML, CSS, and JavaScript.

Rule #4 – Move Scripts to the Bottom of the Page

The best place to put scripts are at the bottom of the page. The page content isn’t blocked from rendering, and the viewable components in the page are downloaded as early as possible.

If scripts are put at the top of the page, as they usually are, everything in the page that is below the script (the entire contents on the page), is blocked from rendering and downloading until the script is loaded.

Google –“None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.”

As spoken above by Google… one of the alternate suggestions that comes up often is to defer scripts. The DEFER attribute indicates that the script does not contain ‘Document.Write’, which is a clue to browsers that they can continue rendering.

It’s better to move external JavaScript files from the top of the page to the bottom (when possible). This enables progressive rendering and achieves greater download parallelization.

TIP – If a script can be ‘Deferred’, it can also be moved to the bottom of the page… this is the best thing you can do to speed up your site.

Rule #5 – Combine External JavaScript – External Stylesheets (CSS)

Combining JavaScript files into one or two files, for WordPress, is easier said than done as it is stated, but with success, comes reduced HTTP requests, I.E. faster loading times.

Same with combining Stylesheets (CSS) into fewer files when using WordPress for your site. This will give you the same result, reduced HTTP requests, which equals reduced downloading times.

NOTE: Although many may argue that scripts can download in parallel allowing for faster downloads, we will discuss the results of too many JavaScript or CSS files in the future article for Rule #5.

The ideal situation would be to have one script and one CSS stylesheet only, in each page.

Rule #6 – Minify/Compress JavaScript Files and CSS Files

Minification/Compression is the removing of unnecessary characters and white space from the code to reduce its size, thereby improving load times. File size savings can vary from 10% to 38% depending on the original file size.

Rule #7 – Use a Content Delivery Network (CDN)

A Content Deliver Network is a system of distributed servers (network) that deliver web pages and other Web content to a user based on the geographic locations of the user, the origin of the web page and a content delivery server.

NOTE: A Content Delivery System is much more appropriate for commercial web sites and less feasible for personal or smaller web sites, but there is nothing wrong with having your site on a CDN, the costs are coming down.

Closing Comments for Steps to Faster-Loading Web Sites

Applying all of these rules will give you an edge for a faster web site, but there is another proven fact that will boost your site’s speed and be less problematic over-all… it begins with your web hosting service.

If the home for your site includes 1000’s of other web sites, all on the same server with your site, what do you think will happen when 1000’s of people are attempting to access those 1000’s of other websites all at the same time?

ANSWER – High-Traffic BOTTLENECKS.

Waiting in line to access the web sites on a server can be compared to rush hour traffic when all of those cars are trying to merge on to the highway all at the same time.

You may be experiencing it now with your website… loading, loading, loading… those are people trying to access the other 1000’s of websites on the server, all at the same time… fewer sites equals less chance of bottlenecks.

Final Tip – Reduce your chances of bottlenecks to the point of non-existence by having your site hosted on a server with a small amount of other web sites.

The rules mentioned above are take-away’s from the book “High Performance Web Sites” ~ Steve Souders

NOW It’s YOUR Turn… Have You Applied any of the Rules Mentioned Above? What has it Done for Your Web Site? Share YOUR Comments and Discoveries Below!