34. Optimizar tu WordPress dentro de Plesk Onyx -Parte #2-

Implementador WordPress

34. Optimizar tu WordPress dentro de Plesk Onyx -Parte #2-

Play Episode Pause Episode

Mute/Unmute Episode Rewind 10 Seconds 1x Fast Forward 30 seconds

00:00 / 17:55

Apple Podcasts Google Podcasts Spotify Stitcher YouTube iVoox

RSS Feed

Share

Link

Embed

En el Episodio 29. Optimizar tu WordPress dentro de Plesk Onyx -Parte #1- hablamos de Servidores Web’s, servidor proxy inverso, cache del servidor, cache del navegador, minificar, compresión Gzip… Ahora vamos a darle sentido a todo:

Más de algún cliente puede preguntarte una vez que has implementado su web:

¿Porque mi web no esta en la primera pagina de Google?
¿Porque veo que hay poco “tráfico” en la web?

Para no escuchar este tipo de preguntas/reclamos, hay que pensar siempre que Diseño y Usabilidad van de la mano, y que desde un principio debemos de pensar en el señor Search Engine Optimization, que de cariño le llamamos Don SEO.

Para quedar bien con Don SEO debemos optimizar, yo que uso Plesk Onyx lo tengo muy fácil… Basta seguir las excelentes indicaciones, al pie de la letra del siguiente Tutorial creado por los amigos de clouding.io

¿Difícil? Para nada! Es tan simple como entrar a la configuración de Plesk Onyx, copiar dos bloques de textos… y tendremos ya listo y funcionando la Cache navegador y la Compresión Gzip.

El tutorial…

En resumen, usando sus indicaciones hacemos lo siguiente:

1. Entraremos al panel de Plesk Onyx
2. Vamos a la suscripción que queremos optimizar
3. Dentro de sitios web y dominios le damos a la opción de “Configuración de Apache y Nginx“,
4. Dentro nos vamos a “Directivas adicionales de Apache HTTP y HTTPS” y copiamos ahi:

<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>

Después de pegar el código, bajamos un poco y en el apartado de la configuración para Nginx, activamos las casillas:

• Modo proxy
• Procesamiento inteligente de archivos estáticos
• Servir archivos estáticos directamente mediante nginx
• Activar copia en caché nginx

Y por ultimo donde dice Directivas adicionales de nginx pegamos el siguiente código:

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;

Y los plugin’s

Ojo que esto no termina aquí, ya tenemos hecho lo que corresponde dentro de nuestro Plesk Onyx, ahora debemos instalar en WordPress los siguientes Plugin’s:

• WP Super Cache Versión Que nos creará la “Cache servidor”
• Autoptimize que nos permitirá “Minificar” nuestro WordPress

Detalles de los plugins mañana 😀

Con esto tan sencillo logramos tener nuestro WordPress dentro de Plesk Onyx Optimizado, lo que quiere decir que hemos logrado:

• Dar una primera impresión positiva, porque nuestra web cargó rápido y sin problemas.
• Seremos amigos de Don SEO, porque ve que nuestra web esta Optimizada.
• Don SEO, nuestro reciente amigo, ayudará a los motores de búsqueda a llegar a nuestra web.
• Cuando algún usuario ande por ahí dando vueltas, nuestro amigo Don SEO lo llevará de la manita a través de las búsquedas para que llegue a nuestra web.
• Don SEO le hablará bien de nosotros a sus amigos los BOTS y les mostrará qué el tiempo de carga de nuestra web es Óptimo.
• Estos amigos los BOTS ya conocen nuestra web y la comenzarán a recomendar y a indexar en los motores de búsqueda.
• Y lo mejor de todo es que ha nacido una historia de amor… porque Don SEO es un enamorado de WordPress (y de los demás CMS, el muy bandido!)

Los resultados

Antes de comenzar con este tema, hice mis respectivas pruebas y el resultado que me dio fue excelente… Use un web con poco contenido y poco archivos, pero no era una instalación nueva. Use las siguientes web’s para probar la velocidad y el rendimiento: Test my site de Google y GTmetrix

Antes de optimizar

En total la web tarda 4 segundos en cargar, y usando una conexion 3G es «Bueno» el detalle es que por este tiempo de carga Google estima que el 10% de nuestros visitantes se irán porque tarda mucho 🙁

Con GTMetrix, tenemos mas datos, pero para no hacer mas largo este episodio, tenemos una categoría B en Page Speed Score, y una categoría D en YSlow Score

Después de Optimizar

Vemos un gran cambio, en el tiempo de carga, lo que da como resultado que menos usuarios abandonen la web, y subimos en cada categoría de GTMetrix.

Los resultados dependiendo del tipo de web, puede variar, pero con todas las pruebas que he hecho siempre se logra una mejoría notable 😉

Si queres empaparte mas sobre SEO te recomiendo dar un vistazo a: The Ultimate List of Reasons Why You Need Search Engine Optimization y si no te va muy bien el ingles, el post obligatorio es: ¿Qué es el SEO y por qué lo necesito?

Si queres ponerte en contacto conmigo, podes escribirme en mi Formulario de contacto aquí en la web 😉