Tweak to PiwikAnalytics plugin to help browsers to pre-load piwik.js, may shave a little off load time.

Piwik's current default recommended JS for loading creates a <script> tag via document.write(). In addition to being generally evil, this means the browser doesn't know it's going to need piwik.js until that chunk of script gets executed... which can't happen until all scripts referenced *before* it have been loaded and executed.

The only reason for that bit of script though seems to be to pick 'http' or 'https' depending on the current page's scheme. This can be done more simply by using a protocol-relative link (eg "//piwik.status.net/piwik.js"), which the browser will resolve as appropriate. Since it's now sitting in the <script> tag, the browser's lookahead code will now see it and be able to start loading it while earlier things are parsing/executing.
May be better still to move to an asynchronous load after DOM-ready, but I'm not sure if that'll screw with the analytics code (eg, not being able to start things on the DOM-ready events since they're past).
This commit is contained in:
Brion Vibber 2010-12-08 17:39:04 -08:00
parent 26bd15ec0a
commit 516161213f

View File

@ -78,20 +78,28 @@ class PiwikAnalyticsPlugin extends Plugin
*/ */
function onEndShowScripts($action) function onEndShowScripts($action)
{ {
$piwikCode1 = <<<ENDOFPIWIK // Slight modification to the default code.
var pkBaseURL = (("https:" == document.location.protocol) ? "https://{$this->piwikroot}" : "http://{$this->piwikroot}"); // Loading the piwik.js file from a <script> created in a document.write
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); // meant that the browser had no way to preload it, ensuring that its
ENDOFPIWIK; // loading will be synchronous, blocking further page rendering.
$piwikCode2 = <<<ENDOFPIWIK //
// User-agents understand protocol-relative links, so instead of the
// URL produced in JS we can just give a universal one. Since it's
// sitting there in the DOM ready to go, the browser can preload the
// file for us and we're less likely to have to wait for it.
$piwikUrl = '//' . $this->piwikroot . 'piwik.js';
$piwikCode = <<<ENDOFPIWIK
try { try {
var pkBaseURL = (("https:" == document.location.protocol) ? "https://{$this->piwikroot}" : "http://{$this->piwikroot}");
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", {$this->piwikId}); var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", {$this->piwikId});
piwikTracker.trackPageView(); piwikTracker.trackPageView();
piwikTracker.enableLinkTracking(); piwikTracker.enableLinkTracking();
} catch( err ) {} } catch( err ) {}
ENDOFPIWIK; ENDOFPIWIK;
$action->inlineScript($piwikCode1); // Don't use $action->script() here; it'll try to preface the URL.
$action->inlineScript($piwikCode2); $action->element('script', array('type' => 'text/javascript', 'src' => $piwikUrl), ' ');
$action->inlineScript($piwikCode);
return true; return true;
} }