Awwwards

WordPress Summum: Optimisé pour la vitesse

By 28 novembre 2015Wordpress Ultimate
Wordpress Summum

WordPress Summum: Rapide

Optimiser la rapidité de wordpress

WordPress Summum est la solution! Sachez que la vitesse de chargement d’un site internet est actuellement un critère incontournable dans l’amélioration du référencement naturel de votre site (SEO). C’est pour cela que d’est la création du site nous devons mettre le nez dedans.

Wordpress Summum

WordPress Summum – optimisé pour la vitesse

Pour optimiser la vitesse de notre site, il faut comprendre ces trois points :

  1. Le nombre de requête HTTP
  2. Le poids de vos pages
  3. Le temps de chargement de votre site ou de la page demandée en seconde

Une solution simple à réaliser.

1 – Avoir un bon hébergeur Web

Nous n’allons pas ouvrir un débat là-dessus, mais tout simplement prenez un VPS et configurez le bien, ça sera déjà beaucoup mieux.

2 – La compression de vos images envoyées sur le site

Nous vous avons déjà parlé, un peu, de l’optimisation des images sur notre article WEBDESIGN SEO, mais nous allons y revenir un peu plus en détails ici :

  • Compression à l’aide de Photoshop
    Deux manières possibles : une images à la fois ou un lot d’image. Aujourd’hui nous allons voir la première façon de faire et dans un avenir proche nous vous expliquerons la deuxième.
    Une image à la fois : nous allons utiliser l’option « Enregistrer pour le web » qui se trouve dans : Fichier > Enregistrer pour le web. sinon vous utiliser le raccourci Alt+Maj+Ctrl+S. Si vous ne le trouvez pas allez dans Fichier > Exporter > Enregistrer pour le web.
  • Compression à l’aide d’Adobe Fireworks
    La par contre, ça ne sera que de l’image par image 🙂 Nous allons utiliser l’option Enregistrer sous qui se trouve dans : Fichier > Enregistrer sous. Ou utiliser le raccourci Ctrl+Maj+S. N’oubliez pas que ces manipulations se font pour toutes les images se trouvant sur votre site, y compris : le logo, les boutons, arrière-plan, toutes les images de vos articles, pages etc …..
  • Compression à l’aide de plugin wordpress
    Un bon plugin pour cette fonction, EWWW image optimize

3 – Optimisation des fichiers CSS & JavaScript

Pourquoi compresser les images ? Afin d’alléger leur poids, c’est donc dans le même objectif que nous devons compresser les fichiers css et JavaScript.

Nous allons vous proposer deux outils, que je considère pas mal du tout, mais comme toutes les manipulations de compressions de fichiers, vous devez impérativement faire une sauvegarde des fichiers originaux et tester le site, après chaque compression de fichier, car certain template bug. Avoir une copie des fichiers originaux pourrait bien vous sauver la mise :).

Pour vos fichiers CSS je vous conseille CleanCSS et pour vos fichiers JavaScript vous avez JSCompress.

4 – Utiliser votre serveur pour la compression de votre wordpress

Ce qui est bien aussi pour optimiser la vitesse de votre site internet, c’est d’avoir une compression Gzip côté serveur. Quand notre visiteur fait un appel à notre site par le biais de son navigateur, notre serveur compresse les fichiers (les pages) avant de lui envoyer le résultat, ce qui a pour objectif de faire réduire le poids de nos pages et de gagner quelques secondes de chargement.

5 – Mettre un système de cache via un plugin ou le .htaccess

Rajouter ce code au début de votre fichier .htaccess (télécharger le fichier texte qui contient le code)

N’oublions pas aussi que nous pouvons utiliser des plugins comme WP Roket ainsi qu’un système de CDN.

6 – La suppression des plugins inutiles

Tout simplement supprimez tous les plugins que vous n’utilisez pas !!!

7 – Optimiser votre template

Vous avez créé votre template ou vous l’avez acheté, nous vous conseillons alors de l’optimiser, passer le temps qu’il faut dessus mais faite un grand et bon nettoyage.

8 – Rendre l’affichage de vos pages plus fluide

Dire qu’un site est fluide : signifie que lorsque vous allez sur un site, sa page s’affiche d’une manière agréable, le chargement ne reste pas bloqué sur une partie de la page.

Nous allons alors utiliser une technique simple, (façon de parler), il faut savoir toucher au code, nous allons déplacer les fichiers JavaScript dans le footer. Comme nous l’avons dit il ne faut pas être débutant pour une action comme celle-ci, alors il va vous falloir un peu d’anglais et de lecture, ici, non je ne suis pas méchant au contraire, mais je ne veux pas que vous fassiez une bêtise, que vous pourriez regretter, c’est pour cela que je ne vous donne pas la solution, mais je vous donne l’occasion d’en apprendre plus ou d’utiliser WordPress Summum outil que nous mettons à votre disposition gratuitement :).

9 – aider votre site à être plus rapide avec .htaccess

Nous allons autoriser la mise en cache de votre site dans le navigateur de votre visiteur pour plus de rapidité dans le chargement des pages.

# Mise en cache des fichiers dans le navigateur
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/pdf "access plus 0 seconds"

ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"

ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"

ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

ExpiresByType text/css "access plus 6 month"
ExpiresByType application/javascript "access plus 6 month"

ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"

</IfModule>

# En-têtes
Header unset ETag
FileETag None

<ifModule mod_headers.c>  
<filesMatch ".(ico|jpe?g|png|gif|swf)$">  
    Header set Cache-Control "public"  
</filesMatch>  
<filesMatch ".(css)$">  
    Header set Cache-Control "public"  
</filesMatch>  
<filesMatch ".(js)$">  
    Header set Cache-Control "private"  
</filesMatch>  
<filesMatch ".(x?html?|php)$">  
    Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>

Nous activons la compression

# Compressions des fichiers statiques
<IfModule mod_deflate.c> 
    AddOutputFilterByType DEFLATE text/xhtml text/html text/plain text/xml text/javascript application/x-javascript text/css 
    BrowserMatch ^Mozilla/4 gzip-only-text/html 
    BrowserMatch ^Mozilla/4.0[678] no-gzip 
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html 
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary 
    Header append Vary User-Agent env=!dont-vary 
</IfModule>  

AddOutputFilterByType DEFLATE text/html  
AddOutputFilterByType DEFLATE text/plain  
AddOutputFilterByType DEFLATE text/xml  
AddOutputFilterByType DEFLATE text/css  
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json

Maintenant que l’optimisation de la vitesse de votre wordpress est faite nous allons passer à l’optimisation de son référencement dans notre troisième article.

  1. WP Summum : Optimiser la sécurisé de WordPress
  2. WP Summum : Optimiser la rapidité de wordpress Vous y êtes déjà
  3. WP Summum : Optimiser le référencement de wordpress

Toutes les astuces et plugin présentés, dans cet article, seront inclus et déjà configurés dans : WordPress Summum.

WordPress Summum sera disponible en téléchargement gratuit à la fin de ces articles.

Leave a Reply

e9abb0307ae762cfb6c25eff6d2ca3df******