Optimiser la taille d'encodage et de transfert des éléments textuels

Ilya Grigorik

Jeremy Wagner

En plus d'éliminer les téléchargements de ressources inutiles, la meilleure chose à faire améliorer la vitesse de chargement de la page est de réduire la taille globale de téléchargement en optimisant et la compression des ressources restantes.

Bases sur la compression des données

Une fois que vous avez configuré votre site Web pour éviter de télécharger des ressources inutilisées, le l'étape suivante consiste à compresser toutes les ressources éligibles restantes à télécharger. En fonction du type de ressource (texte, images, polices, etc.), vous avez le choix entre de nombreuses techniques: des outils génériques activées sur le serveur Web, les optimisations de prétraitement pour des contenus spécifiques et les optimisations spécifiques aux ressources qui nécessitent la contribution du développeur.

Pour obtenir des performances optimales, vous devez combiner tous les éléments suivants : techniques:

• La compression est un processus qui consiste à encoder des informations en utilisant moins de bits.
• L'élimination des données inutiles permet toujours d'obtenir les meilleurs résultats.
• Il existe de nombreux algorithmes et techniques de compression différents.
• Vous aurez besoin de diverses techniques pour obtenir une compression optimale.

Le processus de réduction de la taille des données s'appelle la compression des données. De nombreuses personnes ont Contribution aux algorithmes, techniques et optimisations pour améliorer la compression la vitesse de compression et la mémoire requise par différentes algorithmes.

Ce guide ne traite pas de la compression des données de manière exhaustive. Cependant, il est important de comprendre, de manière générale, le fonctionnement de la compression, techniques pour réduire la taille des différents éléments sur vos pages exige.

Pour illustrer les principes fondamentaux de ces techniques, considérons le processus de en optimisant un format de message texte simple qui a été inventé juste pour cet exemple:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. Les messages peuvent contenir des annotations arbitraires, parfois appelées Les commentaires, qui sont indiqués par le signe "#" préfixe. Les annotations n'affectent pas la signification du message ou ses comportements.
2. Les messages peuvent contenir des en-têtes, qui sont des paires clé/valeur (séparées par ":" dans l'exemple précédent) qui apparaissent au début du message.
3. Les messages contiennent des charges utiles de texte.

Comment réduire la taille du message précédent, qui commence à 200 caractères ?

1. Le commentaire est intéressant, mais il n'a aucune incidence sur la signification du message. Éliminez-le lors de la transmission du message.
2. Il existe de bonnes techniques pour encoder les en-têtes de manière efficace. Pour exemple si vous savez que tous les messages ont le "format" et « date », vous pourriez les convertir en ID entiers courts et les envoyer simplement. Toutefois, cela pourrait ne pas être vrai, il est donc préférable de le laisser tranquille pour l’instant.
3. La charge utile ne contient que du texte. Bien que nous ne sachions pas ce que son contenu vraiment (Apparemment, il utilise un "secret-cipher"), il suffit d'examiner le texte montre qu'il contient beaucoup de redondance. Peut-être qu'au lieu d'envoyer des lettres répétées, vous pouvez simplement compter le nombre de lettres répétées et les coder plus efficacement. Par exemple, "AAA" devient "3A", ce qui représente une séquence de trois A.

La combinaison de ces techniques produit le résultat suivant:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Le nouveau message contient 56 caractères, ce qui signifie que vous avez compressé message d'origine de 72%. Cela représente une réduction significative !

Il s'agit d'un exemple jouet de la façon dont les algorithmes de compression peuvent être efficaces pour réduisant la taille de transfert des ressources textuelles. En pratique, la compression sont bien plus sophistiqués que ceux illustrés dans l'exemple précédent. sur le Web, les algorithmes de compression permettent de réduire considérablement le téléchargement pour les ressources. En appliquant une compression aux éléments textuels, une page Web peuvent passer moins de temps à charger les ressources, et les utilisateurs voient ainsi les effets ces ressources plus tôt qu'elles ne le feraient sans compression.

Minification: prétraitement et optimisations spécifiques au contexte

La première technique décrite ici est la minimisation. Bien que la minimisation ne soit pas est un algorithme de compression, c'est un moyen de supprimer des caractères redondants utilisés dans le code source pour rendre les ressources plus lisibles pour humains. Cependant, cette lisibilité n'est pas nécessaire pour maintenir la fonctionnalité de ce code source sur les sites Web de production, ce qui peut retarder le chargement ressources sur le Web.

La minimisation est un type d'optimisation spécifique au contenu qui peut de réduire la taille des ressources fournies et d'appliquer les optimisations dans votre processus de compilation et de déploiement. Par exemple, les bundles type de logiciel couramment utilisé qui peut réduire automatiquement la taille des ressources juste avant le déploiement d'un nouveau code de production sur un site Web.

Le meilleur moyen de compresser les données redondantes ou inutiles est de les éliminer. Cependant, vous ne pouvez pas vous contenter de supprimer des données arbitraires. Pourtant, dans certains contextes où nous si vous avez des connaissances spécifiques au contenu du format de données et de ses propriétés, de réduire considérablement la taille de la charge utile sans affecter des sens ou des capacités réelles.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Prenons l'exemple de l'extrait de code HTML précédent et des trois différents types de contenu qu'il contient:

1. Balisage HTML.
2. CSS pour personnaliser la présentation d'une page.
3. JavaScript pour alimenter les interactions et d'autres fonctionnalités avancées sur les pages.

Chacun de ces types de contenus est soumis à des règles différentes qui définissent la validité en fonction du contenu, des règles de définition des commentaires, etc. Question mais la question est de savoir comment réduire la taille de cette page.

• Les commentaires dans le code sont les meilleurs amis du développeur, mais le navigateur n'a pas besoin eux ! Suppression des fichiers CSS (/* ... */), HTML (<!-- ... -->) et JavaScript (// ...) commentaires réduit la taille totale de transfert de la page et de ses sous-ressources.
• Une solution "intelligente" Le compresseur CSS constate que nous utilisons un moyen inefficace définir des règles pour .awesome-container, puis réduire les deux déclarations en un seul sans affecter les autres styles, ce qui permet d'économiser plus d'octets. Sur un grand de règles CSS, la suppression de ce type de redondance peut avoir des conséquences, être appliqué de façon agressive, car les sélecteurs sont souvent sont nécessairement dupliqués dans différents contextes, comme dans les requêtes média.
• Les espaces et les onglets sont des fonctionnalités pratiques pour les développeurs en HTML, CSS et JavaScript. et les supprimer à l'aide d'un autre compresseur. Contrairement aux autres techniques de déduplication, ce type d'optimisation peut s'appliquer de manière équitable de façon agressive, à condition que ces espaces ou tabulations ne soient pas nécessaires présentation. Par exemple, vous pouvez conserver les espaces dans les séries texte d'un document HTML, car ils assurent la lisibilité du contenu que les utilisateurs verra réellement.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Après avoir appliqué les étapes précédentes, la page passe de 516 à 204 caractères, ce qui soit une économie d'environ 60%. Certes, ce n'est pas très lisible, mais il n’a pas besoin de l’être pour être utilisable. Les pratiques de développement modernes vous permettent de conserver des versions lisibles et formatées de votre code source. distincte du code bien optimisé que vous envoyez en production. Combiné avec cartes sources, qui fournissent une représentation lisible de vos vous permet de corriger plus facilement les bugs en production. Vous pouvez bénéficient à la fois d'une bonne expérience de développement tout en optimisant les performances de l'expérience utilisateur.

L'exemple précédent illustre un point important : (par exemple, un logiciel conçu pour compresser du texte arbitraire) peut faire de compresser la page dans l'exemple précédent, mais il ne saurait jamais supprimer les commentaires, réduire les règles CSS ou et des optimisations. C'est pourquoi le prétraitement, la minimisation et d'autres les optimisations sont importantes.

De même, les techniques décrites ci-dessus peuvent être étendues au-delà des simples éléments. Les images, les vidéos et les autres types de contenus contiennent tous leurs propres formes de métadonnées et différentes charges utiles. Par exemple, chaque fois que vous prenez une photo caméra, son fichier contient généralement de nombreuses informations supplémentaires: paramètres de l'appareil photo, l'emplacement, etc. En fonction de votre application, ces données peuvent être essentielles (un site de partage de photos, par exemple) ou totalement inutiles. Toi vous devez déterminer s'il est utile de le supprimer. En pratique, ces métadonnées peuvent ajouter jusqu'à plusieurs dizaines de kilo-octets pour chaque image.

En bref, pour optimiser l'efficacité de vos composants, commencez par créer un inventaire des différents types de contenus et réfléchissez aux types spécifiques au contenu que vous pouvez appliquer pour réduire leur taille. Puis, après une fois que vous les avez identifiées, automatisez ces optimisations en les ajoutant vos étapes de compilation et de déploiement pour vous assurer que les optimisations sont appliquées de manière cohérente pour chaque nouvelle version vers la production.

Compression de texte avec des algorithmes de compression

Pour réduire la taille des composants texte, l'étape suivante consiste à appliquer l'algorithme de compression. Cela va encore plus loin en en proposant des règles agressives en recherchant des modèles reproductibles dans les charges utiles textuelles avant de les envoyer l'utilisateur, et les décompresser une fois qu'ils arrivent dans le navigateur de l'utilisateur. La ce qui entraîne une réduction encore plus importante de ces ressources et une de temps de téléchargement plus rapides.

• gzip et Brotli sont des algorithmes de compression couramment utilisés qui fonctionnent mieux sur au format texte: CSS, JavaScript, HTML.
• Tous les navigateurs récents sont compatibles avec les compressions gzip et Brotli, et diffusent des annonces la prise en charge des deux dans l'en-tête de requête HTTP Accept-Encoding.
• Votre serveur doit être configuré pour permettre la compression. Logiciel de serveur Web permettent souvent aux modules de compresser des ressources textuelles par défaut.
• gzip et Brotli peuvent être affinés pour améliorer les taux de compression en ajuster le niveau de compression. Pour gzip, les paramètres de compression sont de 1 à 9, 9 étant la meilleure valeur Pour Brotli, cette plage est comprise entre 0 et 11, où 11 d'être le meilleur. Toutefois, des paramètres de compression plus élevés nécessitent plus de temps. Pour les ressources compressées de manière dynamique, c'est-à-dire qu'au moment de de requête : les paramètres situés au milieu de la plage offrent généralement le meilleur compromis entre le taux de compression et la vitesse. En revanche, la compression statique c'est-à-dire quand la réponse est compressée à l'avance et peut Utilisez donc les paramètres de compression les plus agressifs disponibles pour chaque l'algorithme de compression.
• Les réseaux de diffusion de contenu (CDN) proposent généralement une compression automatique ressources éligibles. Les CDN peuvent aussi gérer une compression dynamique et statique ce qui réduit l'aspect de la compression.

gzip et Brotli sont des compresseurs courants pouvant être appliqués à n'importe quel flux de octets. En coulisses, ils se souviennent de certains des contenus précédemment examinés dans dans un fichier, puis essayer de trouver et de remplacer les fragments de données en double de manière efficace.

En pratique, gzip et Brotli sont plus performants avec du contenu textuel. des taux de compression allant jusqu'à 70 à 90% pour les fichiers plus volumineux. Cependant, l'exécution de ces éléments d'algorithmes déjà compressés à l'aide d'autres algorithmes, tels que que la plupart des formats d'image qui utilisent des techniques de compression que peu ou pas d'amélioration.

Tous les navigateurs récents assurent la compatibilité avec gzip et Brotli dans le En-tête de requête HTTP Accept-Encoding. Toutefois, c'est le fournisseur d'hébergement la responsabilité de s'assurer que le serveur Web est correctement configuré pour diffuser ressource compressée lorsque le client la demande.

Le tableau précédent montre les économies réalisées grâce à la compression Brotli et gzip fournissent quelques bibliothèques JavaScript bien connues. L'économie va de 65% à 86% selon le fichier et l'algorithme. À titre indicatif, la valeur maximale a été appliqué à chaque fichier pour Brotli et gzip. Où que vous soyez utilisez plutôt Brotli plutôt que gzip.

L'activation de la compression est l'une des optimisations les plus simples et les plus efficaces mettre en œuvre. Si votre site Web n'en profite pas, vous passez à côté une excellente opportunité d'améliorer les performances pour vos utilisateurs. Heureusement, de nombreux sites Web fournissent des configurations par défaut qui permettent cette optimisation importante, et les CDN en particulier sont très efficaces pour les implémenter équilibre la vitesse et le ratio de compression.

Pour voir rapidement comment fonctionne la compression, ouvrez les outils pour les développeurs Chrome, Réseau, chargez une page de votre choix, puis observez le bas de la fenêtre le panneau "Network".

Comme dans l'image précédente, vous devriez voir les détails suivants:

• Le nombre de requêtes, qui correspond au nombre de ressources chargées pour .
• Taille de transfert de toutes les demandes. Cela reflète l'efficacité est appliquée à n'importe quelle ressource d'une page.
• La taille de ressource de toutes les requêtes. Elle indique la taille des ressources la page s'affichent après leur décompression.

Effets sur les métriques Core Web Vitals

Les améliorations des performances ne peuvent être mesurées que si certaines métriques reflètent ces améliorations. L'initiative Core Web Vitals permet créer et faire connaître des métriques reflétant l'expérience utilisateur réelle À l'inverse, des métriques telles que le temps de chargement d'une page simple, par exemple, ne se traduisent pas clairement par la qualité de l'expérience utilisateur.

Lorsque vous appliquez les optimisations décrites dans ce guide aux ressources de votre les effets sur les Core Web Vitals peuvent varier en fonction des ressources et les métriques impliquées. Cependant, voici quelques cas dans lesquels appliquer ces optimisations peut améliorer les Core Web Vitals de votre site Web:

• Les ressources HTML réduites et compressées peuvent améliorer le chargement des du code HTML, la visibilité de ses sous-ressources, et donc d'améliorer lors de leur chargement. Cela peut être utile pour le filtre Largest Contentful Paint (LCP). Bien que les optimisations de ressources telles que rel="preload" puissent être utilisées pour affecter la visibilité des ressources. Si vous en utilisez trop, vous risquez de rencontrer des problèmes les conflits de bande passante. En garantissant la réponse HTML pour une requête de navigation est compressée, les ressources qu'elles contiennent peuvent être découvertes dès que possible par l'outil d'analyse du préchargement.
• Certains candidats au LCP peuvent également être chargés plus tôt en utilisant la compression. Pour Par exemple, les images SVG qui sont des candidats au LCP peuvent avoir une charge de ressources durée réduite grâce à la compression basée sur du texte. Ceci diffère de que vous pouvez apporter à d'autres types d'images, de manière intrinsèque par d'autres méthodes de compression, comme la compression JPEG utilisent la compression avec pertes.
• De plus, les nœuds de texte peuvent également être des candidats LCP. Comment les techniques décrites dans ce guide varie selon que vous utilisez ou non une police Web pour le texte vos pages Web. Si vous utilisez une police Web, il est préférable d'optimiser pratiques s'appliquent. En revanche, si vous n'utilisez pas de polices Web, des polices qui s'affichent sans générer de temps de chargement des ressources, ce qui réduit la compression de votre code CSS réduit cette durée, ce qui signifie que l'affichage les nœuds de texte LCP potentiels peuvent survenir plus tôt.

Conclusion

La façon dont vous optimisez l'encodage et le transfert des éléments textuels est une référence de performance, mais celle-ci a un impact important. Vérifiez que vous êtes tout en faisant en sorte que les ressources soient éligibles à la minimisation et de la compression des données bénéficient de ces optimisations.

Plus important encore, assurez-vous que ces processus sont automatisés. Pour utilisez un bundler pour appliquer la minimisation aux ressources éligibles. Assurez-vous que que la configuration de votre serveur Web prend en charge la compression, mais surtout, utilisez la compression la plus efficace disponible. Pour que cela soit aussi simple que possible, d'automatiser la compression, car ils peuvent non seulement compresser des ressources pour vous, mais il peut aussi le faire très rapidement.

En cimentant ces concepts de performances de référence vous pouvez vous assurer que vos efforts d'optimisation des performances sont basés de bonnes bases, et que les optimisations ultérieures peuvent reposer sur des bases solides de bonnes pratiques de référence.