Optimización de la carga de Sitios Web

Aprende, hoy, aquí Prácticas y herramientas para optimización de la web. ¿Cómo lograr un mínimo de 9 en el pagespeed de Google? ¿Cuales son las mejores prácticas y herramientas?

Primero tenemos que tener claro que la valoración que realice Google sobre nuestro sitio, no significa que sea semánticamente optimizado, solo significa que los elementos que deben estar optimizados lo están y esa es la idea de este post.

¿Qué deberíamos optimizar? todo! pero si tuviéramos que hacer un listado, el listado sería:

El CSS

Lo primero que recomendaría aquí es escribir tu CSS con un preprocesador, yo amo Stylus pero el mercado demanda Sass. Así que con un CSS estructurado, escalable, limpio y ordenado, ya tienes una gran ventaja.

Hecho eso hay dos pasos más:

Critical CSS

El CSS regularmente va contenido dentro de la etiqueta HEAD, sin embargo una de las recomendaciones de page speed es que no tengamos aquí un enlace, recuerda que cada enlace es una petición a los servidores y por lo tanto más tiempo de espera.

Por lo que lo ideal es tener el CSS para lo que en inglés se conoce como “above the fold” la traducción literal no dice nada útil, pero lo que quiere decir es “El CSS indispensable para mostrar la primera impresión en pantalla” de tal forma que mientras el usuario ya “visualiza” contenido, el resto del CSS puede tardar algunos segundos más (¿uno? ¿dos?). Si ya tienes publicado tu sitio puedes revisar tu critical CSS aquí.

Compress CSS

Ahora vamos a comprimir el resto del CSS, un archivo “minificado”, que enlazaremos desde el footer, en mi caso me gusta hacerlo junto a fontawesome y google fonts.

Puedes minificar tu CSS aquí.

Las imágenes

EL peso de las imágenes y las dimensiones adecuadas es vital. En uno de los primeros sitios que hice, el logo era un archivo PNG muy optimizado, pero de dimensiones muy grandes.

Todo debe ser coherente, si el logo no se mostrará en dimensiones mayores a los 80px, ¿Por qué tendría dimensiones mayores?

Para esto puedes usar TinyPNG y TinyJPG y hacerlo desde la nube, con todo a mi me gusta mucho usar FastStone Photo Resize, gratuito, ligero y de muy buen funcionamiento.  Muy completo y totalmente recomendado.

El JS

También podemos comprimir o minificar el Javascript, hago la aclaración que he hecho esto en sitios, sencillos, básicos y todo ha funcionado bien, conforme logré más experiencia puede que regrese a este post y modificar este contenido.

Mientras puedes minificar tu Javascript aquí.

Las fuentes externas.

Ya lo mencione, tu CSS, las fuentes externas, los iconos, el Javascript que tengas dentro del index, todo lo coloco antes del cierre de body y después todo el contenido.

Para concluir tienes 5 pasos básicos y sencillos para mejorar el tiempo de carga, el tiempo de carga es parte de la experiencia de tu usuario, recuerda que es básico un sitio web agil.

prácticas para la optimización de la carga
Idealmente antes del cierre de BODY y luego de todo el contenido.

¿Qué otras prácticas tienes para optimizar la carga de tu sitio Web?

1 comentario

Dejar un comentario