Guide de programmation pour l'API Rich Media

Réduire la taille du fichier HTML5

Une création HTML5 désigne généralement une annonce conçue à l'aide des langages HTML, CSS ou JavaScript. Les créations HTML5 offrent de nombreuses possibilités pour compresser vos fichiers. La plupart des conseils ci-dessous peuvent être mis en œuvre en moins de 15 minutes.

Utiliser Google Web Designer

Google Web Designer est une application Web destinée au développement HTML5, parfaitement intégrée à Studio et à la bibliothèque d'éléments. Qui plus est, Google Web Designer offre une fonctionnalité de compression intégrée pour les images et le code, accepte les polices Web de Google et les animations CSS, est compatible avec le format SVG, et plus encore.

Premiers pas avec Google Web Designer

Vérifier la taille du fichier

Vérifiez la taille du fichier avant de la réduire et passez en revue les conditions et consignes ci-dessous.

Taille de fichier brute et taille de fichier compressée

Pour connaître la taille brute de votre fichier, procédez comme suit :

  • Dans Studio, vérifiez la taille totale du fichier à l'étape Gérer les fichiers du processus de conception de créations Studio.
  • Dans Google Web Designer, cliquez sur Publier > Publier en local pour afficher "Taille totale (brute)" dans la boîte de dialogue "Publier". Vous pouvez également consulter la taille actuelle du fichier dans le panneau de l'outil de validation des annonces.

Google Web Designer compresse les créations à l'aide du logiciel gzip disponible gratuitement. Si vous n'utilisez pas Google Web Designer, vous pouvez télécharger gratuitement une copie de gzip, compresser vos créations sur votre espace de travail local, puis contrôler la taille du fichier ainsi généré.

L'ad server de l'éditeur peut utiliser différents modes de compression. Nous vous conseillons donc de demander à votre éditeur lequel il utilise afin d'éviter d'éventuelles différences de calcul des tailles compressées.

Taille de fichier de référence

Avant de concevoir votre création, vous devez comprendre les spécifications de votre éditeur concernant la diffusion d'annonces. Toutefois, de nombreux éditeurs suivent les recommandations de l'IAB, à savoir un chargement initial de 200 Ko (compressé) pour la création et une taille totale de 300 Ko ou 500 Ko (selon le format). Le chargement initial se rapporte à la taille totale du fichier compressé de tous les éléments de la création affichés par le navigateur lorsque l'annonce est diffusée pour la première fois. Il comprend tous les fichiers images, HTML, CSS et JavaScript.

Taille du composant "Enabler"

Le composant "Enabler" doit être inclus dans les créations Studio, mais les navigateurs Web en conservent une copie en cache, car le même script est chargé pour chaque création Studio. La taille du script Enabler est de 25 Ko (compressé) et de 75 Ko (brut).

Pour en savoir plus, consultez les consignes de l'IAB et de Studio :

À propos des interventions de Chrome sur les annonces lourdes

Les créations dont la taille du fichier est supérieure à 4 Mo, qui utilisent le CPU plus de 15 secondes par période de 30 secondes ou qui le sollicitent pendant un total de 60 secondes peuvent être déchargées par Chrome au moment de la diffusion.

Polite Load et spécifications des éditeurs

Le composant "Polite Load" permet de retarder le chargement des éléments supplémentaires d'une création (tels que les images et les vidéos) jusqu'à ce que la page de l'éditeur soit chargée. Ceci diffère du chargement initial, qui se rapporte à la taille totale du fichier compressé de tous les éléments de la création affichés par le navigateur lorsque l'annonce est diffusée pour la première fois. Certains éditeurs rendent le composant "Polite Load" obligatoire, mais, même s'il n'est pas demandé, il est judicieux de l'inclure. Découvrez comment configurer un composant "Polite Load".

Consultez les spécifications HTML5 Rich Media de l'éditeur. Les éditeurs peuvent calculer la taille du fichier soit en se basant sur le format gzip compressé, soit sur la taille brute du fichier. Les spécifications de chaque éditeur peuvent diverger des spécifications IAB en fonction de l'emplacement, du type d'annonce, etc. Certains éditeurs peuvent être plus enclins que d'autres à faire des compromis sur les spécifications de création. Tenez également compte des éventuelles limitations concernant la durée de lecture vidéo ou les animations.

Réduire la taille de l'image

Avant d'essayer de réduire la taille d'une image, commencez par vous demander si une image est nécessaire. Il est possible de remplacer certains éléments image par des styles CSS. Vous trouverez ci-dessous des suggestions, ainsi que des ressources permettant de réduire le nombre d'images dans votre création et d'optimiser celles dont vous avez besoin.

À l'aide du composant "CSS", créez des dégradés ou des couleurs unies
Avec CSS, le rendu des couleurs et des dégradés est bien meilleur qu'avec une image. Pour vous aider à créer des dégradés CSS, utilisez le Générateur de dégradés de CSSmatic.
Remplacez les formats GIF, JPG et PNG par le format SVG (Scalable Vector Graphics)

Les images GIF, JPG et PNG sont composées de pixels ("trame") et leur taille est supérieure. SVG est un format d'images vectorielles point à point capable de réduire considérablement la taille du fichier.

Pour en savoir plus sur le format SVG, reportez-vous aux pages suivantes, toutes trois en anglais :
Tutoriel SVG de W3School
Comment utiliser le format SVG ?
Compression SVG

Si vous utilisez de nombreuses icônes, pensez à utiliser une police propre à celles-ci

Il s'agit d'une police ordinaire pouvant être utilisée de la même façon que les polices standards. Elles sont généralement vectorielles, ce qui permet de réduire la taille du fichier. Si vous réutilisez sans cesse les mêmes icônes, créez votre propre police d'icônes.

Ressources pour les polices d'icônes (en anglais)
Générateur de polices d'icônes Icomoon
Icônes CSS NounProject
Icônes CSS FontAwesome

Utilisez une feuille de sprites pour optimiser le temps de chargement des images à base de pixels

Une feuille de sprites est une image en mosaïque simple, chargée en une seule fois. Avec CSS, seules les mosaïques de l'image globale apparaissent. L'utilisation d'une feuille de sprites permet de réduire le nombre de requêtes HTTP. Moins vous avez de requêtes HTTP et plus vite votre création est chargée. Il reste néanmoins important de trouver la compression adaptée à votre feuille de sprites.

Ressources pour les feuilles de sprites (en anglais)
Présentation des sprites CSS de W3School
Stitches (générateur de feuilles de sprites en ligne)

Utilisez une compression optimale

Si vous devez utiliser des images à base de pixels, compressez-les autant que possible, sans compromettre leur qualité. Vous connaissez probablement Save For Web de Photoshop, mais d'autres outils en ligne proposent également un taux de compression avancé.

Compresseurs d'images gratuits
TinyPNG
TinyJPG

Créer des animations à l'aide du langage CSS

Pensez à utiliser les animations CSS3 plutôt que JavaScript pour vos transitions et transformations. Les transformations CSS se servent du processeur graphique (GPU) et non du CPU pour le rendu des animations, ce qui a pour conséquence d'améliorer les performances et de réduire la taille du fichier JavaScript.

Pour les animations plus complexes, en particulier les animations de particules, nous vous conseillons d'utiliser les bibliothèques d'animation JavaScript de GreenSock (GSAP). GreenSock simplifie les aspects les plus complexes de l'animation CSS, tels que la gestion du temps en présence de plusieurs animations et l'animation indépendante des propriétés de transformation.

N'utilisez pas les bibliothèques JavaScript ni les frameworks qui ont recours à la méthode setInterval de JavaScript pour les animations. Pour le codage manuel, bannissez la méthode setInterval, car elle est très gourmande en ressources de navigation, affecte les performances et nécessite davantage de code. Si les animations JavaScript sont obligatoires, nous vous conseillons d'utiliser la méthode requestAnimationFrame, spécialement conçue pour les animations.

Découvrir comment optimiser les performances d'animation
Utilisation de la méthode "requestAnimationFrame"
Animations CSS et animations JavaScript

Avant d'importer vos fichiers CSS dans Studio, réduisez leur taille à l'aide de CSS Minifier.

Réduire la taille des fichiers JavaScript

Voici quelques conseils permettant de réduire la taille de votre fichier JavaScript :

N'utilisez pas jQuery
jQuery ajoute une taille de fichier superflue, de plus ou moins 75 Ko), même si la majorité de la bibliothèque jQuery n'est pas utilisée. Choisissez plutôt de passer de jQuery à uniquement JavaScript, d'utiliser une bibliothèque minimaliste telle que Zepto.js, voire d'utiliser l'outil TweenLite de GreenSock.
Évitez d'utiliser les frameworks JavaScript
Pensez à sélectionner des parties utiles d'un framework JavaScript, que vous utiliserez dans votre fichier JavaScript principal afin de réduire la taille du fichier, ainsi que le nombre de demandes réseau.
Utilisez les bibliothèques JavaScript hébergées par Studio

Plutôt que d'importer des bibliothèques JavaScript avec votre création, remplacez toutes les références aux bibliothèques courantes JavaScript par des URL hébergées par Studio. Ces bibliothèques sont hébergées sur le même domaine que celui utilisé pour la diffusion de votre annonce.

Studio collabore avec l'IAB afin que ces ressources soient partagées et mises en cache par de nombreuses créations et ainsi exclues du chargement initial de votre annonce.

Ciblez les navigateurs et appareils

Vous gagnerez du temps et écrirez moins de code si vous décidez quels navigateurs et appareils cibler pour votre campagne. N'ajoutez pas de code pour les navigateurs et appareils non compatibles. Cela vous permettra également d'écourter la phase de test.

Ressources concernant la compatibilité des navigateurs
Navigateurs et appareils compatibles avec Studio
Can I Use : compatibilité des navigateurs à jour pour les propriétés JS et CSS

Associer et compresser vos fichiers JavaScript
Si vous avez plusieurs fichiers JavaScript, combinez-les pour n'en former qu'un seul. Utilisez des outils qui suppriment des commentaires et les espaces blancs supplémentaires du fichier JavaScript.

Conseils pour la réduction
  • Pour les prochaines mises à jour, conservez à portée de main une copie non compressée.
  • Studio requiert que les fichiers JavaScript comportent l'extension .js, et non pas .min.js.
  • Si vous réduisez la taille de vos fichiers JavaScript, vous ne pourrez pas facilement ajouter un suivi. Ajoutez d'abord le suivi, puis réduisez la taille du fichier JavaScript.

Optimiser les polices

Si vous utilisez une police autre que les polices Web standards, nous vous conseillons d'employer Google Fonts, une vaste bibliothèque de polices gratuites. Pour réduire la taille du fichier, veillez à ne demander que les caractères dont vous avez besoin, plutôt que la police de caractères dans son ensemble.

Il est aussi important de considérer que seules les URL absolues sont mises en cache par un navigateur. Bien que http://fonts.googleapis.com/css?family=Philosopher&text=Hello corresponde à la taille la plus petite pour une création spécifique, elle sera toujours vue comme une demande distincte de http://fonts.googleapis.com/css?family=Philosopher&subset=latin, qui est peut-être déjà mis en cache dans l'historique du navigateur. Dès que c'est possible, utilisez la mise en cache pour que vos créations se chargent plus rapidement.

En savoir plus sur les polices Web
Optimiser les demandes de polices avec Google Fonts
Créer des sous-ensembles pour les polices Typekit et les polices Web auto-hébergées

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?

Vous avez encore besoin d'aide ?

Essayez les solutions ci-dessous :

Recherche
Effacer la recherche
Fermer le champ de recherche
Applications Google
Menu principal
7306370758552866323
true
Rechercher dans le centre d'aide
true
true
true
true
true
74220
false
false