laywill / laywill/laywill.github.io
Font Awesome preload exists only on index.html, so every other page discovers it late
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 0
- Forks
- 0
- Avg merge
- 8h 17m
- Merged PRs (30d)
- 58
Description
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:
- 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.
- Drop the
@importinstead. An@importat the top of a stylesheet is the render-blocking pattern the preload is papering over. Linkingfont-awesome.min.cssdirectly from each page's<head>, ahead ofmain.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.cssto parse, on every page, not onlyindex.html - The
<head>region is byte-identical across every indexed page again
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Compare the head in index.html with the other indexed pages, then inspect the @import at the start of assets/css/main.css and the Page structure guidance in CLAUDE.md. Choose one of the two loading approaches described, apply it consistently, and verify that Font Awesome is discoverable without waiting for main.css and that every indexed page has a byte-identical head.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- performance, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100