Cómo optimizar el contenido de una web

¿Cuántas veces te has preguntado a mitad de un artículo o el desarrollo de una web, si todo estará en su sitio y bien optimizado? Seguro que no pocas. En esta entrada te explicaremos cómo optimizar el contenido de una web para que la carga sea lo más fluida posible.

Adentrarse en un desarrollo árido o escribir un artículo puede convertirse en algo tedioso si no sabes cómo (no ponemos en duda tu capacidad de desarrollo o “lírica”, claro), y por supuesto, a nadie le gusta ver su trabajo mal posicionado. Es por ello que vamos a darte unas pautas a fin de que te sirvan de “salvavidas” en el mar angosto en el que puede convertirse una optimización a ciegas.

Un lector siempre va a ser exigente con lo que lea en una página, aunque no sea plenamente consciente. Con esto queremos decir que no tendrá miramientos cuando esté leyendo un artículo tuyo y no le guste o no le parezca relevante: irá a otra página. Por eso, a la hora de escribir una entrada en tu blog, debes tener en mente siempre un “esquema”, el cual te ayudará a no desarrollar ideas innecesarias que puedan aburrir al lector. Una vez hecho esto, pregúntate:

• ¿Es todo el contenido necesario?
• ¿Las frases son demasiado largas?
• ¿He puesto suficientes imágenes, con sus epígrafes?
• Si mi contenido es muy extenso, ¿he creado un índice?

Te recomendamos leer tu entrada en voz alta. De ésta forma, sabrás si las frases tienen la longitud adecuada o no. Y para no confundir al lector, procura transmitir una sola idea por párrafo, así se le hará más ameno leerte.

Pero claro, de nada servirán todos nuestros consejos si tu contenido no es de calidad. Por tanto, asegúrate de realizar una buena labor de investigación para evitar cualquier error y que la confianza en tu web se vea comprometida.

Por lógica, un aspecto que deberás tener en cuenta es el tamaño de éstas, ya que si el usuario accede a través de su móvil en la calle, su velocidad de conexión no podrá compararse a la de que nos brinda una red wi-fi y por ende el tiempo de carga aumentará considerablemente.

Además, la mayoría de compañías telefónicas ofrecen un paquete limitado de megas o gigas para navegar. Si quieres cuidar a tu usuario debes partir de la base que tu página debe consumir el mínimo de recursos posible.

Ten presente la siguiente máxima: a más peso, peor posición en los resultados de Google. El buscador por excelencia no dispone de todo el tiempo del mundo para analizar tu web, así que cuanto más ligera sea la tuya, “más arriba” aparecerá. Aquí es determinante la optimización de imágenes, ya que en éstas reside el grueso del tamaño de las páginas web.

Usando el formato adecuado para cada imagen, y exportándolas en formato web (Photoshop nos da esa facilidad) podremos reducir con creces el tamaño de nuestra imagen.

El peso de las imágenes viene determinado por distintas variables, aquí te explicamos cuales son y cómo incidir en ellas:

• Resolución y tamaño: El número de píxeles que contiene una imagen es el primer factor que debemos tener en cuenta para optimizar su peso. Muchas web emplean imágenes en calidad fotográfica que no aportan absolutamente nada y que consumen megas y megas por sí mismas.
  Para optimizar el tamaño de una imagen debemos partir del espacio que va a ocupar. Si es por ejemplo, la imagen de portada de una de nuestras secciones, no será necesario tener una anchura superior a los 1200px.
• Formato: Hay formatos diversos, unos tienen una función, otros otra. Por ejemplo, no debemos usar PNG a no ser que vayamos a emplear transparencias. De igual modo, debemos asegurarnos de que sean formatos que se puedan comprimir. JPG o GIF son dos formatos muy útiles cuando hablamos de optimización web
• Compresión: La compresión es un factor clave al que debemos prestar especial atención. Una vez hayamos editado, escalado y exportado nuestras imágenes con el tamaño correcto, deberemos comprimirlas.

A continuación os dejamos unas cuantas herramientas que nos permitirán comprimir nuestras imágenes de manera profesional, reduciendo hasta en un 90% su peso:

• TinyPNG: Esta aplicación online gratuita nos permite subir hasta 20 imágenes con un peso acumulado de 20MB en formato PNG o JPG. La aplicación las comprimirá sin que pierdan nada de calidad de visualización, optimizando su peso al máximo. Se pueden realizar varias pasadas para volver a optimizar el peso.
• Kraken.io: Se trata de una de las más potentes. Es una herramienta freemium online que permite comprimir imágenes en masa. Su versión gratuita es tremendamente completa, la PRO, además, nos permite reescalar el tamaño de las imágenes en ristra y trabajar directamente sobre el contenido de una web a través de su URL.
• RIOT: Aplicación de escritorio gratuita y portable. Permite trabajar con grandes cantidades de imágenes y las comprime al máximo. Ofrece un comparador que nos permite ir variando los criterios de compresión para garantizar el mínimo peso posible sin pérdida de calidad visual.

Por si no fuera poco, cuando desarrollamos una página web, además de darle forma, debemos hacerlo de una manera adecuada, ya que la posición que ocupe en los resultados es algo primordial. Y claro, si conseguimos con esto hacer un código más rápido de cargar, legible y breve, pues tampoco nos vamos a quejar.

Con el principio denominado “minificación de código”, conseguiremos un tiempo de permanencia de usuarios creciente, debido a que nuestra página tardará menos en cargar; por tanto, menos usuarios se irán de nuestra web irritados por la espera. Recuerda que no todo el mundo tiene la misma velocidad de conexión que puedas tener tú.

Aunque todo no puede ser bueno, y por eso la minificación de código tiene algunas desventajas. Ten en cuenta que, al no haber comentarios en tu trabajo, puede complicarse la tarea de depurar tu código, además de que al haber una sola línea, todos los fallos se darán en ésta. Por tanto, te recomendamos tener dos versiones: una para el desarrollo propiamente dicho y otra para tu sitio.

Cuando realizamos el CSS de nuestra página web, debemos considerar dos factores fundamentales: legibilidad y tamaño.

Un css legible es el que está realizado “a nuestra manera”. Con esto nos referimos al código que estamos acostumbrado a ver: el nombre de la clase, seguido por una llave (y su cierre correspondiente), y debajo los distintos elementos a introducir. Un ejemplo:

.clase1{

background-color: yellow;

margin-top: 30%;

font-size: 10%;

}

Como puedes observar, esta es nuestra forma de trabajar con css en nuestro día a día.

En cuanto al tamaño, la explicación es bastante sencilla: cuánto más grande sea el archivo, más tiempo tardará en descargarse. Y aquí es donde entrará en liza la minificación de código: introduciremos todas las clases con sus respectivos elementos en una sola línea:

.clase1{background-color: yellow;margin-top: 30%;font-size: 10%;}

De esta manera, nuestro archivo css verá muy reducido su tamaño y nuestra página cargará más rápido.

Por último, debes saber que hay numerosas herramientas online que hacen este trabajo por ti, así que nunca deberás hacerlo de forma manual (menos mal). Las más conocidas son “CSS Minifier” y “Minify”.

Antes de comenzar a minificar tu código de forma automática, debes tener en cuenta algunos aspectos cuando te encuentres desarrollando tu código (los cuales estamos seguros que conoces):

• No repitas el nombre de tus variables y acorta sus nombres
• Realiza una correcta indentación y, por tanto, no emplees espacios innecesarios.
• Utiliza la estructura DOM

Una vez que tenemos nuestro código base de Javascript bien estructurado y optimizado, iremos un poco más allá. Por ejemplo, una función en nuestro trabajo sería parecido a ésta:

functionleeCaja(caja){

returndocument.getElementById(caja).value;

}

Pues bien, una vez unificado ésto, quedaría así:

functionLeeCaja(caja){returndocument.getElementById(caja).value;}

Igual que en el anterior caso con CSS, existen múltiples opciones para minificarJavascript de forma “online”. Las que usamos nosotros son: jscompress y JavascriptMinifier.

El HTML de nuestra página web es fundamental, y por tanto debemos dotarlo de una buena optimización. Vigila que hayas llevado a cabo los siguientes pasos:

• Inserta el “DOCTYPE” de forma correcta
• Mete todo el contenido en un div maestro.
• Lo más importante, al principio.

A nuestra disposición tenemos distintas herramientas que realizarán estas comprobaciones por nosotros, pero el más conocido es el validador de W3C

Y por último, como no podía faltar, tendremos páginas web que nos minificarán nuestro código HTML, como HTML Minifier.

Si eres cliente habitual de un restaurante, es frecuente que los camareros te reconozcan una vez hayas entrado por la puerta. Así que es normal que “te sienten”  en tu mesa favorita y te sirvan la bebida que siempre pidas. Será un detalle para fidelizarte, y además te ahorrará tiempo.

Esto puede extrapolarse a la optimización de tu página, sobre todo en lo que a las imágenes se refiere. Si desde un primer momento guardas en la caché del visitante las fotos que aparezcan en tu web, la próxima vez que éste entre verá como se reduce de forma contundente el tiempo de carga. Si la carga es ligera, será más cómodo para él, por lo que tendrás más posibilidades de que vuelva de forma habitual.

Podremos hacer que el navegador almacene en caché las imágenes añadiendo una determinada regla en el archivo .”htaccess”. Para ello, puedes usar este código, lo que almacenará en caché las fotos de tu sitio web durante 5 días.

ExpiresActive On

ExpiresByType image/gif A432000

ExpiresByType image/jpg A432000

ExpiresByType image/jpeg A432000

ExpiresByType image/png A432000

ExpiresByType image/ico A432000

ExpiresByType image/bmp A432000

ExpiresByType text/css A432000

ExpiresByType text/javascript A432000

ExpiresByType application/javascript A432000

ExpiresByType application/x-javascript A432000

Si por alguna razón quieres que estas imágenes se almacenen durante más o menos tiempo, es decir, aumentar o reducir el tiempo de expiración, solo debes modificar el código (ese “432.000” que ves son los segundos que tienen 5 días, así que puedes cambiarlo a tu gusto).

Volvamos a tu terreno personal, para que puedas entender rápidamente en qué consiste el término “carga progresiva”. Si entras a una web, y tarda por ejemplo casi diez segundos en cargar (lo cual es una barbaridad), no tendrás piedad alguna en pulsar el botón “atrás” de tu navegador para salir de ese horrible sitio con la sensación de que te han robado el tiempo.

Pero por si fuera poco que tardase tanto en cargar por completo la página, imagina que hasta esos diez segundos no aparece absolutamente nada en la web: solo ves el icono de carga en la parte superior del navegador y la pantalla en blanco. Esa experiencia sería realmente frustrante.

Si ese sitio web fuese el tuyo, deberías usar la carga progresiva, es decir, que aparezcan cuanto antes las imágenes, aunque sea a una calidad baja. Gracias al “formato progresivo” ,  podrás hacer que esas fotos que quieres mostrar vayan aumentando de calidad conforme va cargando la página, de esta forma:

Para guardar una foto en este formato, basta con abrirla en “Photoshop”, y pulsando en la opción “Guardar para web”, pinchar en la casilla “Progresivo”

Y hasta aquí nuestras recomendaciones e instrucciones para desarrollar y escribir de forma optimizada y adecuada. Solo nos queda desearte un buen trabajo y recordarte: una buena optimización te dará más visitas y una página web más profesional y a tener en cuenta.