Intégration, qualité et performances

Performances

Le fichier .htaccess

Les fichiers .htaccess sont des fichiers placés à la base d’un répertoire et modifiant le comportement du serveur pour les fichiers qu’il contient.

Voici des exemples testés et éprouvés. Si vous obtenez des erreurs HTTP 500 après la mise en place du fichier .htaccess, vérifiez sa syntaxe, l’adéquation avec votre type de serveur et la disponibilité des modules.

Protéger un dossier

Dans le fichier nommé .htaccess, déposé à la racine de votre répertoire web :

AuthName "Accès restreint par mot de passe"
AuthType Basic
AuthUserFile "/home/ecv/2024/b2/.htpasswd"
Require valid-user

Puis générer un mot de passe dont le contenu sera le contenu généré par un outil du type : https://hostingcanada.org/htpasswd-generator/

Sécuriser son site

Pour vous protéger de certains attaques, ce fichier .htaccess sera aussi très utile.

Rajoutez simplement :

<IfModule mod_headers.c>
  Header always set Content-Language fr
  Header always set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google.com https://www.googletagmanager.com https://www.gstatic.com; base-uri 'self';"
  Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
  Header always set X-FRAME-OPTIONS "SAMEORIGIN"
  Header always set X-XSS-Protection "1; mode=block"
  Header always set X-Content-Type-Options "nosniff"
</IfModule>

Et adaptez la ligne « Content-Security-Policy » selon l’origine des scripts que vous utilisez.

Interdire la liste des fichiers d’un répertoire

Ajoutez simplement cette ligne dans votre fichier .htaccess

Options -Indexes

Optimiser la mise en cache

Ajoutez ces quelques lignes pour activer la mise en cache côté client des ressources statiques du site :

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/js "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

DefaultLanguage fr

<IfModule mod_headers.c>
  <FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|woff|woff2)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
  <FilesMatch "\\.(js)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </FilesMatch>
  Header unset ETag
  Header always set Content-Language fr
  Header always set Content-Security-Policy "script-src 'self' 'unsafe-inline'; base-uri 'self';"
  Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
  Header always set X-FRAME-OPTIONS "DENY"
  Header always set X-XSS-Protection "1; mode=block"
  Header always set X-Content-Type-Options "nosniff"
</IfModule>

Optimiser avec la compression GZip

Optimiser la vitesse de transfert de vos ressources statiques en les compressant, à l’aide de ces quelques lignes à ajouter dans votre .htaccess :

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/javascript.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Optimiser avec la compression Deflate

<IfModule mod_deflate.c>
	<IfModule mod_filter.c>
		AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript font/ttf application/x-font-ttf font/otf application/x-font-otf font/opentype image/svg+xml
	</IfModule>
</IfModule>

Redirection d’url / réécriture d’url

RewriteEngine on
RewriteRule ^sacs$ /catalogue.php?id_category=23 [R=302,L]

SEO

robots.txt

Interdire ou autoriser l’indexation

User-agent: *
Disallow: /img/
Allow: /

Indiquer l’emplacement du sitemap.xml

Sitemap: https://www.domaine.com/sitemap.xml

sitemap.xml

Utilité du sitemap.xml

Un sitemap est un fichier listant des URL du site que l’on souhaite faire crawler (et généralement aussi indexer). Au format sitemaps.org, il doit être déclaré aux moteurs de recherche. Il aide à faire des analyses SEO avancées.

Une fois que les moteurs auront consulté le fichier, si tout se passe bien ils iront explorer (crawler) les URL listées. Et donc si tout se passe (encore) bien, ils devraient indexer les fameuses URL.

Structure et format du fichier

<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
  <loc>https://www.domaine.com/</loc>
  <lastmod>2019-09-16T09:18:57+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://www.domaine.com/nous-contacter</loc>
  <lastmod>2019-09-16T09:18:57+00:00</lastmod>
  <priority>0.80</priority>
</url>
</urlset>

Performances

Voici quelques outils disponibles en ligne pour évaluer la qualité et la performances de vos sites web :

Veille technologique

Voici une petite liste, subjective et non exhaustive, de comptes Twitter plus ou moins actifs sur la veille technologiques, que vous pouvez suivre pour vous tenir informés des trucs, astuces ou nouveautés propres aux métiers liés au web.

Code, HTML et CSS