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 {
|
} else {
|
||||||
address = phantom.args[0];
|
address = phantom.args[0];
|
||||||
output = phantom.args[1];
|
output = phantom.args[1];
|
||||||
page.viewportSize = { width: 600, height: 600 };
|
page.viewportSize = { width: 1440, height: 900 };
|
||||||
page.open(address, function (status) {
|
page.open(address, function (status) {
|
||||||
if (status !== 'success') {
|
if (status !== 'success') {
|
||||||
console.log('Unable to load the address!');
|
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,24 +33,19 @@
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container">
|
<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>
|
<a href="http://sitespeed.io"><img class="brand" src="img/logo.png"/></a>
|
||||||
<div class="nav-collapse">
|
<div class="nav-collapse">
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li #if( $pageMenu == "summary" ) class="active" #end><a href="index.html">Summary</a></li>
|
<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 == "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" )
|
||||||
</ul>
|
<li class="active"><a href="#">Page</a></li>
|
||||||
|
#end
|
||||||
|
</ul>
|
||||||
</div><!--/.nav-collapse -->
|
</div><!--/.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="well">
|
<div class="well">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
<th>
|
<th>
|
||||||
|
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="The total number of requests for this page">Total request</a>
|
||||||
<a rel="tooltip" data-placement="top" data-html="false" href="#" data-original-title="The total number of requests for this page">Total requests</a>
|
|
||||||
|
|
||||||
</th>
|
</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>
|
<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>
|
<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>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<a href="$results.getChild("u").getValue()" target="_blank">$results.getChild("u").getValue()</a>
|
#*
|
||||||
|
TODO: The creation of the file link needs to be cleaned up
|
||||||
<a rel="tooltip" target="_blank" data-placement="right" data-html="true" href="$results.getChild("u").getValue()" data-original-title="Response headers: <br/>
|
*#
|
||||||
|
#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())
|
#foreach ($response in $results.getChild("comps").getChild("item").getChild("headers").getChild("response").getChildren())
|
||||||
$esc.html($response.getName()) : $esc.html($response.getValue()) <br/>
|
$esc.html($response.getName()) : $esc.html($response.getValue()) <br/>
|
||||||
#end
|
#end
|
||||||
|
|
@ -112,7 +123,14 @@
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
$results.getChild("r").getValue()
|
$results.getChild("r").getValue()
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
$results.getChild("r_c").getValue()
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$results.getChild("lt").getValue()
|
||||||
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
$results.getChild("o").getValue()
|
$results.getChild("o").getValue()
|
||||||
</td>
|
</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))
|
result=($(printf '%s\n' "${links[@]}"|sort|uniq))
|
||||||
|
|
||||||
|
# Setup dirs
|
||||||
REPORT_DIR="sitespeed-result/sitespeed-$HOST-$NOW"
|
REPORT_DIR="sitespeed-result/sitespeed-$HOST-$NOW"
|
||||||
REPORT_DATA_DIR="$REPORT_DIR/data"
|
REPORT_DATA_DIR="$REPORT_DIR/data"
|
||||||
|
REPORT_DATA_PAGES_DIR="$REPORT_DATA_DIR/pages"
|
||||||
mkdir -p $REPORT_DIR
|
mkdir -p $REPORT_DIR
|
||||||
mkdir $REPORT_DATA_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
|
echo '<?xml version="1.0" encoding="UTF-8"?><document host="'$HOST'" url="'$URL'">' >> $REPORT_DATA_DIR/result.xml
|
||||||
|
|
||||||
for i in "${result[@]}"
|
for i in "${result[@]}"
|
||||||
do
|
do
|
||||||
echo "Analyzing $i"
|
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
|
done
|
||||||
|
echo '</document>'>> "$REPORT_DATA_DIR/result.xml"
|
||||||
|
|
||||||
echo '</document>'>> $REPORT_DATA_DIR/result.xml
|
echo 'Create the result HTML'
|
||||||
|
|
||||||
echo 'Create the 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
|
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
|
#copy the rest of the files
|
||||||
mkdir $REPORT_DIR/css
|
mkdir $REPORT_DIR/css
|
||||||
|
|
@ -93,4 +112,5 @@ cp report/css/* $REPORT_DIR/css
|
||||||
cp report/js/* $REPORT_DIR/js
|
cp report/js/* $REPORT_DIR/js
|
||||||
cp report/img/* $REPORT_DIR/img
|
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