When did overloading the DOM with javascript become acceptable? Webmasters are inserting copious amounts of javascript into pages as if it’s become mandatory; as if their employees of Chotchkie’s and the more flair, the happier the customer. I’m sick of going to websites and my browser crashing because someone is using jQuery UI and every javascript widget they find.
It’s always shocked me when a site is using all of jQuery UI. It’s so bloated and unnecessary in my opinion. Don’t fool yourself, SockBook.com *the leading social network for sock collectors*, you don’t need it.
Okay. I’m the one complaining, let’s take a look at how hypocritical I am:
Javascript on *REMOVED*.com (my personal blog):
Total Requests: 5 js, 31 total
Posts Pages
Total Requests: … 21 js, 96 total
In my defense, I’m still using AddThis and will be using a different solution for sharing. I would edit that out from this article (but I won’t) and I swear I am OCD about this stuff on real websites.
Javascript is far from bad, javascript makes the web a MUCH better place. I just don’t think enough people consider combining js or alternatives until it becomes necessary. Online stores have the most to loose from slow page loading and poor performance, but many stores take a community Magento installation with weak caching and an underpowered server, pile on some terrible javascript, and serve up a page that makes customers want to smash their computer.
Let’s look at some solutions you can use to reduce your dependency upon javascript:
Cached Follower Counts
Caching your follower counts will reduce the number of javascript calls made on your pages. If you have a sidebar showing your follower counts for every social network you use, then those counts are having to be retrieved on every page load. Instead, you could retrieve counts every couple of hours and store them in your database. Using images, you can fake the social networks follower image and add your count – so your using buttons that people recognize.
It’s actually easier than you might think. Here is some sample code (designed for WordPress, but easily modified) that will allow you to retrieve your counts: http://wpforce.com/twitter-facebook-googleplus-fan-follower-count-php/. You can then store the counts however you prefer.
Static Social Sharing Links
Static sharing links that use no javascript provide full featured sharing in a popup, instead of on page. Caching the share counts for each service, and for each page on your site would be intensive so I would use static links only when showing a count is not required. Static links might come in handy when you have a category page or a calendar, and you don’t want to embed share counts for 20 items.
Below, all of the examples use the same method, Google+’s method. They do use javascript, but they don’t require an iframe embed or inluding a .js file. If a user has javascript disabled, the share will open in a new window at full size.
Google+
A ready to go, copy and past static share link is available for Google plus and is located here: https://developers.google.com/+/plugins/share/#sharelink
Static Link: https://plus.google.com/share?url=example.com
With Javascript:
<a href="https://plus.google.com/share?url=example.com" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank"><img src="https://www.gstatic.com/images/icons/gplus-16.png" alt="Share on Google+"/></a>
Example: 
The embed code will provide you with a popup window giving a preview of what the user will share. You can also use a static link: https://plus.google.com/share?url=yoursite.com
Facebook wants you to use their javascript embeds. I’ve seen multiple people claim you have to use their method, but you can use a static share link.
Static Link: https://www.facebook.com/sharer.php?u=[url to share]&t=[title of content]. You *must* URL encode the parameters.
With Javascript:
<a href="https://www.facebook.com/sharer.php?u=[uriencoded url your sharing]?t=[uri encoded title]" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=270,width=600');return false;" target="_blank">Share This</a>
Example: Share This
If your wanting users to share the main page of your site, use a web based url encoder. If you want to use the current page, you will need to get the page name and page title and url encode both.
WordPress Page Name and Title, Encoded:
<a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(the_permalink()) .'?t='. urlencode(get_the_title()); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=270,width=600');return false;" target="_blank">Share This</a>
Twitter has a share link without javascript – however, in practice you will want to add a snippet of javascript to handle launching a popup window.
Static Link: https://twitter.com/share
With javascript:
<a href="https://twitter.com/share" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=270,width=600');return false;" target="_blank">Tweet This</a>
Example: Tweet This
Caching Javascript
You can actually cache Google Analytics and any other javascript your including on your pages and then combine them, serving a single js file. Since remote files may change often, you will want to cache them regularly.
If your using WordPress, W3 Total Cache and others provide remote javascript caching.
For Anyone:
CloudFlare will combine, cache, and deliver your javascript from a CDN.
jQuery Optimization
Use Google or Microsoft’s CDN to serve jQuery since the visitor will likely already have a cached version of it.
Google CDN:
jQuery 1.7.2: http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
jQuery UI 1.8.2: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js
jQuery UI Lightness Theme: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css
Microsoft
jQuery 1.7.2: http://code.jquery.com/jquery-1.7.2.min.js
jQuery UI 1.8.19: http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js
jQuery UI Lightness Theme: http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/ui-lightness/jquery-ui.css
Tools tips and UI
If your still using javascript to create drop down menus or tool tips, consider superior html/css solutions.
For tooltips, you can use code similar to: Pure CSS Tooltips (They look *amazing*)
For tabbed content, take a look at this article from CSS Tricks.
Here’s a GREAT article (circa 2010) showcasing some alternatives: http://www.webgranth.com/extensive-collection-of-css-alternatives-techniques-to-javascript
So, do you really think you need to use so much external javascript?