Load Your Webpage Faster using jQuery

Contents

A jQuery plugin for faster page loads.

Building on concepts like pjax and TurboLinks, Pronto is a simple way to harness the speed increases that HTML5’s pushState() can provide on nearly any site imaginable.

Using a “partial page load” technique, Pronto reduces the over all server load and font-end render time by only updating pieces of a page instead of the entire document. On many sites, basic layout like the header and footer remain generally the same page to page. The overall browsing experience gets a little shot of caffine by only requesting these pieces of markup once, as well as assets like stylesheets, scripts or fonts.

Pronto is a new way of thinking about assembling a site and may not make sense at first. But don’t worry, the small amount of initial setup is well worth the pay off durring the browsing experience. If you’re clicking around this site in a browser with HTML5 support, you should notice minimal page flash and quick page loads. Or, check out the console to monitor the Pronto calls and responses when navigating.

Once a site is set up properly, all in-site URLs should gracefully degreade in older browser where HTML5’s pushState() is unavailable*.

Configuration

OPTION	DEFAULT	DESCRIPTION
`container`	`'#pronto'`	Selector of the container to update
`selector`	`'a'`	Selector of the links to target

Events

EVENT	RETURN	DESCRIPTION
`pronto.request`		Fired before new Pronto request is made
`pronto.load`		Fired after new Pronto request is loaded
`pronto.render`		Fired after new Pronto request is rendered

Usage

Javascript

Becuase pronto only loads a piece of the page at a time, it may require refactoring any existing javascript to avoid unwanted javascript errors by properly delegating events and managing plugins. Start by setting up two separate functions, one that handles binding events and initializing plugins and one that handles unbinding events and destroying plugins.

function initPage() {
	// bind events and initialize plugins
}

function destroyPage() {
	// unbind events and remove plugins
}

Instead of initializing scripts from the $(document).ready() event, begin full page requests by initializing Pronto, binding Pronto events and calling the newly created render function. This basic flow will ensure users don’t encounter any javascript based errors when navigating the site.

$("document").ready(function() {
	$.pronto();

	$(window).on("pronto.render", initPage)
			 .on("pronto.load", destroyPage);

	initPage();
});

Markup

A site’s Markup will also need to be refactored to ensure proper page renders. Consider the following markup pattern:

<!-- Only output on full page loads -->
<html>
	<head>
		...
	</head>
	<body>
		<header>
			Page Header
		</header>
		<div id="pronto">
		<!-- END: Only output on full page loads -->

			<!-- Always output -->
			This element's content will be updated.
			It is also the only markup that should 
			be returned from a Pronto request. 
			<!-- END: Always output -->

		<!-- Only output on full page loads -->
		</div>
		<footer>
			Page Footer
		</footer>
	</body>
</html>
<!-- END: Only output on full page loads -->

The header is used throughout the site, and as such, it’s HTML does not need to change regularly. Rather, updates like setting the active navigation item should be handled through javascript.

The container element, by default <div id="pronto">, is the only content that will be updated when in-site links are clicked. This is also the only content that should be returned from pronto requests. You will need to configure your template or CMS based on the markup above to ensure proper page renders.

Requests

There are two ways of detecting a pronto request and serving the appropriate response: check the request headers for the existance of a same-domain ajax request or simply look for the existance of the GET variable “pronto.” Depending on what technology the site is built on, it may require a combination of both methods to properly configure Pronto without interfearing with other types of ajax requests.

$isPronto = ($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest" &amp;amp;&amp;amp; strpos($_SERVER["HTTP_REFERER"], "http:://www.yourdomain.com/") > -1);
// or
$isPronto = ($_GET["pronto"] == "true");

Responses

Pronto will expect a well-formed json object to be returned. The response should contain both the new page’s title and it’s partial content:

{
	"title": "New Page Title",
	"content": "<p>New page content</p>"
}

If utilizing a server-side caching method, remmeber to cahce all Pronto requests separate from full page requests. Otherwise users may see a garbled json object instead of the site.

Analytics

Pronto includes basic hooks into the Google Analytics javascript API and will push page views as users navigate.

Compatibility

Requires jQuery 1.7+
Tested in Firefox, Chrome, Safari

License

Released under the MIT License. Feel free to use it in personal and commercial projects.

Homepage: https://formstone.it/
GitHub: https://github.com/benplum/Pronto