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 et JavaScript. Les créations HTML5 offrent de nombreuses possibilités de compression de 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, elle accepte les polices Web de Google et les animations CSS, est compatible SVG, etc. Premiers pas avec Google Web Designer

Vérifier la taille de votre 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 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é.

Le serveur publicitaire 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 en matière de 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 (en fonction du 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 lors de la diffusion initiale de l'annonce. 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 :

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 lors de la diffusion initiale de l'annonce. 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 relatives à la durée de lecture vidéo ou aux animations.

Réduire la taille de l'image.

Avant d'essayer de réduire la taille d'une image, commencez par vous demander si elle 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.

Le composant CSS vous permet de créer des dégradés ou d'utiliser 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 d'icônes

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

Utiliser une grille de sprites (d'images) pour optimiser le temps de chargement des images à base de pixels

Une grille 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 grille 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 grille de sprites.

Ressources pour les grilles de sprites (en anglais)
Présentation des sprites CSS de W3School
Stitches - Générateur de grilles de sprites en ligne 

Utiliser 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 avec 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 processeur 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, notamment 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 ou les cadres JavaScript qui ont recours à la méthode setInterval de JavaScript pour les animations, et pour le codage manuel, bannissez la méthode setInterval. En effet, setInterval est très gourmand 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 DoubleClick 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 cadres JavaScript.
Pensez à sélectionner des parties utiles d'un cadre 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 possédez plusieurs fichiers JavaScript, associez-les en un seul. Utilisez des outils qui suppriment les commentaires et les espaces 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. Afin de 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 également 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 correspond à la taille la plus petite pour une création spécifique, elle sera toujours considérée comme une demande distincte de http://fonts.googleapis.com/css?family=Philosopher&subset=latin, qui est peut-être déjà en cache dans l'historique du navigateur. Dès que c'est possible, tirez parti de la mise en cache pour que vos créations se chargent plus rapidement.

En savoir plus sur les polices Web
Optimisation des demandes de polices avec Google Web Fonts
Création de 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 ?

Connectez-vous pour accéder à des options d'assistance supplémentaires afin de résoudre rapidement votre problème.