Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

site: module import waterfall leaves search inert for about 3 s on 3G; add modulepreload for each page type

Aperta
  • Qualcosa non va?
#154 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
53/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
performance

Direzione di ricerca

Read the shared head builder, site/public/index.html, and the reported module import graph; compare the built pages in site/dist/index.html. Add the page specific modulepreload links and update or add a page check that asserts each built page preloads every module it loads. Done when the check passes and, under the stated Fast 3G emulation, shared.mjs finishes within one round trip of app.js.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

performance priority: medium

Why it matters

The homepage is prerendered so it paints fast, but the search box and filters do nothing until the whole ES-module graph and data.js have arrived. A visitor who types in the first seconds sees nothing happen, which is the one interaction the site exists for.

Evidence (at 69387df, Fast 3G / 4x CPU emulation on the local build)

  • Resource responseEnd: app.js 1243 ms; search.js, cards.mjs, views.js, owes.js 2344-2369 ms (second round trip, discovered only after app.js is parsed); shared.mjs 2927 ms (third round trip, imported by cards.mjs); data.js 1794 ms (355 KB raw, 79 KB gzip).
  • Import graph: app.js -> search.js, cards.mjs, views.js; cards.mjs -> shared.mjs; shortlist.js -> owes.js.
  • site/dist/index.html contains no modulepreload links (only two font preloads). site/public/index.html:227-229 loads data.js with defer plus two module scripts.

Suggested approach

Have the shared head builder emit <link rel="modulepreload" href="..."> for the exact module set each page type uses (home: 7 files; entry: entry.js, shortlist.js, owes.js; category: category.js, views.js, shortlist.js, owes.js) so every module fetches in parallel with data.js. Optionally fetchpriority="high" on data.js, and consider moving the summary field (about 78 KB of the payload) out of data.js if a slimmer payload is wanted.

Done when

In the same emulation, shared.mjs finishes within one round trip of app.js; a page-check asserts every built page has a modulepreload per module it loads.

Lingua principale
JavaScript
Stelle
58
Fork
15
Merge medio
16h 53m
PR unite (30g)
14

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TMHSDigital/Free-Game-Dev-Assets

Tutte le issue di TMHSDigital/Free-Game-Dev-Assets

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.