ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Internet Marketing Small Business Website | Footer Code Optimization

Updated on April 29, 2014
Optimize JavaScript for faster page load. Speedup business website
Optimize JavaScript for faster page load. Speedup business website | Source

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.

Improve Page Speed Using CDN
Improve Page Speed Using CDN | Source

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

A
37.789018, -122.391506:

get directions

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.



Source

Comments

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)