[Ouvert] Suggestions pour rendre un site Wordpress rapide

Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

[Ouvert] Suggestions pour rendre un site Wordpress rapide

Mails

Bonjour,

Administrateur d'un site d'information tournant sur le CMS Wordpress, j'essaye régulièrement de nouvelles configuration serveur pour accélérer sa vitesse.
Un site rapide étant indispensable car :
- plus agréable pour les lecteurs
- mieux pris en compte par le SEO
- économise de monter en gamme en terme de serveur si les optimisations sont bien faites lors de l'augmentation de la fréquentation du site (comme c'est notre cas actuellement).

Je vous invite à visiter le site : nextwarez dot com (ce n'est pas une pub pour le site on a pas besoin de ça actuellement tout va bien pour la fréquentation) pour voir la vitesse actuelle du site, j'espère que vous allez pouvoir m'accompagner dans mes recherches.

Etat actuel du site :
- Site tournant sur un VPS Debian 7.0 avec 1 giga de ram
- Site tournant sur Nginx avec Varnish activé
- J'ai procédé à l'achat d'un plugin de cache payant (30€/an) appelé : WP-Rocket
- J'ai supprimé APC

Pour le moment j'ai plusieurs pistes d'amélioration :
- L'utilisation d'un CDN, plus précisément celui d'Amazon appelé CloudFront, mais j'ai l'impression qu'il est obligatoire d'avoir hebergé son site sur Amazon pour l'utiliser, quelqu'un peut confirmer ?
- Optimiser les configurations de Nginx et de Varnish, voir ci-dessous.

#
# Varnish 3 configuration for Wordpress
#
# On Debian OS:  /etc/varnish/default.vcl
#
# Nicolas Hennion (aka) Nicolargo
#
 
# Set the default backend (Nginx server for me)
backend default {
	# My Nginx server listen on IP address 127.0.0.1 and TCP port 8080
	.host = "127.0.0.1";
	.port = "8080";
	# Increase guru timeout
	# http://vincentfretin.ecreall.com/articles/varnish-guru-meditation-on-timeout
	.first_byte_timeout = 300s;
}
 
# This function is used when a request is send by a HTTP client (Browser) 
sub vcl_recv {
	# Block the forbidden IP addresse
	#if (client.ip ~ forbidden) {
     #   	error 403 "Forbidden";
	#}
 
	# Only cache the following sites
	if ((req.http.host ~ "(sametmax.com)")) { 
		set req.backend = default; 
	} else { 
		return (pass); 
	}
 
	# Normalize the header, remove the port (in case you're testing this on various TCP ports)
	set req.http.Host = regsub(req.http.Host, ":[0-9]+", "");
 
	# Post requests will not be cached
	if (req.http.Authorization || req.request == "POST") {
		return (pass);
	}
 
	# --- Wordpress specific configuration
 
	# Did not cache the RSS feed
	if (req.url ~ "/feed") {
		return (pass);
	}
 
	# Blitz hack
        if (req.url ~ "/mu-.*") {
                return (pass);
        }
 
 
	# Did not cache the admin and login pages
	if (req.url ~ "/wp-(login|admin)") {
		return (pass);
	}
 
	# Remove the "has_js" cookie
	set req.http.Cookie = regsuball(req.http.Cookie, "has_js=[^;]+(; )?", "");
 
	# Remove any Google Analytics based cookies
	set req.http.Cookie = regsuball(req.http.Cookie, "__utm.=[^;]+(; )?", "");
 
	# Remove the Quant Capital cookies (added by some plugin, all __qca)
	set req.http.Cookie = regsuball(req.http.Cookie, "__qc.=[^;]+(; )?", "");
 
	# Remove the wp-settings-1 cookie
	set req.http.Cookie = regsuball(req.http.Cookie, "wp-settings-1=[^;]+(; )?", "");
 
	# Remove the wp-settings-time-1 cookie
	set req.http.Cookie = regsuball(req.http.Cookie, "wp-settings-time-1=[^;]+(; )?", "");
 
	# Remove the wp test cookie
	set req.http.Cookie = regsuball(req.http.Cookie, "wordpress_test_cookie=[^;]+(; )?", "");
 
	# Are there cookies left with only spaces or that are empty?
	if (req.http.cookie ~ "^ *$") {
		    unset req.http.cookie;
	}
 
	# Cache the following files extensions 
	if (req.url ~ "\.(css|js|png|gif|jp(e)?g|swf|ico)") {
		unset req.http.cookie;
	}
 
	# Normalize Accept-Encoding header and compression
	# https://www.varnish-cache.org/docs/3.0/tutorial/vary.html
	if (req.http.Accept-Encoding) {
		# Do no compress compressed files...
		if (req.url ~ "\.(jpg|png|gif|gz|tgz|bz2|tbz|mp3|ogg)$") {
			   	remove req.http.Accept-Encoding;
		} elsif (req.http.Accept-Encoding ~ "gzip") {
		    	set req.http.Accept-Encoding = "gzip";
		} elsif (req.http.Accept-Encoding ~ "deflate") {
		    	set req.http.Accept-Encoding = "deflate";
		} else {
			remove req.http.Accept-Encoding;
		}
	}
 
	# Check the cookies for wordpress-specific items
	if (req.http.Cookie ~ "wordpress_" || req.http.Cookie ~ "comment_") {
		return (pass);
	}
	if (!req.http.cookie) {
		unset req.http.cookie;
	}
 
	# --- End of Wordpress specific configuration
 
	# Did not cache HTTP authentication and HTTP Cookie
	if (req.http.Authorization || req.http.Cookie) {
		# Not cacheable by default
		return (pass);
	}
 
	# Define the default grace period to serve cached content
	set req.grace = 30s;
 
	# Cache all others requests
	return (lookup);
}
 
sub vcl_pipe {
	return (pipe);
}
 
sub vcl_pass {
	return (pass);
}
 
# The data on which the hashing will take place
sub vcl_hash {
 	hash_data(req.url);
 	if (req.http.host) {
     	hash_data(req.http.host);
 	} else {
     	hash_data(server.ip);
 	}
 
	# If the client supports compression, keep that in a different cache
    	if (req.http.Accept-Encoding) {
        	hash_data(req.http.Accept-Encoding);
	}
 
	return (hash);
}
 
# This function is used when a request is sent by our backend (Nginx server)
sub vcl_fetch {
	# Remove some headers we never want to see
	unset beresp.http.Server;
	unset beresp.http.X-Powered-By;
 
	# For static content strip all backend cookies
	if (req.url ~ "\.(css|js|png|gif|jp(e?)g)|swf|ico") {
		unset beresp.http.cookie;
	}
 
	# Only allow cookies to be set if we're in admin area
	if (beresp.http.Set-Cookie && req.url !~ "^/wp-(login|admin)") {
        	unset beresp.http.Set-Cookie;
    	}
 
	# don't cache response to posted requests or those with basic auth
	if ( req.request == "POST" || req.http.Authorization ) {
        	return (hit_for_pass);
    	}
 
    	# don't cache search results
	if ( req.url ~ "\?s=" ){
		return (hit_for_pass);
	}
 
	# only cache status ok
	if ( beresp.status != 200 ) {
		return (hit_for_pass);
	}
 
	# A TTL of 24h
	set beresp.ttl = 24h;
 
	return (deliver);
}
 
# The routine when we deliver the HTTP request to the user
# Last chance to modify headers that are sent to the client
sub vcl_deliver {
	if (obj.hits > 0) { 
		set resp.http.X-Cache = "cached";
	} else {
		set resp.http.x-Cache = "uncached";
	}
 
	# Remove some headers: PHP version
	unset resp.http.X-Powered-By;
 
	# Remove some headers: Apache version & OS
	unset resp.http.Server;
 
	# Remove some heanders: Varnish
	unset resp.http.Via;
	unset resp.http.X-Varnish;
 
	return (deliver);
}
 
sub vcl_init {
 	return (ok);
}
 
sub vcl_fini {
 	return (ok);
}

# You may add here your
# server {
#	...
# }
# statements for each of your virtual hosts to this file

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# http://wiki.nginx.org/Pitfalls
# http://wiki.nginx.org/QuickStart
# http://wiki.nginx.org/Configuration
#
# Generally, you will want to move this file somewhere, and start with a clean
# file but keep this around for reference. Or just disable in sites-enabled.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

server {
	listen 8080;

	root /usr/share/nginx/www/nextwarez.com/;

	index index.html index.htm index.php;
	set_real_ip_from        127.0.0.1;
    real_ip_header          X-Forwarded-For;

	server_name nextwarez.com www.nextwarez.com;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ /index.php?q=$uri&$args;
		# Uncomment to enable naxsi on this location
		# include /etc/nginx/naxsi.rules
	}

	location /doc/ {
		alias /usr/share/doc/;
		autoindex on;
		allow 127.0.0.1;
		allow ::1;
		deny all;
	}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
log_not_found off;
}

	# Only for nginx-naxsi used with nginx-naxsi-ui : process denied requests
	#location /RequestDenied {
	#	proxy_pass http://127.0.0.1:8080;    
	#}

	#error_page 404 /404.html;

	# redirect server error pages to the static page /50x.html
	#
	#error_page 500 502 503 504 /50x.html;
	#location = /50x.html {
	#	root /usr/share/nginx/www;
	#}

	# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
	#
	location ~ \.php$ {
		fastcgi_split_path_info ^(.+\.php)(/.+)$;
	#	# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
	#
	#	# With php5-cgi alone:
	#	fastcgi_pass 127.0.0.1:9000;
	#	# With php5-fpm:
		fastcgi_pass unix:/var/run/php5-fpm.sock;
		fastcgi_index index.php;
		include fastcgi_params;
	}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#	listen 8000;
#	listen somename:8080;
#	server_name somename alias another.alias;
#	root html;
#	index index.html index.htm;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}


# HTTPS server
#
#server {
#	listen 443;
#	server_name localhost;
#
#	root html;
#	index index.html index.htm;
#
#	ssl on;
#	ssl_certificate cert.pem;
#	ssl_certificate_key cert.key;
#
#	ssl_session_timeout 5m;
#
#	ssl_protocols SSLv3 TLSv1;
#	ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
#	ssl_prefer_server_ciphers on;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}

Je compte faire un tutoriel consistant pour résumer nos conclusions communes afin que les recherches et le travail effectué profite à d'autres !
Merci d'avance !

Hardware

Quelques autres pistes qui peuvent être intéressantes :

- Installer un plugin de gestion du cache comme W3 Total Cache / WP Super Cache
- Installer un cache d'opcode comme APC ou XCache
- Compresser le contenu avec Gzip
- Minifier les assets (css, js, images...etc)
- Utiliser un CDN comme CloudFlare
- Définir le header d'expiration, du contrôle du cache et le ETag sur les ressources statiques

Il existe des outils permettant de mesurer les performances d'un site web, comme PageSpeed (google) et YSlow (yahoo). Personnellement, j'utilise http://gtmetrix.com/, c'est plutôt bien fait. Pour mesurer les performances côté serveur (PHP/MySQL), j'utilise http://newrelic.com/, c'est gratuit et très simple à utiliser.

Ayenon

Je confirme pour l'utilisation de W3 TotalCache est très efficace bien utilisé !

On peut demander la compression GZip et l'utilisation de CDN comme CloudFlare est très efficace (je l'utilise pour un mutualisé où j'optimise le SIO) associé avec Total Cache, c'est fatal !

Je n’ai pas encore testé le "minifier" de code, car j'avais fait des tests, mais ce n'était pas concluant... Mais je n’ai pas trouvé de tuto précis sur le sujet (à faire peut-être ?)

Hardware

@Mails: Je viens de regarder le plugin WP-Rocket, apparemment il est encore plus performant que W3 Total Cache / WP Super Cache, mais payer 30€/an pour un plugin, faut vraiment en avoir l'utilité. Tu vois réellement un gain en l'utilisant ?

Mails

Justement dans toutes les recommandations j'ai plus ou moins tout essayer, j'ai tenté WP-Rocket car il a très bonne presse et je voulais un avis objectif pour mes lecteurs. Pour le moment je peux souligner sa simplicité très bluffante, son efficacité n'est pas quant à elle encore transcendante.

Pour le moment je cherche à paramétrer CloudFront, mais je ne sais pas comment faire pour qu'il récupère le contenu à mettre en cache. J'ai bien crée un sous-NDD mais après je ne sais pas comment faire