Voyons \u00e9tape par \u00e9tape le processus pour am\u00e9liorer les performances et la vitesse d’un site. Vous trouverez ci-dessous la capture d’\u00e9cran du score de mon site Web sur Google Page Insight.<\/p>\n
Avez-vous d\u00e9j\u00e0 remarqu\u00e9 le message Render bloquant JavaScript et CSS dans le contenu au-dessus de la ligne de flottaison\u00a0? Si vous n’avez pas inclus CSS et JS de mani\u00e8re standard,<\/a> cela peut ralentir votre site. En r\u00e8gle g\u00e9n\u00e9rale, CSS doit \u00eatre inclus dans un en-t\u00eate et JS dans un pied de page. Vous devez prendre soin de votre site Web en suivant cette pratique standard.<\/p>\n Les images jouent un r\u00f4le important dans l’am\u00e9lioration de l’exp\u00e9rience utilisateur. Des images accrocheuses gardent vos utilisateurs int\u00e9ress\u00e9s par le contenu. Mais, l’utilisation d’images lourdes tue presque la vitesse de votre site Web. Par exemple, vous avez t\u00e9l\u00e9charg\u00e9 une image d’une taille de 2 Mo sur le site, puis lors du chargement de la page, ces 2 Mo prennent un temps suppl\u00e9mentaire pour charger l’image avant de pr\u00e9senter votre page au public.<\/p>\n Voici le concept d’ optimisation des images<\/strong> avant utilisation. Il existe plusieurs plugins disponibles qui effectuent cette t\u00e2che de compression d’images \u00e0 partir de votre m\u00e9diath\u00e8que. Certains plugins populaires sont<\/p>\n Tous ces plugins fonctionnent bien. Je recommanderais d’utiliser le plugin TinyPNG. J’utilise ce plugin pour mon site Web et j’en suis tr\u00e8s satisfait.<\/p>\n Dans certains cas, nous devons afficher des images en dehors de la m\u00e9diath\u00e8que. Nous cr\u00e9ons un r\u00e9pertoire personnalis\u00e9 et y t\u00e9l\u00e9chargeons des images, puis utilisons ces images sur le site Web. J’ai \u00e9crit un article sur Optimize Image On Upload<\/a> et TinyPNG Compress Images<\/a>. Veuillez vous r\u00e9f\u00e9rer \u00e0 ces articles si vous n’utilisez pas la m\u00e9diath\u00e8que pour les images.<\/p>\n Astuce: recadrez les images d’une taille que vous souhaitez afficher. Disons que vous avez un conteneur de taille 300*250. Dans ce cas, vous devez recadrer l’image en fonction de la taille du conteneur. N’utilisez pas l’image de plus grande taille dans un petit contenant. Cela affecte \u00e9galement les performances du site.<\/p>\n Lazy Load Images<\/strong> aide \u00e0 acc\u00e9l\u00e9rer votre site Web. En utilisant le<\/a> plug-in de chargement paresseux<\/a>, vos images ne se chargent pas tant que l’utilisateur n’y fait pas d\u00e9filer. Cela permet de r\u00e9duire la taille de votre page au moment du chargement.<\/p>\n Si vous souhaitez impl\u00e9menter des images de chargement paresseux sans utiliser de plugin, veuillez lire notre article sur Am\u00e9liorer les performances du site Web par des images de chargement paresseux<\/a>.<\/p>\n Dans la mesure o\u00f9 la taille de votre base de donn\u00e9es est petite, votre serveur r\u00e9pond rapidement aux demandes de base de donn\u00e9es provenant du site Web. Une fois que votre base de donn\u00e9es commence \u00e0 augmenter, votre serveur met plus de temps \u00e0 r\u00e9pondre.<\/p>\n Dans WordPress, comme le temps passe plusieurs donn\u00e9es orphelines stock\u00e9es dans votre base de donn\u00e9es. Par exemple, lorsque vous mettez \u00e0 jour un article ou une page, \u00e0 chaque fois, WordPress stocke la r\u00e9vision dans la base de donn\u00e9es. Je pr\u00e9f\u00e9rerais ne garder que les 3 derni\u00e8res r\u00e9visions qui sont tout \u00e0 fait suffisantes. Pour conserver les r\u00e9visions jusqu’\u00e0 3 fois, vous devez placer le code ci-dessous dans votre fichier wp-config.php.<\/p>\n Le code ci-dessus limite le nombre de r\u00e9visions. Il existe d’autres tables qui devraient \u00e9galement \u00eatre optimis\u00e9es. Je recommande d’utiliser les plugins WP-DBManager<\/a> ou WP-Sweep<\/a> pour optimiser votre base de donn\u00e9es.<\/p>\n Merci aux ing\u00e9nieurs qui ont introduit le concept de cache du navigateur. Lorsqu’un utilisateur visite votre site Web, le navigateur de l’utilisateur stocke votre page dans l’emplacement de stockage temporaire du navigateur. Lorsque l’utilisateur visite le site Web la prochaine fois, le navigateur pr\u00e9sente la page aux utilisateurs \u00e0 partir du dernier cache stock\u00e9 au lieu de charger \u00e0 nouveau la page enti\u00e8re. Cela r\u00e9duit l’utilisation de la bande passante c\u00f4t\u00e9 utilisateur et c\u00f4t\u00e9 serveur. L’utilisation du cache pour votre site Web acc\u00e9l\u00e8re consid\u00e9rablement le site Web WordPress. Certains des plugins de cache populaires sont les suivants.<\/p>\n Lorsque vous utilisez la mise en cache du navigateur, les fichiers de votre page Web sont stock\u00e9s dans le cache du navigateur. Vos pages se chargeront beaucoup plus rapidement pour les visiteurs r\u00e9guliers. Ajoutez le code suivant dans le fichier htaccess de votre site et il vous permettra la mise en cache du navigateur.<\/p>\n Remarque: dans WordPress, certains plugins utilisent des ressources externes. Nous ne pouvons pas d\u00e9finir d’en-t\u00eates d’expiration sur ces ressources externes. Une fa\u00e7on consiste \u00e0 stocker ces fichiers externes sur votre serveur, puis \u00e0 les inclure sur votre site Web.<\/p>\n J’esp\u00e8re que vous comprenez comment acc\u00e9l\u00e9rer le site Web WordPress. Si j’ai rat\u00e9 quelque chose ou si vous utilisez d’autres techniques, veuillez partager dans les commentaires ci-dessous.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\n\u00c9tape 1 – Inclure CSS et JS de mani\u00e8re standard<\/h3>\n
\u00c9tape 2- Optimiser les images avant utilisation<\/h3>\n
\n
\u00c9tape 3 – Chargement paresseux des images<\/h3>\n
\u00c9tape 4- Optimiser la base de donn\u00e9es<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\n\u00c9tape 5- Utilisation du cache<\/h3>\n
\n
\u00c9tape 6 – Tirez parti de la mise en cache du navigateur<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n