Google PageSpeed Insights: Cómo aumentar la puntuación de tu WordPress, parte III (Final)
Evita los redireccionamientos a páginas de destino
Este es uno de los puntos «fáciles». Tenemos que evitar redireccionamientos en nuestra página. Un caso típico es tener las versiones de desktop y mobile de la web en dominios distintos:
mipagina.com -> m.mipagina.com
por lo que al acceder desde móvil el usuario sufrirá una redirección al dominio de mobile. Tener una sola redirección sería «asumible» por parte de Google, pero si tenemos más de una, por ejemplo:
mipagina.com -> m.mipagina.com -> m.mipagina.com/home
Google nos penalizaria. En cualquier caso, Google recomienda maquetar con un diseño web adaptable y evitar las redirecciones.
Habilitar compresión
Muchos servidores web admiten la posibilidad de comprimir el contenido antes de enviarlo al navegador. Si el navegador solicita un contenido adjuntando esta cabecera:
Accept-encoding: gzip, deflate
el servidor «sabrá» que el navegador acepta compresión, así que buscará el contenido solicitado, lo comprimirá en zip, y lo enviará al navegador. El navegador lo descomprimirá y mostrará al usuario. Todo este proceso será mucho mas ràpido que una descarga sin comprimir. No podemos controlar si el navegador del usuario soportará compresión o no, pero si podemos configurar el servidor para que envie el contenido comprimido en caso de que así sea. Lo podemos hacer «a mano», pegando estas lineas en nuestro htaccess:
|
1 2 3 4 5 6 7 8 9 10 |
<IfModule mod_deflate.c> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> |
También podemos hacerlo utilizando el W3 Total cache. Simplemente marcamos la casilla
Browser cache ->
Y el plugin editará el htaccess por nosotros.
Minificar CSS
Minificar es eliminar el contenido innecesario de nuestro código (espacios adicionales, saltos de linea, etc…)
En el caso del CSS, la mejor forma de hacerlo dependerá de nuestra forma de trabajar.
-Si lo queremos hacer a mano, podemos buscar la forma de hacerlo desde nuestro editor de texto (Sublime tiene varios plugins) o utilizar algún servicio online para minificar nuestro css y luego subirlo al servidor. Por ejemplo este. Esta forma sería la menos recomendable ya que tendremos que repetir el proceso cada vez que hagamos un cambio en el CSS.
-Si utilizamos un preprocesador CSS, como SASS o LESS, en las opciones de compilación podemos definir que queremos el CSS final minificado.
-Y por último, lo mas cómodo es hacerlo mediante el W3 Total Cache, marcando la casilla
Minify -> CSS minify settings -> Enable
Minificar HTML
Para solucionar este punto dentro de WordPress lo mas sencillo es utilizar un plugin. Lo podemos hacer con el W3TC, marcando la casilla
Minify -> HTML minify settings: -> Enable
Minificar JavaScript
Al igual que con el CSS, también podemos hacerlo desde nuestro editor de texto, o mediante algún servicio web, o utilizando el W3TC, marcando la casilla
Minify -> JS -> Enable