Skip to content

perf: Defer the search UI, whole-card results, cleaner index - #904

Open
lfrancke wants to merge 2 commits into
mainfrom
search/index-quality
Open

perf: Defer the search UI, whole-card results, cleaner index#904
lfrancke wants to merge 2 commits into
mainfrom
search/index-quality

Conversation

@lfrancke

@lfrancke lfrancke commented Jul 28, 2026

Copy link
Copy Markdown
Member

Description

This changes three things with the search:

  • Another Google PageSpeed finding: The pagefind stuff was loaded on every page (~450ms render-blocking), now it's only loaded the first time you click on the search icon thing

  • The thing that has annoyed me for years: The whole result card is now clickable and not only the title anymore

  • Index hygiene: Added data-pagefind-ignore attributes to the pagination nav and the EoL-banner

Verification

Look at the preview...search something. Easy as that.

lfrancke added 2 commits July 28, 2026 17:04
The pagefind js and css were the last render-blocking requests in the
head of every page; they now load when the search popover first opens
(button, Ctrl+K), keeping search behaviour identical from the second
keystroke of a visit onwards.

The result template used to wrap only the title in a link while
pagefind's stylesheet gave the whole card a pointer cursor; the card
is one block-level link now, with hover and focus-visible styling, and
the keyboard navigation follows the flatter markup.
Both render inside the article element and were indexed with the page
content, polluting excerpts with navigation labels and banner text.
@netlify

netlify Bot commented Jul 28, 2026

Copy link
Copy Markdown

Deploy Preview for stackable-docs ready!

Name Link
🔨 Latest commit 399d741
🔍 Latest deploy log https://app.netlify.com/projects/stackable-docs/deploys/6a68c533e4d2fa00086ca4ee
😎 Deploy Preview https://deploy-preview-904--stackable-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

// Loads the pagefind search UI on first use (see 07-search.js); the
// assets stay off the critical rendering path of every page.
// Some styling is customized, these classes are found in search.css.
window.addEventListener('DOMContentLoaded', (event) => {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks worse than it is: It really is just different indentation mostly

@lfrancke lfrancke moved this to Development: Waiting for Review in Stackable Engineering Jul 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Development: Waiting for Review

Development

Successfully merging this pull request may close these issues.

1 participant