Optimizar Nginx con compresion, cache y Minify en WordPress

test de velocidad de la página www.nubeelectronica.es
test velocidad página con wordpress

Con este conjunto de herramientas conseguiremos optimizar de manera notable nuestro WordPress.

De manera que vamos a comprimir el contenido, minify…zar las css y los javascritps para reducir el número de http requests y cachearlo todo para aliviar el servidor.

Tu WordPress irá rápido, al menos eso dicen los test que he hecho de la web.

Doy por hecho que ya tienes el Nginx con tu WordPress montado 😉

El primer paso es comprimir con gzip para reducir el ancho de banda.

Para comprimir con gzip es fácil, creamos un archivo .conf en la carpeta de nginx:

# cat /etc/nginx/conf.d/compression.conf
# enable gzip compression
 gzip on;
 gzip_buffers 16 8k;
 gzip_comp_level 4;
 gzip_http_version 1.0;
 gzip_min_length 1280;
 gzip_types text/plain text/css text/js application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp application/json;
 gzip_disable msie6;
 gzip_vary on;

Es importante señalar que a mi al principio Nginx no me comprimía los archivos javascript y me costó encontrar el porqué. Pero la solución es fácil, añadir application/javascript en gzip_types como he puesto.

La solución la saqué de aquí: http://serverfault.com/questions/543009/how-do-i-enable-gzip-compression-on-nginx-pagespeed-module-resources

Con este paso ya tenemos mucho ganado, pero seguimos.

Pasamos a instalar Varnish que es un gestor de caché.

Yo uso Centos y lo he instalado así:

# rpm --nosignature -i https://repo.varnish-cache.org/redhat/varnish-4.0.el6.rpm
# yum install varnish

Con esto te aseguras de tener la última versión.

Fuente: https://www.varnish-cache.org/installation/redhat

Para configurar Varnish hay que tocar dos archivos:

# nano -w /etc/sysconfig/varnish

y modificamos la siguiente línea para dejarla así:

VARNISH_LISTEN_PORT=80

Es donde escuchará Varnish las peticiones web.

Y el segundo archivo:

# cat /etc/varnish/default.vcl

# This is an example VCL file for Varnish. # # It does not do anything by default, delegating control to the # builtin VCL. The builtin VCL is called when there is no explicit # return statement. # # See the VCL chapters in the Users Guide at https://www.varnish-cache.org/docs/ # and http://varnish-cache.org/trac/wiki/VCLExamples for more examples. # Update for work with Varnish 4

# Marker to tell the VCL compiler that this VCL has been adapted to the # new 4.0 format. vcl 4.0;

# Default backend definition. Set this to point to your content server. backend default { .host = «127.0.0.1»; .port = «8080»; .connect_timeout = 600s; .first_byte_timeout = 600s; .between_bytes_timeout = 600s; .max_connections = 800; }

# Only allow purging from specific IPs acl purge { «localhost»; «127.0.0.1»; }

# This function is used when a request is send by a HTTP client (Browser) sub vcl_recv { # 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]+», «»);

# Allow purging from ACL if (req.method == «PURGE») { # If not allowed then a error 405 is returned if (!client.ip ~ purge) { return(synth(405, «This IP is not allowed to send PURGE requests.»)); } # If allowed, do a cache_lookup -> vlc_hit() or vlc_miss() return (hash); }

# Post requests will not be cached if (req.http.Authorization || req.method == «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)$») { unset 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 { unset 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); }

# Cache all others requests return (hash); }

sub vcl_pipe { return (pipe); }

sub vcl_pass { return (fetch); }

# 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 (lookup); }

sub vcl_hit { # Allow purges if (req.method == «PURGE») { purge; return(synth(200, «Purged.»)); }

return (deliver); }

sub vcl_miss { # Allow purges if (req.method == «PURGE») { purge; return(synth(200, «Purged.»)); }

return (fetch); }

# This function is used when a request is sent by our backend (Nginx server) sub vcl_backend_response { # 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 (bereq.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 && bereq.url !~ «^/wp-(login|admin)») { unset beresp.http.Set-Cookie; }

# don’t cache response to posted requests or those with basic auth if ( bereq.method == «POST» || bereq.http.Authorization ) { set beresp.uncacheable = true; set beresp.ttl = 120s; return (deliver); }

# don’t cache search results if ( bereq.url ~ «\?s=» ){ set beresp.uncacheable = true; set beresp.ttl = 120s; return (deliver); }

# only cache status ok if ( beresp.status != 200 ) { set beresp.uncacheable = true; set beresp.ttl = 120s; return (deliver); }

# A TTL of 24h set beresp.ttl = 24h; # Define the default grace period to serve cached content set beresp.grace = 30s;

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); }

Fuente: https://github.com/nicolargo/varnish-nginx-wordpress/blob/master/varnish/varnish4-wordpress

Daros cuenta al principio del archivo de:

.port = «8080»;

Ese puerto es el que tendremos que poner en nuestra configuración de nginx de nuestro sitio:

server {

listen 127.0.0.1:8080;

server_name www.nubeelectronica.es;

…..

}

 

Ya podemos reiniciar nginx y activar varnish

# chkconfig varnish on
# service varnish start
# service nginx restart

Para dar un paso más en nuestra optimización, vamos a unificar los archivos css y javascript con minify. Aquí usamos el plugin para wordpress AssetsMinify http://wordpress.org/plugins/assetsminify/

Simplemente, instalar y activar, no hay que hacer nada más.

Para limpiar la caché del Varnish lo podemos hacer desde la línea de comandos:

# varnishadm "ban req.url ~ /"

Y ya puedes probar cómo de rápida es tu web:

http://tools.pingdom.com/

Espero que os sea útil.

 

Votar
[Total: 0 Media 0]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *