Escrito por Mejorar la velocidad de carga de nuestro sitio web o blog es un factor importante tanto para nuestro visitante humano como para los robots de los motores de búsqueda, por lo tanto mejorarla nos ayuda con ambos.
Prometí que mi siguiente artículo iba a ser algo bien práctico y aplicable, así que aca van 5 consejos para mejorar la velocidad de carga:
1) Buen Hosting: Aunque parezca algo muy básico es un punto que vale la pena tocar, si tenemos un sitio web pequeño con pocas visitas al día no hay problema con usar servidores compartidos, pero si tenemos un sitio popular con un buen volumen de tráfico lo mejor es un servidor dedicado.
2) Saber cuando usar gif, jpg o png: Jugar con los distintos formatos de imagen hacen que varíen sus tamaños considerablemente.
Es recomendable usar el formato GIF cuando se trata de logos, favicons, texto, etc. que no requieren del uso de muchos colores, cuando guardemos un archivo GIF es bueno asegurarnos que usamos una paleta de colores pequeña.
JPG es un buen formato para imágenes con muchos colores y detalles como fotografías, mientras que el PNG es un formato muy útil cuando necesitamos imágenes transparentes de buena calidad.
3) Más DIVs, menos tablas: Aunque parezca ficción, mucha gente sigue usando tablas para maquetar sitios web.
Cuál es el problema con las tablas?
El problema es que usamos un montón de código para básicamente nada, usar “<td>” y “<tr>” por doquier no ayuda al visitante ni brinda información relevante sobre el tema de nuestra página al motor de búsqueda… por lo tanto solo estorba.
Las capas (o “divs”) cargan mucho más rápido y utilizan menos código.
Ahora bien, si necesitamos hacer una tabla de algo, nada mejor que usar tablas (valga la redundancia), al fin y al cabo para eso siguen existiendo.
4) Mejor codificación: Nada ayuda a mejorar la velocidad de carga de un sitio web que una buena codificación, por suerte la mayoría de los mejores CMS como WordPress, Drupal, Joomla, etc. vienen bastante bien codificados de fábrica.
Si tenemos que desarrollar un sitio desde cero debemos prestar atención a nuestra conexión con la base de datos, si pedimos información que no necesitamos y si nuestras funciones son realmente efectivas.
5) Cache: Esta es una excelente forma de reducir la cantidad de consultas que se realizan al servidor. Simplemente se trata de guardar una versión estática de la página a mostrar y se muestra esa en lugar de la versión dinámica.
Si utilizamos WordPress hay un plugin que realiza todo ese trabajo por nosotros, pueden descargarlo en el siguiente enlace: WP Cache
Si bien estos consejos son básicos, son muy prácticos y nos ayudan a mejorar la experiencia general del visitante y del motor de búsqueda.
Muy buenos consejos. Hay una plugin para Firefox que se llama LORI (Life of Request o algo así) que te dice cuanto tiempo se tarda tu servidor en contestar y cuanto más en descargar toda la página. Es muy útil para darte una idea de donde prestar más atención.
En estos días de conexiones cada vez más rápidas lo que más toma tiempo son las peticiones a los servidores, y éstas se hacen cada vez que la página necesita un elemento nuevo: un gráfico, archivo de javascript, css, etc. Así que si puedes consolidar varios elementos en un sólo archivo y repetirlos en todo el sitio puede que veas una gran reducción en el tiempo de carga.
Gracias por tu comentario Roberto!
Voy a buscar el plugin para Firefox y experimentar un poco con el.
Saludos
El punto 3: las tablas deben usarse únicamente para mostrar datos “tabulados”, esto es redundante lo sé, así que intentaré decirlo de otra manera. Sólo cuando tienes información de la forma filas por columnas, por ejemplo, un listado de productos donde queremos mostrar un id, un nombre, un precio y una foto. Normalmente son el resultado de una consulta a una base de datos.
Esto es un consejo de accesibilidad. Otro es utilizar listas para los menús y formularios (..).
Otro consejo muy muy útil es utilizar librerías públicas para css/imágenes/javascript. En vez de tener el código javascript o las imágenes de iconos/botones en tu servidor, haces referencia a uno público como el de yahoo ui.
Esto hace más probable que el navegante tenga ya cacheados dichos recursos y por tanto no tenga que descargárselos, y si no los tiene, consigues que se lo descargue de yahoo en vez de tu servidor, con lo que reduces la carga de tráfico de tu servidor y aseguras mejor respuesta (vamos a dar por supuesto que yahoo tiene mejores servidores que nosotros :p)
También es útil poner los enlaces a javascript/css etc al final del html en lugar del head, dado que el navegador primero carga el head y luego el contenido del body, si pones al final el javascript el usuario va a cargar primero el contenido y luego los scripts, dando la sensación de que la página ha cargado antes. Por eso no recomiendo cargar nunca estilos css con javascripts.