Consejos para que nuestro blog cargue más rápido


Escrito por Álvaro Paricio

Hasta ahora en esta serie de tutoriales para Blogger hemos hablado mucho de temas que tienen que ver con la estética del blog. Por ejemplo, cómo integrar Twitter en el blog, añadir páginas estáticas, cambiar la cabecera de Blogger o modificar el tema de Blogger. Pero hoy vamos a cambiar, vamos a hablar de aspectos más internos de nuestro sitio.

Una de las cosas más importantes en nuestro blog a parte del contenido y la estética, es el hecho de hacerlo más atractivo para los lectores. Y una buena forma para conseguirlo es consiguiendo que cargue lo más rápido posible.
Los blogs que tardan una eternidad en cargar ya los miramos con otros ojos de primeras, y ese es un muy mal síntoma si queremos enganchar a nuevos lectores y mantener a nuestros fieles seguidores.

La mismísima gente de Google nos da los siguientes consejos para que podamos agilizar la carga de nuestro blog de Blogger.

Número de posts en la página principal

Desde Google nos recomiendan mostrar como máximo 10 posts en la página principal. Es obvio que cuantos menos artículos mostremos en la primera página menos tiempo tardará el blog en cargar.
Para hacerlo nos dirigimos a “Configuración – Formato” y elegimos como máximo 10, como ya hemos comentado.

posts en blogger

JavaScript y links

Como es lógico, nos recomiendan que si queremos meter códigos de JavaScript y links utilicemos los widgets de Blogger. Pero si queremos utilizar JavaScript externos (de third parties que se llaman) nos aconsejan que los pongamos en el pie del blog, y si los tenemos que poner en la barra lateral, que los pongamos lo más abajo posible en la barra.

Imágenes, vídeos, etc…

Cualquiera sabe que cuantas más imágenes y vídeos tengamos en el blog y en los posts más tardará en cargar. Y que cuanto más tarde el blog en cargar, menos interesante o apetecible les parecerá a nuestras visitas. Sin embargo, el incluir en los posts imágenes, vídeos o presentaciones es una muy buena forma de hacer el blog más atractivo y que se vea mejor a primera vista, así que tendremos que conseguir mezclar ambas cosas.

Para ello nos aconsejan disminuir el tamaño de las imágenes al mínimo posible mientras sean visibles y no se vean pixeladas.
Si utilizamos imágenes de otros sitios, nos aconsejan que las subamos a los Web Albums de Picasa.
Si tenemos un gran número de imágenes que mostrar (de un viaje por ejemplo), nos vuelven a aconsejar que las subamos a Picasa y que pongamos un link al álbum en el post o en la barra lateral.

Otras sugerencias

Si hemos utilizado CSS propio, lo mejor es incluirlo al principio de la página.
También nos tendremos que fijar en qué elementos son más importantes de nuestro blog y queremos que carguen más rápido o incluso antes que el resto.
Para ello nos aconsejan utilizar Stopwatch.
Gracias a esta herramienta, simplemente introduciendo en la web la dirección de nuestro blog nos dirá el tiempo que tarda en cargar el blog y veremos un contador de tiempo en el que nos podremos fijar lo que más tarda en cargar y cuantos segundos le lleva.
Una vez con esos elementos identificados, podemos proceder a aplicar los trucos que acabamos de explicar.

Estos son los consejos que nos dan en Google para agilizar la carga de nuestros sitios de una forma muy sencilla y sin meternos en cosas muy complicadas.

En general, algunos de los trucos que se presentan aquí podrían no ser aplicables a todos los blogs, principalmente porque, en algunos casos, el servicio de hosting no tiene activada, o no es posible activar, ciertas características en sus servidores.

HTML

El HTML

Gran parte del contenido de nuestros artículos estará en HTML. Lo más importante en este caso es activar la compresión de HTML. ¿Qué es esto? Nuestro servidor web, es capaz de enviar el contenido de forma comprimida por la red, en formato GZIP, como un ZIP para los ficheros. Es decir, antes de enviar por la red el documento, lo comprime, y nosotros recibimos un archivo GZIP, que nuestro navegador descomprime y convierte en HTML legible. Este formato está soportado por todos los navegadores modernos, así que lo podremos usar siempre sin problemas.
Por supuesto, esto acelera la descarga y ahorra ancho de banda de nuestro servidor de hosting. Con pocas visitas, puede ser irrelevante, pero en un blog con miles de visitas, tiene mucha importancia.

Contenido

Todo el contenido de nuestro blog es susceptible de aplicar una serie de buenas prácticas que mejoran mucho la carga de las páginas:

  1. Hacer menos peticiones HTTP
  2. Reducir las búsquedas de DNS
  3. Repartir la carga entre varios dominios
  4. Evitar las redirecciones y los 404’s

Servidor Web

Una buena parte de las optimizaciones que podemos hacer en nuestro blog, se harán a nivel de nuestro servidor web. Las más importantes son:

  1. Usar una CDN (Content Delivery Network). Esta opción no está al alcance de cualquiera y en muchos casos exigirá un pago por su uso, que no todos los bloggers se pueden permitir. La ventaja al usar una CDN es que el contenido está repartido entre servidores geográficamente dispersos por todo el mundo, con lo cual el tiempo de descarga de los elementos mejora notablemente. Una CDN gratuita es CoralCDN.
  2. Añadir cabeceras de caché. Todo el contenido de un blog no es igual. Habrá elementos que no cambien nunca o casi nunca (cabecera, iconos, fondos, etc..) , mientras otros lo harán cada muy poco tiempo o a diario (comentarios, posts, búsquedas…). Podemos mejorar mucho los tiempos, añadiendo una etiqueta en la cabecera de los archivos que se descarguen, indicando el periodo de validez del mismo. Por ejemplo, el JPG de nuestro logo podría durar muchos meses o años, y podemos decir a nuestro servidor que “Never expire”, es decir, que nunca caduque. Esto hace que cuando un usuario que ya haya visitado nuestro sitio, vuelva, no tenga que descargarse la imágen porque ya la tendrá en su caché del navegador (siempre que no lo haya borrado claro). Para el caso de otros contenidos, deberíamos estimar el tiempo razonable de expiración. Por ejemplo, los posts más antiguos, no deberían variar mucho, por lo que se podría alargar su tiempo de cachedado. Los comentarios y/o búsquedas, no. Más adelante en la sección de PHP veremos más sobre esto. Otra forma de gestionar las cachés es a través de las etiquetas ETags, pero es un tema algo más avanzado.
  3. Evitar poner imágenes con src=””, o con JavaScript img.src = “”. En ambos casos, la mayoría de los navegadores harán una petición al servidor para buscar algo que no existe o que ni siquiera se va a mostrar. Esto puede provocar gran cantidad de peticiones innecesarias. Aquí tenéis una explicación más en profundidad sobre el tema (en inglés).

Archivos CSS

  1. Compresión. En cuento a los archivos de estilo tambien se puede y debe aplicar la compresión. Además, podemos minimizarlos (del inglés minify). Es decir, simplificar el contenido del fichero, eliminando espacios en blanco, tabulaciones, comentarios, etc… Esto es muy fácil de hacer. Puedes optar por minimizar los archivos manualmente y luego subirlos, o bien usar PHP, para que los minimice. Hay muchas herramientas para automatizar esto Minify de Google, Yahoo UI Compressor, y si hacéis una búsqueda en Google encontraréis muchas más.
  2. Poner los estilos al principio. Las hojas de estilo, es decir, los archivos CSS, se deben colocar siempre al principio de la página HTML. Esto se debe a que los navegadores van leyendo la página de arriba a abajo, y si encuentran el estilo al principio, pueden ir renderizando la página conforme a lo que pone el CSS. Así el usuario recibe un aviso visual, de que la página se está cargando correctamente.

JavaScript

Para JavaScript, las mismas reglas de minimizar y GZIP se pueden y deben aplicar, pero además tienen unas características propias:

  1. Poner los scripts al final. Muy importante. El HTML 1.1 limita la descarga en paralelo de más de dos archivos a la vez. Al poner todos los js al principio se bloquea la descarga en paralelo de otros elementos de la página. Cuando se descarga un js, el resto de archivos HTML, CSS, imágenes, se quedan a la espera de que el JS termine.
  2. No incluir nunca archivos JavaScript (y CSS) dentro de las páginas. Al poner javascript dentro del HTML, mezclado, se impide la posibilidad de cachear estos archivos. Es decir, cada vez que carga la página, se vuelven a cargar los scripts y los css. Si se llevan a archivos externos (.js y .css) el navegador los puede cachear y evitar que se descarguen siempre. No solo reduce el tiempo de cargar, sino que nos ahorra ancho de banda de nuestro proveedor.

blogging

Imágenes

En este caso, a diferencia de los archivos CSS y JS, hay que tener en cuenta otras consideraciones. Las imágenes ya estarán comprimidas y la optimización tiene que seguir otros caminos.

  1. Formato de la imágen. Es muy importante saber elegir el formato adecuado para cada imágen. Cada compresión (GIF, JPEG, PNG) tiene un tipo de imágen para el que es más óptimo. Por ejemplo, GIF se debería usar en rótulos, o con imágenes con poca variación de colores. JPEG, para fotografías o imágenes con mucha variación de color, siempre que no se necesite transparencia. Por último, PNG de 8 ó 24 bits, para imágenes tipo fotografía que necesiten transparencia. Entrar en detalles se llevaría un post entero, pero las normas generales serían estas.
  2. Ajustar las imágenes a la paleta de colores que realmente usan. ¿Tu imágen GIF tiene 4 coleres de 256? Se puede optimizar. Hay muchas herramientas para hacer esto según el tipo de imágen. En imagemagick se pueden encontrar herramientas para optimizar tus GIFs, PNGs y JPEGs.
  3. No escalar las imágenes con HTML. Si se necesita una imágen de 100×100, la imágen original debería tener 100×100 y no 500×500. Si luego queremos mostrar una imágen ampliada hay otras formas, como poner el enlace a la imágen original de mayor tamaño. Así se evitan descargar muchos kbs que no se necesitan.
  4. Usar Sprites CSS. Es mejor cargar un único archivo de imágen con todos los iconos incluídos en el, que muchos iconos de forma separada. Luego a través de CSS, podemos ir seleccionado por programación aquellos iconos que se deben mostrar en cada caso.

PHP/MySQL

En este caso las opciones de optimización han de ser aplicadas en el servidor a través de módulos de PHP/MySQL. Hay que tener en cuenta que PHP interactuará con una base de datos de la que extrae la información, ya sean posts, comentarios, etiquetas, búsquedas, etc… Por tanto, todo aquello que evite las peticiones a la base de datos harán que nuestros posts se muestren más rápidamente. El principio general es como el de la energía “la consulta más rápida a una base de datos es aquella que no se hace”. La puesta en práctica de las siguientes recomendaciones dependerá del tipo de hosting que tengáis:

  1. PHP Flush. Las páginas en PHP tardan un poco en ser procesadas, y hasta que no lo hacen no se envían desde el servidor a nuestro navegador. En PHP hay una orden <?php flush(); ?> que obliga al servidor de PHP a enviarnos todo lo que esté por encima de esta orden. Lo ideal es ponder el flush, justo después de la etiqueta HEAD para que de esta forma nuestro navegador pueda empezar a representar los estilos y que el usuario vaya viendo algo.
  2. Desactivar las revisiones de las entradas. Esto puede ser útil en blogs con muchos editoes. Con un solo editor, y un par de revisiones bastan. Recordad. Cada revisión se guarda en la base datos y hay que consultarla. Un plugin para hacerlo cómodamente es Revision Control. También se pueden eliminar por completo las revisiones poniendo define('WP_POST_REVISIONS', false); en el archivo wp-config.php.
  3. Activar el cacheado del opcode en PHP. Hay muchas peticiones de PHP que siempre son las mismas, de formas que podemos optimar el opcode (pseudo-código que usa PHP) para tenerlo ya preparado. Se puede hacer con eAccelerator v0.9.5.

En general, debemos revisar con mucho cuidado todos estos aspectos del blog para ver cuáles están afectando al rendimiento. Cuanto menos mejor. Menos plugins, menos entradas en la cabecera, menos textos, imágenes más pequeñas… Si no se necesita, no se debería ver ni descargar. Recargar una página en exceso, además de afectar al estilo, nos puede penalizar mucho el rendimiento, y el bolsillo si tenemos contratado un ancho de banda fijo.

http://www.bloguismo.com/

Reblog this post [with Zemanta]
About these ads

Etiquetado:, , , , , , ,

Un pensamiento en “Consejos para que nuestro blog cargue más rápido

  1. Bitacoras.com 20 abril 2010 en 19:03

    Información Bitacoras.com…

    Valora en Bitacoras.com: Escrito por Álvaro Paricio…

Los comentarios están cerrados.

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.661 seguidores

A %d blogueros les gusta esto: