Internet Marketing Small Business Website | Footer Code Optimization
The previous Internet Marketing Small Business Website guide, looked at <head> code optimizations to speed up page render time, making content appear faster.
Reducing the <head> JavaScript files loaded at initial run time, means recoding the <footer> section to accommodate the new location for the scripts.
Such scripts may be needed only after the page has loaded, for example, enabling an image gallery function.
Let us look again, using bolded examples below, at the specific files to be moved from <head> section:
<!-- start code -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> [Name Of Page] </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.lightbox').lightbox(); }); </script>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="description" content=" [Page Description] " />
</head>
<!-- end code -->
Footer Optimization: Page Load Time
Which JavaScript files can be safely moved to <footer> section?
Although there may be custom scripts located within the <head> section, which if moved could affect the page functionality; there are many common JavaScript files that can be safely relocated.
Best practice to follow, would be to move JavaScript referenced dependencies one at a time, then run page to determine efficiency of the code optimizations.
jQuery specific files, in bold within the upper code view, don't need to be run immediately & can be moved into the <footer> section after the closure of all Division Tags [<div></div>], viz:
<!-- start code -->
</section>
</div>
<!-- end of all content blocks & divisions -->
<!-- Footer Code JavaScript Files -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.lightbox').lightbox(); }); </script>
<!-- End Of Footer Code JavaScript Files --></body>
</html><!-- end code -->
The jQuery LightBox dependent files moved into the <footer> section allow for all text & image content to load much faster, & speed up the rendering time of the web page.
An additional JavaScript function, which is common to many Internet business websites, is the Google Analytics Code Snippet. This function enables websites to capture important data about individual pages.
The metrics generated, which could include: Social Media interaction; page load time; keywords used, or number of visitors, are essential marketing tools for small businesses.
This particular script code can be moved into the <footer> section directly before the closing <body> tag, thus:
<!-- start code -->
<!-- Google Analytics Code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-XX', '');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
<!-- End Of Google Analytics Code --></body>
</html><!-- end code -->
Remove Render-Blocking JavaScripts
Analogous to speeding up page web page load time, is the optimization of JavaScript files which may cause Render-Blocking.
This problem may appear when the script files within the <head> section are executed concurrently [one after the other]. It's important to focus on optimizing such content delivery within ones overall Internet marketing business plan.
The execution time lag, or delay, prevents other elements, like images or text, from loading within the browser. Slow loading pages frustrate site visitors, & could lead to a loss of customers.
Modern web browsers have the capability of multi-threaded operation in the downloading of page content. To take advantage of such functionality, however, requires the files must be sorted in order of importance related to page content display, & optimally be served from multiple web domains.
Subdomain As Content Delivery Network
In the backend administrative panel of a typical business website, will be an area or section devoted to setting up Subdomain(s).
A subdomain is simply a linked folder created within your web hosting environment.
If a domain name were, www.mybusiness.com, then a subdomain would be of the form, subdomain.mybusiness.com.
Thus setting a subdomain to act as faux Content Delivery Network [CDN] for the website, one may add files to such domains to serve content in a multi-threaded, fashion:
http://cdn1.YOUR_DOMAIN.com/PATH_TO_FILE
http://cdn2.YOUR_DOMAIN.com/PATH_TO_FILE
http://cdn3.YOUR_DOMAIN.com/PATH_TO_FILE
http://cdnX.YOUR_DOMAIN.com/PATH_TO_FILE
If a particular JavaScript file depends on another file for it's function, then the dependency order needs to be properly set. In addition to this, some JavaScript files may be set to load simultaneously by using the HTML Async attribute,
<script async src="JAVASCRIPT_FILE_NAME.js">
Let us look at a simple code structure optimized for speed & efficiency using our updated <footer> section code to include content delivery from multiple subdomains, & asynchronously loading other files:
Optimize Content Delivery
<!-- start code -->
</section>
</div>
<!-- end of all content blocks & divisions -->
<!-- Footer Code JavaScript Files -->
<script type="text/javascript" async src="js/jquery.js"></script>
<script type="text/javascript" src="http://cdn2.mybusiness.com/js/jquery.lightbox.js"></script>
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.lightbox').lightbox(); }); </script>
<!-- End Of Footer Code JavaScript Files -->
<script>
<!-- INLINE Google Analytics Code -->
</script></body>
</html><!-- end code -->
Note that there is a limit to which one should load multiple files from multiple subdomains. It's best to keep that number around 2 to 5 separate hosts.
Using Google As A Content Delivery Network
Finally, by utilizing hosted content which is on Google's servers, one may use Google as a multiple CDN for specific files. One should ensure that the referenced JavaScript files are compatible with ones needs & specific uses.
Google hosts many such libraries such as: jQuery; MooTools; Google Fonts & Prototype. Below is an example of implementing async JavaScript loading, ones own hosted subdomain as a CDN, & using Google as a content distribution network:
<!-- start code -->
<!-- Footer Code JavaScript Files -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" async src="js/jquery.js"></script>
<script type="text/javascript" src="http://cdn2.mybusiness.com/js/jquery.lightbox.js"></script>
<!-- End Of Footer Code JavaScript Files --><!-- end code -->
Embedded Map Data
Google maps code can be implemented in the section to speed load times
Which JavaScript Files Can Be Deferred?
Although specific JavaScript files may be needed within <head> section; such as Cufon font rendering files & inline script, there remain many other files & JavaScript dependencies which can be safely moved into the <footer> section.
A short list, although by no means definitive:
- Facebook scripts for 'liking'
- Embedded Twitter functions to show recent tweets
- Many jQuery & other JS files for image manipulation
- LightBox gallery function
- Contact form validation code
- Google map JavaScript code
- HTML5 video playback scripts
Summary Of Optimization Methods
Using self hosted subdomains as a Content Delivery Network [CDN], moving JavaScript libraries & functions into the <footer> section, & by making use of Google as a hosted content delivery network resource, one may optimize page load times & speed up the entire website.
The results from following these methods will have a large impact on the apparent load time, thus increasing efficiency & customer outlook.
Marketing ones business website is not just about content, but in ensuring such content is loaded as fast as possible for potential customers, giving them a better experience & impression of ones business products & services.
Related
How to Create a Loan Amortization Calculator Using HTML and JavaScript
How to Get High Organic Traffic from Search Engines
Repairing the Base of a Rotted Deck Post
Reputation Management and the Importance of Quality Web Content for Businesses
15 Digital Channels Your Business Can Use to Build an Effective Online Presence
