Perdre du poids pour les référenceurs – Méthodes techniques de compression de code

Depuis que Google a annoncé le 9 avril 2010 sur le blog Webmaster Central que la vitesse de la page constituait désormais un facteur de classement, les webmasters et les optimiseurs de moteurs de recherche souhaitaient se débarrasser des "kilos" inutiles.

Parce que l'utilisateur attend non seulement un contenu de haute qualité, mais également une expérience utilisateur optimale avec un contenu rapidement accessible.
La bonne nouvelle est que tout est beaucoup plus facile sur le Web que dans la vie réelle! Même avec quelques lignes de code et de petites astuces, les sites Web peuvent être compressés de 40% à 70%, voire plus, dans des cas exceptionnels. Comment faire cela, je présente dans cet article.

Pourquoi compresser le code?

Maintenant, on peut se poser la question suivante: pourquoi devrais-je compresser le code source de mon site Web à l’époque de la diffusion en continu et en mode réduit si, non compressé, "seulement" de quelques centaines de kilo-octets? La réponse est très simple: parce que les sites Web à chargement plus rapide offrent une meilleure expérience utilisateur, ce qui a un impact positif sur le taux de conversion, la conservation des pages, le nombre de pages consultées par visiteur et le taux de rebond.

Bien que ce dernier affirme entre autres avantages que l’algorithme Panda évalue la page, un bon taux de conversion du commerce électronique a un impact direct sur le succès de l’entreprise.

Ainsi, le géant du commerce électronique, Amazon, coûte environ 100% de son temps de chargement de 100 ms. Extrapolé à un exercice complet, cela entraînerait des coûts d'opportunité d'environ 245 millions de dollars. Ces chiffres montrent de manière impressionnante l’impact de la vitesse de chargement d’un site Web.

Il faut également prendre en compte le fait qu'il n'y a pas de couverture complète DSL en Allemagne en 2015 également. En outre, la proportion d'utilisateurs qui naviguent sur Internet via le réseau mobile a fortement augmenté. Voici la couverture avec LTE et 3G également toujours extensible. Tammy Everts résume dans son article 13 raisons pour lesquelles vous portez une attention particulière à la performance Web mobile sur sixrevisions.com, comment le sujet de la performance Web mobile est actuellement traité mentalement et pourquoi chaque opérateur de page doit repenser dès que possible.

Une amélioration significative du temps de chargement peut être obtenue, par exemple, par la livraison comprimée des données au moyen de Gzip ou Deflate. Cela économise des coûts et de la bande passante.

A lire également :   Trouver et réparer les liens brisés

Quelles méthodes de compression sont disponibles et quelles données peuvent être compressées?

L'idée de la compression est de compresser les données demandées sur le client afin de réduire le temps de transfert. Les deux méthodes de compression les plus courantes sur le Web sont gzip et dégonfler, Le processus de compression localise des chaînes similaires dans un document et les remplace par des chaînes temporaires avec le même caractère générique. Cela rend les deux méthodes idéales pour la compression de fichiers HTML, CSS et JavaScript, car elles contiennent souvent de nombreuses chaînes identiques, et généralement de nombreuses lignes et espaces vides. Les deux méthodes peuvent être mises en œuvre ou activées avec relativement peu d'effort.

Dans la vidéo suivante de Google, les différentes méthodes de compression sont clairement expliquées.

(Intégré) https://www.youtube.com/watch?v=whGwm0Lky2s (/ embed)

Le processus de compression: fonctionnement technique

Pour que les données compressées soient transmises, le navigateur du client doit d'abord demander la transmission comprimée des données. Cela se fait via une requête HTTP avec la spécification "Accept-Encoding: gzip, deflate". Il est à noter que vous ne pouvez spécifier qu'une ou plusieurs méthodes de compression. L'exemple accepte à la fois gzip et déflate les données compressées. Il est important qu'il ne s'agisse que d'une demande, mais pas d'une réclamation. Par conséquent, le serveur n'a pas à répondre avec des données compressées. Si les données ne sont pas disponibles sous forme compressée, elles seront simplement envoyées non compressées au client demandeur.

Aujourd'hui, environ 90% des navigateurs prennent en charge la compression. L'influence sur le paramètre "Accept-Encoding", c'est-à-dire les méthodes de compression autorisées par le navigateur, n'existe généralement pas. Le navigateur prend en charge la compression des données ou ne la prend pas en charge.

Le serveur répond à la requête HTTP du client avec la réponse dite HTTP. Si le serveur prend en charge la compression, les données sont compressées sur le client. Dans l'en-tête de la réponse HTTP, le serveur indique ensuite, par exemple, "Content-Encoding: gzip". Sinon, la ressource demandée est envoyée non compressée au client.

Comment activer la compression?

Selon le serveur, la compression peut être activée via un fichier de configuration approprié.

Blog post gzip déflate la compression de code

Figure 1: Diagramme de compression Gzip

Activation via le fichier de configuration .htaccess

Sur les serveurs Web compatibles NCSA (tels qu'Apache, le serveur Web le plus largement utilisé), la compression Gzip peut être installée à l'aide du fichier de configuration .htaccess. Pour ce faire, le code suivant doit être inséré dans le fichier .htaccess:


SetOutputFilter DEFLATE

Tout d'abord, au moyen de ""Demande si le module d'extension mod_deflate est installé. Si tel est le cas, ""Détermine pour quels types de fichier le filtre suivant doit être appliqué. Les exemples de filtres pour les fichiers JavaScript, CSS, HTML et XML. SetOutputFilter DEFLATE détermine ensuite que tous les fichiers correspondant au modèle spécifié précédemment seront livrés avec le filtre DEFLATE. Ensuite, la correspondance et la requête du module sont à nouveau fermées.

A lire également :   12 outils pour un marketing de contenu réussi

Théoriquement, ce filtre peut également être appliqué à d'autres types de fichiers (par exemple, des fichiers image de type .jpg, .gif ou .png). La correspondance de fichier devrait être ajustée comme suit:

""

Toutefois, il convient de noter ici que ces formats sont généralement déjà compressés et que la recompression entraîne souvent une perte de qualité des fichiers image. Il est donc recommandé de compresser les fichiers binaires tels que les images avant de les télécharger et d'éviter de les compresser avec gzip. Par exemple, des outils spéciaux tels que JPEGmini.com peuvent être utilisés.

Activation par PHP

Si vous n'avez pas accès au fichier .htaccess du serveur ou si vous souhaitez uniquement transférer des fichiers individuels compressés au format gzip, vous pouvez activer la compression à l'aide des codes suivants:

Cette fonction doit être placée avant le premier code HTML si possible.

exemple:

<? php ob_start("Ob_gzhandler"); ?>

Cela devrait être une page compressée.


Limites de compression et astuces pratiques

Mais attention, la compression peut aussi faire des erreurs. Donc, les points suivants doivent être pris en compte:

premier La compression ne doit être appliquée qu'aux types de fichiers ou aux fichiers qui ne sont pas déjà compressés. Les fichiers d’image ont généralement déjà une taille réduite et ne doivent donc pas être compressés davantage par gzip. La recompression peut même avoir l'effet inverse: vous obtenez une taille de fichier plus grande ou le processus de compression utilise trop de mémoire.

deuxième La compression ne doit être appliquée qu'aux fichiers de taille appropriée. Pour les fichiers dont la taille ne représente que quelques octets, la compression peut rendre le fichier encore plus volumineux que le fichier d'origine.

troisième Au niveau de la compression, veillez à ne pas trop compresser. Il y a souvent peu de différence de taille entre les fichiers faibles, normaux et fortement compressés. Une compression moyenne ou forte nécessite toutefois beaucoup plus de puissance de calcul.

4 Comme les chaînes identiques ou répétitives sont remplacées dans le processus de compression, l'utilisation de variables et de noms de classes (par exemple, dans les fichiers CSS et HTML) entraîne un succès de compression supérieur à celui obtenu si toutes les variables et les classes sont nommées différemment et ont donc peu de potentiel. fournir une compression.

A lire également :   5 étapes indispensables pour améliorer votre classement sur Google

Autres mesures d'optimisation du code Lean

Minifying and Uglifying: supprimer les caractères inutiles

Pour que le code source soit clair et concis, les développeurs utilisent généralement des sauts de ligne, des espaces, des retraits et autres caractères qui facilitent la lecture du code source. Afin de mieux gérer le code source ultérieurement, des constructions et des sections particulièrement complexes sont souvent documentées à l'aide de commentaires.

Ce qui est extrêmement utile pour le développeur n’est pas nécessaire pour le robot du moteur de recherche et doit être supprimé. La réduction du nombre de caractères inutiles s’appelle "Minification" et permet d’économiser de précieux octets. Le nombre d'octets pouvant être enregistrés en réduisant, montre de façon impressionnante l'exemple suivant à l'aide de la bibliothèque JavaScript gratuite jQuery.

Bien que la version originale du framework de la version 2.1.4 soit d'environ 242 Ko (jQuery 2.1.4.js (non compressé)), la taille du fichier du fichier réduite aux caractères et commentaires inutiles est d'environ 82 Ko (jQuery 2.1.4.min). .js (compressé)). Ce n’est qu’en réduisant au minimum – en réduisant les caractères inutiles – que la taille du fichier peut être réduite d’environ 66%. Un résultat remarquable.

compression-e1438673459868 Gzip déflate la compression du code

Figure 2: Le code source avant et après le minifying et uglifying

La minification fonctionne pour les fichiers HTML, CSS et JavaScript.

Incidemment, le fichier jQuery réduit peut être réduit de 65% supplémentaires en utilisant la compression Gzip. De l'original 242kb sont donc fabuleux 29.5kb.

Outils pour réduire les ressources

Pour réduire le code CSS, par exemple, vous pouvez utiliser YUI Compressor ou cssmin.js. Quelques outils peuvent également être utilisés pour réduire le code JavaScript. Google PageSpeed ​​Insights recommande Closure Compiler, JSMin ou YUI Compressor.

allusionRemarque: étant donné que les sauts de ligne utilisés, les espaces et les commentaires sont très importants pour le développeur et que la maintenance est simple et rapide, il est recommandé de conserver les fichiers à l'état initial (avec les caractères inutiles) et à l'état optimisé / réduit. Ainsi, le code peut facilement être maintenu, mais pour le robot, le téléchargement est beaucoup plus rapide.

Résumer les fichiers CSS et JavaScript

Souvent, plusieurs fichiers CSS et JavaScript sont chargés dans l'en-tête HTML d'un site Web. Chacun de ces appels représente une requête HTTP qui doit être traitée par le navigateur. Il est à noter que les navigateurs modernes ne peuvent traiter que 2 à 8 demandes HTTP du même domaine en même temps, toutes les autres demandes doivent attendre. Un tableau avec les valeurs exactes de tous les navigateurs peut être trouvé ici. Cependant, puisqu'un seul site Web peut nécessiter plusieurs centaines de requêtes HTTP, cela crée un énorme goulot d'étranglement. Cela peut être évité, par exemple, en résumant tous les fichiers CSS dans un fichier et ne représente donc qu'une requête HTTP. Il en va de même pour les fichiers JavaScript via

Jean Jaecklé
Jean Jaecklé

J'espère que vous avez apprécié la lecture de cet article de blog.

Si vous souhaitez mettre en œuvre des actions marketing, cliquez ici.

Publications: 663
Vous souhaitez poster un article et bénéficier d'un backlink ?
This is default text for notification bar