Aller à la recherche

Compression et mise en cache des pages / images / css / js avec Apache24

Dans ce billet nous allons effectuer

  • Mise en place d'une compression depuis Apache2.4
  • Mise en place de l'envoie directement de la ressource compressée au lieu de les créer à la volée
  • Demande de mise en cache côté client en fonction des types de documents

Apache : compresser et mettre en cache (l'avenir !!!)

Notre point de départ est l'installation d'apache avec php7 sous FreeBSD

Nous allons modifier notre fichier index.php afin qu'il ressemble à ceci

<html>
	<head>
		<link rel="stylesheet" href="/css/main.css" />
	</head>
	<body>
		<img src="/imgs/terre.jpg" alt="terre" />
		<?php 
			 echo '<h1>it works! with php</h1>';
		 ?>
		<p>Lorem ipsum ...</p>
		 <script type="text/javascript" src="/js/main.js"></script>
	</body>
</html>

Vérifions comment sont envoyés les fichiers au client

Version non compressé apache

de façon non compressés.

Apache24 comment envoyer des fichiers pré-compressés

Nous allons créer une version compressé de nos fichier js et css cd /srv/www/example.com/htdocs gzip -9 < js/main.js > js/main.js.gz gzip -9 < css/main.css > css/main.css.gz

Voilà l'arborescence que nous devrions avoir

.
|-- css
|   |-- main.css
|   `-- main.css.gz
|-- imgs
|   `-- freebsd.jpg
|-- index.php
`-- js
    |-- main.js
    `-- main.js.gz

Adaptons notre configuration apache afin qu'il envoie la version gzip, si elle existe

Voilà le fichier conf pour notre domaine example.com

<VirtualHost 192.168.100.80:80>
	ServerAdmin   	admin@example.com
	DocumentRoot 	"/srv/www/example.com/htdocs"
	ServerName	www.example.com

	ErrorLog 		/srv/log/http_error.log

	DirectoryIndex	index.php

	<FilesMatch "\.php$">
	    SetHandler application/x-httpd-php
	</FilesMatch>
	<FilesMatch "\.phps$">
	    SetHandler application/x-httpd-php-source
	</FilesMatch>


      # On active les entêtes expires
      ExpiresActive on

      # Que l'on définit par défaut à un mois
      ExpiresDefault "acces plus 1 month"

      # Pour tout ce qui est html, c'est un jour
      ExpiresByType text/html "access plus 1 days"

      # Pour les images, c'est 30 jours
      ExpiresByType image/gif "access plus 30 days"
      ExpiresByType image/jpg "access plus 30 days"
      ExpiresByType image/jpeg "access plus 30 days"
      ExpiresByType image/png "access plus 30 days"

      # Pour les css et js, c'est 1 semaine
      ExpiresByType text/css "access plus 1 week"
      ExpiresByType text/javascript "access plus 1 week"
      ExpiresByType application/javascript "access plus 1 week"



	########################
	# COMPRESSION
	# On s'occupe du répertoire css
	#
	<Directory "/srv/www/example.com/htdocs/css">
		Options +SymLinksIfOwnerMatch
		AllowOverride None
		Require all granted

		<IfModule mod_headers.c>

			# Activation de l'url rewriting
			RewriteEngine On
			    
			    # Si le navigateur accepte le transfert des données de façon compressées
			    RewriteCond "%{HTTP:Accept-encoding}" "gzip"

			    # Si le fichier demandé + '.gz' est un fichier régulier qui existe et de taille non nul
			    RewriteCond "%{REQUEST_FILENAME}\.gz" "-s"

			    # On redirige vers le fichier compressé
			    RewriteRule "^(.*)\.css"              "$1\.css\.gz" [QSA]

			    # On évite que deflate re zip de nouveau le fichier
			    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]

			    <FilesMatch "(\.css\.gz)$">
				    # Si la version pré-compressée était présente, on envoie les bons entêtes 
				      Header append Content-Encoding gzip
				      Header append Vary Accept-Encoding
			    </FilesMatch>

		    </IfModule>

	</Directory>

	# On passe au js
	#
	<Directory "/srv/www/example.com/htdocs/js">
		Options +SymLinksIfOwnerMatch
		AllowOverride None
		Require all granted
		<IfModule mod_headers.c>
			RewriteEngine On
			    
			    #
			    # Voir plus haut concernant, les fichiers CSS c'est la même chose
			    #
			    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
			    RewriteCond "%{REQUEST_FILENAME}\.gz" "-s"
			    RewriteRule "^(.*)\.js"              "$1\.js\.gz" [QSA]
			    RewriteRule "\.js\.gz$"  "-" [T=text/javascript,E=no-gzip:1]

			    <FilesMatch "(\.js\.gz)$">
			      Header append Content-Encoding gzip
			      Header append Vary Accept-Encoding
			    </FilesMatch>

		    </IfModule>
	</Directory>

	<Directory "/srv/www/example.com/htdocs">
		Options -FollowSymLinks
		AllowOverride None
		Require all granted

		AddOutputFilterByType DEFLATE text/html

	</Directory>

</VirtualHost>	

Version compressée (html, css, et js mais pas image)

Compression gzip html css et js

Avec mise en cache des fichiers html

Mise en cache fichier html apache

Et mise en cache des css / js

Mise en cache css et js apache

Voilà, c'est tout...

La discussion continue ailleurs

URL de rétrolien : https://www.binsp.net/?trackback/26

Fil des commentaires de ce billet

Page top