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

Font Awesome preload exists only on index.html, so every other page discovers it late

Aperta
#169 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, html
Ambito
performance, web-dev

Direzione di ricerca

Confronta l’head di index.html con quello delle altre pagine indicizzate, quindi esamina l’@import all’inizio di assets/css/main.css e le indicazioni sulla struttura delle pagine in CLAUDE.md. Scegli uno dei due approcci di caricamento descritti, applicalo in modo coerente e verifica che Font Awesome sia rilevabile senza attendere main.css e che ogni pagina indicizzata abbia un head identico byte per byte.

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

Descrizione

needs-william perf

Noticed while adding the Open Graph block to every page's <head> in #130.

index.html carries

<link rel="preload" href="assets/css/font-awesome.min.css" as="style" />

and no other page does. It is the only difference between index's head and every other page's.

assets/css/main.css starts with @import 'font-awesome.min.css', so every page pays for a second, serially-discovered stylesheet: the browser cannot start fetching Font Awesome until main.css has arrived and been parsed. The preload on index is what collapses that into one round trip. The footer social icons (fa-linkedin, fa-github, fa-gitlab, fa-envelope) are on every page, so every page shows the delayed-icon symptom the preload exists to fix, and every page but index goes without the fix.

Two things to decide, and they point in different directions:

  1. Add the preload to the other pages. Cheapest fix, matches what index already does, and restores the byte-identical head that CLAUDE.md's "Page structure" section says should hold across pages. This inconsistency is itself the kind of drift that rule is there to prevent.
  2. Drop the @import instead. An @import at the top of a stylesheet is the render-blocking pattern the preload is papering over. Linking font-awesome.min.css directly from each page's <head>, ahead of main.css, removes the serial dependency outright and makes the preload unnecessary. Larger change: it touches the Sass, the generated CSS and every page.

Either way the head should end up the same on all pages. #63 covered the homepage's render-blocking resources, which is presumably where the lone preload came from; this is the same problem on the pages that issue did not touch.

Acceptance criteria

  • Font Awesome is discoverable without waiting for main.css to parse, on every page, not only index.html
  • The <head> region is byte-identical across every indexed page again
Lingua principale
HTML
Stelle
0
Fork
0
Merge medio
8h 17m
PR unite (30g)
58

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

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 laywill/laywill.github.io

Tutte le issue di laywill/laywill.github.io

Issue simili

Altre issue su Performance

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.