Skip to content

Commit d60f7e7

Browse files
sirodohtsirodoht
committed
Add website performance section
1 parent 0f51a90 commit d60f7e7

2 files changed

Lines changed: 247 additions & 6 deletions

File tree

‎website/index.html‎

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
<a href="#download">Download</a>
9090
<a href="#screens">Screenshots</a>
9191
<a href="#shortcuts">Shortcuts</a>
92+
<a href="#performance">Performance</a>
9293
<a
9394
href="https://github.com/sirodoht/nvnv"
9495
target="_blank"
@@ -617,15 +618,86 @@ <h3 id="shortcut-heading">
617618
</div>
618619
</section>
619620

621+
<section
622+
class="performance-section"
623+
id="performance"
624+
data-rail-tone="vermilion"
625+
data-rail-number="03"
626+
aria-labelledby="performance-heading"
627+
>
628+
<div class="section-shell">
629+
<p class="section-number">03</p>
630+
<div class="performance-heading">
631+
<h2 id="performance-heading">Fast, with<br /><em>receipts.</em></h2>
632+
<p>
633+
Release-mode engine benchmarks on 10,000 notes with varied,
634+
2,048-byte bodies.
635+
</p>
636+
</div>
637+
638+
<div class="performance-table-wrap">
639+
<table class="performance-table">
640+
<thead>
641+
<tr><th>Benchmark</th><th>Workload</th><th>Result</th></tr>
642+
</thead>
643+
<tbody>
644+
<tr class="performance-group"><th colspan="3">Search</th></tr>
645+
<tr>
646+
<td>Broad cached search</td><td>10,000 notes · all match</td><td>13 ms</td>
647+
</tr>
648+
<tr>
649+
<td>Selective FTS search</td><td>10,000 notes · one match</td><td>1.8 ms</td>
650+
</tr>
651+
<tr>
652+
<td>Missing-term search</td><td>10,000 notes · no matches</td><td>12 ms</td>
653+
</tr>
654+
<tr>
655+
<td>Missing-term load test</td><td>50,000 notes · no matches</td><td>63 ms</td>
656+
</tr>
657+
<tr class="performance-group"><th colspan="3">Filesystem</th></tr>
658+
<tr>
659+
<td>Initial library scan</td><td>10,000 note files</td><td>2.23 s</td>
660+
</tr>
661+
<tr>
662+
<td>Warm metadata scan</td><td>10,000 unchanged files</td><td>438 ms</td>
663+
</tr>
664+
<tr>
665+
<td>Incremental external scan</td><td>One changed file of 10,000</td><td>16 ms</td>
666+
</tr>
667+
<tr class="performance-group"><th colspan="3">Indexing</th></tr>
668+
<tr>
669+
<td>Prepare search documents</td><td>10,000 notes × 2 KB</td><td>345 ms</td>
670+
</tr>
671+
<tr>
672+
<td>Update SQLite + FTS</td><td>One changed note</td><td>12.5 ms</td>
673+
</tr>
674+
</tbody>
675+
</table>
676+
</div>
677+
678+
<div class="performance-methodology">
679+
<p>
680+
Steady-state results are seven-run medians. Core measurements
681+
only; UI and launch timings are not included.
682+
</p>
683+
<a
684+
href="https://github.com/sirodoht/nvnv#performance"
685+
target="_blank"
686+
rel="noopener noreferrer"
687+
>Methodology ↗</a>
688+
</div>
689+
</div>
690+
</section>
691+
620692
<section
621693
class="promise section-shell"
622694
data-rail-tone="acid"
623-
data-rail-number="03"
695+
data-rail-number="04"
624696
>
625697
<div class="promise-sticker" aria-hidden="true">
626698
<span>BYOC — bring</span><span>your own cloud</span>
627699
</div>
628-
<p class="section-number">03</p>
700+
<p class="section-number">04</p>
629701
<h2>
630702
Your thoughts.<br /><span>Your machine.</span><br />Your business.
631703
</h2>
@@ -659,12 +731,12 @@ <h2>
659731
class="open-source-section"
660732
id="open-source"
661733
data-rail-tone="pink"
662-
data-rail-number="04"
734+
data-rail-number="05"
663735
>
664736
<div class="section-shell">
665737
<div class="open-source-grid">
666738
<div class="open-source-copy">
667-
<p class="section-number">04</p>
739+
<p class="section-number">05</p>
668740
<h2>Open by<br /><em>nature.</em></h2>
669741
<p>
670742
MIT License. Permission is hereby granted. This software is
@@ -716,10 +788,10 @@ <h2>Open by<br /><em>nature.</em></h2>
716788
<section
717789
class="homage-section"
718790
data-rail-tone="mustard"
719-
data-rail-number="05"
791+
data-rail-number="06"
720792
>
721793
<div class="section-shell">
722-
<p class="section-number">05</p>
794+
<p class="section-number">06</p>
723795
<div class="homage-heading">
724796
<h2>It's an<br /><em>homage.</em></h2>
725797
<p>

‎website/styles.css‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1403,6 +1403,129 @@ body.lightbox-open {
14031403
font-variant-ligatures: none;
14041404
}
14051405

1406+
/* Performance */
1407+
1408+
.performance-section {
1409+
padding-block: 125px 135px;
1410+
overflow: hidden;
1411+
background: var(--blue);
1412+
border-bottom: 2px solid var(--ink);
1413+
}
1414+
.performance-heading {
1415+
display: grid;
1416+
grid-template-columns: 1.3fr 0.7fr;
1417+
align-items: end;
1418+
gap: 70px;
1419+
margin-bottom: 72px;
1420+
}
1421+
.performance-heading h2 {
1422+
margin: 0;
1423+
font-size: clamp(62px, 7.5vw, 108px);
1424+
line-height: 0.88;
1425+
letter-spacing: -0.07em;
1426+
}
1427+
.performance-heading h2 em {
1428+
color: var(--purple);
1429+
font-family: Georgia, serif;
1430+
font-weight: 400;
1431+
}
1432+
.performance-heading > p {
1433+
max-width: 410px;
1434+
margin: 0 0 7px;
1435+
font-size: 16px;
1436+
line-height: 1.7;
1437+
}
1438+
.performance-table-wrap {
1439+
border: 2px solid var(--ink);
1440+
background: #fffefb;
1441+
box-shadow: 9px 10px 0 var(--ink);
1442+
overflow-x: auto;
1443+
}
1444+
.performance-table {
1445+
width: 100%;
1446+
border-collapse: collapse;
1447+
table-layout: fixed;
1448+
}
1449+
.performance-table th, .performance-table td {
1450+
padding: 18px 22px;
1451+
border-bottom: 1px solid rgba(21, 21, 21, 0.28);
1452+
text-align: left;
1453+
}
1454+
.performance-table thead th {
1455+
background: var(--ink);
1456+
color: white;
1457+
font-family: var(--mono);
1458+
font-size: 9px;
1459+
font-weight: 500;
1460+
letter-spacing: 0.08em;
1461+
text-transform: uppercase;
1462+
}
1463+
.performance-table th:first-child, .performance-table td:first-child {
1464+
width: 43%;
1465+
}
1466+
.performance-table th:nth-child(2), .performance-table td:nth-child(2) {
1467+
width: 37%;
1468+
}
1469+
.performance-table th:last-child, .performance-table td:last-child {
1470+
width: 20%;
1471+
text-align: right;
1472+
}
1473+
.performance-table tbody td:first-child {
1474+
font-size: 14px;
1475+
font-weight: 800;
1476+
}
1477+
.performance-table tbody td:nth-child(2) {
1478+
color: #67635d;
1479+
font-size: 12px;
1480+
}
1481+
.performance-table tbody td:last-child {
1482+
font-family: var(--mono);
1483+
font-size: 20px;
1484+
font-weight: 500;
1485+
letter-spacing: -0.04em;
1486+
white-space: nowrap;
1487+
}
1488+
.performance-table .performance-group th {
1489+
width: auto;
1490+
padding-block: 10px;
1491+
background: var(--yellow);
1492+
font-family: var(--mono);
1493+
font-size: 9px;
1494+
font-weight: 500;
1495+
letter-spacing: 0.1em;
1496+
text-align: left;
1497+
text-transform: uppercase;
1498+
}
1499+
.performance-methodology {
1500+
display: flex;
1501+
align-items: center;
1502+
justify-content: space-between;
1503+
gap: 35px;
1504+
margin-top: 30px;
1505+
padding-top: 24px;
1506+
border-top: 1.5px solid var(--ink);
1507+
}
1508+
.performance-methodology p {
1509+
max-width: 720px;
1510+
margin: 0;
1511+
font-size: 11px;
1512+
line-height: 1.65;
1513+
}
1514+
.performance-methodology a {
1515+
min-height: 46px;
1516+
display: inline-flex;
1517+
align-items: center;
1518+
padding: 0 15px;
1519+
border: 1.5px solid var(--ink);
1520+
color: var(--ink);
1521+
background: var(--green);
1522+
box-shadow: 4px 4px 0 var(--ink);
1523+
font-family: var(--mono);
1524+
font-size: 9px;
1525+
font-weight: 500;
1526+
white-space: nowrap;
1527+
}
1528+
14061529
/* Ownership promise */
14071530

14081531
.promise {
@@ -1836,6 +1959,13 @@ body.lightbox-open {
18361959
width: 100%;
18371960
margin-top: 40px;
18381961
}
1962+
.performance-heading {
1963+
grid-template-columns: 1fr;
1964+
gap: 28px;
1965+
}
1966+
.performance-heading > p {
1967+
max-width: 570px;
1968+
}
18391969
.open-source-grid {
18401970
grid-template-columns: 1fr;
18411971
gap: 60px;
@@ -1860,6 +1990,13 @@ body.lightbox-open {
18601990
body {
18611991
margin-left: 0;
18621992
}
1993+
.brand-japanese {
1994+
display: none;
1995+
}
1996+
.nav-links {
1997+
gap: 20px;
1998+
font-size: 11px;
1999+
}
18632000
.heritage-rail {
18642001
position: relative;
18652002
inset: auto;
@@ -2190,6 +2327,38 @@ body.lightbox-open {
21902327
.shortcut-grid > div:last-child {
21912328
border-bottom: 1px solid rgba(21, 21, 21, 0.28);
21922329
}
2330+
.performance-section {
2331+
padding-block: 95px 105px;
2332+
}
2333+
.performance-heading {
2334+
margin-bottom: 48px;
2335+
}
2336+
.performance-heading h2 {
2337+
font-size: 53px;
2338+
}
2339+
.performance-heading > p {
2340+
font-size: 14px;
2341+
}
2342+
.performance-table-wrap {
2343+
box-shadow: 6px 7px 0 var(--ink);
2344+
}
2345+
.performance-table th, .performance-table td {
2346+
padding: 15px 16px;
2347+
}
2348+
.performance-table tbody td:first-child {
2349+
font-size: 12px;
2350+
}
2351+
.performance-table tbody td:nth-child(2) {
2352+
font-size: 10px;
2353+
}
2354+
.performance-table tbody td:last-child {
2355+
font-size: 16px;
2356+
}
2357+
.performance-methodology {
2358+
align-items: flex-start;
2359+
flex-direction: column;
2360+
gap: 20px;
2361+
}
21932362
.promise {
21942363
padding-block: 120px 110px;
21952364
}

0 commit comments

Comments
 (0)