<div class=“js-tabs” data-existing-hx=“h2” data-tabs-prefix-class=“tabs”>
<ul class="js-tablist"> {% for website in pagestested %} <li class="js-tablist__item"> <a href="#id_{{ forloop.index }}" class="js-tablist__link">{{ website }}</a> </li> {% endfor %} </ul> {% for website in pagestested %} {% assign labels = "" | split: ',' %} {% assign ttfb = "" | split: ',' %} {% assign tti = "" | split: ',' %} {% assign score = "" | split: ',' %} {% for data in file %} {% if site.data.[website].gpagespeed[data] %} {% assign date = data | date: "%d/%m/%y" | prepend: "'" | append: "'" %} {% assign labels = labels | push: date %} {% assign interactive = site.data.[website].lighthouse[data].audits.metrics.details.items[0].observedLoad | round: 0 %} {% assign tti = tti | push: interactive %} {% assign score = score | push: site.data.[website].gpagespeed[data].ruleGroups.SPEED.score %} {% endif %} {% endfor %} <div id="id_{{ forloop.index }}" class="js-tabcontent"> <h3>{{ website }}</h3> <div class="flex"> <div> <strong>Temps de chargement</strong> <div id="chart-{{ website }}-1" class="ct-chart"></div> <script> var data{{ website }}1 = { labels: [{{ labels | join: ', ' }}], datasets: [{ values: [{{ tti | join: ', ' }}] }], // yMarkers: [{ // label: "budget", // value: 650, // options: { // labelPos: 'left' // } // }] }; let chart{{ website}}1 = new frappe.Chart("#chart-{{ website }}-1", { data: data{{ website }}1, ...frappeoptions }) </script> </div> <div> <strong>Score</strong> <div id="chart-{{ website }}-2" class="ct-chart"></div> <script> var data{{ website }}2 = { labels: [{{ labels | join: ', ' }}], datasets: [{ values: [{{ score | join: ', ' }}] }], }; let chart{{ website }}2 = new frappe.Chart("#chart-{{ website }}-2", { data: data{{ website }}2, ...frappeoptions }) </script> </div> </div> {% assign score = 0 %} {% assign timeToFirstByte = 0 %} <div class="table"> {% for data in file %} {% if site.data %} {% assign gpagespeed = site.data.[website].gpagespeed[data] %} {% assign yellowlabtools = site.data.[website].yellowlabtools[data] %} {% assign lighthouse = site.data.[website].lighthouse[data] %} {% else %} {% assign gpagespeed = [website].gpagespeed[data] %} {% assign yellowlabtools = [website].yellowlabtools[data] %} {% assign lighthouse = [website].lighthouse[data] %} {% endif %} {% if gpagespeed %} <div class="grid"> <div class="box date"> <span>Date</span> <p>{{ data | date: "%d %b %y" }}</p> </div> <div class="box score"> <span class="title">Score</span> <span class="number">{{ gpagespeed.ruleGroups.SPEED.score | round }}</span> {% if forloop.index != 1 %}<span class="score-difference{% if score > gpagespeed.ruleGroups.SPEED.score %} score-up{% endif %}{% if score < gpagespeed.ruleGroups.SPEED.score %} score-down{% endif %}"></span>{% endif %} {% assign score = gpagespeed.ruleGroups.SPEED.score %} </div> <div class="box score"> <span class="title">First Byte</span> <span class="number">{{ lighthouse.audits["time-to-first-byte"].numericValue | round }}</span> <i>ms</i> {% if forloop.index != 1 %}<span class="score-difference{% if timeToFirstByte > lighthouse.audits["time-to-first-byte"].numericValue %} score-down{% endif %}{% if timeToFirstByte < lighthouse.audits["time-to-first-byte"].numericValue %} score-up{% endif %}"></span>{% endif %} {% assign timeToFirstByte = lighthouse.audits["time-to-first-byte"].numericValue %} </div> <div class="box score"> <span class="title">Last change</span> <span class="number">{{ lighthouse.audits.metrics.details.items[0].observedLastVisualChange | round }}</span> <i>ms</i> {% if forloop.index != 1 %}<span class="score-difference{% if timeToFirstCss > lighthouse.audits.metrics.details.items[0].observedLastVisualChange %} score-down{% endif %}{% if timeToFirstCss < lighthouse.audits.metrics.details.items[0].observedLastVisualChange %} score-up{% endif %}"></span>{% endif %} {% assign timeToFirstCss = lighthouse.audits.metrics.details.items[0].observedLastVisualChange %} </div> <div class="box score"> <span class="title">Interactive</span> <span class="number">{{ lighthouse.audits.metrics.details.items[0].interactive | round }}</span> <i>ms</i> {% if forloop.index != 1 %}<span class="score-difference{% if timeToFirstByte > lighthouse.audits.metrics.details.items[0].interactive %} score-down{% endif %}{% if timeToFirstByte < lighthouse.audits.metrics.details.items[0].interactive %} score-up{% endif %}"></span>{% endif %} {% assign timeToFirstByte = lighthouse.audits.metrics.details.items[0].interactive %} </div> <div class="box score"> <span class="title">Total Bytes</span> <span class="number">{{ lighthouse.audits["total-byte-weight"].numericValue | round }}</span> <i>kb</i> {% if forloop.index != 1 %}<span class="score-difference{% if totalRequestBytes > lighthouse.audits["total-byte-weight"].numericValue %} score-down{% endif %}{% if totalRequestBytes < lighthouse.audits["total-byte-weight"].numericValue %} score-up{% endif %}"></span>{% endif %} {% assign totalRequestBytes = lighthouse.audits["total-byte-weight"].numericValue %} </div> <!-- <div class="box score"> <span class="title">Images Bytes</span> <span class="number">{{ gpagespeed.pageStats.imageResponseBytes | round }}</span> <i>kb</i> </div> --> <div class="box score"> <span class="title">HTML Size</span> <span class="number">{{ lighthouse.audits["resource-summary"].details.items[5].size | round }}</span> <i>kb</i> {% if forloop.index != 1 %}<span class="score-difference{% if htmlSize > lighthouse.audits["resource-summary"].details.items[5].size %} score-down{% endif %}{% if htmlSize < lighthouse.audits["resource-summary"].details.items[5].size %} score-up{% endif %}"></span>{% endif %} {% assign htmlSize = lighthouse.audits["resource-summary"].details.items[5].size %} </div> <div class="box score"> <span class="title">JS Size</span> <span class="number">{{ lighthouse.audits["resource-summary"].details.items[2].size | round }}</span> <i>kb</i> {% if forloop.index != 1 %}<span class="score-difference{% if numberResources > lighthouse.audits["resource-summary"].details.items[2].size %} score-down{% endif %}{% if numberResources < lighthouse.audits["resource-summary"].details.items[2].size %} score-up{% endif %}"></span>{% endif %} {% assign numberResources = lighthouse.audits["resource-summary"].details.items[2].size %} </div> <div class="box score"> <span class="title">Ressources</span> <span class="number">{{ gpagespeed.pageStats.numberResources | round }}</span> {% if forloop.index != 1 %}<span class="score-difference{% if numberResources > gpagespeed.pageStats.numberResources %} score-down{% endif %}{% if numberResources < gpagespeed.pageStats.numberResources %} score-up{% endif %}"></span>{% endif %} {% assign numberResources = gpagespeed.pageStats.numberResources %} </div> <div class="box score"> <span class="title">Requests</span> <span class="number">{{ lighthouse.audits["resource-summary"].details.items[0].requestCount | round }}</span> {% if forloop.index != 1 %}<span class="score-difference{% if httpsRequests > lighthouse.audits["resource-summary"].details.items[0].requestCount %} score-down{% endif %}{% if httpsRequests < lighthouse.audits["resource-summary"].details.items[0].requestCount %} score-up{% endif %}"></span>{% endif %} {% assign httpsRequests = lighthouse.audits["resource-summary"].details.items[0].requestCount %} </div> </div> {% endif %} {% endfor %} </div> </div> {% endfor %}
</div>