L'optimisation des performances d’un site Web est toujours une priorité absolue, notamment car la concurrence sur Internet est féroce. Nous avons écrit beaucoup de tutoriels sur les performances au cours des deux derniers mois, comme sur la façon d'accélérer WordPressJoomlaDrupal et plus encore. Mais que faire si vous n'êtes pas sur ces plateformes ? Voici les 18 meilleurs conseils d'optimisation que nous recommandons, quelle que soit la plateforme utilisée, si vous cherchez à optimiser votre site.

Mais avant de nous plonger dans les explications, il existe quelques outils que vous devez connaitre afin que vous puissiez dans un premier temps identifier les problèmes de performances de votre site. Si vous savez pourquoi votre site Web ralentit ou utilise beaucoup de ressources, vous pourrez réajuster vos priorités en conséquence.

Tester la vitesse de votre site web

Nous vous recommandons tout d'abord d'utiliser un outil de test de vitesse pour analyser la vitesse globale de votre site. Nous suggérons d'utiliser l'outil de test de la vitesse de KeyCDN ou WebPageTest, car ceux-ci sont compatibles HTTP/2. Firefox 36+ ou Chrome 41+ sont requis. Vous verrez ci-dessous pourquoi nous vous recommandons de migrer vers HTTPS pour profiter du HTTP/2.

keycdn speed test1

Tester la charge de votre site web

Deuxièmement, il est important de tester la charge de votre site pour voir ce qui pourrait causer des goulots d'étranglement. Voici quelques outils qui peuvent vous aider à tester votre site. Ceux-ci peuvent également être très utiles si vous souhaitez faire grossir votre plateforme.

website traffic load test loader

  • Blitz : tests de performance des sites Web, des applications Web et des API REST.
  • Load Impact : tests de performance automatisés et à la demande pour DevOps. Testez la charge de votre site Web, votre application Web, votre application mobile ou votre API instantanément avec jusqu'à 1,2 million d'utilisateurs simultanés.
  • WonderNetwork : effectuez facilement des tests de charge précis en enregistrant l'utilisation avec votre navigateur, puis en les rejouant à partir de leurs serveurs.
  • Loader : service de test de charge qui vous permet de tester vos applications Web et vos API avec des milliers de connexions simultanées. Gratuit jusqu'à 10 000 clients.
  • BlazeMeter : exécutez des tests de performances extrêmement extensibles, basés sur des sources ouvertes, sur toutes vos applications, et validez les performances à chaque étape de livraison de votre logiciel.

Si vous utilisez un site WordPress, il existe également des plugins utiles tels que WordPress Performance Profiler et P3 (Plugin Performance Profiler) qui peuvent vous aider à identifier les plugins qui ralentissent votre site.

Calculez le budget d’optimisation des performances de votre site web

Jonathan Fielding a mis au point un excellent outil gratuit grâce auquel vous pouvez calculer votre budget de performance. Il suffit d'entrer la vitesse à laquelle vous souhaitez que votre site se charge et de choisir la vitesse de connexion.

website performance optimization budget

Sur la page suivante, vous pouvez ajuster les curseurs en fonction de l'utilisation des éléments suivants : CSS, JS, images, vidéo et polices de votre site.

adjust performance

Sur la dernière page, vous verrez la ventilation du budget de performance et les temps de chargement estimés pour différents types de connexion. Encore une fois, ce sont toutes des estimations, mais il peut être utile de voir les écarts de performance entre toutes les vitesses de connexion. N'oubliez pas d'optimiser votre site pour les appareils mobiles et plus lents.

 website performance breakdown

Conseils d’optimisation des performances web

Maintenant que vous avez effectué des tests sur votre site Web pour voir d’où proviennent les ralentissements, il est maintenant temps de commencer à l’optimiser. Pour cela, suivez les conseils d'optimisation ci-dessous.

Index

  1. Optimisation des images
  2. Réduire les requêtes HTTP
  3. Minifier le code CSS et Javascript
  4. Chemin critique de rendu et blocage de rendu (CSS + JS)
  5. Réduire la latence avec un CDN
  6. Time to First Byte (TTFB)
  7. Éviter les redirections 301
  8. Mise en cache
  9. Prefetching et preconnect
  10. HTTP/2
  11. PHP7 et HHVM
  12. Performance des polices web
  13. Protection contre le hotlink
  14. Activer la compression Gzip
  15. Infrastructure
  16. Corriger les erreurs 404
  17. Images à l’échelle
  18. Optimisation des bases de données

1. Optimisation des images

Nous avons récemment demandé à plus de 20 experts en performance Web de partager leurs conseils et les erreurs commises par les webmasters  Et accrochez-vous, 46% d'entre eux ont déclaré que le premier objectif en matière d'optimisation devrait être l’optimisation des images ! Ce sont des experts, faites leur confiance.

Selon le rapport 2016 d'HTTP Archive, en moyenne, 64% du poids d’une page d'un site Web provient des images.  - HTTP Archive

average bytes per webpage

KeyCDN a développé le plugin Optimus WordPress avec une API qui  se concentre sur une combinaison de compressions sans et avec pertes. L'API peut être utilisée avec n'importe quelle plateforme. La bibliothèque PHP de l'API Optimus est disponible sur GitHub. Si vous êtes un développeur, n'hésitez pas à contribuer aux autres bibliothèques Optimus API.

optimus

En utilisant Optimus, vous pouvez répondre à cette recommandation Google Pagespeed: "En compressant ... vous pourriez économiser 4,7 Ko (30%) sans pertes." Un autre avantage à utiliser Optimus est qu'il prend en charge la conversion au format WebP qui a été développé par Google.

Selon Google, les images sans perte WebP sont 26% plus petites que les PNG et 25 à 34% plus petites que les images JPEG.

Support du format Webp

Vous pouvez ajouter l'extrait suivant à votre fichier .htaccess pour prendre en charge le format WebP au lieu des images JPEG ou PNG. 
Remarque : WebP n'est actuellement pris en charge que dans Google Chrome et Opera.
Par ailleurs, Joomla, contrairement à WordPress, ne supporte pas encore le format WebP.

<IfModule mod_rewrite.c>

   RewriteEngine On

   RewriteCond %{HTTP_ACCEPT} image/webp

   RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

   RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

</IfModule>

<IfModule mod_headers.c>

   Header append Vary Accept env=REDIRECT_accept

</IfModule>

AddType image/webp .webp

Et si vous utilisez WordPress, vous pouvez utiliser le plugin gratuit WordPress Cache Enabler pour proposer automatiquement le format WebP. Voici d'autres outils tiers que vous pouvez utiliser pour la compression d'image.

Plugins d’automatisation des tâches

Outils en lignes

Outils à télécharger

Assurez-vous également de faire en sorte que vos images soient responsive  en utilisant les attributs HTML srcset et sizes afin de présenter plusieurs formats d’images en fonction de la taille de l’écran utilisé.

2. Réduire les requêtes HTTP

Lorsque votre navigateur récupère des données provenant d'un serveur, il le fait en utilisant le protocole HTTP (Hypertext Transfer Protocol). C'est une requête / réponse entre un client et un hôte. En général, plus votre page Web requiert des demandes HTTP, plus le contenu sera lent à se charger.

Il existe plusieurs façons de réduire le nombre de requêtes comme :

  • Intégrer votre code Javascript au sein de la page HTML (uniquement s'il est très petit, sinon il vaut mieux le laisser dans un fichier séparé et profiter de la mise en cache)
  • Utiliser des sprites CSS
  • Réduire les plugins tiers qui génèrent un grand nombre de requêtes
  • Ne pas utiliser de frameworks tiers, à moins qu'ils soient absolument nécessaires
  • Utiliser moins de code !
  • Combiner vos fichiers CSS et JS (avec la concaténation HTTP/2, ce n'est plus aussi important, quoique les avis et expériences divergent)

Le nombre de requêtes d'un site Web peut varier considérablement d'un site à l'autre. L'exécution d'un test de vitesse vous indiquera le nombre de requêtes nécessaires pour générer une page spécifique.

reduce http requests1er exemple de nettoyage des requêtes HTTP

Voici un exemple de morceau de code HTTP qui peut être supprimé. Nous avons vu beaucoup de gens activer le remarketing et la publicité dans Google Analytics, mais ils n'utilisent pas cette fonction. Généralement, les utilisateurs ont tendance à cliquer sur activer tout.

En activant cette fonctionnalité, vous avez une 2ème requête HTTP pour cette URL https://stats.g.doubleclick.net/r/collect? qui produit ensuite une redirection 302 dans votre en-tête de réponse.

Si vous n'utilisez pas ces fonctionnalités, vous pouvez la désactiver en désactivant "Remarketing" et "Fonctionnalités de création de rapports sur la publicité" sous "Information de suivi >> Collecte de données" dans les paramètres de votre propriété sur Google Analytics (Administration >> [votre site]).

google analytics data collection

Ou vous pouvez les désactiver manuellement en ajoutant ce qui suit au script Google Analytics.

ga('set', 'displayFeaturesTask', null);

Après cette désactivation, vous n'aurez plus cette 2ème requête HTTP et votre script principal n'aura plus de redirection 302. Ce n'est qu'un exemple de nettoyage des requêtes HTTP.

2ème exemple de nettoyage des requêtes HTTP

Si vous utilisez WordPress, il inclut par défaut un fichier javascript wp-emoji-release.min.js?ver=4.3.1 dans votre en-tête. Les emojis sont géniales, mais sont-elles vraiment nécessaires ? Valent-elles vraiment la peine de sacrifier une partie de la rapidité de votre site ? Probablement pas. 

Vous pouvez désactiver les emojis dans WordPress en ajoutant le code suivant à votre fichier functions.php.

/**

* Disable the emoji's

*/

function disable_emojis() {

       remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

       remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );

       remove_action( 'wp_print_styles', 'print_emoji_styles' );

       remove_action( 'admin_print_styles', 'print_emoji_styles' );

       remove_filter( 'the_content_feed', 'wp_staticize_emoji' );

       remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );  

       remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

       add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );

}

add_action( 'init', 'disable_emojis' );

/**

* Filter function used to remove the tinymce emoji plugin.

*

* @param   array $plugins

* @return   array             Difference betwen the two arrays

*/

function disable_emojis_tinymce( $plugins ) {

       if ( is_array( $plugins ) ) {

              return array_diff( $plugins, array( 'wpemoji' ) );

       } else {

              return array();

       }

}

Ou vous pouvez également utiliser le plugin gratuit Disable Emojis dans le dépôt WordPress.

Ne laissez pas des choses générer des requêtes si ce n’est pas nécessaire ! De plus, ne vous focalisez pas seulement sur l’optimisation de votre page d'accueil, le reste de votre site mérite également toute votre attention.

3. Minifier le code CSS et Javascript

minify css javascript

La minification des ressources consiste à éliminer les caractères inutiles de votre code HTML, Javascript et CSS, tels que :

  • les espaces blancs
  • les caractères de retour à la ligne
  • les commentaires
  • les délimiteurs de blocs

Cela accélère vos temps de chargement car cela réduit la quantité de code à interpréter pour le serveur.

Plugins de minification automatisée

JavaScript

CSS

Pour Joomla, voous pouvez installer le composant JCH Optimize.
Si vous utilisez WordPress, vous pouvez également minifier votre CSS et votre Javascript avec
 WordPress Cache Enabler.

4. Chemin critique de rendu et blocage de rendu (CSS + JS)

render blocking DOM

Lorsqu'il s'agit d'analyser la vitesse de vos pages Web, vous devez toujours prendre en considération ce qui pourrait bloquer le DOM, provoquant des temps de chargement plus importants. Ces éléments sont également appelés render-blocking resources en anglais, comme le HTML, CSS (ceci peut inclure des polices Web) et Javascript. Voici quelques recommandations sur la façon d'empêcher votre CSS et Javascript de bloquer le DOM en optimisant votre chemin critique de rendu.

CSS

  1. Appelez correctement vos fichiers CSS
  2. Utilisez les media queries pour marquer certaines ressources CSS comme non-render blocking
  3. Diminuez la quantité de fichiers CSS (concaténez vos fichiers CSS dans un seul fichier)
  4. Minifiez votre CSS (par exemple, supprimez les espaces, caractères, commentaires inutiles)
  5. Utilisez moins de CSS en général

Javascript

Quand il s'agit de Javascript, il existe des bonnes pratiques à garder à l'esprit.

  1. Déplacez vos scripts en bas de page juste avant votre balise </body>.
  2. Utilisez les directives async et defer
  3. Concaténez vos fichiers JS dans un seul fichier (avec HTTP/2, cela est moins nécessaire)
  4. Minifiez votre Javascript (par exemple, supprimez les espaces, caractères, commentaires inutiles)
  5. Intégrez votre code Javascript au sein de la page HTML, uniquement s’il est petit

Async permet de télécharger le script en arrière-plan. Puis, dès qu'il a été téléchargé, le rendu est bloqué et ce script s'exécute. Le rendu reprend lorsque le script a été exécuté.

<script async src="/foobar.js"></script>

Votre autre option est de différer (defer) le chargement du javascript. Cette directive fait la même chose que l'async sauf qu'elle garantit que les scripts s'exécutent dans l'ordre dans lequel ils ont été spécifiés sur la page. Patrick Sexton a un bon exemple sur la façon de différer correctement le chargement du javascript.

Nous parlerons également des polices Web plus bas dans cette publication.

5. Réduire la latence avec un CDN (Content Delivery Network)

Si vous n'êtes pas familier avec les CDN, nous vous recommandons vivement de lire notre guide complet sur les CDN.  En plus d'accélérer la livraison de vos contenus à travers le monde, un CDN peut également réduire considérablement votre latence.

optimus ping test 730x4092x

50% de la première seconde de chargement de votre page mobile provient de la latence du réseau. WPT

Pour vous montrer la différence de temps de latence avec et sans CDN, nous avons réalisé quelques tests. Il s’agit simplement d’un point de vue connectivité. Nous avons utilisé l'outil de de ping de KeyCDN qui nous permet de tester simultanément les 10 localisations suivantes. Et voici les résultats obtenus.

 

Server (POP) Location No CDN RTT (ms) KeyCDN RTT (ms) Difference %
New York, US 36.908 18.096 – 50.97%
Dallas, US 0.751 1.138 + 51.53%
San Francisco, US 39.645 18.900 – 52.33%
Frankfurt, DE 123.072 3.734 – 96.97%
London, UK 127.555 4.548 – 96.43%
Paris, FR 112.417 1.689 – 98.5%
Amsterdam, NL 118.418 10.364 – 91.25%
Singapore, SG 202.682 2.002 – 99.01%
Sydney, AU 191.848 0.705 – 99.63%
Tokyo, JP 130.804 3.379 – 97.42%

La latence entre notre serveur d'origine (sans CDN) et nos POP (avec un CDN) diminue en moyenne de 73% ! Consultez la totalité des résultats de notre test de latence de notre site Web.

Vous pouvez implémenter un CDN sur presque n'importe quelle plateforme car KeyCDN possède plus de 25 intégrations différentes. Voici une liste rapide de nos guides d'intégration.

 

6. TTFB

Le Time To First Byte (TTFB) est la mesure de réactivité d'un serveur Web. Concrètement, il s’agit de la durée nécessaire pour que votre navigateur commence à recevoir des informations après l'avoir demandé au serveur. Le TTFB d'un site Web est calculé de la manière suivante :

Temps de demande HTTP + Temps de traitement de la demande + Temps de réponse HTTP

Le TTFB est affiché sous forme de barre d'attente verte dans Chrome Dev Tools.

TTFB 1

En utilisant un CDN, un hébergeur rapide et un fournisseur de DNS fiable, vous pouvez réduire considérablement votre TTFB global.En savoir plus sur le time to first byte et le time to last byte.

7. Éviter les redirections 301

Les redirections sont des tueurs de performance. Évitez-les autant que possible. Une redirection générera des temps d’"aller-retour" supplémentaires (Round Trip Times - RTT) et, par conséquent, double rapidement le temps nécessaire pour charger le document HTML initial avant que le navigateur ne commence même à charger d'autres éléments.

301 redirect

8. Mise en cache

browser server caching

Cache navigateur

Tirer parti du cache du navigateur est crucial pour les éléments qui changent rarement. Il est recommandé d'avoir une mise en cache de maximum 7 jours dans de tels cas. Il existe différents types d'en-têtes HTTP tels que :

  1. Cache-control
  2. Pragma
  3. Expires
  4. Validators

Découvrez-en davantage sur les différents mécanismes de contrôle dans cet article : Guide sur les en-têtes HTTP de mise en cache.

L'un des en-têtes de cache les plus importants est probablement Cache-Control qui est un en-tête composé d'un ensemble de directives qui vous permettent de définir quand et comment une réponse doit être mise en cache et pendant combien de temps. La mise en cache HTTP consiste pour le navigateur à stocker des copies de ressources pour un accès plus rapide. Cela peut être utilisé avec votre implémentation HTTPS. Consultez notre guide complet sur l'utilisation des directives d'en-tête de contrôle du cache.

Si vous utilisez KeyCDN, vous pouvez ajouter ou modifier les champs d'en-tête de réponse Expires et Cache-Control qui sont envoyés au client. Ceci est possible dans le tableau de bord de KeyCDN sous "Zones" → "Modifier la zone" → "Afficher les fonctionnalités avancées".

content delivery network cache control

  •  -1 Cache-Control: no-cache
  • Push Zone : désactivé / Pull Zone : garde l'original (respect des headers)
  • >0Cache-Control: max-age=t, où t est la durée spécifiée dans la directive convertie en seconde

Ce paramètre prend le pas sur la valeur reçue depuis le serveur en cas de Pull Zone. La valeur expire n'impacte que le cache du navigateur et non le cache de KeyCDN.

Cache serveur

Il existe différentes formes de mise en cache côté serveur en ce qui concerne l'optimisation des performances d’un site. Cela se fait généralement sur des sites avec un trafic élevé. Le cache Varnish est un exemple qui peut être très puissant lorsqu'il est combiné avec un plugin de mise en cache et un CDN. Vous pouvez également utiliser des plugins de mise en cache qui existent habituellement pour chaque plate-forme CMS.

9. Prefetching et preconnect

prefetching 1024x512

Le prefetching de nom de domaine est une bonne solution pour résoudre les noms de domaine avant même qu'un utilisateur ne suive un lien. Voici un exemple de mise en œuvre dans la section HEAD de votre HTML :

<link rel="dns-prefetch" href="//www.example.com">

Les « double slashs » indiquent que l'URL commence par un nom d'hôte (ceci est spécifié dans la RFC1808).

 

Preconnect permet au navigateur d'établir une connexion de façon anticipée avant qu'une demande HTTP ne soit effectivement envoyée au serveur. Des connexions telles que DNS Lookup, TCP Handshake et la négociation TLS peuvent être lancées au préalable, éliminant la latence aller-retour causée par ces connexions et économisant ainsi du temps pour les utilisateurs.

L'exemple ci-dessous montre ce qu'il faut activer la pré-connexion pour les liens d'alias de zone pour KeyCDN.

<link href='https://cdn.keycdn.com' rel='preconnect' crossorigin>

Consultez notre article complet sur preconnect.

10. HTTP/2

Jeff Atwood, le cofondateur de Stack Exchange et Discourse, a répondu à nos questions sur les performances Web et son conseil numéro un est " HTTP/2 est adopté partout dans le monde. Enormes améliorations pour tous." Nous aimons la réponse de Jeff, car nous sommes clairement d'accord que HTTP/2 est l'avenir et qu’il représente d'énormes avantages pour les performances.

Go, le langage de programmation, permet d’illustrer le fait que HTTP/2 dépasse de loin le HTTP/1 lorsque vous traitez beaucoup d'images sur une page.

Pour activer HTTP/2, tout ce dont vous avez besoin est d'un certificat SSL (qui nécessite TLS) et un serveur prenant en charge HTTP/2. Vous pouvez utiliser l'outil de test HTTP/2 de KeyCDN pour voir si vous êtes pris en charge. Et KeyCDN offre maintenant des certificats SSL gratuits avec notre intégration Let's Encrypt. Vous n'avez pas encore migré vers HTTPS ? Nous avons également un guide de migration HTTP vers HTTPS.

Notez également que vous pouvez mettre en place un certificat SSL gratuit via Let's Encrypt si vous avez un hébergement chez notre partenaire SiteGround.

11. PHP7 et HHVM

Mainternir à jour les différents composants d'un serveur Web est essentiel, notamment lorsqu’il s’agit des correctifs de sécurité, des mises à niveau de performances, etc. Si vous utilisez PHP, la mise à niveau vers PHP 7 peut aider à améliorer considérablement les performances par rapport à PHP 5.6, en plus de profiter de HHVM.

php7

Si l’on prend l'image ci-dessus, PHP 7 est capable de gérer 204 demandes par seconde comparé aux 96 pour PHP 5.6 dans WordPress 3.6. De plus, PHP7 est capable de traiter 183 demandes de plus que PHP 5.6 dans WordPress 4.1.

HHVM, une machine virtuelle open source utilisée par des sites Web comme Facebook produit également de bons résultats. Lors du test de PHP 7 et HHVM, Kinsta a obtenu des résultats légèrement différents de Zend. D'après leurs conclusions, HHVM gagne haut la main.

hhvm

Beaucoup de ces résultats varieront en fonction des environnements, du matériel, des plates-formes CMS, des versions, etc. Quoiqu’il en soit, PHP7 et HHVM peuvent être d'excellentes façons d'améliorer les performances de votre site.

12. Performance des polices web

top 10 google fonts

Selon HTTP Archive60% des sites utilisent désormais des polices personnalisées, ce qui représente une augmentation de 850% depuis 2011. Les inconvénients des polices Web, telles que les polices Google, sont qu'elles ajoutent des requêtes HTTP supplémentaires vers des ressources externes. Voici quelques recommandations pour une meilleure performance des polices Web.

  1. Priorisez en fonction du support du navigateur
  2. Choisissez uniquement les styles dont vous avez besoin
  3. Gardez un minimum de caractères
  4. Hébergez les polices en local ou utilisez prefetch
  5. Stockez dans LocalStorage avec un encodage Base64

Vous pouvez voir un exemple de chaque méthode listée ci-dessus dans notre publication sur l'analyse des performances des polices Web.  Georgia est une excellente police système très agréable et avec une bonne lisibilité.

Vous pouvez également déplacer vos polices Google sur votre CDN. Nous avons utilisé notre propre comparaison entre l'utilisation de CDN de Google et KeyCDN, et l’utilisation de KeyCDN était plus rapide. Pourquoi ?  Parce qu'elle réduit le nombre de requêtes HTTP, les recherches DNS, vous permet de profiter d'une seule connexion HTTP/2 et d'avoir plus de contrôle sur la mise en cache.

 

SPEED TEST Google CDN (MS) KEYCDN (MS) WINNER
WebPageTest Load Time 1871ms 1815ms KeyCDN
WebPageTest Fully Loaded 1929ms 1862ms KeyCDN
Pingdom Load Time 355ms 324ms KeyCDN

13. Protection contre le hotlink

La protection contre le hotlink consiste à resteindre les références HTTP afin d'empêcher d'autres personnes d'intégrer vos actifs sur d'autres sites Web. La protection contre le hotlink vous permettra d'économiser de la bande passante en interdisant à d'autres sites d'afficher vos images.

Exemple : L'URL de votre site est www.domain.com. Pour arrêter le hotlinking de vos images depuis d'autres sites et afficher une image de remplacement appelée donotsteal.jpg, placez ce code dans votre fichier .htaccess :

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?domain\.com/ [NC]

RewriteCond %{HTTP_REFERER} !^$

RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif [L]

KeyCDN propose également un moyen simple d'activer la protection contre le hotlink pour protéger votre bande passante CDN. Consultez notre didacticiel sur la façon de créer un zonereferrer.

14. Activer la compression Gzip

Gzip est une autre forme de compression qui comprime les pages web, le CSS et le javascript au niveau du serveur avant de les envoyer au navigateur. Vous pouvez vérifier si votre site est déjà compressé en utilisant Check GZIP Compression. Cette optimisation des performances est facile à mettre en œuvre et peut faire une grande différence.

La compression GZIP permet d’économiser 50% à 80% de bande passante et d’augmenter considérablement la vitesse de chargement de votre site. - Check GZIP Compression

Apache

Vous pouvez activer la compression en ajoutant ce qui suit à votre fichier .htaccess.

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

Nginx

Vous pouvez activer la compression en ajoutant ce qui suit à votre fichier nginx.conf.

gzip on;

gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_disable "MSIE [1-6].(?!.*SV1)";

gzip_vary on;

15. Infrastructure

web hosting

Avoir un hébergeur Web rapide est tout aussi important que n'importe quelle optimisation de performance de site Web que vous pourriez faire, car c'est l'épine dorsale de votre site. Restez à l'écart des hébergements mutualisés low-cost. Nous suggérons d’utiliser un VPS ou si vous utilisez WordPress ou Drupal, un hébergeur managé, selon votre niveau d'expertise et votre temps.

VPS

Digital Ocean est un excellent fournisseur de VPS cloud et vous pouvez commencer à utiliser votre site Web pour seulement 5€ par mois. Il dispose de SSD, 1Gbps de réseau, une adresse IP dédiée, et vous pouvez facilement augmenter ou diminuer ses capacités en quelques secondes.

Linode est également un autre bon choix si vous recherchez un VPS dans le cloud. Ils ont des forfaits à partir de 10 $ par mois et tous comportent des SSD, API, CLI et une mise à l'échelle facile dans 8 datacenters de 3 régions différentes.

Vultr est légèrement plus récent dans le domaine du VPS, mais il fournit des serveurs très rapides et stables dans plus de 14 emplacements différents. Une fonctionnalité récente qu'il met à disposition est un service d'atténuation des DDoS.

Hébergements managés

Pour ceux qui n’ont pas besoin de gérer eux-mêmes leurs serveurs, un hébergement managé pourrait être une bonne solution. Certes, vous payerez plus cher. Mais en fonction de la taille de votre entreprise et de l'importance de votre temps, le prix l'emporte parfois sur le coût.

Voici quelques hôtes WordPress managés populaires qui mettent l'accent sur les hautes performances :

Voici quelques hôtes Drupal managés :

16. Corriger les erreurs 404

Tout fichier manquant génère une erreur HTTP 404. Selon la plateforme que vous utilisez, les erreurs 404 peuvent être très demandeuses de ressources pour votre serveur. Par exemple, sous Drupal, les erreurs 404 demandent énormément de ressources. Sur un site «moyen» avec une charge «moyenne», une erreur 404 peut consommer entre 60 à 100 Mo de mémoire.

Nous ne recommandons pas d'installer des plugins ou des modules pour vérifier les erreurs 404, mais nous vous conseillons d'exécuter occasionnellement votre site Web via un service externe tel que le «Online Broken Link Checker» ou un outil comme Screaming Frog. Vous pourrez vous assurer que vous ne gaspillez aucune des ressources de votre serveur à ce sujet. Vous pouvez également les voir dans la console Google Search.

17. Images à l’échelle

pagespeed insights

Vous devez toujours télécharger vos images à l'échelle et ne pas vous appuyer sur le CSS pour les réduire. Si vous le faites, vous irez à l’encontre de cette petite recommandation Google Pagespeed: " Suggestion d'optimisation:" En compressant et en ajustant la taille de ... vous pouvez économiser 5,8 Ko (51%). "

Cette recommandation fait référence à la mise à l’échelle de vos images par votre navigateur. Par exemple, peut-être que l'image que vous téléchargez a une largeur de 400px, mais que la colonne dans laquelle elle a été placée ne fait que 300px de largeur. Il en résulte que votre image est réduite à 300px par le CSS afin qu'elle corresponde à la taille de la colonne. Il est préférable de toujours télécharger des images à l'échelle et de télécharger également plusieurs tailles de vos images et d’utiliser le bon format pour le bon périphérique.

Remarque : Il n'est pas toujours possible d'éviter la mise à l'échelle via le CSS, surtout si vous travaillez avec des appareils à haute résolution.

18. Optimisation des bases de données

database optimization

Enfin, une dernière optimisation, et pas des moindres, l'optimisation des bases de données. Que ce soit en nettoyant les anciennes tables inutilisées ou en créant des index pour un accès plus rapide, il existe toujours des choses qui peuvent être optimisées.

Optimisation MySQL

L'optimisation de MySQL est également très importante. Malheureusement, cela est très spécifique à votre environnement et à votre configuration. Ainsi, nous ne pouvons pas proposer de paramétrages recommandés. Le fichier de configuration MySQL/MariaDB se trouve normalement dans /etc/my.cnf. Voici quelques paramètres à surveiller.

  • tmp_table_size
  • query_cache_type
  • query_cache_size
  • query_cache_size
  • join_buffer_size
  • max_heap_table_size

Un outil hautement recommandé est le script MySQL Tuner. Il est en lecture seule et ne fera pas de modifications de configuration. Il vous donnera un aperçu de la performance de votre serveur et formulera des recommandations de base sur les améliorations que vous pouvez apporter à votre paramétrage. Voici d’autres outils que vous pouvez utiliser dans ce sens :

Résumé

Comme vous pouvez le voir, il existe des centaines de manières d'optimiser les performances de votre site Web que vous pouvez mettre en œuvre pour améliorer encore et la rapidité de votre contenu. De l'optimisation des images à la mise en œuvre d'un CDN, en passant par la mise en cache navigateur et serveur ou encore l’utilisation de HTTP/2, Gzip, PHP7, HHVM, et bien plus encore, les optimisations sont multiples !

Vous avez d’autres conseils concernant l’optimisation des performances web ? Si tel est le cas, n'hésitez pas à nous en faire part ci-dessous ou au sein de notre communauté.

Cet article est une libre traduction de 18 Tips for Website Performance Optimization par Brian Jackson sur le site de KeyCDN.

L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Convertir en UTF-8 avec NotePad++ Convertir en UTF-8 avec NotePad++
Lors de la création de son site internet, il arrive parfois de rencontrer un fichier .php ou .html encodé en ANSI (...
L'effet miroir avec Photoshop CS4 L'effet miroir avec Photoshop CS4
Pour ce deuxième tuto, j'ai décidé de vous expliquer comment appliquer un effet miroir sur une image toujours...

Commentaires (4)

This comment was minimized by the moderator on the site

Bonjour,
Très bon article.
Cependant j'ai supprimé le remarketing en modifiant le paramètre dans Google Analytics (que je n'utilisais effectivement pas dans Adwords) mais lorsque je fais un test avec l'outil Google "test d'optimisation mobile" il...

Bonjour,
Très bon article.
Cependant j'ai supprimé le remarketing en modifiant le paramètre dans Google Analytics (que je n'utilisais effectivement pas dans Adwords) mais lorsque je fais un test avec l'outil Google "test d'optimisation mobile" il me ressort toujours des ressources externes doubleclick enerreur tels que :
http://googleads.g.doubleclick.net/pagead/id
http://static.doubleclick.net/instream/ad_status.js
http://stats.g.doubleclick.net/r/collect?v......
Sauriez vous me dire pourquoi cela est possible s'il vous plait ?
D'avance merci

Lire la suite
This comment was minimized by the moderator on the site

Hello,
A moins que cela soit en cache (alors à vider), il doit y avoir de la publicité Google quelque part sur le site.

This comment was minimized by the moderator on the site

Même en vidant le cache le problème est toujours présent.
Je maitrise 100% de mes pages (écriture sans CMS) et je n'ai aucune Pub

A moins que cela puisse venir de l'utilisation de Vidéo Youtube ?

This comment was minimized by the moderator on the site

Fred,
Difficile de dire sans examen approfondi, Youtube peut être en effet une hypothèse.

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

Dernier article sur la même thématique
Affichage des modules Joomla sur mobile, tablette et desktopAffichage des modules Joomla sur mobile, tablette et desktop
La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs...