Mejorar la caché en Wordpress

La caché posiblemente sea el aspecto que peor se optimiza de cara a la creación y mantenimiento de páginas webs, es la gran olvidada de todas los portales y sin embargo conlleva muy poco trabajo y una gran recompensa de cara al posicionamiento y sobre todo, de cara a la mejora de la velocidad de carga.

Como todos sabéis, la caché web, es aquel espacio de memoria que se almacena para reducir el ancho de banda necesario para la carga de una web, es decir, una especie de disco en el que almacenamos la memoria, en forma de imágenes, documentos, etc..., que ayuda a arrancar la web de manera más rápida, sin tener que acceder de nuevo al servidor origen y tener que realizar todas las peticiones cada vez que ingresamos en una misma web.

Pues bien, esta caché, bien optimizada, puede ahorrarnos grandes dolores de cabeza en cuanto a la velocidad de carga de una web se refiere. Vamos a ver como mejorar esa caché para optimizar nuestra web, para ello veremos dos métodos.

1. Mediante plugins
Existen muchos plugins para mejorar la caché de nuestro Wordpress, entre ellos encontramos algunos como WP Super Cache, W3 Total Cache, DB Cache, Hyper Cache, WP-Cache,... Existen tantos y tan buenos que lo mejor es probar y quedarse con el que más nos guste y mejor nos funcione.

2. Con el archivo .htaccess
El archivo .htaccess se trata de un archivo especial que marca al navegador unas pautas a seguir, si conseguimos que este archivo esté todo lo optimizado posible, conseguiremos una caché limpia y que ayude a cargar nuestra web más rápidamente.

Para ello, con el mod_expires de Apache activado, debemos introducir, dentro de los comentarios #BEGIN WORDPRESS y #END WORDPRESS, el siguiente texto:


< ifmodule mod_expires.c > 

 ExpiresActive On

 ExpiresDefault A3600

 < filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)quot; >

 ExpiresDefault "access plus 7 day"

 < / filesmatch > 

< / ifmodule >

  

En este fragmento de código, lo que le estamos haciendo ver al navegador, es que debe guardar todos las imágenes JPG, GIF, PNG y los archivos CSS, ICO y JS, durante 1 hora en la caché. Ten en cuenta que podemos cambiar la duración del guardado cambiando la variable A3600 por mayor tiempo, como pueden ser un día, A86400, una semana, A604800, etc... Por supuesto que también debemos tener en cuenta que el conjunto de archivos pueden variar o que se pueden hacer varias sentencias para englobar con diferentes tiempos a diferentes extensiones. 

Medir la velocidad de carga de una web con Google Analytics

Algo tan importante de conocer como es la velocidad de carga de tu web no podría faltarle al medidor y analizador de visitas más importante de internet como es Google Analytics, por eso, desde hace poco, ha añadido esta nueva función a su elenco de herramientas de análisis.

Pese a que se trata de un producto enormemente conocido y con millones de usuarios, Google no ha incorporado un botón al que darle y esperar los resultados de sus cálculos, sino que tendremos que añadir junto al código del script previamente introducido en nuestro código una pequeña línea para comenzar con la medición.

Previamente, debemos actualizar nuestra cuenta de Google Analytics, si es que no lo hemos hecho ya. Para los que aún no lo han hecho, en la parte superior derecha, junto a los datos de nuestra cuenta, veremos en rojo, algo así como Versión Nueva, hacemos click y ya tendremos la versión necesaria para poder medir la velocidad de carga de la web.

Seguidamente, debemos introducir la siguiente línea de código después de _gaq.push(['_trackPageview']); o de pageTracker._trackPageview();, depende de la versión del código que tengamos:

_gaq.push(['_trackPageLoadTime']); o pageTracker._trackPageLoadTime();

Una vez realizado todo el proceso, guardamos el archivo que hemos modificado y en unas horas, Google Analytics ya estará gestionando los nuevos datos de la velocidad de carga de nuestra web.

Cambiar el porcentaje de rebote de Google Analytics

Aunque el título pueda dar a pensar que hablaré de mejorar el porcentaje de rebote que Google Analytics nos indica en nuestra web, no es exactamente eso, sino que de lo que vamos a hablar, es de modificar el tiempo que Google Analytics tiene como predeterminado para considerar una visita un rebote o no.

Un rebote, en términos de análisis de visitas, es aquella visita que Google Analytics considera que no ha sido fructífera en cuanto a tiempo se refiere o que no ha navegado por otro enlace de nuestra web, pues deja de ser rebote cuando el visitante clicka en cualquier enlace al contenido de la web, ya que Google Analytics necesita ver otra parte de la web para contabilizar el tiempo de la visita. Por ello, esta herramienta no tiene asignada lógicamente un tiempo de permanencia en la web, por eso, vamos a darle un valor de tiempo de permanencia para hacer pensar a Google Analytics como lo haría un humano.

Debemos entender, que no se trata de un hackeo de las estadísticas para poder mirar por encima del hombro al resto, sino que lo que estamos haciendo es darle un rango de tiempo al usuario en el que puede ver nuestra web sin pinchar en otra parte del contenido, pues ha podido encontrar lo que quería. Si el tiempo es menor al establecido, si que lo consideraremos rebote, si sobrepasa a los 10 o 20 segundo, consideramos que se trata de una visita que ha encontrado el contenido que buscaba a la primera.

Para comenzar con la humanización de las estadísticas debemos localizar en el código de nuestra web el script que introducimos de Google Analytics y justo después de _gaq.push(['_trackPageview']);, debemos introducir lo siguiente:

setTimeout('_gaq.push([\'_trackEvent\', \'NoBounce\', \'Over 20 seconds\'])',20000);

En el ejemplo, hemos introducido un rango de tiempo de 20 segundos, pero podríamos cambiarlo por el tiempo que consideremos oportuno. Guardamos y listo.

Una vez introducido este fragmento de código, observaremos en nuestras estadísticas una gran caída del porcentaje de rebote, que nos hará ver unas analíticas más lógicas y humanas.

Visto en: Blog de Pedro Ventura

Page Speed para Chrome

Ya hemos comentado millones de veces que uno de los aspectos más importantes a la hora de posicicionar una web es minimizar el porcentaje de rebote. Para ello, aparte de tener un contenido y diseño atractivo que enganche al visitante, también debemos darle un tiempo de respuesta rápido.

Para mejorar el tiempo de carga de nuestra web existen cientos de aspectos a revisar, que si código optimizado, imágenes optimizadas, poca cantidad de Flash y recargos, mejoras en el caché, accesos rápidos al servidor, etc... Para ello, Google, interesada enormemente en la mejora del posicionamiento de todas las webs, nos brinda una herramienta bastante útil y completa, Page Speed.

Page Speed tiene versiones en modo extensión para los diferentes navegadores, pero también una versión online para realizar el análisis online, pincha aquí. Gracias a su fácil uso, la instalación de esta aplicación se hace necesaria para la correcta labor de los websmaster y administrador de servicios webs.

Para ello, vamos primero con los pasos de la instalación para el navegador Google Chrome:

1. Debemos escribir en nuestro navegador lo siguiente: about:flags.
2. Buscamos la sección API de extensiones experimentales, la habilitamos.
3. Reiniciamos el navegador para terminar la instalación de la extensión.
4. Instalamos el Page Speed en el navegador mediante este enlace: https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dgplegfbjlmmehdoakndmohflojccocli%26uc
5. Dejamos que se instale en Chrome y cuando esté vamos a Herramientas>Herramientas de desarrolladores y lo tendremos disponible en los iconos de la parte superior. 

Para instalar Page Speed en Firefox es aún más sencillo, descargamos el paquete con el programa, damos permiso al navegador para poder instalar la aplicación y ya está instalado y disponible después de reiniciar el navegador.

Después de la instalación pasemos a ver su fácil uso. Introducimos la URL de la web a analizar, vamos a las Herramientas de desarrolladores, seleccionamos la aplicación Page Speed, le damos a Run Page Speed, habiendo previamente seleccionado la parte a analizar de la web, ya sea la web entera, los anuncios, el contenido o los trackers. Y en cuestión de segundos, los resultados, la valoración basada en una escala de 0 a 100 y los detalles de las variables que toma para hacer dicha valoración.

Debajo de cada error, sugerencia o resultado, un amplio resumen de lo valorado. Por ejemplo, mala optimización de imágenes, la propia aplicación nos dice que imágenes tenemos que mejorar, lo mismo ocurre con el resto de sugerencias, ya sean redireccionamientos, caché, código CSS o JavaScript, etc...

Comprime archivos en tu web

Porcentaje de rebote es uno de los términos más temidos por los administradores de webs. Todos ellos saben que cuanto menor sea este mejor, pues es un claro factor de conformidad de los visitantes de nuestra web, por lo que influye directamente en el posicionamiento.

Tal vez, uno de los mayores promotores de un aumento del porcentaje de rebote sea la espera del usuario al entrar en una web. Es desesperante ver como una web tarda una eternidad en cargar, o carga a medias. Por eso, el primer paso hacia una buena web, es tener un acceso y una descarga rápida de los elementos que posee la página.

Ahora es cuando aparecen dos términos relacionados con lo anterior, comprimir y optimizar. Comprimir para que los archivos tarden lo menos posible en descargarse del servidor y optimizar para que la lectura de los componentes sea rápida y provoque una gran satisfacción en el visitante.

Existen muchas herramientas en internet para comprimir y optimizar código. Algunas mejores y algunas devastadoras, que dejan nuestro código con peso pluma, pero sin respetar codificaciones o estándares. Por eso hay que tener cuidado y saber que se está haciendo.

Sepas o no algo de programación web, sobre todo Javascript y CSS, algunas de las siguientes herramientas te pueden echar una mano para mejorar y acelerar la carga de tu web:

• ZBugs: Fácil de usar, introducimos la URL de nuestra web, esperamos unos segundos y nos dará una       rápida respuesta en forma de archivos de Javascript y hojas de estilo de CSS comprimidos y optimizados.
• CleanCSS: No tan simple en el uso, pero no requiere gran cualificación. Copiamos nuestro código de CSS, o introducimos la URL donde la stylesheet se encuentra, procesamos dicho archivo y tendremos un código limpio de CSS.
• ProCSSor: Otra herramienta destinada a las hojas de estilo de CSS, más completa, pues nos da la opción de copiar el código, subir el archivo indicado e incluso de introducir la URL de la web para que el mismo se ocupe de tratarlo.
• Packer: Herramienta destinada a la parte de código Javascript. Copiamos todo el código de JS que queremos optimizar, le dejamos hacer su trabajo y tendremos un código Javascript menos pesado para nuestra web.

Aunque todas estas herramientas online están testadas personalmente y por cientos de usuarios, nunca viene de más revisar el código resultante de la trasformación, pues nunca se sabe donde pueden cometer errores que más tarde pueden dificultar la accesibilidad de nuestra web.

Una manera de validar que los códigos transformados son coherentes y no incumplen ninguna de las normas y estándares, es comprobarlo con el servicio de validación de CSS de W3C, que nos encontrará fallos y errores que tendremos que comprobar para la correcta indexabilidad y funcionalidad de la web.