Skip to content

Commit 1739b37

Browse files
foltikfoltik
committed
perf: inline image thumbnails, preload, caching, fix layout shift
1 parent 95ccdf7 commit 1739b37

16 files changed

+189
-73
lines changed

‎.sqlx/query-180ab567d16a1ba49a80f5116c3f1556e73aa0db8917dc0de1c1e1e40ba204be.json‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.sqlx/query-5d625c30e6fe84c7b6d770fd36b4da7a91913981e2b835f9eb79599768cd0507.json‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.sqlx/query-bcf9baa080e06d6e49ed0b5dcd5984f6dd0eaba5b0d348053a198c9b81f61e81.json‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎Cargo.toml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ sqlx = { version = "0.8", features = ["sqlite", "runtime-tokio", "chrono"] }
1818
tokio = { version = "1", features = ["rt-multi-thread", "fs", "net", "sync", "macros"] }
1919
tokio_schedule = "0.3"
2020
tower = "0.5"
21-
tower-http = { version = "0.6", features = ["fs", "compression-br", "request-id", "trace", "util"] }
21+
tower-http = { version = "0.6", features = ["fs", "set-header", "compression-br", "request-id", "trace", "util"] }
2222
tower-serve-static = "0.1"
2323
reqwest = { version = "0.12", default-features = false, features = ["http2", "charset", "json", "multipart", "rustls-tls"] }
2424

@@ -38,6 +38,7 @@ uuid = { version = "1", features = ["v7"] }
3838
hmac = "0.12"
3939
sha2 = "0.10"
4040
hex = "0.4"
41+
base64 = "0.22"
4142
image = { version = "0.25", default-features = false, features = ["png", "jpeg"] }
4243
jpeg-encoder = "0.6"
4344

‎frontend/static/DM_Sans.woff2‎

-36.1 KB
Binary file not shown.

‎frontend/styles/events/view.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
#events\/view {
2-
picture {
3-
@apply mx-4 mb-12;
2+
.flyer {
3+
@apply relative mx-4 mb-12 bg-cover bg-center;
4+
img {
5+
@apply block h-auto w-full;
6+
}
47
}
58

69
.title {

‎frontend/styles/extensions/fonts.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎frontend/styles/main.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
/** Extensions **/
44
@import "./extensions/layout.css";
5-
@import "./extensions/fonts.css";
65
@import "./extensions/form.css";
76
@import "./extensions/sidebar.css";
87

@@ -29,7 +28,7 @@
2928
@import "./posts/view.css";
3029

3130
@theme {
32-
--font-sans: DM Sans Variable, sans-serif;
31+
--font-sans: system-ui;
3332
/* CSS HEX */
3433
--color-lsd-black: #080504;
3534
--color-lsd-white: #ebe3de;

‎frontend/templates/events/view.html‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,42 @@
22

33
{% block title %}{{ event.title }}{% endblock title %}
44

5+
{% block preload %}
6+
{% if let Some(flyer) = flyer %}
7+
<link
8+
rel="preload"
9+
as="image"
10+
href="/e/{{ event.slug }}/flyer?size=sm"
11+
imagesrcset="/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=sm 400w,
12+
/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=md 768w,
13+
/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=lg 1200w"
14+
imagesizes="(max-width: 768px) 40vw, 100vw"
15+
/>
16+
{% endif %}
17+
{% endblock %}
18+
519
{% block content %}
620
<section id="events/view" class="ext/layout standard">
7-
{% if has_flyer %}
8-
<picture>
9-
<source
10-
media="(max-width: 400px)"
11-
srcset="/e/{{ event.slug }}/flyer?size=sm"
12-
/>
13-
<source
14-
media="(max-width: 768px)"
15-
srcset="/e/{{ event.slug }}/flyer?size=md"
16-
/>
17-
<source
18-
media="(max-width: 1200px)"
19-
srcset="/e/{{ event.slug }}/flyer?size=lg"
21+
{% if let Some(flyer) = flyer %}
22+
<div
23+
class="flyer"
24+
style="background-image:url('{{ flyer.thumb_base64 }}')"
25+
>
26+
<img
27+
src="/e/{{ event.slug }}/flyer?size=sm"
28+
srcset="
29+
/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=sm 400w,
30+
/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=md 768w,
31+
/e/{{ event.slug }}/flyer?v={{ flyer.version }}&size=lg 1200w
32+
"
33+
sizes="(max-width: 768px) 40vw, 100vw"
34+
width="{{ flyer.width }}"
35+
height="{{ flyer.height }}"
36+
decoding="async"
37+
fetchpriority="high"
38+
alt="event flyer"
2039
/>
21-
<img src="/e/{{ event.slug }}/flyer" alt="event flyer" />
22-
</picture>
40+
</div>
2341
{% endif %}
2442
<h1 class="title">{{ event.title }}</h1>
2543
<div class="details">

‎frontend/templates/layout.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
55
<title>{% block title %}light and sound design{% endblock title %}</title>
6-
<link rel="icon" href="/static/favicon.ico?version=CONTENT_HASH" />
76
<link rel="stylesheet" href="/static/main.css?version=CONTENT_HASH" />
7+
{% block preload %}
8+
{% endblock preload %}
9+
<link rel="icon" href="/static/favicon.ico?version=CONTENT_HASH" />
810
{% block head %}
911
{% endblock head %}
1012
</head>

0 commit comments

Comments
 (0)