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 WordPress, Joomla, Drupal 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.
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.
- 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.
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.
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.
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
- Optimisation des images
- Réduire les requêtes HTTP
- Minifier le code CSS et Javascript
- Chemin critique de rendu et blocage de rendu (CSS + JS)
- Réduire la latence avec un CDN
- Time to First Byte (TTFB)
- Éviter les redirections 301
- Mise en cache
- Prefetching et preconnect
- HTTP/2
- PHP7 et HHVM
- Performance des polices web
- Protection contre le hotlink
- Activer la compression Gzip
- Infrastructure
- Corriger les erreurs 404
- Images à l’échelle
- 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
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.
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
- Grunt: grunt-contrib-imagemin
- Gulp: gulp-imagemin
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.
1er 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]).
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
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
- Grunt : grunt-contrib-uglify
- Gulp : gulp-uglify
CSS
- Grunt : grunt-contrib-cssmin
- Gulp : gulp-minify-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)
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
- Appelez correctement vos fichiers CSS
- Utilisez les media queries pour marquer certaines ressources CSS comme non-render blocking
- Diminuez la quantité de fichiers CSS (concaténez vos fichiers CSS dans un seul fichier)
- Minifiez votre CSS (par exemple, supprimez les espaces, caractères, commentaires inutiles)
- Utilisez moins de CSS en général
Javascript
Quand il s'agit de Javascript, il existe des bonnes pratiques à garder à l'esprit.
- Déplacez vos scripts en bas de page juste avant votre balise </body>.
- Utilisez les directives async et defer
- Concaténez vos fichiers JS dans un seul fichier (avec HTTP/2, cela est moins nécessaire)
- Minifiez votre Javascript (par exemple, supprimez les espaces, caractères, commentaires inutiles)
- 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.
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.
- Intégration à Joomla
- Intégration à WordPress
- Guides d’intégration à un CMS
- Guides d’intégration à des framework
- Intégration à WS S3
- Intégration à Google Cloud Storage
- Intégration personnalisée à un CDN
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.
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.
8. Mise en cache
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 :
- Cache-control
- Pragma
- Expires
- 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".
- -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.
- Consultez notre guide de mise en cache pour WordPress
- Consultez notre guide de mise en cache pour Drupal
- Consultez notre guide de mise en cache pour Magento
- Consultez notre guide de mise en cache pour Xenforo
9. Prefetching et preconnect
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.
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.
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
Selon HTTP Archive, 60% 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.
- Priorisez en fonction du support du navigateur
- Choisissez uniquement les styles dont vous avez besoin
- Gardez un minimum de caractères
- Hébergez les polices en local ou utilisez prefetch
- 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
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 :
- WPHostingSpot
- Kinsta
- Pagely
- Raidboxes (Allemand)
- Mittwald (Allemand)
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
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
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 :
- Consultez nos Optimisations de base de données WordPress
- Consultez nos Optimisations de base de données Joomla
- Consultez nos Optimisations de base de données Magento
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é.
Articles qui devraient vous intéresser
Convertir en UTF-8 avec NotePad++
L'effet miroir avec Photoshop CS4
