Compression Gzip accélération de site js / css / html - comment activer dans .htaccess

imprimer · Время на чтение: 9мин · par · Publié · Mis à jour

reproduireÉcouter l'article

Compression gzip js css html.Salutations, chers lecteurs! Aujourd'hui, nous allons parler de compression gzip js | CSS | htmlpour accélérer le chargement du site. Comment l'activer avec le fichier .htaccess. Je vais également vous expliquer pourquoi vous devez activer la compression de fichiers côté serveur.

Ce sujet est directement lié à la technique optimisation des sites. En permettant des manipulations assez simples, significativement accélérer le chargement du site Web. Un site rapide est un succès significatif dans la promotion des moteurs de recherche.

Quel est le but d'activer la compression de fichiers Gzip dans .htaccess ?

Comment activer la compression Gzip des pages du site.

Comme je l'ai dit dans plusieurs de mes articles ! Le site au stade initial a un poids assez important. Et celles. l'optimisation est nécessaire pour réduire le poids de notre site. Par tous les moyens, nous devons réduire la quantité de code, le poids des pages, des images et d'autres choses. La tâche générale est de donner à l'utilisateur une version légère et rapide du site.
Ainsi, nous donnons des informations rapidement. La transition entre les pages et les sections se fait en une fraction de seconde. Dans le même temps, les visiteurs verront rapidement tous les éléments de conception chargés et d'autres éléments interactifs d'interaction.

Compression GZIP - fournit un archivage ininterrompu des fichiers transférés. Ainsi, nous obtenons une compression sans perte de la qualité de la source. Toutes les données reviennent à leur état d'origine après le déballage déjà dans le navigateur de l'utilisateur. L'implémentation elle-même est due à plusieurs algorithmes de travail. Ceux-ci incluent DEFLATE de base utilisant LZ77 et Huffman.

Bien sûr, ce type de compression (compression) n'est pas une solution idéale. Mais l'implémentation de Gzip nous amène à un équilibre entre vitesse et taux de compression. Cette méthode est la plus populaire parmi d'autres façons d'accélérer le site. De plus, la mise en place d'une méthode plus globale sur le serveur demandera beaucoup de temps et de tests. Et cela risque de ne pas donner le résultat escompté ! La compression Gzip à cet égard est le moyen le plus fiable d'accélérer les téléchargements de fichiers.

Compression Gzip - pour quels fichiers est-elle acceptable ? Sur quels serveurs fonctionne-t-il ?

En fait, la compression gzip couvre une grande liste de fichiers. Mais il a un petit bémol ! Lorsqu'un utilisateur visite un site, le serveur doit compresser une grande quantité de données à la volée. Cela entraîne une certaine charge sur le serveur. Mais ce n'est pas critique dans la plupart des cas. Tous les formats de fichiers pris en charge après le transfert sont parfaitement affichés dans les navigateurs populaires.

Les principaux incluent:

  • texte/texte clair/html ;
  • texte/application xml/application xml/xhtml+application xml/xml-dtd ;
  • application/rdf+xml application/rss+xml application/atom+xml image/svg+xml;
  • texte/texte css/application javascript/application javascript/x-javascript ;
  • police/application opentype/application font-otf/x-font-otf ;
  • police/application truetype/application font-ttf/x-font-ttf.
La compression de fichiers Gzip est utilisée sur les principaux serveurs Apache et Nginx. Avec des modules de travail valides et des capacités de serveur.

Par exemple : Nginx - utilisé pour statique. Il compresse et traite bien les fichiers statiques. La compression se produit grâce aux modules ngx_http_gzip_module et ngx_http_gzip_static_module. Une compression à la volée ininterrompue est effectuée avec le remplacement de l'extension principale par ".gz".

Exemple de configuration standard :

gzip activé ;
gzip_min_length 1000 ;
gzip_types texte/application simple/xml ;

Apache est le serveur le plus demandé. Bien sûr, la compression sur celui-ci sera plus ambitieuse et personnalisable. La compression Gzip sur ce serveur est effectuée à l'aide du module mod_deflate. En fournissant une compression à la volée avant d'être envoyée au navigateur de l'utilisateur.

Exemple de configuration standard :

# Activer GZIP - activer la compression
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE texte/html
AddOutputFilterByType DEFLATE texte/xml
AddOutputFilterByType DEFLATE texte/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Compression avec un algorithme lent pour réduire la charge sur le serveur.

RewriteEngine On
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
Règle de réécriture ^(.*)$ $1.gz [QSA,L]

PHP est une option moins populaire. Mais il a également la capacité d'organiser la compression à l'aide du module zlib. Cette méthode n'est pas recommandée car elle est extrêmement lente.

Exemple de configuration standard :

1TP29FichierOriginal = __DIR__ . '/jquery-1.11.0.min.js' ;
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz' ;

1TP29OriginalData = file_get_contents(1TP29OriginalFile);

$gzipData = gzencode($originalData, 9);
file_put_contents($gzipFile, $gzipData);

var_dump(filesize($originalFile)); // entier(96380)
var_dump(filesize($gzipFile)); // entier(33305)

Bien sûr, l'utilisation de serveurs Apache + Nginx + PHP est également possible ensemble. Ainsi, une certaine répartition de la charge entre les serveurs sera assurée. Mais c'est une tâche très difficile, qui ne devrait pas être effectuée par des utilisateurs ordinaires.

J'ai configuré mon serveur moi-même, en utilisant tous les principaux avantages d'Apache/Nginx/PHP. Ainsi, Nginx gère le statique, Apache gère le reste avec PHP. Le résultat est très positif. Mais beaucoup de temps a été consacré à l'organisation de cette méthode.

Comment activer la compression Gzip dans le fichier .htaccess

En fait, ce n'est pas difficile à faire. D'ailleurs, j'ai déjà parlé de ce dossier.

Les règles de base restent les mêmes :

  1. Assurez-vous d'enregistrer le fichier .htaccess d'origine avant de le modifier. En cas d'erreur 500, il y aura quelque chose à restaurer.
  2. Il ne doit y avoir aucun espace entre les lignes.
  3. Nous écrivons tous les commentaires après le signe #.
  4. Assurez-vous de vérifier l'intégrité du code après l'insertion.

Plusieurs exemples de configuration de règles .htaccess standard ont déjà été mentionnés ci-dessus. Mais à mon avis, cela ne suffit pas, alors je vais donner mon propre exemple. Cet ensemble de règles fonctionne sur ce site, comme vous pouvez le constater, il n'y a aucun problème.

Dans le même temps, la compression se produit à la volée, le site se charge rapidement sans freins. Tout ce que vous avez à faire est de coller ce code dans votre fichier .htaccess. Si vous avez votre propre serveur, je pense que vous savez tout vous-même.

Pour le public principal, mode d'emploi :

  1. Nous allons au serveur avec n'importe quel client ftp populaire ;
  2. Allez à la racine du site (répertoire) ;
  3. Le fichier .htaccess est situé dans le répertoire principal du site ;
  4. On l'ouvre avec un éditeur de texte, en général Sublime Text 3 est mieux ;
  5. Ensuite, à la toute fin du fichier, collez le code qui sera affiché ci-dessous.
  6. Vous êtes priés de vérifier le code, car le site est protégé contre la copie (il peut y avoir un lien vers le site à la fin du code).

# Activer GZIP
ifmodule mod_deflate.c doit être mis entre crochets "<>"
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE texte/texte
AddOutputFilterByType DEFLATE texte/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE texte/xml
AddOutputFilterByType DEFLATE texte/css
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/flv
AddOutputFilterByType DEFLATE image/ico
AddOutputFilterByType DEFLATE image/swf
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE vidéo/3gpp
AddOutputFilterByType DEFLATE vidéo/3gpp2
AddOutputFilterByType DEFLATE vidéo/x-flv
AddOutputFilterByType DEFLATE vidéo/jpm
AddOutputFilterByType DEFLATE vidéo/jpeg
AddOutputFilterByType DEFLATE vidéo/x-m4v
AddOutputFilterByType DEFLATE vidéo/mp4
AddOutputFilterByType DEFLATE vidéo/ogg
AddOutputFilterByType DEFLATE vidéo/webm
AddOutputFilterByType DEFLATE vidéo/quicktime
AddOutputFilterByType DEFLATE audio/x-mpegurl
AddOutputFilterByType DEFLATE audio/midi
AddOutputFilterByType DEFLATE audio/mp3
AddOutputFilterByType DEFLATE audio/mp4
AddOutputFilterByType DEFLATE audio/mpeg
AddOutputFilterByType DEFLATE audio/webm
AddOutputFilterByType DEFLATE audio/de base
AddOutputFilterByType DEFLATE audio/x-wav
AddOutputFilterByType DEFLATE audio/wav
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] sans gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
ifmodule mod_gzip.c doit être mis entre crochets "<>"
mod_gzip_on Oui
fichier mod_gzip_item_include \.js$
fichier mod_gzip_item_include \.css$
/ifmodule doit être mis entre crochets "<>"
/ifmodule doit être mis entre crochets "<>"

Si vous ne mettez pas les éléments requis entre parenthèses, vous obtiendrez une erreur. Votre site cessera simplement de fonctionner et vous donnera une erreur de serveur interne 500. Le texte "doit être placé entre crochets "<>"" devrait également être supprimé du code. Après cela, le fichier .htaccess doit être enregistré.

C'est aussi une bonne idée de redémarrer le serveur pour appliquer exactement les nouvelles règles. Après toutes ces actions, votre site fonctionnera beaucoup plus rapidement. La vitesse de chargement des pages augmentera considérablement.

Vérifier la vitesse de chargement du site Web et la compression Gzip

Après avoir activé la compression côté serveur. Vous pouvez vérifier le succès du travail effectué! Vous pouvez le faire avec plusieurs outils en ligne populaires. Jetons un coup d'œil à eux :

Aperçu de la vitesse de la page - l'outil en ligne principal et le plus populaire pour consulter le site. Après les dernières modifications en 2018 par Google. Fournit une longue liste de données pour une analyse détaillée du site.

En savoir plus sur PageSpeed ​​​​Insights.

Ce qui peut:

  1. Évaluation globale de la vitesse du site ;
  2. Spécifie le temps de chargement du contenu ;
  3. Indice de vitesse global et temps d'interaction ;
  4. Donne des recommandations d'optimisation ;
  5. Affiche des informations détaillées sur les performances ;
  6. Indique si la compression Gzip est activée ou non ;
  7. Indique si le hachage est activé ou non ;
  8. Fournit une mine d'informations pour la correction des erreurs.

PageSpeed vous aidera à résoudre de nombreux problèmes de vitesse de site Web. Grâce à cet outil, de nombreuses erreurs de mon site ont été corrigées.

Outils Pingdom est également l'un des outils d'analyse de sites Web en ligne les plus populaires. Fournit suffisamment d'informations détaillées sur une variété de critères d'évaluation du site. Il est facile de trouver ce qui ralentit le téléchargement.

qu'est-ce que l'outil pingdom ?

Qu'est-ce qui vous donnera :

  1. Évaluation de la performance globale du site ;
  2. Le nombre de requêtes à la base de données du site ;
  3. Vitesse de chargement des pages ;
  4. Taille du contenu par type de contenu ;
  5. Réponses du serveur 200/301/302/404/503 et autres ;
  6. Requêtes générales par domaines ;
  7. Représentation graphique de la situation, etc. ;

Donne beaucoup d'informations sur la vitesse du site. Mais ne donne pas d'instructions détaillées comme Google.

Plugins de compression GZIP pour WordPress

Aussi étrange que cela puisse paraître, mais les propriétaires de sites sur le CMS WordPress n'ont pas besoin de s'en soucier beaucoup. La raison en est la variété de plugins permettant la compression sur le site. Tout ce que vous avez à faire est d'installer le plugin que vous aimez. Ensuite, activez et activez la compression dans les paramètres du plugin. Ensuite, il fera tout le travail pour vous. Je vais décrire quelques-uns des plus populaires.

Page Speed Ninja est le meilleur plugin de performance pour WordPress. Vous pouvez rendre vos sites Web rapides sur les ordinateurs de bureau et les appareils mobiles en résolvant les problèmes détectés par Google PageSpeed Insights en un clic. Vous permet d'activer rapidement la compression sur le site.

Augmentez votre score Google PageSpeed ​​​​dans Wordpress.

Cache le plus rapide de WP est également l'un des plugins de hachage les plus populaires. Il dispose d'un grand nombre de paramètres groupés, dont l'un inclut la compression.

WP Fastest Cache - Plugin pour WordPress.

Cache comète J'utilise moi-même ce plugin. Puisqu'en combinaison avec d'autres plugins, il donne un excellent résultat. L'un de ses paramètres inclut également la compression gzip.

Comet Cache crée un cache de chaque page.

En général, tous les principaux plugins de mise en cache pour Wordpress vous permettent d'activer la compression GZIP sur le site. Je recommande des plugins multifonctionnels à part entière pour la moindre charge.

En conclusion, je dirai ce qui suit: assurez-vous d'activer la compression. Cela aura un très bon effet sur les performances et augmentera le site dans la recherche. J'espère que cet article vous aidera avec cela.

Merci d'avoir lu Nicola Top

Quelle est l'utilité du poste ?

Cliquez sur le smiley pour noter !

note moyenne 5 / 5. Nombre de notes : 52

Il n'y a pas encore d'évaluations. Évaluez d'abord.

Vous aimerez aussi...

1 réponse

  1. Илья dit :

    J'ai immédiatement copié et collé le code, ce qui a provoqué une erreur 500. Maintenant, je comprends ce que je dois lire attentivement. Je vois que vous avez également une protection contre la copie. Et grâce au contenu est adapté et de travail.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

3 × 5 =