Tutorial: PageSpeed buen resultado para nuestro WP

  • Autor Autor estudiseno
  • Fecha de inicio Fecha de inicio
estudiseno

estudiseno

Eta
Verificación en dos pasos activada
Verificado por Whatsapp
1+1=2

Como esto son matemáticas vamos a conseguir un 90% o mas, y sino al menos intentarlo. Digo esto por que hay proveedores que no cuentan con alguna tecnologia.

En contra de servicios que se están ofreciendo en este mismo foro vamos a configurar nuestro Wordpress para sacar el máximo partido con pagespeed.

Primero vamos a optimizar de las imágenes. Como yo trabajo con linux, no se si habrá un port a Windows, vamos a instalar trimage, un optimizador de imágenes.

apt-get install trimage

Una vez instalado nos descargamos las imágenes de nuestro sitio y pasamos todas por el programa. Con arrastrar la o las carpetas contenedoras dentro de éste comienzan a optimizarse.


Segundo minificar js y css. Este punto vamos a dar a elegir, o nos descargamos los js y css de nuestro sitio y los optimizamos, por ejemplo con herramientas web (con una simple búsqueda en google nos aparecen varios resultados) o instalamos un plugin como better wordpress minify. Esto es un ejemplo puedes usar otro plugin.


Tercero habilitar compresión. Según que servidor web usemos será de una forma u otra. Como en mi caso uso Nginx en el archvo de configuración dentro de http añadimos:

gzip on;
gzip_disable "msie6";
gzip_static on;
gzip_vary on;
gzip_min_length 256;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;


En apache añadiremos al .htaccess

< ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch #MSIE !no-gzip !gzip-only-text/html
< /ifmodule>



Cuarto establecer caches de estáticos.
En Nginx editamos nuestro virtualhost y dentro de server aadimos:
location ~* \.(jpg|jpeg|png|pdf|gif|ico|css|js)$ {
expires 365d;
access_log off;
}


En apache añadiremos al .htaccess

< ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 31536000 seconds"
ExpiresByType image/gif "access plus 31536000 seconds"
ExpiresByType image/jpeg "access plus 31536000 seconds"
ExpiresByType image/png "access plus 31536000 seconds"
ExpiresByType text/css "access plus 31536000 seconds"
ExpiresByType text/javascript "access plus 31536000 seconds"
ExpiresByType application/x-javascript "access plus 31536000 seconds"
< /ifmodule>
< ifmodule mod_headers.c>
Header set Cache-Control "max-age=31536000, public"
Header set Cache-Control "max-age=7200, private, must-revalidate"
Header set Cache-Control "max-age=31536000, public"
Header set Cache-Control "max-age=31536000, private"
< /ifmodule>

Los 31536000 son segundos que viene a ser un año, es exagerado pero en páginas de alto tráfico cuando no se cambia ni modifica la plantilla constantemente tampoco está de mas.
Una vez echos estos pasos ya hemos mejorado nuestro pagespeed, como es de esperar los templateros de wp no lo tienen en cuenta y no mueven los scripts al final. ¿Por que? Pues no lo sé, pero ahí va el código que uso el cual seguro se lo copiaran estos “maqueteros profesionales”.


Quinto abrimos nuestro functions.php. Copiamos el código que adjunto:

function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');


Nos aseguramos que no esté el código, sino tendremos una página en blanco.


Sexto instalar un plugin de cache. Podéis usar el que más cómodo os resulte. Yo he usado w3total cache, quickcache, supercache,.. y todos si los sabes configurar son buenos por eso a vuestra elección.


Estos cambios se realizan en poco tiempo, los mas costosos son los dos primeros, lo demás un ctrl+c y ctrl+v donde toca.


Si se me ocurre o olvida algo iré añadiendo.


Un saludo.
 
ese tutorial ya esta 😛
 
no entendi nada
 
Apenas entendi el apt-get y solo por que estuve en linux un mes jajajaja
 
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

Si quieres que funcione cambiar todas las palabras "scripts" por "script" sin 's'...
 
La verdad que parte si... pero este es para wordpress ya que veo que cobran por algo demasiado sencillo. Además antes de publicar revise el otro y no vi nada para nginx ni nada de mover los css y js al final de la página propios de plugins que no podemos controlar 🙂 - Añadí lo de apache2 por que se quedara todo en uno 😛
ese tutorial ya esta 😛


Pues será segun plantilla ya que así si que funciona al menos en la mía 🙂
Si quieres que funcione cambiar todas las palabras "scripts" por "script" sin 's'...
 
Excelente tutorial para usuarios avanzados... yo como no lo soy, tuve la suerte de contratarte para optimizar mi server y seguro que ya tengo este tipo de cosas implementadas pues según el test que hicimos en pagespeed nos dio un 89/100... si no fuera por los botones sociales seguro daría más.

Gracias.
 
Que alivio!!!

Por un instante pensé que estaba en otro planeta, al menos puedo darme cuenta de que no soy el único que se quedo diciendo WTF.:encouragement:
 
Gracias por el tuto

Enviado desde mi GT-N7100 usando Tapatalk 2
 
Atrás
Arriba