¿Qué hay que hacer para que nuestra página cargue rápido? (II)

velocidadEn el anterior artículo, empecé dando unos breves consejos para optimizar la carga de nuestra tienda online o página web. En el post de hoy, seguiré dando algunos consejos más sobre este importantísimo tema. Te recuerdo, que el tiempo de carga de una página es muy importante para posicionarse mejor en los motores de búsquedas, y también te ayudarán a generar más ventas.

A continuación vamos a ver una serie de consejos para optimizar tu página:

1.      Aplazar el uso de JavaScript: Es muy recomendable generar la menor cantidad de código JavaScript en nuestra página, sólo debes de utilizarlo cuando sea muy importante y necesario. Con esto lograrás reducir tu tiempo de carga inicial.

2.      Reducción de peticiones HTTP: Para reducir estas peticiones, una de las cosas que puedes hacer es combinar todas las imágenes de fondo de tu página en una sola. Se trata de utilizar lo que se conoce como “CSS Sprites”. Para seleccionar la imagen que necesitas basta con utilizar adecuadamente la propiedad “background-position”. Los activos que están siendo reutilizados en múltiples páginas todas deben consolidarse en sprites y caché.

3.      Optimizar los CSS sprites: Como en el punto anterior te mencione el uso de “CSS Sprites”, te explicaré como optimizarlos y cómo intentar reducir el espacio innecesarios de tu página con la ayuda de este CSS. Puedes organizar las imágenes en el sprite en horizontal en lugar de verticalmente, por lo general resulta en un tamaño de archivo más pequeño. La combinación de colores similares en el sprite ayuda a no tener un grán número de color, el formato de 256 colores puede utilizarse para generar un PNG8. Además no dejes espacios grandes entre las imágenes de un sprite.    css sprite

4.      Intenta reducir tus archivos: Aún recuerdo a mi profesor de programación riñéndome por este motivo, pero a la larga me di de cuenta que tenía toda la razón. Mi profesor siempre me decía escribe el menor código posible, menos es más,..etc. Cuando revisas todo el código de una web o una tienda te das de cuenta que muchas veces te repites o pones cosas que no son de todo útiles. Dónde más se duplica son los archivos CSS y en JavaScript. Por eso te aconsejo que el código sea lo más liviano posible.

5.      Elimina código innecesario: Al hilo del punto anterior, también te aconsejo que realices revisiones cada cierto tiempo para identificar código o comandos que no utilices. A esto se le denomina “Código Muerto”.

6.      No declares vacio el atributo “src”: Nunca declares este atributo y lo dejes vacio, ya que esto provoca que el navegador haga una petición al servidor para nada.

atributo src

7.      Comprensión: Para reducir el tiempo de la respuesta HTTP, se usa la comprensión. Para realizar esto normalmente se usa Gzip para comprimir los recursos, aunque se puede utilizar otros programas.

8.  Comprimir los scripts de Javascript: En el punto 8, te recomendaba comprimir los recursos, y se me olvido poner una parte que es muy importante sí utilizas JavaScript en tu tienda o web. Te aconsejo que unifiques todos los scripts en un solo. Comprimir los scripts es una buena práctica ya que acortas la duración de las peticiones de dichos scripts. Ten en cuenta que un servidor web puede tener muchos usuarios conectados a la vez con lo cual pequeñas acciones como esta pueden producir su beneficio.

9. Declarar las hojas de estilo dentro de la sección Head. Las hojas de estilo pueden declararse en línea, pero para un mayor rendimiento es mejor ponerlas en la sección “head”.

10. Utiliza Scripts de Javascript y CSS externas. Como ya se ha comentado en puntos anteriores, si utilizas CSS y scripts externos al documento, además de lograr una separación de capas, dichos elementos permanecerán en la caché del navegador del usuario sin producir nuevas peticiones, pero además tendremos un documento de html con un menor tamaño. Si declaras en línea todos los scripts de Javascript y CSS tendrás un documento mucho más largo y la carga de la página será más costosa.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s