added new rule: critical path for rendering

CHANGELOG

@@ -8,6 +8,8 @@ version 1.5
 * Added percentage on summary page
 * Added support for setting user agent
 * Added support for setting view port
+* Removed exprimental rule for the amount of JS used
+* Added new rule: Critical Path
 * Bugfix: The check for phantomjs wasn't working, works now
 
 version 1.4

report/velocity/macros.vm

@@ -85,11 +85,11 @@ success#end#end
 #if ($js<1)success#else
 error#end#end        
 
-## The percent of javascript with HTML
-#macro ( percentageJavascriptOnPageType $averagePercent )
-#if ($averagePercent<50)success#elseif ($averagePercent>75)
-error#else
-warning#end#end
+## The critical path
+#macro ( criticalPathType $score )
+#if ($score<95)error#elseif ($score<96)
+warning#else
+success#end#end
 
 ## Verify assets without far expires date
 #macro ( expiresType $expires )

report/velocity/summary.logic.vm

@@ -22,7 +22,7 @@
 #set($statsSpof = $stats.copy())
 #set($statsJsSyncInHead = $stats.copy())
 #set($statsAssetsWithoutFarExpires = $stats.copy())
-#set($statsJsPercentageWeight = $stats.copy())
+#set($statsCriticalPath = $stats.copy())
 
 #foreach ($results in $document.getRootElement().getChildren())
     
@@ -62,24 +62,6 @@
         $statsDocumentWeight.addValue($math.toInteger($results.getChild("stats").getChild("doc").getChild("w").getValue()))
     #end
 
-    #if($!{results.getChild("stats").getChild("js").getChild("w")})  
-
-        ## Sometimes getting the js directly from the stats object gives wrong values, so
-        ## let's calculate them one by one
-        
-        #set($jsWeightCounted = 0)
-        #foreach ($asset in $results.getChild("comps").getChildren())
-            #if ($asset.getChild("type").getValue() == "js")
-            #set($jsWeightCounted = $math.add($jsWeightCounted,$asset.getChild("size").getValue()))
-            #end
-        #end
-
-         #set ($percentageJs = $math.roundTo(1,$math.mul($math.div($jsWeightCounted,$math.add($results.getChild("stats").getChild("doc").getChild("w").getValue(),$jsWeightCounted)),100)))
-         $statsJsPercentageWeight.addValue($percentageJs)
-    #else
-        $statsJsPercentageWeight.addValue(0)
-    #end
-
 
     #if($!{results.getChild("g").getChild("spof").getChild("score")})
 	   #if ($results.getChild("g").getChild("spof").getChild("score").getValue() != 100)
@@ -88,6 +70,11 @@
 	   #end       
     #end
 
+
+    #if($!{results.getChild("g").getChild("criticalpath").getChild("score")})
+           $statsCriticalPath.addValue($math.toInteger($results.getChild("g").getChild("criticalpath").getChild("score").getValue()))
+    #end
+
     #if($!{results.getChild("g").getChild("syncjsinhead").getChild("components")})
      $statsJsSyncInHead.addValue($math.toInteger($results.getChild("g").getChild("syncjsinhead").getChild("components").getChildren("item").size()))
     #end
@@ -112,7 +99,7 @@
 #set ($totalJsSyncInHeadAverage = $math.roundTo($nrOfDecimals,$statsJsSyncInHead.getMean()))  
 #set ($totalSpofAverage = $math.roundTo($nrOfDecimals,$statsSpof.getMean()))  
 #set ($totalAssetsWithoutFarExpiresAverage = $math.roundTo($nrOfDecimals,$statsAssetsWithoutFarExpires.getMean())) 
-#set ($javascriptDividedWithDocumentAverage = $math.roundTo($nrOfDecimals,$statsJsPercentageWeight.getMean()))
+#set ($totalCriticalPathAverage = $math.roundTo($nrOfDecimals,$statsCriticalPath.getMean())) 
 
 ## Create median
 #set ($scoreMedian = $math.toInteger($statsScore.getPercentile(50)))   
@@ -127,7 +114,7 @@
 #set ($jsSyncInHeadMedian = $math.toInteger($statsJsSyncInHead.getPercentile(50))) 
 #set ($spofMedian = $math.toInteger($statsSpof.getPercentile(50))) 
 #set ($assetsWithoutFarExpiresMedian = $math.toInteger($statsAssetsWithoutFarExpires.getPercentile(50))) 
-#set ($javascriptDividedWithDocumentMedian = $math.roundTo($nrOfDecimals,$statsJsPercentageWeight.getPercentile(50)))
+#set ($criticalPathMedian = $math.toInteger($statsCriticalPath.getPercentile(50))) 
 
 ## Set percentage
 #set ($pagesWithSpofPercentage = $math.roundTo($nrOfDecimals, $math.mul($math.div($totalSpofPages,$nrOfPages),100)))

report/velocity/summary.vm

@@ -17,7 +17,7 @@
 #set($spofPerPageText = "Everything above 0 is bad!")
 #set($assetsWithoutFarExpiresText = "0 is good. More than 4 is bad. Google Analythics & Gaug.es is excluded from this.")
 #set($percentageJsText = "Less than 50% is good, above 75 % is bad.")
-
+#set($criticalPathText = "You should always aim for score 100, above 95 is OK.")
 
 
 <div class="row-fluid">
@@ -125,9 +125,9 @@
                 </div>
             </div>
               <div class="span4">
-                <div class="alert alert-#percentageJavascriptOnPageType($javascriptDividedWithDocumentAverage)">
-                    Js % of a page
-                    <div><a href="#" rel="popover" class="alert-#percentageJavascriptOnPageType($javascriptDividedWithDocumentAverage) large" data-trigger="hover" title="The average of $javascriptDividedWithDocumentAverage % javascript on a page " data-content="$percentageJsText">$javascriptDividedWithDocumentAverage %</a> ($javascriptDividedWithDocumentMedian)</div>
+                <div class="alert alert-#criticalPathType($totalCriticalPathAverage)">
+                    Critical path
+                    <div><a href="#" rel="popover" class="alert-#criticalPathType($totalCriticalPathAverage) large" data-trigger="hover" title="The average of the critical path score " data-content="$criticalPathText">$totalCriticalPathAverage </a> ($criticalPathMedian)</div>
                 </div>
             </div>
 
@@ -220,8 +220,8 @@
                        
                     </li>
                     <li>
-                    <b>The amount of javascript in one page (the javascript weight compared to the weight of the document)</b>:
-                    $percentageJsText
+                    <b>The critical path (every file loaded inside of head, will postpone the rendering of the page, try to avoid loading javascript synchronously, load files from the same domain as the main document, and inline css for really fast critical path)</b>:
+                    $criticalPathText
                     </li>
 
                  </ul>