Un magazine de décoration intérieure publiait des articles richement illustrés, parfois quinze ou vingt photos par billet. Le responsable technique avait constaté, en creusant les statistiques de performance du site, qu’une poignée d’articles pesait démesurément plus lourd que la moyenne, ralentissant leur chargement sur mobile. Le problème ne venait pas d’un manque de compression globale, mais de quelques articles où les rédacteurs avaient inséré des photos directement issues d’un appareil photo, sans redimensionnement préalable.
Plutôt que d’attendre un audit de performance a posteriori, un indicateur affiché directement dans l’écran d’édition de l’article — avant même la publication — permet au rédacteur de repérer le problème au moment où il est encore facile à corriger.
Lister les médias réellement attachés à l’article
La fonction get_attached_media() renvoie les pièces jointes rattachées à un article donné, ce qui correspond en pratique aux images téléversées directement depuis l’écran d’édition de cet article (par opposition à une image de la médiathèque simplement insérée sans lien de rattachement, plus difficile à tracer précisément) :
function magazine_calculer_poids_medias( int $post_id ) {
$medias = get_attached_media( 'image', $post_id );
$poids_total = 0;
$details = array();
foreach ( $medias as $media ) {
$chemin = get_attached_file( $media->ID );
if ( $chemin && file_exists( $chemin ) ) {
$taille = filesize( $chemin );
$poids_total += $taille;
$details[] = array(
'titre' => $media->post_title,
'taille' => $taille,
);
}
}
return array(
'total' => $poids_total,
'details' => $details,
);
}
Utiliser filesize() sur le fichier réel plutôt que de se fier à une métadonnée stockée est important : la taille réelle d’un fichier peut différer légèrement de ce qui a été enregistré au moment du téléversement, notamment après une optimisation appliquée par une extension de compression d’image installée après coup.
Afficher le résultat dans une métabox latérale
add_action( 'add_meta_boxes', function () {
add_meta_box(
'magazine_poids_medias',
'Poids des médias de cet article',
'magazine_afficher_metabox_poids',
'post',
'side',
'default'
);
} );
function magazine_afficher_metabox_poids( WP_Post $post ) {
$resultat = magazine_calculer_poids_medias( $post->ID );
$mo = round( $resultat['total'] / 1048576, 2 );
$couleur = $mo > 3 ? '#b32d2e' : '#1e8a3c';
printf( '<p style="font-size:20px;color:%s;font-weight:600;">%s Mo</p>', esc_attr( $couleur ), esc_html( $mo ) );
if ( $mo > 3 ) {
echo '<p>Ce total dépasse le seuil recommandé de 3 Mo pour un article. Vérifiez les images les plus lourdes ci-dessous.</p>';
}
echo '<ul>';
foreach ( $resultat['details'] as $detail ) {
printf(
'<li>%s — %s Ko</li>',
esc_html( $detail['titre'] ),
number_format_i18n( round( $detail['taille'] / 1024 ) )
);
}
echo '</ul>';
}
Trier pour montrer d’abord les fichiers les plus lourds
Une liste brute dans l’ordre d’insertion n’aide pas vraiment le rédacteur à identifier rapidement le fichier problématique. Un tri décroissant sur la taille, appliqué juste avant l’affichage, rend l’indicateur immédiatement actionnable :
usort( $resultat['details'], function ( $a, $b ) {
return $b['taille'] <=> $a['taille'];
} );
Se limiter aux images réellement affichées
Un article peut accumuler, au fil des révisions, des images téléversées puis retirées du texte mais toujours techniquement rattachées à l’article. Pour un indicateur plus fidèle à la réalité de la page publiée, on peut croiser la liste des pièces jointes avec les identifiants d’image réellement présents dans post_content, en cherchant les attributs wp-image-{id} insérés automatiquement par l’éditeur de blocs sur chaque image :
preg_match_all( '/wp-image-(\d+)/', $post->post_content, $correspondances );
$ids_utilises = array_map( 'intval', $correspondances[1] );
Ce filtrage supplémentaire évite de compter, dans le total affiché, des fichiers orphelins qui n’ont plus d’impact réel sur le poids de la page publiée.
Ce que cet indicateur ne remplace pas
Ce repère informe sur le poids brut des fichiers, mais ne mesure pas le poids réellement transmis au navigateur, qui dépend aussi des tailles d’image générées automatiquement par WordPress (wp_generate_attachment_metadata()) et du format servi. Un audit de performance plus poussé, avec des outils dédiés, reste utile en complément, mais cet indicateur simple couvre déjà le cas le plus fréquent : une photo insérée sans redimensionnement préalable, largement plus lourde que nécessaire pour un affichage web.
- Fixez le seuil d’alerte selon la réalité de votre thème, pas une valeur générique trouvée ailleurs.
- Vérifiez le comportement sur un article sans aucune image : la métabox doit afficher un total à zéro proprement, sans erreur.
- N’oubliez pas que
get_attached_media()ne couvre pas les images externes chargées depuis une autre URL, hors du champ de cet indicateur.
Un repère chiffré simple, affiché au bon moment dans le flux de travail, change plus facilement une habitude qu’une consigne écrite dans un guide de style que peu de monde relit avant de publier.
Le bilan
Cet indicateur ne demande aucune extension supplémentaire ni service externe : uniquement des fonctions natives de gestion des médias, combinées à une métabox classique. Sur un site à fort volume d’images, ce petit ajout suffit souvent à réduire nettement le nombre d’articles disproportionnellement lourds publiés par erreur.
