18 lines
1.1 KiB
Plaintext
18 lines
1.1 KiB
Plaintext
|
- function ms(v) { return v != null ? (v/1000).toFixed(2)+'s' : '—'; }
|
||
|
|
- function raw(v, unit) { return v != null ? v.toFixed(unit === 'ms' ? 0 : 3)+unit : '—'; }
|
||
|
|
- function cwvClass(metric, val) {
|
||
|
|
- if (val == null) return 'bg-gray-50 border-gray-200';
|
||
|
|
- const thresholds = { lcp: [2500, 4000], fcp: [1800, 3000], tbt: [200, 600], cls: [0.1, 0.25], ttfb: [800, 1800] };
|
||
|
|
- const t = thresholds[metric];
|
||
|
|
- if (!t) return 'bg-gray-50 border-gray-200';
|
||
|
|
- return val <= t[0] ? 'bg-green-50 border-green-300' : val <= t[1] ? 'bg-yellow-50 border-yellow-300' : 'bg-red-50 border-red-300';
|
||
|
|
- }
|
||
|
|
|
||
|
|
div(class='bg-white border border-gray-200 rounded-xl p-5')
|
||
|
|
h2(class='text-base font-semibold mb-4') Core Web Vitals
|
||
|
|
div(class='grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3')
|
||
|
|
each item in [['LCP', 'lcp', ms(job.lcp)], ['FCP', 'fcp', ms(job.fcp)], ['TBT', 'tbt', raw(job.tbt,'ms')], ['CLS', 'cls', raw(job.cls,'')], ['TTFB', 'ttfb', ms(job.ttfb)]]
|
||
|
|
div(class=`metric-card border ${cwvClass(item[1], job[item[1]])} text-center`)
|
||
|
|
div(class='text-2xl font-bold')= item[2]
|
||
|
|
div(class='text-xs text-gray-500 mt-1')= item[0]
|