À Propos du Projet Hypotypose
Bienvenue sur la page « À propos » d’Hypotypose ! Nous avons conçu cette section pour vous offrir une transparence totale sur notre projet et répondre à toutes vos questions. Vous y découvrirez pourquoi ce projet existe et les motivations qui nous ont poussés à le créer. Vous en apprendrez davantage sur les personnes à l’origine de cette initiative et sur les technologies innovantes que nous avons utilisées pour donner vie à ce site. Nous vous expliquerons également à qui ce projet est destiné et quels éléments clés nous avons jugés importants lors de sa conception.
Nous aborderons aussi comment nous gérons l’optimisation du site et le SEO pour garantir une expérience utilisateur optimale. Vous aurez un aperçu du code personnalisé que nous utilisons pour faire fonctionner ce site et des solutions d’hébergement que nous avons choisies, ainsi que notre gestion des boîtes mails. En résumé, cette page est dédiée à vous fournir toutes les informations nécessaires pour mieux comprendre notre démarche, notre engagement et les choix techniques derrière Hypotypose. Bonne lecture et bienvenue dans les coulisses de notre projet !
Créateurs du Projet
Nous sommes Hypotypose, fondé par Lucas PIERROT, un développeur web passionné récemment diplômé. Fort de plusieurs expériences professionnelles en Agence de Communication ou auprès d’autres professionnels, Lucas a 23 ans et aspire à devenir un expert en développement WordPress. Son parcours académique et professionnel a nourri cette passion, lui permettant de créer des projets ambitieux visuellement et agréables à la navigation. Sa volonté d’exploiter au maximum les outils à sa disposition avant d’en ajouter à ses projets de développement est l’une de ses plus grande force et permet à notre site d’être facile à modifier, simple à maintenir à jour, et permet à nos rédacteurs et modérateurs peu expérimentés avec WordPress de facilement prendre en main cet outil.
Formation et Expérience
Lucas PIERROT, notre fondateur, est titulaire d’une licence LLCER Anglais obtenue à Strasbourg en 2021 et d’un Master CAWEB obtenu en 2023 avec mention très bien. En parallèle, il a suivi une formation de développeur web fullstack à la 3WAcademy, diplôme qu’il a obtenu en fin d’année 2024. Sa formation combine des études académiques, des expériences professionnelles en alternance, ainsi qu’un apprentissage autodidacte continu via une veille technologique rigoureuse. Il a acquis une solide expérience en tant que développeur WordPress en travaillant pour des entreprises, des associations et sur des projets académiques, ce qui lui permet de créer des sites web wordpress de haute qualité.
Motivations et Inspirations
La création de Hypotypose est motivée par le désir de notre fondateur de fournir une plateforme gratuite à l’un de ses proches pour rédiger des critiques littéraires. Ce projet lui permet également d’alimenter son portfolio et de démontrer l’étendue de ses compétences en développement web. Il a aussi voulu prouver que WordPress peut être performant pour les petites et moyennes entreprises, exigeantes en matière de performances et de qualité, en construisant ce site et en faisant tout son possible pour optimiser au maximum ses performances. Le design de Hypotypose s’inspire d’un template de site proposé par Brainstorm Force pour leur thème Astra, bien que nous n’utilisions pas ce template sur notre site.
Responsabilités et Contributions
En tant que fondateur de ce projet, Lucas PIERROT est responsable de l’intégralité de son bon déroulement. Il s’occupe du développement, du design, de la maintenance, et répond aux demandes techniques ainsi qu’aux questions des visiteurs. Il est accompagné de rédacteurs et rédactrices anonymes qui publient des critiques littéraires à leur guise. Ces rédacteurs préfèrent rester anonymes ou, à défaut, partagent simplement leur prénom visible sur leur page de profil.
Perspectives Futures
Nous souhaitons maintenir ce projet et, s’il développe un trafic significatif, envisager de le faire évoluer à une plus grande échelle. Cela pourrait inclure l’ajout de fonctionnalités e-commerce et la création de partenariats avec des professionnels du secteur littéraire ou cinématographique. Il est aussi possible que nous proposions de critiquer certaines œuvres, sur demande, pour des écrivains ou réalisateurs peu connus.
Autres Projets et Contributions
Notre développeur principal sera impliqué dans la création de plusieurs autres projets à mesure qu’ils verront le jour. Ceux-ci seront disponibles sur son site personnel dès qu’il sera développé, avec un lien qui figurera dans le pied de page de notre site.
Collaboration et Anonymat
Il y a des rédacteurs qui préfèrent rester anonymes, et seul leur prénom figure sur notre site. Nous sommes par ailleurs ouverts à accueilir des volontaires qui aimeraient contribuer à notre projet pour le voir évoluer, en rédigeant des critiques et des recommandations pour nos lecteurs.
Philosophie
Notre fondteur est convaincu que le temps permet de réaliser un travail de qualité. En tant que perfectionniste, il aime créer les choses les plus belles possibles. Il est également adepte des langages natifs du web et aspire à maîtriser pleinement HTML, CSS et JS pour mieux aborder les apprentissages futurs des frameworks et autres outils disponibles pour les développeurs.
Technologies Utilisées
Dans cette section nous vous proposons de découvrir les technologies utilisées dans le développement de notre site.
Choix du CMS
Dans la mesure où le développeur principal de ce projet a été formé à l’utilisation (et utilise au quotidien dans sa carrière) le CMS WordPress, il nous a semblé pertinent de faire usage de ce même outil, pour tous les avantages qu’il offre. Dans la mesure où notre projet est également un blog de critiques et de recommandations d’œuvres culturelles, il nous a semblé encore plus évident de choisir WordPress, qui a initialement été développé pour permettre de faciliter la création de blogs en ligne.
Plugins installés et leur utilisation
Sur Hypotypose, nous utilisons un nombre le plus réduit possible de plugins afin de limiter considérablement les difficultés potentielles de maintenance auxquelles nous pourrions faire face. C’est pourquoi nous avons fait le choix d’utiliser les plugins suivants :
Elementor
- Elementor est notre Site Builder. Il s’agit du principal plugin de notre site et nous permet de customiser l’affichage des différents templates que nous utilisons sur ce site.
- Elementor offre des possibilités infinies de création de popups. Grâce à cet outil intégré, nous pouvons facilement intégrer des popups sur notre site, comme la bannière de cookie ou le formulaire de recommandation. Les nombreuses options de personnalisation que proposent Elementor nous permettra également de mettre en place des stratégies marketing, si nous venions à en développer.
- Grâce à notre base de donnée, ainsi qu’à la fonctionnalité de création de formulaires via Elementor, nous pouvons proposer à nos utilisateurs de nous envoyer facilement des messages, via des formulaires à plusieurs étapes. Les réponses aux formulaires sont ensuites stockées dans notre base de donnée et peuvent facilement être supprimés pour nous conformer au RGPD.
Admin and Site Enhancements (ASE)
Ce nouveau plugin est une véritable gemme. Il offre une quantité incommensurable de fonctionnalités qui demanderaient en temps normal l’installation de plusieurs dizaines de plugins. Son aspect léger est sa grande force, il offre la possibilité de modifier un site wordpress simplement et convient à la très grande majorité des utilisateurs.
- ASE offre des options de sécurité, sans nous contraindre d’utiliser un plugin 100% dédié à la sécurité (type wordfence). Nous croyons fermement que les hébergeurs de site web sont les premières personnes qui doivent fournir aux utilisateurs des moyens de sécuriser leurs sites web, chose que O2Switch fait parfaitement avec leur outil TigerProtect
- ASE nous permet également d’améliorer visuellement le menu d’administration de notre site en retirant les éléments superflus et inutiles pour nos rédacteurs.
- Ce plugin offre une énorme quantité d’autres fonctionnalités que nous pourrions lister ici. Si cela vous intéresse, vous pouvez consultez le site du développeur (notre développeur principal a également contribué à traduire ce plugin en Français, tel que visible dans les patchnotes du plugin).
ACF
- ACF nous offre la possibilité d’intégrer et de paramétrer des Custom Post Types avec une simplicité époustouflante. C’est avec lui que nous gérons, dans des onglets séparés, nos critiques et recommandations de Films, Séries et Livres.
- ACF nous permet de gérer nos taxonomies personnalisées (Auteurs, Genres Littéraires & Cinématographiques, Réalisateurs, Maisons d’éditions, etc…)
- ACF nous permet également de créer des champs personnalisés dans les formulaires d’ajouts de critiques. Chose qui nous est particulièrement utile, en combinaison avec Elementor, pour afficher de façon intelligente des données spécifiques à certains endroits de nos pages (comme par exemple, pour afficher si un rédacteur a aimé ou non une œuvre, pour afficher une photo de profil d’un auteur, etc…)
Rank Math SEO
- Nous avons fait le choix de privilégier Rank Math SEO, plutôt que Yoast, pour gérer le SEO de notre site. Avec cet outil bien plus performant que les autres, nous sommes en mesure de générer des meta title et description automatiquement, en récupérant par exemple des champs personnalisés, générés via ACF
- Rank Math SEO nous a ouvert les portes pour développer notre propre solution de génération de Schema, conformément à la syntaxe exigée par Schema.org
- Avec ce plugin, nous pouvons intégrer des fils d’arianes intelligents, accompagnés d’un schema ld+json à la syntaxe parfaite, le tout sans aucun effort.
- Rank Math SEO nous permet de traquer les visites de notre site, sans passer par un outil tel que Google Analytics. Bien que plus limité, nous pouvons voir où nos utilisateur se rendent et également où ils rencontrent des erreurs 404.
- Rank Math SEO offre un support d’une valeur inestimable. Sans ce dernier, nous aurions rencontré beaucoup plus de difficultés pour intégrer toutes les fonctionnalités que nous utilisons avec ce plugin.
ProElements
ProElements nous permet de débloquer gratuitement les fonctionnalités d’Elementor Pro, tout en restant dans la légalité vis-à-vis de la licence GPL d’Elementor.
LiteSpeed Cache
- Un outil aux performances monstrueuses. Litespeed Cache nous permet fièrement d’afficher un score de performance de 100 sur 100, sur certaines pages. Lorsque paramétré correctement et si votre hébergeur utilise la technologie litespeed, ce plugin peut vous permettre de réduire drastiquement le temps de chargement de votre site web.
- Nous utilisons non seulement litespeed cache pour ajouter du cache à notre site web, mais également pour convertir automatiquement nos images aux formats nouvelles générations, pour minifier et combiner nos fichiers JS et CSS, mais aussi pour automatiquement ajouter le lazy loading aux images sur nos pages.
Langages de programmation complémentaires
En plus d’utiliser le plus possible les plugins disponibles sur notre site, nous avons eu recours à divers ajouts de morceaux de code. Nous avons notamment développés certains modules en PHP WordPress, en CSS ainsi qu’en JS.
Partie front-end
Tel qu’énoncé précédemment, nous avons intégré de nombreux snippets de code CSS pour atteindre les affichages optimaux que nous recherchions.
Prenez par exemple ce snippet CSS qui nous permet d’animer la descente d’un onglet lorsque l’utilisateur clique sur l’un des boutons de la partie droite du header :
/*Animate e-n-menu-content opening*/
selector .e-n-menu-content > .e-active {
animation: appear .4s ease;
}
@keyframes appear {
from {
transform:translateY(-5vh);
opacity:0;
}
to {
transform:translateY(0vh);
opacity:1;
}
}
Modification Août 2024 : La classe e-active est maintenant donnée à l'enfant direct de .e-n-menu-content
Dans la version actuelle d’Elementor (3.21.8 lors de la rédaction de ce texte), il n’existe aucune option permettant de rejouer une animation d’entrée lorsque l’élément animé quitte le viewport et y reviens plus tard. Nous avons donc développé un snippet JS, intégré sur toutes les pages du site au travers du plugin ASE :
document.addEventListener('DOMContentLoaded', function() {
// Sélectionnez tous les éléments avec une animation d'entrée définie dans Elementor
const animatedElements = document.querySelectorAll('.elementor-invisible');
// Configuration de l'Intersection Observer
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
const element = entry.target;
if (entry.isIntersecting) {
// Récupère toutes les classes de l'élément
const animationClasses = Array.from(element.classList).filter(cls => {
return ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'].includes(cls);
});
// Réapplique les classes d'animation
animationClasses.forEach(animationClass => {
element.classList.remove(animationClass);
void element.offsetWidth; // Force un reflow
element.classList.add(animationClass);
});
}
});
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Observer chaque élément
animatedElements.forEach(element => {
observer.observe(element);
});
});
L’un des avantages de pouvoir développer nos propres snippets de code est que nous pouvons faire usage de nouvelles propriétés baseline plus modernes, voire parfois même de propriétés qui ne sont pas encore reconnues par tous les navigateurs. Cette documentation explique ce que signifie le statut baseline.
Prenez par exemple les propriétés suivantes :
/* Nouveau sélecteur baseline 2023 - [https://caniuse.com/css-has] */
selector:has() {
}
/* Propriété non baseline - [https://caniuse.com/css-text-wrap-balance] */
selector {
text-wrap: balance;
}
/* Une astuce CSS pour limiter l'affichage d'un bloc textuel à X lignes - [https://caniuse.com/css-line-clamp] */
selector {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Valeur arbitraire, remplaçable à volonté */
overflow: hidden;
}
Certaines corrections de petits soucis graphiques requièrent des sélecteurs CSS plus complexes :
selector:has(.elementor-motion-effects-layer:not([style*="opacity: 1;"])) {
box-shadow:none;
}
Partie back-end
Développer la partie back-end de WordPress reste la partie la plus complexe à laquelle nous pouvons être confronté. Dans l’ensemble, nous privilégions l’utilisation de nos plugins et sommes plutôt satisfait des fonctionnalités proposées. Toutefois, dans certains cas rares, nous sommes amenés à développer des modules PHP pour débloquer tout le potentiel de certains outils.
Ainsi, nous avons été amené à concevoir une extension à Elementor pour filtrer avec plus de contrôle l’affichage de certaines publications (notamment pour les archives des rédacteurs de notre site).
Voici le snippet PHP en question :
/**
* Filtrer les publications affichées en fonction de l'archive d'auteur actuellement consultée.
*/
function filtrer_publications_par_auteur( $query ) {
// Récupérer l'objet de l'auteur actuellement consulté
$author = get_queried_object();
// Vérifier si l'objet de l'auteur est valide
if ( $author instanceof WP_User ) {
// Récupérer l'ID de l'auteur
$author_id = $author->ID;
// Filtrer les publications par l'auteur actuellement consulté
$query->set( 'author', $author_id );
}
}
add_action( 'elementor/query/this_author_only', 'filtrer_publications_par_auteur' );
Notre plugin Rank Math SEO dans sa version gratuite nous propose de nombreuses fonctionnalités intéressantes, tel que le fil d’ariane, des meta title et description automatisées ou encore un sitemap facilement indexable. Il ne nous permet en revanche pas de générer automatiquement nos « Données Structurées » pour nos Custom Post Types.
Puisque nous avions besoin de pouvoir inclure nos champs personnalisés ACF pour peupler certains champs de nos schémas ld+json, nous avons eu recours à plusieurs snippets PHP pour automatiquement construire et remplir ces données.
Voici un exemple de snippet PHP pour notre CPT « Livre » :
/*
* Automated schema markup for Book Reviews
*/
add_filter( 'rank_math/json_ld', function( $data, $jsonld ) {
// Vérifie si le type de publication est 'livre'
if ( get_post_type() === 'livre' ) {
// Récupère l'ID de la taxonomie "auteur"
$author_id = get_field('auteur');
$author_term = get_term_by('id', $author_id, 'auteur');
$author_name = !empty($author_term) ? $author_term->name : '';
$author_url = !empty($author_term) ? get_term_link($author_term) : '';
// Récupère l'ID de la taxonomie "maison_dedition"
$publisher_id = get_field('maison_dedition');
$publisher_term = get_term_by('id', $publisher_id, 'maison-dedition');
$publisher_name = !empty($publisher_term) ? $publisher_term->name : '';
// Récupère la valeur du champ ACF "jai_aime_ce_livre" (1 si oui, 0 si non)
$liked_book = get_field('jai_aime_ce_livre') ? 1 : 0;
// Récupère l'auteur de l'article
$article_author = get_the_author();
// Récupère le titre H1 situé à l'intérieur de l'élément avec l'ID #post-content
$review_title = '';
$post_content = get_post_field( 'post_content', get_the_ID() );
if ( preg_match( '/]*>(.*?)<\/h1>/si', $post_content, $matches ) ) {
$review_title = $matches[1];
}
// Récupère l'ID de la publication
$post_id = get_the_ID();
// Récupère la valeur du champ ACF "isbn" ou laisse vide si non renseigné
$isbn = get_field('isbn') ?: '';
// Récupère l'URL de l'image mise en avant et ses dimensions
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src($thumbnail_id, 'full');
// Crée un nouvel élément de schéma pour la critique de livre
$book_review_schema = array(
'@context' => 'https://schema.org',
'@type' => 'Review',
'@id' => esc_url( get_permalink() ) . '#review-' . $post_id, // ID unique de la critique
'itemReviewed' => array(
'@type' => 'Book',
'name' => get_the_title(), // Titre du livre
'author' => array(
'@type' => 'Person',
'name' => $author_name, // Nom de l'auteur du livre
'sameAs' => $author_url // URL de la page de l'auteur
),
'isbn' => $isbn, // ISBN du livre
'url' => esc_url( get_permalink() ), // URL de la page actuelle
'publisher' => array(
'@type' => 'Organization',
'name' => $publisher_name // Nom de la maison d'édition
),
'image' => array(
'@type' => 'ImageObject',
'url' => esc_url( $thumbnail_url[0] ), // URL de l'image mise en avant (l'image du livre)
'width' => $thumbnail_url[1], // Largeur de l'image
'height' => $thumbnail_url[2] // Hauteur de l'image
)
),
'author' => array(
'@type' => 'Person',
'name' => $article_author // Nom de l'auteur de la critique
),
'datePublished' => get_the_date('c'), // Date de publication de la critique
'reviewBody' => get_the_content(), // Corps de la critique
'name' => $review_title, // Titre de la critique
'reviewRating' => array(
'@type' => 'Rating',
'bestRating' => '1', // Meilleure note possible (1)
'ratingValue' => $liked_book, // Note de la critique (0 ou 1)
'worstRating' => '0' // Pire note possible (0)
)
);
// Ajoute le schéma de la critique de livre au schéma JSON-LD existant
if (!empty($data['mainEntity'])) {
array_unshift($data['mainEntity'], $book_review_schema);
} else {
$data['mainEntity'] = array($book_review_schema);
}
}
return $data;
}, 10, 2 );
Pour nos Films et Séries, nous avons conçu un snippet PHP unique qui regroupe les deux CPT. Ce snippet propose des données plus riches, que nous avons organisé de la façon qui nous a paru la plus logique possible (en nous basant sur des exemples de données enrichies pour des contenus similaires)
Voici le snippet PHP en question :
/*
* Automated schema markup for Movies & Series
*/
add_filter('rank_math/json_ld', function($data, $jsonld) {
// Vérifie si le type de publication est 'film' ou 'serie'
$post_type = get_post_type();
if ($post_type === 'film' || $post_type === 'serie') {
// Récupère l'ID de la taxonomie "realisateur"
$director_id = get_field('realisateur');
$director_id = is_array($director_id) ? reset($director_id) : $director_id; // Obtient le premier élément du tableau
$director_term = get_term_by('id', $director_id, 'realisateur');
$director_name = !empty($director_term) ? $director_term->name : '';
$director_url = !empty($director_term) ? get_term_link($director_term) : '';
// Récupère la valeur du champ ACF "jai_aime_ce_film" (1 si oui, 0 si non)
$liked_content = get_field('jai_aime_ce_film') ? 1 : 0;
// Récupère l'auteur de la critique (review)
$review_author = get_the_author();
// Récupère le titre H1 situé à l'intérieur de l'élément avec l'ID #post-content
$review_title = '';
$post_content = get_post_field('post_content', get_the_ID());
if (preg_match('/]*>(.*?)<\/h1>/si', $post_content, $matches)) {
$review_title = $matches[1];
}
// Récupère l'ID de la publication
$post_id = get_the_ID();
// Récupère l'URL de l'image mise en avant et ses dimensions
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src($thumbnail_id, 'full');
// Détermine le type de contenu
$content_type = $post_type === 'film' ? 'Movie' : 'TVSeries';
// Crée un nouvel élément de schéma pour la critique de film ou série
$review_schema = array(
'@context' => 'https://schema.org',
'@type' => 'Review',
'@id' => esc_url(get_permalink()) . '#review-' . $post_id, // ID unique de la critique
'itemReviewed' => array(
'@type' => $content_type,
'name' => get_the_title(), // Titre du film ou de la série
'director' => array(
'@type' => 'Person',
'name' => $director_name, // Nom du réalisateur
'sameAs' => $director_url // URL de la page du réalisateur
),
'url' => esc_url(get_permalink()), // URL de la page actuelle
'image' => array(
'@type' => 'ImageObject',
'url' => esc_url($thumbnail_url[0]), // URL de l'image mise en avant (l'affiche)
'width' => $thumbnail_url[1], // Largeur de l'image
'height' => $thumbnail_url[2] // Hauteur de l'image
),
'description' => get_the_content(), // Description du film ou de la série
),
'author' => array(
'@type' => 'Person',
'name' => $review_author // Nom de l'auteur de la critique
),
'datePublished' => get_the_date('c'), // Date de publication de la critique
'reviewBody' => get_the_content(), // Corps de la critique
'name' => $review_title, // Titre de la critique
'reviewRating' => array(
'@type' => 'Rating',
'bestRating' => '1', // Meilleure note possible (1)
'ratingValue' => $liked_content, // Note de la critique (0 ou 1)
'worstRating' => '0' // Pire note possible (0)
)
);
// Ajoute le schéma de la critique au schéma JSON-LD existant
if (!empty($data['mainEntity'])) {
array_unshift($data['mainEntity'], $review_schema);
} else {
$data['mainEntity'] = array($review_schema);
}
}
return $data;
}, 10, 2);
À des fins de référencement, une fois de plus, nous avons développé notre propre variable qui nous permet d’afficher un nombre de publication associée à un auteur, pour l’intégrer dans les balises title et description des archives de rédacteurs.
Voici le snippet PHP en question :
/**
* Action: 'rank_math/vars/register_extra_replacements' - Allows adding extra variables.
* Snippet to register variable that will return the number of custom post type posts in the current author archive
*/
add_action('rank_math/vars/register_extra_replacements', function () {
rank_math_register_var_replacement(
'author_custom_post_type_count',
[
'name' => esc_html__('Author Custom Post Type Count', 'rank-math'),
'description' => esc_html__('Number of custom post type posts in the current author archive', 'rank-math'),
'variable' => 'author_custom_post_type_count',
'example' => author_custom_post_type_count_callback(),
],
'author_custom_post_type_count_callback'
);
});
function author_custom_post_type_count_callback() {
// Récupérer l'ID de l'auteur
$author_id = get_queried_object_id();
// Types de publications personnalisés à prendre en compte
$post_types = array( 'livre', 'film', 'serie' );
$total_count = 0;
foreach ( $post_types as $post_type ) {
// Arguments de la requête
$args = array(
'post_type' => $post_type,
'author' => $author_id,
'posts_per_page' => -1,
);
// Création de la requête
$query = new WP_Query( $args );
// Ajouter le nombre de publications de ce type à $total_count
$total_count += $query->found_posts;
}
return $total_count;
}
Audience Cible
Notre blog de critiques et recommandations a initialement été conçu dans l’optique de faire découvrir des œuvres parfois méconnus à une audience bien définie. En effet, nous avons conçu ce site pour être lu par des individus de tout âge et qui s’intéressent à la culture inusitée.
Nos rédacteurs et rédactrices sont passionnés par des œuvres de genres variées. Toutefois, tous ne sont pas expérimentés dans la rédaction optimisée pour le web et le référencement. Leurs critiques sont donc rédigées d’une façon qui se veut plus authentique, en omettant les divers éléments que l’on retrouve habituellement sur les blogs et qui polluent la lecture.
Principes de Conception
L’optimisation du parcours utilisateur et administrateur est un sujet qui nous tient particulièrement à cœur. Nous faisons régulièrement notre maximum pour étudier les pistes d’améliorations de notre site pour proposer une expérience simple d’utilisation et intuitive. Notre parcours utilisateur a été pensé en appliquant plusieures heuristiques de Bastien & Scapin¹.
D’un autre côté, nous avons également mis en place des automatismes pour faciliter la vie des administrateurs du site. Par exemple, nous avons automatisé la création d’archives pour les différentes taxonomies présentes sur notre site (auteurs, genres littéraires, genres cinématographiques, etc…). Nous avons également développé des automatismes variés pour nos rédacteurs lorsqu’ils rédigent des critiques. Les éléments SEO sont par exemple en partie automatisés, notamment grâce à certains snippets PHP que nous avons détaillés dans la rubrique Développement Back-End.
Optimisation et SEO
Optimisation des performances
Nous somme fiers de proposer un site avec des temps de chargement ultra optimisés. Notre page d’accueil affiche par exemple fièrement un score de 100/100 pour les navigateurs mobiles et ordinateurs².
Pour obtenir ce score, nous avons mis en place des techniques de caching optimisés, grâce à la technologie LiteSpeed Web Server, proposé par notre hébergeur O2Switch. Ajoutez à cela des optimisations relatives au nombre de requêtes HTTP générées lors de l’affichage de l’une de nos pages (grâce à l’option « Combiner les Fichiers JS & CSS») et des optimisations sur la taille des fichiers à télécharger (via minification) et vous obtenez une base de qualité pour un site web optimisé.
Bien entendu, nous avons également mis en place une stratégie de conversion automatique des images pour les afficher aux formats nouvelle génération (WebP). Notre système utilise un quotat limité de crédits gratuits pour convertir nos images au format WebP via les services quic.cloud. Si ce quotat venait à être atteint, nous avons prévus une solution de secours qui vise à convertir les PNG et BMP sans transparence au format Jpeg (via le plugin ASE).
Finalement, nous avons également mis en place Memcache pour optimiser la gestion de la mémoire cache distribuée de notre site web qui fonctionne via une base de donnée.
Optimisations SEO
Notre site est fier d’utiliser Rank Math SEO pour gérer et optimiser son référencement. Nous avons par exemple conçu une méthode de génération par défaut des balises meta description et meta title pour augmenter le positionnement de nos critiques.
Nous proposons également des schémas automatiques pour certains éléments de notre site, tel que le fil d’ariane qui s’affiche presque partout sur le site, ainsi que pour donner aux moteurs de recherches des moyens de mieux comprendre nos critiques, le tout dans l’optique d’augmenter les chances d’un bon positionnement de nos critiques. Avec ces schémas, google peut choisir de présenter nos critiques avec des données enrichies, ce qui offre une meilleure expérience pour nos utilisateurs.
Par ailleurs, nous avons également mis en place un suivi des erreurs 404, afin d’identifier là où nos utilisateurs se perdent, et nous réfléchissons en permanence à mettre en place des redirections efficaces, avec les bons codes HTTP.
Hébergement et Gestion des Mails
Notre hébergement chez O2Switch nous offre de nombreuses fonctionnalités supplémentaires à l’hébergement du site. Nous avons par exemple la possibilité d’appliquer des mesures de sécurité à notre site, via l’outil TigerProtect.
Outre cela, nous avons la possibilité de créer autant d’adresses mail professionnelles que nous le souhaitons. Nous pouvons gérer l’espace de stockage alloué à chacun d’entre eux, gérer le filtrage automatique du spam ainsi que les redirections de mails.
En cas de besoin, nous pouvons aussi créer une quantité illimité de sous-domaines, par exemple pour ajouter des fonctionnalités spécifiques à notre site, ou tout simplement pour avoir un espace de test pour nos futures nouveautés.
Sécurité et Protection des Données
Nous avons appliqué diverses mesures de sécurité à notre site, à la fois grâce à TigerProtect, mais aussi grâce à certains de nos plugins :
- Sécurité par défaut d’O2Switch
- Correspond aux règles de sécurités qui sont actives par défaut et maintenues par l’équipe technique d’o2switch
- Bloquer l’accès aux fichiers de développement.
- Bloque l’accès aux fichiers de développement, comme les .env, .git etc…
- Contrôler les requêtes vers le xmlrpc.php
- Permet de bloquer les accès vers le fichier XMLRPC.php
- Double sécurité pour limiter au maximum les attaques bruteforce via XMLRPC (interdiction via TigerProtect + ASE)
- Bloquer l’accès direct aux fichiers .php sensibles de WordPress
- Bloque l’accès direct aux fichiers sensibles de WordPress qui ne doivent pas êtres utilisés directement
- Bloquer le trafic venant des adresses IP du réseau Tor
- Bloque le trafic provenant des nœuds de sortie du réseau Tor
- Bloquer le trafic venant des adresses IP ayant une mauvaise réputation
- Bloque le trafic provenant des IPs ayant une mauvaise réputation ou listée sur des Blacklists
- ModSecurity
- Modsecurity est un pare-feu applicatif complémentaire qui permet d’analyser et filtrer les requêtes entrantes sur votre site internet.
Les données personnelles de nos utilisateurs sont quand-à-elles stockées sur notre base de donnée mysql, le tout est sécurisé par O2Switch et protégé par un mot de passe généré aléatoirement avec de multiples caractères spéciaux. Les données visibiles depuis le dashboard administrateur sont quant-à-elles accessibles seulement pour les administrateurs du site. Nos rédacteurs, ni les utilisateurs ne peuvent avoir accès à vos données personnelles.
- Scapin, D.L. & Bastien, J.M.C. (1997) Ergonomic criteria for evaluating the ergonomic quality of interactive systems.
- Résultats https://pagespeed.web.dev du 30 juin 2024. Les résultats sont susceptibles de varier d’une analyse à une autre.