En este artículo os vamos a enseñar a optimizar webs basadas en WordPress en servidores Plesk. En caso de tener cualquier otro panel de control este artículo también os será útil, es cuestión de adaptar la configuración de Apache o Nginx. Antes de todo vamos introducir algunos conceptos que iremos usando durante este artículo exponiendo ejemplos.
- Caché navegador sirve para evitar descargar repetidamente cualquier fichero, por ejemplo, el logo de nuestra web suele ser el mismo en todas las páginas webs, si lo cacheamos en el navegador del usuario evitaremos que lo tenga que descargar a cada página que visite de nuestra web.
- Caché servidor WordPress funciona con PHP y MySQL, cada vez que visitamos una web estamos ejecutando consultas a nuestra base de datos y luego las procesamos con PHP, todo esto lleva cierto tiempo, con la cache de servidor lo que hacemos es generar unos ficheros estáticos para evitar repetir estas consultas a la base de datos y procesamiento de PHP.
- Compresión Gzip consiste en comprimir archivos para reducir el tamaño, nuestro navegador los descomprimirá directamente.
- Minificar consiste en eliminar los caracteres innecesarios de los archivos HTML, CSS o JS, con esto se reduce el tamaño y conseguimos que carguen más rápido.
Este artículo se ha realizado sobre un servidor sin visitas por lo cual los tiempos de carga no mejoran mucho, pero sí la optimización. Hay que tener en cuenta que no es lo mismo una visita simultanea que 10 o 50, el servidor irá exponencialmente cada vez más lento. Por lo tanto, cualquier pequeño detalle cuenta, no es lo mismo que tu web ocupe 600 KB y cargue 21 archivos que ocupe 375 KB y cargue 15 archivos. El número de archivos dependerá del número de plugins que tengamos instalado.
Para optimizar Nginx entraremos al panel Plesk e iremos a la suscripción que queremos optimizar, en sitios web y dominios tendremos una opción de "Configuración de Apache y Nginx", al final de todo encontraremos la configuración para Nginx, activaremos las casillas "Modo proxy" y "Procesamiento inteligente de archivos estáticos" y en "Directivas adicionales de Nginx" rellenaremos:
location ~* ^.+.(xml|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
etag on;
if_modified_since exact;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
}
gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;
Ahora ya tendremos configurado Nginx para utilizar "Cache navegador" y "Compresión Gzip".
Para optimizar Apache entraremos al panel Plesk e iremos a la suscripción que queremos optimizar, en sitios web y dominios tendremos una opción de “Configuración de Apache y Nginx“, y en “Directivas adicionales de Apache HTTP y HTTPS” rellenaremos:
<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>
<IfModule mod_expires.c>
ExpiresActive On
FileETag None
ExpiresDefault "access plus 14 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/css "now plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Ahora ya tendremos configurado Nginx para utilizar “Cache navegador” y “Compresión Gzip”.
Optimizar WordPress
Ahora que ya tenemos optimizado Nginx o Apache solo nos queda optimizar nuestro WordPress, para ello recurriremos a los siguientes plugins:
- WP Super Cache Versión 1.6.2 | Por Automattic. Nos permite crear “Cache servidor”
- Autoptimize Versión 2.3.4 | Por Frank Goossens. Nos permite “Minificar”
Una vez instalado iremos a las configuraciones de los plugins y los configuraremos según estas capturas:
Aquí os dejamos unas capturas de webs que comprueban nuestra optimización, es normal que el tiempo de carga sea muy superior ya que están en servidores fuera de España.
¿Lo has probado? ¡Déjanos tus comentarios! 🙂
Nota: las optimizaciones Nginx y Apache se han obtenido de la KB de Plesk.com, se pueden ajustar los valores según nuestras necesidades.