Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#169 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
css, html
Área
performance, web-dev

Línea de trabajo

Compara el head de index.html con las demás páginas indexadas; después, inspecciona el @import al principio de assets/css/main.css y las indicaciones sobre la estructura de páginas en CLAUDE.md. Elige uno de los dos enfoques de carga descritos, aplícalo de forma coherente y verifica que Font Awesome se pueda detectar sin esperar a main.css y que todas las páginas indexadas tengan un head idéntico byte a byte.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
HTML
Estrellas
0
Forks
0
Merge medio
9 h 52 min
PR fusionados (30 d)
59

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de laywill/laywill.github.io

Todos los issues de laywill/laywill.github.io

Issues similares

Más issues de Performance

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.