diff --git a/app/node_views/results.html b/app/node_views/results.html
index 89d30c2..ff580af 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -48,7 +48,13 @@
DOM elements count
{{phantomasResults.metrics.DOMelementsCount}}
-
+
+
+
+ A high number of DOM elements means a lot of work for the browser to render the page.
+ It also slows down Javascript DOM queries, as there are more elements to search through.
+
+
DOM max depth
@@ -56,12 +62,23 @@
{{phantomasResults.metrics.DOMelementMaxDepth}}
-
+
+
+
+ A deep DOM makes difficult the CSS matching with DOM elements.
+ It also slows down Javascript modifications to the DOM because dimensions calculations bubble up. Same thing for Javascript events.
+
+
Number of iframes
{{phantomasResults.metrics.iframesCount}}
-
+
+
+
+ iFrames are the most complex HTML elements. They are pages just like the main page and the browser needs to create a new page context, wich has a cost.
+
+
IDs duplicated
@@ -298,7 +315,7 @@
{{phantomasResults.metrics.htmlCount}}
-
+
Scripts
@@ -306,7 +323,7 @@
{{phantomasResults.metrics.jsCount}}
-
+
Stylesheets
@@ -314,7 +331,7 @@
{{phantomasResults.metrics.cssCount}}
-
+
Images
@@ -322,7 +339,7 @@
{{phantomasResults.metrics.imageCount}}
-
+
Fonts
@@ -330,7 +347,7 @@
{{phantomasResults.metrics.webfontCount}}
-
+
Videos
@@ -338,7 +355,7 @@
{{phantomasResults.metrics.videoCount}}
-
+
JSON
@@ -346,7 +363,7 @@
{{phantomasResults.metrics.jsonCount}}
-
+
Other
@@ -354,7 +371,7 @@
{{phantomasResults.metrics.otherCount}}
-
+
diff --git a/app/public/styles/less/results.less b/app/public/styles/less/results.less
index 75868e8..88e2006 100644
--- a/app/public/styles/less/results.less
+++ b/app/public/styles/less/results.less
@@ -138,9 +138,11 @@ h4 {
white-space: nowrap;
text-align: center;
}
-.notations .criteria .icon-question {
+.notations .criteria .info {
width: 10%;
text-align: center;
+}
+.notations .criteria .icon-question {
color: #f1c40f;
cursor: pointer;
}
diff --git a/app/public/styles/results.css b/app/public/styles/results.css
index 5289a8d..ac34a54 100644
--- a/app/public/styles/results.css
+++ b/app/public/styles/results.css
@@ -127,9 +127,11 @@ h4 {
white-space: nowrap;
text-align: center;
}
-.notations .criteria .icon-question {
+.notations .criteria .info {
width: 10%;
text-align: center;
+}
+.notations .criteria .icon-question {
color: #f1c40f;
cursor: pointer;
}