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.
Rule #2 – Optimize Cache-Control Using Apache’s Mod_Expires Module & Expires Header
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.
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.
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.
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.
The ideal situation would be to have one script and one CSS stylesheet only, in each page.
Alternative: W3 Total Cache plugin – this will do the work for you.
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.
CSS Compressor/Minifyer – http://www.freeformatter.com/css-minifier.html
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.
The rules mentioned above are take-away’s from the book “High Performance Web Sites” ~ Steve Souders