Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Compresser côté serveur

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Compressez les fichiers avant leur envoi. Ainsi, vous ne monopoliserez pas la bande passante et vous réduirez le temps de chargement de ces fichiers. Paramétrez également la compression.
05:04

Transcription

Prenons un exemple d’un site web relativement basique puisqu’il contient quasiment rien en html. Simplement un lien vers un jQuery et un jquery-ui, puis une feuille de style qui est vraiment très réduite quoi, qui a 4, 5 lignes, pas plus. On a deux types de font téléchargées : une bold et une regular. On l’avait vu déjà, juste dans les expériences précédentes. Si on utilise un client ftp classique, on place tout ceci sur un serveur, voilà, qui est accessible depuis l’extérieur. Et donc si on rentre sur un navigateur pour contrôler cette page, on va en profiter pour ouvrir la partie Network ici dans la console. Donc vous ouvrez la console, soit par clic-droit, Inspecter l’élément, soit CONTRÔLE-MAJ-I, soit F12. Voilà, vous avez plusieurs manières de pouvoir ouvrir cette console. Une fois qu’on est sur le Network, on s’assure quand même que le cache soit bien vidé. Vous pouvez également le vider, pensez à le désactiver ici. Et on va charger la page html. Alors, dès l’instant où on envoie une requête http, il se passe plusieurs choses. Si je prends la page html classique ici, vous voyez, je vais prendre un peu plus d’espace ici, la page html, lorsqu’elle envoie une requête, ici, elle dit en gros : moi j’accepte les encodages gzip, deflate, sdch. Donc en gros, elle dit au serveur : si tu me parles de manière compressée, je comprends ce que tu me dis, il n’y a pas de souci là-dessus. Et donc le serveur va lui répondre ici par cette réponse-là quoi. Alors, si on regarde maintenant d’un point de vue autre que les requêtes, si je regarde sur l’intégralité de la page, donc je vide le cache et j’actualise ma page, regardez ce qui se passe ici, on voit bien que je télécharge 46 kilos, 8 kilos, 500 bytes, pour la petite feuille de style ici qu’on a, 30 kilos, 85 kilos. Donc au total, je suis à 172 kilos ici dans la partie basse pour un total de 420 millisecondes de téléchargement sur 6 requêtes. On a la possibilité d’utiliser un fichier htaccess donc, et de lui dire : essaie de compresser tous les types de fichier que tu peux, dès la sortie, puisqu’ici le navigateur comprend, on le voit bien dans son en-tête ici, comprend la compression gzip, deflate. Alors, on pourrait aller un peu plus loin avec les nouvelles types de compression comme sdch, mais déjà avec gzip et deflate, vous allez voir qu’on arrive à faire quand même pas mal de sympathie. Alors, comment ça marche tout ça ? Alors, moi je vous invite de vous rapprocher de HTML5 Boilerplate, vous vous rappelez, ce template de démarrage ici, qui, lui, propose un fichier htaccess, qui parle au serveur apache, et qui va faire tous les types d’optimisation au niveau du htaccess que l’on peut imaginer. Et notamment il va vers la ligne ici, voilà, 740 donc, lui dire : si tu arrives à travailler avec ce type de module-là, eh bien, applique un filtre par défaut de deflate, donc de compression, à ces types de type MIME qui correspondent à tel type d'extension de fichier. C'est-à-dire qu’ici par exemple, c’est le type mime font, extension de fichier eot. Type mime font, extension de fichier opentype, etc. Donc tu vas pouvoir faire ce genre de compression pour moi s’il te plaît, et là on termine le module. Alors on pourrait avoir tendance à se dire : on va tout copier, tout ce fichier htaccess, on va le copier sur le serveur, et puis voilà, ce sera bon parce que si HTML5 Boilerplate le fait, c'est que ça doit être vraiment bien. Faites attention quand même parce que le serveur apache, à chaque requête, va aller prendre en considération ce fichier htaccess et le lire. Donc faites attention, ça peut quand même prendre un peu un certain temps. Il vaut mieux l’optimiser. Si vous savez que vous ne passez pas de rdf, ne mettez que les types de fichier que vous utilisez. Alors par défaut, je vais copier tout ça pour l’instant, je vais le récupérer, et je vais le placer ici sur le serveur. Donc ici, si je regarde ce fichier htaccess, vous voyez, ici on est vraiment dans la partie par défaut tel qu’il a été présenté par HTML5. Le seul que j’ai rajouté, c’est un font truetype ici, puisque j’ai un truetype font ici. Et donc je lui ai dit : je rajoute le font truetype juste pour être sûr de bien compresser ce type de fichier-là. Et là à ce moment-là, ce que je fais, c'est : je prends le htaccess et je le place sur le serveur. Voilà, il est placé sur le serveur. Je retourne dans le navigateur maintenant. Je reviens ici, je vide mon cache surtout. Je vide mon cache. Et j’actualise ma page. Et là cette fois-ci, regardez ce qui se passe. Le poids, au lieu d’être 170 kilos, ce n’est plus que 68 kilos qui est arrivé. Rendez-vous compte : on est sur un format de site qui est extrêmement réduit. Donc imaginez-vous le gain que cela peut apporter sur un très gros site. Alors certains diront : mais attention, oui mais si ça a été compressé, ça veut dire qu’il faut le décompresser, etc. Non, parce que les navigateurs vont très vite au niveau de ces types de décompression, et ça va complètement minimiser la bande passante dans un premier temps. Vous vous rendez compte : pour les 6 requêtes on a gagné un peu plus de la moitié puisqu’on était à 172, et là maintenant, on est à 68, en termes de bande passante de transfert.

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
Date de parution :26 déc. 2016

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 !