En Posicionamiento Web Málaga seguimos con la segunda parte de este post sobre cómo mejorar los tiempos de carga de tu Web. Entendemos lo importante que es que un sitio cargue rápido, ya sabes que no solo Google lo toma en cuenta, sino que es básico para evitar un alto porcentaje de rebote. En la primera entrega hablamos de la optimización de contenido, de los servidores, cookies y CSS, ahora podrás leer los últimos tres puntos importantes.
Seguimos con las 7 prácticas para mejorar los tiempos de carga de tu Web
Acelerar tu sitio Web debe ser parte de tus metas, la velocidad con la que carga tu Web es tomada en cuenta por Google como uno de los factores para posicionarte, los usuarios por su parte lo toman en cuenta para decidir si se quedan o no viendo lo que ofreces.
6. JavaSripts
Colocar scripts en la parte inferior de la página.
La primera recomendación en cuanto a los Scripts es que debes colocarlos en la parte inferior de la página, así te aseguras que los recursos no se bloqueen, puedes hacerlo si son diferibles, esto ayudará a que la Web cargue más rápido. Los scripts de JavaScript bloquean las descargas paralelas (es decir, cuando un script se está descargando, el navegador no comenzará otras descargas).
Una alternativa es usar scripts diferibles, el atributo DEFER indica que el script no contiene un document.write, lo que es una pista para los seguidores, y es una pista para los navegadores que puedan continuar prestando. pero, Firefox no soporta el atributo DEFER. En Internet Explorer, si puede ser diferido, pero no tanto como se desea. Si una secuencia de comandos se puede diferir, también se puede mover a la parte inferior de la página. Eso hará que sus páginas web se cargan más rápido.
Que los JavaSripts y CSS sean externos.
Considera si los JavaScript y CSS deben estar contenidos en archivos externos o incluidos en la página en sí misma. Usando archivos externos en el mundo real generalmente consigue que las páginas sean más rápidas, porque estos archivos son guardados en el caché en el navegador.
Los JavaScript y CSS que se colocan en línea en los documentos HTML se descargan cada vez que se solicita el documento HTML. Esto reduce el número de peticiones HTTP que se necesitan, pero aumenta el tamaño del documento HTML. Pero, si el JavaScript y CSS están en archivos externos en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP.
Es importante la frecuencia con la que los componentes externos de JavaScript y CSS se almacenan en el caché en relación con el número de documentos HTML solicitados. Este factor, aunque es difícil de cuantificar, se puede medir utilizando diferentes métricas. Si los usuarios de su sitio tienen múltiples páginas vistas por sesión y muchas de sus páginas reutilizan los mismos scripts y hojas de estilo, hay un mayor beneficio potencial de archivos externos en caché. En este caso, la mejor solución general es implementar el código JavaScript y CSS como archivos externos.
Otras recomendaciones en cuanto a JavaScript es minimizar el JavaScript y CSS, eliminar los scripts duplicados. También es útil minimizar los accesos DOM.
7. Imágenes
Optimizar las imágenes es un punto importantísimo dentro de la estrategia para mejorar los tiempos de carga de tu Web, no hacerlo puede resultar en un sitio Web lento. Al publicar en la Web no tienes que comprometer la calidad, pero es necesario que busques un punto medio entre calidad y peso de las mismas.
Hay dos tipos de compresión con pérdidas y sin pérdidas. La primera significa que no tendrás la misma imagen que la original, pero esos detalles solo se notarán cuando se ve de cerca la imagen, es buena opción porque las imágenes usan una menor cantidad de memoria, y se ven suficientemente bien. La opción sin pérdidas conseguirá una excelente calidad, pero usa una mayor cantidad de memoria, lo que puede no ser bueno para la Web.
Decidir el formato correcto es otro punto importante, comienza seleccionando un formato universal, como GIF, PNG y JPEG, experimenta y selecciona lo mejor de cada uno, como la calidad. Todo dependerá de la necesidad, como animaciones (GIF), transparencias (PNG), fotos y capturas (JPEG). Entonces, la escogencia del formato correcto será la combinación de los resultados visuales que quieras y los requerimientos en cuanto a función.
Optimiza los CSS Sprites, estos son una combinación de múltiples imágenes en un solo archivo de imagen para una Web, lo que permite que cargue más rápido. La historia de los sprites viene de los videojuegos en los años 70, era una técnica de gráficos de computación muy usada.
Básicamente se trata de conseguir la imagen de una vez, rotarla alrededor y solo mostrar partes de la misma, esto reduce los tiempos de carga, ya que no tienen que cargar múltiples imágenes. Puedes preguntarte ¿por qué usar una imagen grande es mejor? Básicamente porque, aunque una imagen grande pese un poco más que la suma de varias pequeñas, cada una significa una petición HTTP, y los navegadores limitan el número de peticiones.
¿Cómo usar CSS Sprites? Configuras una imagen de fondo (background-image) en distintas clases de CSS y configuras la posición y las dimensiones de las clases individuales, para mostrar una sola parte del sprite. Hay otras maneras de hacerlo, esta no es la única, puedes buscar otras opciones en la Web.
Evita escalar imágenes en HTML, esto puede resultar en un consumo de ancho de banda innecesario descargando imágenes más grandes. Escalar imágenes en HTML quiere decir que muchos desarrolladores establecen las dimensiones de los atributos ancho y alto en el elemento HTML de la imagen, al hacerlo puede resultar en gráficas mucho más grandes de lo que las necesitas.
Por último, en cuanto a la optimización de imágenes, no olvides hacer que el favico.ico sea pequeño y cacheable.
7. Optimización móvil
La optimización para dispositivos móviles hoy en día no es una opción, sino una obligación. Una de las mejores opciones es utilizar un diseño responsive, que permitirá que tu sitio Web cargue bien en cualquier dispositivo. Recuerda mantener los componentes en menos de 25KB, esto principalmente para los iPhones, ya que su no cargaran componentes más pesados.
Otra recomendación en cuanto a los móviles es tener un documento multipartes, es como un email sin adjuntos, te ayuda a alcanzar varios componentes con una petición HTTP.
En Posicionamiento Web Málaga hemos llegado al final de nuestra guía para mejorar los tiempos de carga de tu Web, ya tienes una mejor idea de cómo hacerlo y así podrás optimizar tu sitio para que cargue más rápido, así mantendrás contento a Google y a los usuarios que te visitan. ¿Tienes algún otro consejo? Compártelo con nosotros a través de los comentarios.
