Actualmente Google sigue a la caza de las mejores páginas. ¿Y cómo considera qué página es buena y cuál no? El gigante de Google se basa en la experiencia del usuario en la interacción con la página; la velocidad de carga es un signo positivo ya que a los usuarios les gusta y valoran las páginas que cargan rápido y eficazmente. Por este motivo, PageSpeed es importante en el posicionamiento SEO.
La herramienta de Google clasifica tu página entre 0 y 100 en grados de optimización y nos da unos magníficos consejos de mayor a menor importancia, según cantidad de fallos.
Con el objetivo de tener una buena puntuación con Google, haremos un pequeño resumen de cómo interpretar estos consejos. Os los presentaremos según la importancia que tienen sobre nuestra página web.
Habilitar compresión
La compresión usada por nuestro servidor nos ayudará en la velocidad de carga de la página, reduciendo el tiempo de respuesta HTTP, para ello debemos tener en nuestro servidor Apache el modulo activo DEFLATE. Para la compresión tenemos 3 tipos: Deflate, Gzip y Compress. En GMK Unlimited, agencia de marketing online, aconsejamos el modo DEFLATE usado por el modulo de apache.
Optimizar Imágenes
Muchas veces cuando subimos imágenes no caemos en optimizar sus resoluciones, tamaños, entre muchos otros aspectos. No sólo sirve un buen photoshop para tenerlas correctamente, sino que muchas veces debemos tenerlas con una compresión correcta. En este caso podemos usar programas externos como puede ser Radical Image Optimization Tool ( RIOT ) que nos dará las imágenes de una carpeta optimizadas y sólo deberemos sobrescribirlas o el PageSpeed nos dará directamente la imagen optimizada que deberemos guardar y sobrescribir vía FTP.
Combinar las imágenes en objetos móviles CSS
Son mencionados más comúnmente como CSS sprites. Se deben usar siempre que sea posible ya que esto combina imágenes usadas de fondo, de forma que la misma imagen se mapea y se utiliza el área para mostrar la imagen o icono que necesitemos, de forma que se reducen las peticiones HTTP.
Especificar cache del navegador
Este punto es muy frecuente que no lo tengamos presente en la elaboración de nuestro portal, pero forma parte importante para una buena velocidad de navegación y carga de la página. Utilizar el caché del servidor mediante esta mejora evita que las páginas dinámicas tengan que generarse cada vez que sean llamadas. Para ello especificaremos tiempos de carga a las diferentes extensiones, o simplemente a la página en general.
Forma especifica:
ExpiresActive On
ExpiresByType image/png «access plus 1 week»
ExpiresByType image/gif «access plus 1 week»
ExpiresByType image/jpeg «access plus 1 week»
ExpiresByType image/vnd.microsoft.icon «access plus 1 month»
ExpiresByType text/css «access plus 1 week»
ExpiresByType application/x-javascript «access plus 1 week»
ExpiresByType application/javascript «access plus 1 week»
ExpiresByType text/javascript «access plus 1 week»
CacheDefaultExpire 86400
Forma Standard:
<FilesMatch «.(php|html|htm|txt|html5|jpg|gif|png|js|css)$»>
Header set Cache-Control «max-age=604800»
Header set last-modified «Tus May 15 13:00:00 EDT 2012»
</FilesMatch>
<FilesMatch «.(pl|cgi|spl|html)$»>
Header unset Cache-Control
Header unset Expires
Header unset Last-Modified
FileETag None
Header unset ETag
Header unset Pragma
</FilesMatch>
Aplazar el análisis de JavaScript
Las formas de aplazar los análisis de JS, que bloquean la carga de nuestra página, pueden variar dependiendo del tipo de códice que usemos. Podemos encontrar la forma más sencilla como trasladar la carga al final del tag <head>, o al final del documento en el cierre del <body>. Aunque esta forma no es del todo fiable, ahora con HTML 5, podemos usar el tag async y defer. La diferencia entre los atributos asyn y defer es que el primero se ejecuta tan pronto como el script es descargado, por lo que la página puede estar aún descargándose. Una segunda diferencia es que el orden de ejecución para los archivos cargados mediante async no está garantizado. La única garantía es que los scripts async son ejecutados antes del evento load.
Minificar css, Minificar JavaScript y Minificar HTML
Son tres puntos relacionados entre si ya que se basan en la compresión y limpieza de los 3 tipos de código. Comentarios que usamos cuando programamos o espacios innecesarios. Como en otros puntos anteriores podemos encontrar programas que hacen la función de comprimir estos ficheros, o directamente PageSpeed nos da una versión óptima que sólo deberemos sobrescribir al original.
Ofrecer imágenes a escalas
Es posible que muchos consideren este punto menos importante que muchos otros, pero está claro que muchos redimensionan sus imágenes gracias a la fuerza de HTML, PHP o JS. En este caso nos aconsejan dar el formato a la imagen antes de subirla sin necesidad de usar los códigos para redimensionarlas.
Los principales puntos que debemos optimizar en nuestras páginas para poder llegar a valores entre 90-100 son los mencionados anteriormente, aunque debemos decir que podemos encontrar muchos otros que nos irán dando punto a punto hasta poder llegar a los 100.
Otros consejos que iremos viendo son: insertar pequeños recursos JavaScript; insertar pequeños recursos CSS; minimizar redireccionamientos; especificar una cabecera «Vary» con el valor «Accept-Encoding»; eliminar las cadenas de consulta de recursos estáticos; evitar la directiva «@import» en CSS; introducir recursos CSS en el encabezado del documento.
Teniendo en cuenta todos estos consejos que nos ofrece PageSpeed, podríamos llegar en 2 a 3 horas de trabajo a niveles óptimos para Google, y obtener en 2 semanas un incremento en los buscadores considerablemente.
