Mejorar el tiempo de carga de una web

Después de hablar sobre la entrada  “el tiempo de carga mejora el posicionamiento” creo que es bueno comentar cómo reducir el tiempo de carga de las plantillas de WordPress.

Trataremos WordPress porque es el más usado, pero los consejos son aplicables para cualquier CMS o incluso para una web estática.

 

Usar cache del navegador para reducir el tiempo de carga

Medir tiempo de cargaEl navegador de los visitantes almacena datos de los sitios Web que visita de forma predeterminada, el tiempo que el navegador mantiene esos archivos temporales puede ser determinado por la Web.

Utilizaremos una configuración que personalmente me ha funcionado muy bien, haremos que las imágenes se mantengan por 3 meses en el cache del usuario (ya que no se suelen cambiar muy a menudo), guardaremos también el resto de archivos de nuestra Web durante una semana e indicaremos no almacenar archivos dinámicos.

Para configurar la cache del navegador como hemos indicado anteriormente agregaremos las siguientes líneas al archivo .htaccess, recomiendo hacer una copia de seguridad del archivo por si la liamos parda.

Las líneas son las siguientes:

#cache images for 3 month

<FilesMatch “.(gif|jpg|jpeg|png|flv|swf|ico)$”>

Header set Cache-Control “max-age=7257600, must-revalidate”

</FilesMatch>

# cache everything else for 1 week

<FilesMatch “.(js|css|pdf|txt|html|htm)$”>

Header set Cache-Control “max-age=604800, must-revalidate”

</FilesMatch>

# disable caching for dynamic files

<FilesMatch “.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

Comprimir imágenes

Uno de los elementos que más pueden aumentar el tiempo de carga de una Web son las imágenes.

Para optimizar imágenes te daré una buena serie de consejos:

  1. Recortar imágenes: Si por ejemplo una imagen va a ocupar un espacio de 500 pixeles de ancho y 300 de alto, recórtala a ese tamaño con Photoshop. Tienes un tutorial sobre cómo realizar esto en este enlace.
  2. Optimizar imágenes con Photoshop: Una imagen que se va a utilizar en una Web no tiene que tener la misma calidad que si se fuese a imprimir. Recomiendo optimizar las imágenes con Photoshop, para realizar esto se puede hacer con “Archivo – Guardar Web”.
  3. Optimizar imágenes online: Existen herramientas muy buenas que reducen considerablemente el tamaño de una imagen online, una muy utilizada es Kraken.
  4. Optimizar imágenes de la plantilla: La mayoría de plantillas contienen imágenes que se cargan con cada impresión, los autores de estas casi nunca optimizan las imágenes, recomiendo hacerlo como comentamos anteriormente.
  5. Insertar las imágenes del tema mediante las hojas de estilo: Las imágenes del tema deben de insertarse mediante las hojas de estilo, de esta manera cargan más rápidamente.

Comprimir y juntar hojas de estilos

Las hojas de estilos se utilizan para dar formatos a tablas y divs generalmente reducen la carga del sitio, pero debes de procurar juntar todas las hojas de estilos en una y optimizarlas.

JavaScript

Es importante utilizar el JavaScript lo menos posible y en caso de usarlo juntarlo todo en un único archivo e insertarlo todo al justo antes de </body>

 

 

Tutorial: Cómo mejorar la escritura en internet

Introducción

En la web no es posible leer igual que en el papel. La resolución de pantalla y el brillo hace que nos cueste leer mucho más que si leyeras en un papel el internauta no leerá textos largos, el recorrerá la página mirándola por encima.

Leyendo en la pantalla del ordenador tenemos estos problemas:

  1. La velocidad de lectura se ve reducida un 25%
  2. A los usuarios les es más difícil leer textos largos.
  3. La atención se ve distraída por otros elementos de la web.
  4. A la vista le cuesta concentrarse en un texto.

El usuario al entrar en nuestro sitio web buscara textos cortos, que van al grano como se suele decir.

Sigue leyendo

Usabilidad en los textos de la web

Muchas veces, al intentar mejorar la usabilidad de una web en menús y plantillas de la web  nos olvidamos de lo que realmente importa mejorar. Los textos, todos estamos de acuerdo en que es lo más importante.

Pero ha habido webs (sobretodo foros) en los que era imposible leer el texto, por lo cual abandono  la página al instante. A continuación os dejo la mayoría de errores.

Errores tipográficos

  • Variación del tipo de letra: Un sitio web no puede contener más de 3 tipos de letra diferentes. También tienes que elegir un tipo de letra que se adapte a tu temática no puedes usar la letra Comic Sans para un blog de informática por ejemplo.
  • Errores de tracking: Este error es muy común cuando usamos la herramienta para justificar el texto. Este consiste en que se crean espacios la mayoría de veces de gran tamaño.
  • Abuso de la negrita: Es muy común usar la negrita para grandes textos, esta dificulta la lectura, úsala para destacar palabras y para títulos. No la uses si no es necesario.
  • Abuso de la cursiva: Lo mismo que con la negrita, solo usarla para poner nombres de libros, nombres científicos, etc.
  • Abuso del light: Esta es como la del texto normal pero más fina. Yo no la usaría para nada.
  • Abuso de las mayúsculas: Este debe de ser el error más común es prácticamente ilegible, por no habar que en algunos tipos de letra ya es difícil de leer la primera letra.

Tipos de párrafo

  • Párrafo ordinario: Es un párrafo normal pero que usa la sangría. Se puede usar para cualquier sitio web.
  • Párrafo moderno: Es un párrafo normal sin sangría. Se puede usar para cualquier sitio web.
  • Párrafo en bloque: Es un párrafo al cual le aplicamos la herramienta para justificar. Se puede usar para cualquier sitio web.
  • Párrafo alineado a la izquierda: Como su nombre indica es un párrafo que está alineado a la izquierda. Se puede usar para cualquier sitio web.
  • Párrafo centrado. Consiste en centrar el texto. No usar más de una línea.

20 Consejos para mejorar la usabilidad

Estos son unos consejos básicos para mejorar la usabilidad de tu web, portal o sitio.

  1. Poner las categorías en la izquierda.
  2. Poner los enlaces de color diferente al texto y si puede ser subrayado.
  3. No justificar el texto.
  4. No abusar de las mayúsculas.
  5. Evitar las faltas de ortografía.
  6. Ponerle a los buscadores o formularios un botón para enviar. Sigue leyendo

Cómo calcular la usabilidad

En webs con pocas visitas la única salvación son las impresiones que se realizan, no es lo mismo una persona que llega a una web y clica en su navegador la flecha atrás y se va que una que genera más de una impresión.

Las estadísticas que usamos para calcular la usabilidad son:

Sigue leyendo