clawverse/apress
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(perf): non-blocking Google Fonts load + chmod assets in image

Browse Source 
Two issues surfaced when the deployed site was loaded:

1. favicon.svg shipped from public/ with macOS mode 600 (~/owner-only).
   nginx runs as the 'nginx' user inside the alpine image and returned
   403 for the icon. Add a chmod sweep at the end of the build stage so
   every shipped asset is 644 + dirs 755 regardless of host umask.

2. <link rel="stylesheet"> to fonts.googleapis.com is render-blocking.
   When the user's network is slow to reach Google Fonts (or blocks it),
   the page spins indefinitely on first paint. Switch to the canonical
   rel=preload + onload swap pattern, with a <noscript> fallback for
   JS-off browsers. Tailwind's font-family stack already cascades to
   ui-serif / ui-monospace, so type still renders before the swap.
This commit is contained in:
Omar Sobh
2026-06-10 04:41:45 -05:00
parent 31f1cd866f
commit e64bce81ab
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
deploy/Dockerfile.web
+2
View File
@@ -9,5 +9,7 @@ RUN pnpm build
FROM nginx:1.27-alpine FROM nginx:1.27-alpine
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html COPY --from=build /app/dist /usr/share/nginx/html
RUN find /usr/share/nginx/html -type f -exec chmod 644 {} \; \
&& find /usr/share/nginx/html -type d -exec chmod 755 {} \;
EXPOSE 80 EXPOSE 80
HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/ > /dev/null || exit 1 HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/ > /dev/null || exit 1
index.html
+12 -3
View File
@@ -6,9 +6,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="APESS 2026 Workshop — on-device agentic systems for structural intelligence. FabLab Torino, July 27." /> <meta name="description" content="APESS 2026 Workshop — on-device agentic systems for structural intelligence. FabLab Torino, July 27." />
<title>APESS 2026 · Workshop</title> <title>APESS 2026 · Workshop</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> rel="preload"
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Newsreader:wght@400;600;700&display=swap" rel="stylesheet" /> as="style"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Newsreader:wght@400;600;700&display=swap"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Newsreader:wght@400;600;700&display=swap"
/>
</noscript>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>