added summary page
This commit is contained in:
Peter Hedenskog
parent
72a5a0b108
commit
b6d1afa2ae
|
|
@ -7,7 +7,7 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {
|
|||
} else {
|
||||
address = phantom.args[0];
|
||||
output = phantom.args[1];
|
||||
page.viewportSize = { width: 600, height: 600 };
|
||||
page.viewportSize = { width: 1440, height: 900 };
|
||||
page.open(address, function (status) {
|
||||
if (status !== 'success') {
|
||||
console.log('Unable to load the address!');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
pageDescription=All data for one page.
|
||||
pageMenu=page
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
pageDescription=An executive summary.
|
||||
pageMenu=summary
|
||||
|
|
@ -33,19 +33,14 @@
|
|||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
|
||||
<!--
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
-->
|
||||
<a href="http://sitespeed.io"><img class="brand" src="img/logo.png"/></a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li #if( $pageMenu == "summary" ) class="active" #end><a href="index.html">Summary</a></li>
|
||||
<li #if( $pageMenu == "pages" ) class="active" #end><a href="report.html">All pages</a></li>
|
||||
<!--<li #if( $pageMenu == "errors" ) class="active" #end><a href="#contact">Errors</a></li>-->
|
||||
#if( $pageMenu == "page" )
|
||||
<li class="active"><a href="#">Page</a></li>
|
||||
#end
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
#parse("report/velocity/header.vm")
|
||||
|
||||
<h2>Page <a href="$document.getRootElement().getChild("u").getValue()" target="_blank">$document.getRootElement().getChild("u").getValue()</a> </h2>
|
||||
<div>
|
||||
|
||||
<h3>Yslow scores below 100</h3>
|
||||
<table class="table table-condensed table-striped table-bordered" >
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Rule
|
||||
</th>
|
||||
<th>
|
||||
Score
|
||||
</th>
|
||||
<th>
|
||||
Message
|
||||
</th>
|
||||
<th>
|
||||
Extra
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
|
||||
|
||||
#foreach ($message in $document.getRootElement().getChild("g").getChildren())
|
||||
|
||||
#if($!{message.getChild("score").getValue()})
|
||||
|
||||
#if($message.getChild("score").getValue()!="100")
|
||||
|
||||
<tr>
|
||||
<td>$message.getName()</td>
|
||||
<td>$message.getChild("score").getValue()</td>
|
||||
<td>$message.getChild("message").getValue()</td>
|
||||
<td>
|
||||
#foreach ($item in $message.getChild("components").getChildren("item"))
|
||||
<p>$item.getValue()</p>
|
||||
#end
|
||||
</td>
|
||||
</tr>
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Page assets</h3>
|
||||
<table class="table table-condensed table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
url
|
||||
</th>
|
||||
<th>
|
||||
type
|
||||
</th>
|
||||
<th>
|
||||
size
|
||||
</th>
|
||||
<th>
|
||||
expires
|
||||
</th>
|
||||
<th>
|
||||
gzip
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
#foreach ($asset in $document.getRootElement().getChild("comps").getChildren())
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<a href="$asset.getChild("url").getValue()" target="_blank">$asset.getChild("url").getValue()</a>
|
||||
<a rel="tooltip" target="_blank" data-placement="right" data-html="true" href="$asset.getChild("url").getValue()" data-original-title="Response headers: <br/>
|
||||
#foreach ($response in $asset.getChild("headers").getChild("response").getChildren())
|
||||
$esc.html($response.getName()) : $esc.html($response.getValue()) <br/>
|
||||
#end
|
||||
"><i class="icon-info-sign"></i></a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
$asset.getChild("type").getValue()
|
||||
</td>
|
||||
<td>
|
||||
$asset.getChild("size").getValue()
|
||||
</td>
|
||||
<td>
|
||||
#if($!{asset.getChild("expires")})
|
||||
$asset.getChild("expires").getValue()
|
||||
#else
|
||||
0
|
||||
#end
|
||||
</td>
|
||||
<td>
|
||||
#if($!{asset.getChild("gzip")})
|
||||
$asset.getChild("gzip").getValue()
|
||||
#else
|
||||
|
||||
#end
|
||||
</td>
|
||||
</tr>
|
||||
#end
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
#parse("report/velocity/footer.vm")
|
||||
|
||||
|
||||
|
|
@ -41,10 +41,15 @@
|
|||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="The total number of requests for this page">Total requests</a>
|
||||
|
||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="The total number of requests for this page">Total request</a>
|
||||
</th>
|
||||
<th>
|
||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="">Total primed cache request</a>
|
||||
</th>
|
||||
<th>
|
||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="">Page load time</a>
|
||||
</th>
|
||||
|
||||
|
||||
<th>
|
||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="The Yslow grade for this page, 100 is perfect, 0 is incredible bad">Yslow grade</a>
|
||||
|
|
@ -58,9 +63,15 @@
|
|||
|
||||
<tr>
|
||||
<td>
|
||||
<a href="$results.getChild("u").getValue()" target="_blank">$results.getChild("u").getValue()</a>
|
||||
|
||||
<a rel="tooltip" target="_blank" data-placement="right" data-html="true" href="$results.getChild("u").getValue()" data-original-title="Response headers: <br/>
|
||||
#*
|
||||
TODO: The creation of the file link needs to be cleaned up
|
||||
*#
|
||||
#set($file = $results.getChild("u").getValue().replaceAll("\/", ""))
|
||||
#set($file = $file.replaceAll("http:", ""))
|
||||
#set($file = $file.replaceAll("https:", ""))
|
||||
#set($file = $file.concat(".html"))
|
||||
<a href="$file">$results.getChild("u").getValue()</a>
|
||||
<a rel="tooltip" data-placement="right" data-html="true" href="$file" data-original-title="Response headers: <br/>
|
||||
#foreach ($response in $results.getChild("comps").getChild("item").getChild("headers").getChild("response").getChildren())
|
||||
$esc.html($response.getName()) : $esc.html($response.getValue()) <br/>
|
||||
#end
|
||||
|
|
@ -113,6 +124,13 @@
|
|||
<td>
|
||||
$results.getChild("r").getValue()
|
||||
</td>
|
||||
<td>
|
||||
$results.getChild("r_c").getValue()
|
||||
</td>
|
||||
<td>
|
||||
$results.getChild("lt").getValue()
|
||||
</td>
|
||||
|
||||
<td>
|
||||
$results.getChild("o").getValue()
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
|
||||
#parse("report/velocity/header.vm")
|
||||
<div>
|
||||
<h2>Executive summary for $document.getRootElement().getAttribute("url").getValue() </h2>
|
||||
|
||||
<p>
|
||||
#set($nrOfPages = $document.getRootElement().getChildren().size())
|
||||
$nrOfPages pages has been analyzed
|
||||
|
||||
#set($nrOfDecimals = 0)
|
||||
#set($nrOfJs = 0)
|
||||
#set($nrOfCss = 0)
|
||||
#set($nrOfCssImages = 0)
|
||||
#set($nrOfImages = 0)
|
||||
#set($nrOfTotalRequests = 0)
|
||||
#set($nrOfTotalRequestsPrimedCache = 0)
|
||||
#set($totalPageWeight = 0)
|
||||
#set($totalLoadTime = 0)
|
||||
#set($totalScore = 0)
|
||||
|
||||
#foreach ($results in $document.getRootElement().getChildren())
|
||||
|
||||
#if($!{results.getChild("stats").getChild("js").getChild("r")})
|
||||
#set ($nrOfJs = $math.add($nrOfJs, $results.getChild("stats").getChild("js").getChild("r").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("stats").getChild("css").getChild("r")})
|
||||
#set ($nrOfCss = $math.add($nrOfCss,$results.getChild("stats").getChild("css").getChild("r").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("stats").getChild("cssimage").getChild("r")})
|
||||
#set ($nrOfCssImages = $math.add($nrOfCssImages, $results.getChild("stats").getChild("cssimage").getChild("r").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("stats").getChild("image").getChild("r")})
|
||||
#set ($nrOfImages = $math.add($nrOfImages, $results.getChild("stats").getChild("image").getChild("r").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("r")})
|
||||
#set ($nrOfTotalRequests = $math.add($nrOfTotalRequests, $results.getChild("r").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("r_c")})
|
||||
#set ($nrOfTotalRequestsPrimedCache = $math.add($nrOfTotalRequestsPrimedCache, $results.getChild("r_c").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("w")})
|
||||
#set ($totalPageWeight = $math.add($totalPageWeight, $results.getChild("w").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("lt")})
|
||||
#set ($totalLoadTime = $math.add($totalLoadTime, $results.getChild("lt").getValue()))
|
||||
#end
|
||||
|
||||
#if($!{results.getChild("o")})
|
||||
#set ($totalScore = $math.add($totalScore, $results.getChild("o").getValue()))
|
||||
#end
|
||||
|
||||
#end
|
||||
</p>
|
||||
|
||||
<table class="table table-condensed table-striped table-bordered" id="pagesTable" >
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Total number</th>
|
||||
<th>Average</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>JS</td>
|
||||
<td>$nrOfJs</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfJs,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CSS</td>
|
||||
<td>$nrOfCss</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfCss,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CSS images</td>
|
||||
<td>$nrOfCssImages</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfCssImages,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image</td>
|
||||
<td>$nrOfImages</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfImages,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Requests</td>
|
||||
<td>$nrOfTotalRequests</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfTotalRequests,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Requests primed cache</td>
|
||||
<td>$nrOfTotalRequestsPrimedCache</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($nrOfTotalRequestsPrimedCache,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page weight</td>
|
||||
<td>$totalPageWeight</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($totalPageWeight,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Load time</td>
|
||||
<td>$totalLoadTime</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($totalLoadTime,$nrOfPages))</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Score</td>
|
||||
<td>$totalScore</td>
|
||||
<td>$math.roundTo($nrOfDecimals,$math.div($totalScore,$nrOfPages))</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
#parse("report/velocity/footer.vm")
|
||||
|
||||
|
||||
34
sitespeed.io
34
sitespeed.io
|
|
@ -62,27 +62,46 @@ done)
|
|||
|
||||
result=($(printf '%s\n' "${links[@]}"|sort|uniq))
|
||||
|
||||
# Setup dirs
|
||||
REPORT_DIR="sitespeed-result/sitespeed-$HOST-$NOW"
|
||||
REPORT_DATA_DIR="$REPORT_DIR/data"
|
||||
REPORT_DATA_PAGES_DIR="$REPORT_DATA_DIR/pages"
|
||||
mkdir -p $REPORT_DIR
|
||||
mkdir $REPORT_DATA_DIR
|
||||
mkdir $REPORT_DATA_PAGES_DIR
|
||||
|
||||
echo "Will create result file: $REPORT_DATA_DIR/result.xml"
|
||||
|
||||
echo '<?xml version="1.0" encoding="UTF-8"?><document host="'$HOST'" url="'$URL'">' >> $REPORT_DATA_DIR/result.xml
|
||||
|
||||
for i in "${result[@]}"
|
||||
do
|
||||
echo "Analyzing $i"
|
||||
phantomjs dependencies/yslow.js -f xml $i | cut -c39- >> $REPORT_DATA_DIR/result.xml
|
||||
pagefilename=${i#*//}
|
||||
pagefilename=$(echo $pagefilename | sed 's/\///g')
|
||||
|
||||
# Striping names from / will make sure urls/files are the same with or without / ending
|
||||
if [ ! -f "$REPORT_DATA_PAGES_DIR/$pagefilename" ]
|
||||
then
|
||||
phantomjs dependencies/yslow.js -f xml $i >> "$REPORT_DATA_PAGES_DIR/$pagefilename"
|
||||
cat "$REPORT_DATA_PAGES_DIR/$pagefilename" | cut -c39- >> "$REPORT_DATA_DIR/result.xml"
|
||||
fi
|
||||
done
|
||||
echo '</document>'>> "$REPORT_DATA_DIR/result.xml"
|
||||
|
||||
echo '</document>'>> $REPORT_DATA_DIR/result.xml
|
||||
|
||||
echo 'Create the HTML'
|
||||
|
||||
echo 'Create the result HTML'
|
||||
java -jar dependencies/xml-velocity-1.0-full.jar $REPORT_DATA_DIR/result.xml report/velocity/pages.vm report/properties/pages.properties $REPORT_DIR/report.html
|
||||
|
||||
echo 'Create the summary HTML'
|
||||
java -jar dependencies/xml-velocity-1.0-full.jar $REPORT_DATA_DIR/result.xml report/velocity/summary.vm report/properties/summary.properties $REPORT_DIR/index.html
|
||||
|
||||
|
||||
echo 'Create page HTML'
|
||||
for file in $REPORT_DATA_PAGES_DIR/*
|
||||
do
|
||||
filename=$(basename $file)
|
||||
java -jar dependencies/xml-velocity-1.0-full.jar $file report/velocity/page.vm report/properties/page.properties $REPORT_DIR/$filename.html
|
||||
done
|
||||
|
||||
|
||||
#copy the rest of the files
|
||||
mkdir $REPORT_DIR/css
|
||||
|
|
@ -93,4 +112,5 @@ cp report/css/* $REPORT_DIR/css
|
|||
cp report/js/* $REPORT_DIR/js
|
||||
cp report/img/* $REPORT_DIR/img
|
||||
|
||||
echo "Finished, see the report $REPORT_DIR/report.html"
|
||||
echo "Finished, see the report $REPORT_DIR/index.html"
|
||||
exit 0
|
||||
Loading…
Reference in New Issue