La Optimización de sitios web es una parte importante del SEO (Search Engine Optimization) porque el tiempo de carga de páginas y la velocidad son factores que definen el rango en los resultados de búsqueda de Google. La reducción de tamaño de página y la disminución de los tiempos de carga para ayudar a minimizar la carga en los servidores, mejorar la experiencia de navegación de sus visitantes (porque los visitantes no tienen que esperar mucho tiempo para cargar las páginas), y aumento de PageRank (ya que Google controla la velocidad de la página).

El resultado de un tiempo de carga de página rápido representa un porcentaje de abandonos inferior, mayor compromiso, más conversiones y más ingresos.

Mientras que usted puede ser consciente de que hay un montón de SEO en línea y herramientas para medir la velocidad de la página para ayudar a mejorar el SEO , incluyendo el uso de la excelente herramienta PageSpeed Insights de Google, se necesita más que herramientas de software para optimizar un sitio web.

Lo Que Se Espera Al Optimizar Sitios Web

Los objetivos generales de optimización de sitios web son los siguientes:

• Aumentar la eficiencia
• Aumentar la velocidad
• Disminuir el tamaño de la página
• Disminuir las peticiones

Esta lista de los mejores consejos de optimización web está destinada a ayudarle a hacer todo lo anterior con poco esfuerzo. En particular, estas sugerencias de optimización le ayudará a adoptar nuevos métodos de diseño web para ayudar a optimizar y acelerar tus páginas web.

1. Intercambio CSS3 para imágenes

CSS3 puede imitar muchos efectos de diseño que eran hasta hace poco, sólo posible con imágenes PNG con fondo transparente.

La siguiente imagen es bastante grande (aproximadamente 30Kb), pero demuestra a las características que los archivos PNG son buenos, es decir, transparencia y rendición de fondo liso y de alta calidad para cosas como el abandono de las sombras:

30Kb es más grande que la mayoría de las páginas web que tenia que usar este tipo de imagenes. Pero ahora es posible obtener los mismos efectos, similares o mejores con CSS3. Aquí está una imagen JPG del mismo ebook:

Esta imagen es de sólo alrededor de 6Kb, que es un tamaño mucho más aceptable. El problema es que las imágenes JPG no tienen transparencia y no puede manejar el abandono sombras suaves, así como archivos PNG.

CSS3 puede ayudar a salvar el día. Al envolver esta imagen en un contenedor div y aplicando una rotación, así como una sombra:

[code lang=»css»]
.ebook{

-moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-box-shadow: 1px 1px 5px 1px #555;
box-shadow: 1px 1px 5px 1px #555;

}
[/code]

se puede obtener el efecto deseado en una pequeña fracción del tamaño:

La imagen final utilizando CSS3 para transformar y dar una gota de sombra y se carga 5 veces más rápido que la imagen original PNG. Además, también es posible añadir efectos a la sombra paralela con transiciones CSS – muy útil si la imagen se utiliza como un enlace.

Pase el ratón sobre la imagen final de CSS3 para ver el efecto de transición de sombra. Esto es algo que es muy difícil de reproducir imágenes utilizando la página si la velocidad es algo que te importa.

2. Añadir y comprimir los archivos CSS y JS

Todos los objetos que se deben descargar de un servidor con el fin de crear con éxito una página web requiere al menos una solicitud de ida y vuelta desde el navegador al servidor y viceversa. Esto crea una latencia significativa en los tiempos de carga de página.

La reducción del número de peticiones al servidor es por lo tanto una buena idea.

Una de las mejores maneras de reducir el número de peticiones al servidor es agregando archivos. Es posible la suma de imágenes en una sola (llamado un sprite), pero más comúnmente, se refiere a la combinación de uno o más archivos CSS en un único archivo CSS, o la combinación de uno o más archivos JavaScript en un único archivo JavaScript.

Muchas plataformas para sitios web dispone de carpetas para los archivos CSS y JS, y lo más probable es que usted no tendrá que hacerlo manualmente (y también puede evitar cualquier codificación).

3. Eliminar CSS y HTML no utilizado

Muchos sitios web CMS proporcionan clases CSS y id para ayudar a los diseñadores de estilos modificar rápidamente un tema para un sitio web. Estas modificaciones pueden añadir una longitud significativa a los archivos CSS, y en general son totalmente innecesarios.

Además, las páginas web automatizadas comp los CMS y constructores de sitios web pueden usar codigo HTML derrochador y un montón de DOM (Document Object Model) y elementos que han sido generados automáticamente.

En general, hacer el CSS lo más ligero posible mediante la eliminación de la clases no utilizadas y las declaraciones de ID, y la combinación de declaraciones similares en uno.

Hacer un código HTML conciso y ligero como sea posible, reduciendo el número de elementos.

4. El uso de Google Analytics

¿Cuándo instalar Google Analytics? Si se trata de más que unos pocos años atrás, lo más probable es que usted está utilizando una versión no asincrónico del Google Analytics que está retrasando la finalización de cada carga de una sola página en su sitio.

No dé por sentado que los widgets y botones proporcionados por las redes sociales y otros sitios web están bien diseñados. Muchos de ellos pueden ralentizar seriamente su sitio.

5. Aplazar la carga de JavaScript

Si tiene que usar JavaScript, entonces es una buena idea postergar la carga de este código hasta después del evento de carga de página se ha iniciado. Google actualmente proporciona un script que puede ser de gran ayuda:

[code lang=»js»]
<script type="text/javascript">

// Add a script element as a child of the body

function downloadJSAtOnload() {

var element = document.createElement("script");

element.src = "deferredfunctions.js";

document.body.appendChild(element);

}

// Check for browser support of event handling capability

if (window.addEventListener)

window.addEventListener("load", downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>
[/code]

Esta secuencia de comandos agrega el contenido de deferredfunctions.js al elemento body una vez que se ha cargado.

Simplemente tome todo el código JS que desee aplazar hasta que el evento de carga de página en un archivo JavaScript y hacer referencia a él en el guión aplazamiento (sustituyendo en el archivo de referencia que esta en negrita para reflejar el nombre y la ubicación de su propio archivo JavaScript) que se puede copiar y pegar en el head de la página.

JavaScript que de otro modo podrían bloquear otros elementos de página cuando carga, ahora sólo carga una vez en el elemento body de la página. Dado que este es como los navegadores y Google utiliza esto para determinar cuando una página se ha cargado, ya no importa el tiempo que tarda en cargar el resto del archivo JS (siempre y cuando no afecte a la experiencia de navegación de sus usuarios).