OLDGuide du bon intégrateur

Il y a assez de tout dans le monde pour satisfaire aux besoins de l’homme, mIl y a assez de tout dans le monde pour satisfaire aux besoins de l’homme, mais pas assez pour assouvir son avidité. Mahatma Gandhiais pas assez pour assouvir son avidité. Mahatma Gandhi

POLICES DE CARACTERES

  • privilégier les polices classiques sans serif (opensans, roboto, monserrat, poppins, oswald, raleway, lato, nunito sans, source sans pro)
  • ne pas mettre de numéro de version dans le nom du fichier woff ou woof2 (ça facilite les mises à jour)
  • charger uniquement les polices de caractères au format woff2, exemple : @font-face {
    font-family: ‘Open Sans’;
    font-weight:  400 800;
    src: url(‘/wp-content/fonts/open-sans-regular.woff2’) format(‘woff2-variations’);
    font-display: swap;
    }
  • ne plus charger la bibliothèque Fontawesome en entier, mais seulement les svg nécessaires au cas par cas, car la bibliothèque Fontawsome alourdie les pages de 1,63 Mo

MEDIAS

  • optimiser les images (normalement c’est automatique avec ewww optimizer)
  • utiliser avec parcimonie les diaporama et vidéos sur la page d’accueil
  • privilégier les svg aux png quand c’est possible (surtout pour les pictogrammes)
  • compresser les svg : https://vecta.io/nano
  • réduire autant que possible le nombre d’iframes et de vidéos par page (pour ne pas se trouver avec une page de plus de 20 Mo… )
  • utiliser l’extension « Lazy loader » pour le chargement en différé des vidéos, des iframes et des images

STYLES

EXTENSIONS ET SCRIPTS

  • quand plusieurs extensions rendent le même service, choisir la plus légère (exemple : les blocs accordéons)
  • parmi les 6 extensions testées, 2 répondent à nos besoins (Advanced Accordion Block et Lightweight Accordion). Elles donnent des résultats similaires en termes de poids, de temps d’affichage et de nombre de requêtes. Advanced Accordion Block offre d’avantage d’options d’affichage
  • ne pas mettre de carte (Openstreetmap ou Googlemaps dans le pied de page… sinon ça alourdit toutes les pages), les réserver plutôt pour la page contact par exemple
  • préférer les cartes OpenStreetMap aux cartes Googlemaps, elles sont 2 fois plus légères (et respectent mieux la politique de confidentialité)
  • insérer les cartes OpensStreetMap avec le bloc dédié fourni par l’extension Out of the Block OpenStreetMap qui est basée sur Leaflet (c’est plus léger que l’utilisation d’une iframe)
  • une alternative pour ajouter des cartes interactive est d’utilisée l’extension MapPress également basée sur Leaflet (plus complète, mais compliquée à configurer)
  • diaporama : Smart slider et Super block slider donnent de bon résultats. Smart slider est le plus complet. Super block slider est un peu plus performant (il engendre moins de requêtes) et permet de construire le diaporama directement dans l’éditeur de blocs.
  • désactiver  « Lightbox avec PhotoSwipe » dans l’éditeur de blocs sur les pages ne contenant pas d’image cliquable (panneau dans la colonne latérale droite)
  • ajout d’une question quiz dans Contact Form pour lutter contre les spams (ça permet de ne pas utiliser une extension supplémentaire)