Recherche statique performante avec PageFind

Un moteur de recherche peut améliorer l’expérience des internautes (UX) en offrant un accès rapide aux contenus d’un site. Pour les sites statiques, il faut soit coder une recherche côté client à la main, soit utiliser un service tiers comme Algolia. Ou alors on peut utiliser PageFind qui se distingue par sa facilité d’intégration et ses performances.

Qualité web

La règle Opquast 163 est sans équivoque:

Le site propose un moteur de recherche interne. Le moteur de recherche est, avec le plan du site, les menus et le lien de retour à l’accueil, un des moyens fondamentaux de réorientation et d’accès à l’information. Rendez-le présent et facile d’accès.

Je signale que la règle Opquast 164 ne sera pas respectée:

Chaque page de résultats de recherche peut être atteinte via une adresse Web.

Alors que la règle Opquast 165 le sera:

Il est possible de relancer une recherche depuis sa page de résultats.

Présentation de PageFind

PageFind est conçu pour ajouter une recherche interne aux sites statiques:

• il analyse toutes les pages générées (en local) pour créer un index
• il génère le code nécessaire pour l’affichage et la recherche côté client
• il est rapide à la compilation et léger à l’usage
• il est utilisable sans configuration (et il est configurable)
• il est très bien documenté

Je viens de parcourir l’ensemble de la documentation pour imaginer les possibles cet outil. Elle est très claire, bien structuré, ni trop longue, ni trop succincte.

Si le sujet vous intéresse, je vous conseille ces vidéos:

• Static Search on Hugo: The Journey to Pagefind v1.0
• Workshop and Interview with Pagefind engineer Liam Bigelow

Je conseille de toujours se renseigner sur les objectifs d’un projet avant de l’adopter ou non. PageFind vise à être performant sur de grands sites, en utilisant le moins de bande passante possible et sans infrastructure particulière ou de service tiers. Je suis impressionné du resultat, avec des réponses souvent meilleures que la recherche de WordPress des CMS classique.

Inclure la recherche dans Hugo

Comme je ne souhaite pas la recherche sur toutes les pages, j’ai créé un shortcode Hugo que je peux placer où je le veux. Je pourrais très bien l’appeler ici avec un simple {{< search >}}. Sur ce site, j’ai choisi de l’intégrer dans une page dédiée à la recherche.

Le code de layout/shortcodes/search.html est une reprise la proposition de Getting Started with Pagefind avec quelques options de configuration:

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener("DOMContentLoaded", (event) => {
        new PagefindUI({
            element: "#search",
            pageSize: 10,
            showSubResults: true,
            showImages: false,
            autofocus: true
        });
    });
</script>

Bien entendu, je lance PageFind entre la compilation avec Hugo et le déploiement sur le serveur.

Conclusion

La promesse de PageFind est tenue. Il est très simple d’intégrer une bonne recherche à un site statique en quelques minutes. Le lien se trouve dans le menu principal.

Désormais, j’attends 2 informations pour faire un vrai bilan.

Est-ce que la recherche est bonne? La pertinence des résultats, la rapidité de recherche et la qualité de l’affichage sont essentielles. Vos retours tant positifs que négatifs sont précieux.

Est-ce qu’elle est utilisée? Les statistiques Plausible vont me donner quelques indices sur l’utilisation réelle de la page de recherche. Si elle n’est pas utilisée, je me poserai aussi la question d’inclure la recherche sur toutes les pages du site.

J’en profite pour créer un mail prérempli pour les résultats: Envoyer mes tests de recherche dans TestFind. Merci!