Optimization Tutorials
Lazy Load Content and Widgets with MooTools and RequireJS
The idea of lazy loading content is not new; we've been lazy loading images (check out my MooTools LazyLoad plugin) for quite a while now. And why wouldn't you lazy load content? There are SEO advantages, load time advantages, bandwidth savings, and more, so including a bit of extra JavaScript could help your large website immensely. In my latest redesign, I took the time to lazy load not just images but static content and social networking widgets to make my website's initial load happen faster to make user experience and Google rank improve. Let me show you how I used MooTools and RequireJS to lazy load content.
Introducing LazyLoad 2.0
While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code. With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading — the images were loading regardless of the plugin, much like it always had with WebKit-based browsers. Intercepting had continued to work within Internet Explorer but IE's reign of dominance is dying. Clearly I needed to bite the bullet and code LazyLoad to use custom data- attributes to store the real image path.
MooTools History Plugin
One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads. Why download the header, footer, and other static data multiple times if that specific data never changes? It's a waste of time, processing, and bandwidth. Unfortunately, at this point in the web, constant refreshes are the norm — but they don't have to be. Christoph Pojer, a MooTools Core Developer, has added History to his PojerTools PowerTools library. History replaces traditional same-site URL loading by providing a method to catch link clicks, load page content via AJAX (Mootools' Request.HTML class), modify the document's location object to keep "history" records, and re-evaluate content links to allow developers to create a fast, efficient one-page website.
Smarter Script Loading with LABjs
We all know that asynchronous resource loading is the key to preventing unwanted and unnecessary blocking within the browser. There are many scripts/libraries available to help with async script loading but the ones that succeed are simple, compact, and reliable. Those words describe Kyle Simpson's LABjs, a lightweight utility for loading your scripts without blocking.
Load MooTools Classes on Demand with RequireJS
RequireJS is a hugely popular JavaScript project right now thanks to what it does: asynchronously load JavaScript files and properly handle their introduction to a namespace flawlessly. Of course, callbacks are provided which allow you to work with the new code one it has been loaded. MooTools is a perfect match for RequireJS because of its modular structure. Let me show you how you can lazy load MooTools classes with the robust RequireJS library.
Quick Tip: Object Indexing vs. Array Collection
Let's say that we have one large text document and we have a a bunch of keywords that we want to parse the document for. We don't care how many times times the keyword appears — we just care that it's been used. When we find a keyword, we need to record that keyword been found so that we may check at a later time.
HTML5 Link Prefetching
One effort shared by both browsers and developers is making the web browsing experience faster. There are many common-known ways to keep your websites fast: using CSS sprites and image optimization, using .htaccess to set file headers for longer caching, javascript file compression, using CDNs, and so on. I've even detailed some of the website optimization efforts used on this website. Firefox introduces a new strategy for website optimization: link prefetching.
Using jQuery or MooTools For Drag, Drop, Sort, Save
One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag'n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I've chosen to update the post with a faster, more efficient set of MooTools and PHP code. I've also provided a jQuery equivalent. Enjoy!
META Refresh vs. JavaScript Refresh
A few days back I was perusing the ESPN.com source code when I found the following snippet of code:
Create a Sprited Navigation Menu Using CSS and MooTools
CSS sprites are all the rage these days. And why shouldn't be? They're easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 - It’s JavaScript Time. In his post he outlined a method for enhancing the CSS sprite menu with jQuery. I loved his post so much that I converted his jQuery CSS sprites menu to MooTools.