HTML5 : Optimisation des flux de production

Vérifier la requête HTTP

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vérifiez les échanges réseau entre le poste client et le serveur. Apprenez à lire et à exploiter ces informations, dans le but d'optimiser les échanges. Les fontes constituent un bon exemple en raison de leur encombrement.
04:39

Transcription

Une page assez chargée en design peut faire appel à plusieurs fonts. Et la font des fois est un peu le bas qui blesse, et donc c’est par là qu’on peut commencer à explorer déjà ce qui se passe. Si je viens sur Font Squirrel ici, je vais pouvoir télécharger une font qui me plaît, parce qu’elle correspond à ce que le designer souhaite, etc. ou ce que le client veut. Pensez à regarder dans les glyphs ici souvent. On a des glyphs qui sont énormes, et il y a pleins de lettres qu’on ne va jamais utiliser, comme le s, voilà ici, ce t ici. Par contre, ces éléments-là vont être téléchargés. Ici, si je prends la Cantarell par exemple, et que je dis download, même si je la prends pour le web, je vais me la retrouver un web font qui est ici. Si je ne fais pas un subsetting ici, c'est-à-dire de dire je ne veux que le Western Latin ou si je reste à no subsetting, je vais télécharger la totalité. Donc il est important souvent de faire ce qu’on appelle du sous-échantillonnage, ou du subsetting. Toujours chez Font Squirrel, vous avez un Generator ici qui vous permet, si vous avez le TTF, de pouvoir le télécharger ici. Et une fois que vous l’avez téléchargé, bien entendu, la première question qu’on vous pose, oui, oui, j’ai bien les droits de le faire, la police m’appartient, ou c’est une police libre de droit. Et au lieu de la demander sur Optimal, Alors là, en mode Expert, vous allez demander les types de typos que vous voulez récupérer. Vous pouvez directement récupérer tous les formats, ou un seul. Et puis, ce qui va être intéressant surtout, c’est que vous allez, je vous invite à venir regarder tous les détails un par un, mais surtout ce qui est intéressant, c’est qu’au niveau du subsetting ici, vous allez avoir la possibilité de pouvoir demander un Custom Subsetting. Et donc à ce niveau-là, dans le Custom Subsetting, vous allez pouvoir choisir, soit un lowercase, que les minuscules, que les majuscules, que les nombres. Vous allez pouvoir venir faire votre marché, mais surtout, si vous prenez par exemple certaines marques de produit ou de cosmétique, on n’a pas forcément besoin de toutes les lettres. Donc on va pouvoir venir taper les lettres qu’on va utiliser simplement là-dedans. Et seules ces lettres-là seront exportées. Si vous marques deux d, ne vous inquiétez pas, le deuxième d, le deuxième f, ne sera pas exporté, le système va regarder que vous n’ayez pas tapé deux fois. Mais si vous avez besoin d’un D majuscule parce que c’est le nom de votre logo, si vous mettez un d minuscule, ça ne marchera pas. Il faut penser à mettre le D majuscule pour être sûr de bien récupérer. Une fois, vous voyez ici, vous avez le Subset Preview, et donc si vous rajoutez plusieurs d, vous allez voir ici, il va vous rajouter un seul petit d, il ne vous en rajoute pas plusieurs. Voilà donc, vous allez pouvoir comme ça, optimiser au maximum votre typo. Et quand c’est terminé, vous allez pouvoir la télécharger sur la partie haute ici, et la récupérer. Alors, j’ai préparé un petit fichier, si on le regarde ici dans le 07_02, qui va faire appel à diverses librairies, donc ici vous voyez vous avez un fichier html qui utilise la Cantarell Bold et la Regular. La Regular n’a pas du tout été optimisée. La Bold est optimisée, bien sûr. Elle ne doit écrire que « fruits et légumes ». Il y a pas besoin d’écrire dans le lorem ipsum tous les caractères ici. Et en même temps ici, on charge aussi des scripts minifiés css et javascript. On reviendra sur l’optimisation des fichiers dans le détail. Là, pour l’instant on va regarder plutôt comment on va pouvoir contrôler tout ça. Donc ici dès qu’on charge une page html classique, la première chose qu’on va faire, c’est on va ouvrir l’inspecteur, ou vous appuyez sur la touche F12, pour pouvoir ouvrir la console de commande, et vous passez en mode Network ici. Alors par contre, il va falloir vous assurer d’avoir le cache vidé, de bien être sûr que votre cache soit vidé. Vous pouvez ici désactiver le cache. Moi, je préfère le faire à la demande quand j’en ai besoin pour pouvoir contrôler. Maintenant, si suivant ce que vous contrôlez, vous pouvez venir cocher ici, et le cache ne sera pas pris en compte. Et là vous chargez votre page. Et là vous voyez qu’en chargeant la page, eh bien, la typo optimisée, elle fait « 7,9 », bon, il n’y a que six lettres. L’autre, il fait 46 kilos quand même. Il y a une grosse différence entre les deux. On voit le temps de chargement ici. On voit à quel moment ça recommence à charger, vous voyez. Donc en fait, combien de temps aura mis ma page pour se charger ? Elle aura mis 79 millisecondes pour s’afficher quoi, d’accord. Elle avait été terminée à 71, mais le temps de se peindre, ça a pris 8 millisecondes. Et puis ici, il y a eu 172 kilos de transférés au travers de six requêtes. Donc on n’est pas en http2, et donc chaque requête en http1 compte ici pour l’instant. Donc ici, vous avez fait ça. Si vous rechargez votre page maintenant, vous voyez qu’ici c’est directement pris dans la mémoire cache, et ici pareillement quoi. C'est-à-dire que sur 30 kilos, il n’y a que 205 bytes qui ont été récupérés. Ça a été très rapidement. Donc c’est un 304 puisqu’il n’y a pas de modifié. Il n’y a pas eu de transfert de data. Il y a juste simplement les échanges http qui ont dit : non, non poulet, ça n’a pas changé, 304 donc. On peut reprendre dans la partie. Pensez à tout le temps venir checker vos éléments, à pouvoir les contrôler dans cette requête de Network, pour pouvoir optimiser l’intégralité de vos productions.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 déc. 2016
Durée :5h29 (62 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !