J’ai mis à jour mes blogs (Kazhnuz Space et Quarante-Douze) pour les rendre plus optimisé !

Un des soucis de mes blogs étaient qu’ils étaient sacrément lourd pour ce qu’ils faisaient. Cela venait d’un manque d’expérience sur le sujet quand je faisais mes blogs, ainsi que l’utilisation de diverses librairies qui s’ajoutaient sur la taille des pages, de manière un peu inutiles (Kazhnuz.space était à ~2Mo, et Quarante-Douze était à >2 Mo aussi). Du coup, dans ce petit article, je vais décrire comment j’ai fait pour rendre le site plus léger.

J’ai oublié de noter les réduction de taille donc les gains seront pas noté exactement #oups

Les images

Dans beaucoup de sites, une grosse partie de la taille des pages provient des images, et sur mes sites c’était le cas aussi. Je ne sais plus ce que ça ajoutait exactement, mais globalement, c’était environ 3~4 de ma réduction, la taille des images en mélangeant plusieurs outils.

La plus grosse réduction était qu’une partie de la taille des pages était due à une erreur bête de ma part : La plupart était trop grande pour leur utilisation. Si c’est pratique pour les écrans HDPI, cela produit aussi une plus grosse consommation mémoire et de bande passante. Le but étant d’optimisé, j’ai préféré optimiser pour les besoins des petites connexions. Plus tard, je pense que je rajouterais le support des hdpi via srcset.

J’avais mal géré la taille des miniatures sur le site, notamment, et pas mis la taille dont j’avais besoin. J’ai donc fait les modifications suivantes :

• Dans le function.php, j’ai modifier les tailles de miniatures pour correspondre à mes besoins
• J’ai modifié sur dans le theme toute les images hardcodées pour qu’elles soient au bon format. J’ai aussi utilisé l’outil shortpixel, pour baisser leur taille
• À l’aide d’une extension, j’ai converti toutes les images de miniature au format webp, ce qui a diminué leur taille.

Ces modifications sont encore plus visible sur quarante-douze, qui contient beaucoup de miniature. Combiné aux capacités habituelles de wordpress de lazy-loader les images de miniatures, cela m’a permis de rendre bien plus léger l’affichage des images sur mes blogs.

Feuilles de styles et dépendances

WordPress contient pas mal de feuilles de styles spécifiques à ses besoins, que mes thèmes n’utilisaient pas. La block-library, aidant la mise en page des articles, et des feuilles de styles génériques, rajoutent notamment pas mal de place dans ce qui est chargé dans le theme. J’ai préféré les remplacer par quelques lignes de css pour gérer certains trucs dont j’avais besoin, et rajouter le code suivant dans mon function.php :

function functionwp_remove_wp_block_library_css(){
  wp_dequeue_style( 'wp-block-library' );
  wp_dequeue_style( 'wp-block-library-theme' );
  wp_dequeue_style( 'wp-components-theme' );
  wp_dequeue_style( 'wp-components' );
  wp_dequeue_style( 'components' );
  wp_dequeue_style( 'classic-theme-styles' );
  wp_dequeue_style( 'wc-blocks-style' );
  wp_deregister_style( 'dashicons' );
  add_filter( 'show_admin_bar', '__return_false' );
} 
add_action( 'wp_enqueue_scripts', 'functionwp_remove_wp_block_library_css', 100 );

Les ajouts de mes fichiers scss sont : un ajout de la classe .screen-reader-text en plus de sr-only pour les textes lisibles par lecteurs d’écran, ainsi que les lignes suivant

.wp-block-image {
    &.size-full,
    &.size-large {
        text-align: center;
        margin:auto;
    }
}

.wp-block-gallery {
    display:flex;
    justify-content: space-between;
    align-items: start;
    .wp-block-image {
        width: 220px;
        text-align: center;
        align-self: start;
    }
    img {
        width:200px;
        height:200px;
        object-fit: cover;
        display:block;
        margin:auto;
    }
}

.aligncenter {
    text-align: center;
}

.alignright {
    text-align: right;
}

J’en rajouterais peut-être plus avec le temps. A noter que la galerie n’a pas pour but de reproduire ce que wordpress fait par défaut : elle est adapté par mes besoins.

Fork-Awesome

Une des dépendances que j’utilisais et qui rajoutait pas mal de place était fork-awesome. Cette librairie d’icone est très cool, mais représente pas mal de place sur mon site. De plus, les iconefonts sont déconseillée pour plusieurs raisons, énumérées dans cet article : Stop using iconfonts.

Pour utiliser à la place des SVG, j’ai récupéré les icônes que je voulais de fork-awesome via l’outil icomoon, ce qui m’a fourni notamment les codes SVG et les CSS à utiliser. J’ai juste du faire quelques modifs au CSS généré pour qu’il marche bien, et ça a donné ça :

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  color: currentColor;
  position: relative;
  top: 0.1em;
}

.social .icon {
  top: 0;
}

.toolbar .icon {
  top: 0.2em;
}

Conclusion et futur projet

Toutes ces modifications ont permis à mes blogs d’avoir des aspects plus léger, tout en ayant quasiment pas changé niveau design, et qui correspondent à mes besoins.

Je compte retravailler le theme de quarante-douze, et le fusionner avec un vieux projet, mon framework css « mouette ». Mouette sera le theme wordpress de quarante-douze, mais rendu plus flexible (on pourra modifier les images, les couleurs, et un peu du layout).

Je ferais aussi un autre petit exercice, créer un autre theme wordpress minimaliste, « moineau », qui lui visera spécifiquement l’utilisation « blog ».