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

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).

diff --git a/plugins/PiwikAnalytics/PiwikAnalyticsPlugin.php b/plugins/PiwikAnalytics/PiwikAnalyticsPlugin.php
index 777fd9c5d315c289826bc526af6dfcaf5fa5a9dd..8a730113e6c21414e0882f9aa7b09692f3bc4c8f 100644 (file)
--- a/plugins/PiwikAnalytics/PiwikAnalyticsPlugin.php
+++ b/plugins/PiwikAnalytics/PiwikAnalyticsPlugin.php
@@ -78,20 +78,28 @@ class PiwikAnalyticsPlugin extends Plugin
      */
     function onEndShowScripts($action)
     {
-        $piwikCode1 = <<<ENDOFPIWIK
-var pkBaseURL = (("https:" == document.location.protocol) ? "https://{$this->piwikroot}" : "http://{$this->piwikroot}");
-document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
-ENDOFPIWIK;
-        $piwikCode2 = <<<ENDOFPIWIK
+        // Slight modification to the default code.
+        // Loading the piwik.js file from a <script> created in a document.write
+        // meant that the browser had no way to preload it, ensuring that its
+        // loading will be synchronous, blocking further page rendering.
+        //
+        // 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 {
+var pkBaseURL = (("https:" == document.location.protocol) ? "https://{$this->piwikroot}" : "http://{$this->piwikroot}");
     var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", {$this->piwikId});
     piwikTracker.trackPageView();
     piwikTracker.enableLinkTracking();
 } catch( err ) {}
 ENDOFPIWIK;
 
-        $action->inlineScript($piwikCode1);
-        $action->inlineScript($piwikCode2);
+        // Don't use $action->script() here; it'll try to preface the URL.
+        $action->element('script', array('type' => 'text/javascript', 'src' => $piwikUrl), ' ');
+        $action->inlineScript($piwikCode);
         return true;
     }