Con el paso del tiempo, internet ha evolucionado y a su vez, la manera en cómo los sitios web están hechos a través de soluciones para optimizar la velocidad de tu sitio web y en cómo los buscadores los califican para darles una posición en esas ya famosas páginas de resultados (o SERPs como se les conoce en el mundo del SEO).
Uno de los aspectos que los buscadores toman en cuenta para calificar tu sitio web, es la velocidad de carga. Para google y los demás motores de búsqueda es importante que el usuario no espere demasiado para empezar a ver el contenido que está buscando y es por ello que los programadores hoy en día hacen su mejor esfuerzo para minimizar cada vez en mayor medida el tiempo de carga de los sitios web.
Google tiene una herramienta en línea que nos dice la calificación que tiene nuestro sitio web en materia de velocidad. Hablamos de Page Speed Insights, un sistema que analiza nuestras páginas web y nos da una calificación que puede ir de 0 a 100, así como información detallada y recomendaciones técnicas que podemos aplicar para mejorar nuestra puntuación.
Y porque sabemos que no siempre es una tarea sencilla lograr aplicar las recomendaciones de google, aquí en Gleo hemos recopilado las mejores técnicas que harán que tu sitio web tenga una velocidad óptima y consigas salir en los primeros resultados de Google o cualquier otro buscador.
Sube imágenes con poco peso
Esta es tal vez la técnica con resultados más inmediatos que nos encontraremos. A medida que desarrollamos nuestro sitio web, colocamos imágenes con muy buena calidad para lograr una estética de 10 en nuestro sitio web. Sin embargo, conforme tengamos más y más imágenes, nos daremos cuenta que la velocidad de carga de las páginas de nuestro sitio web empieza a ser más lenta.
Tinypng es una de las soluciones para optimizar la velocidad de tu sitio web
Necesitamos subir imágenes con un tamaño reducido pero sin perder la calidad que necesitamos para que no se vean mal.
Esto lo logramos utilizando herramientas como tinypng. Tinypng nos permite subir nuestras imágenes para realizarles un trabajo de optimización y reducción de peso sin hacer que nuestras imágenes pierdan calidad. Las imágenes generadas tendrán un tamaño significativamente más pequeño que las originales, lo que nos brindará una mejora muy notoria en la velocidad de nuestras páginas web.
Formato webp te ayudará a reducir el peso de tus imágenes aún más
Debes saber que en la actualidad, existe un nuevo formato de imágenes. Muchas personas no conocen el formato webp pero es de suma importancia utilizarlo en todas las imágenes de nuestro sitio web si queremos ser bien calificados por google y en general darle una buena experiencia al usuario. El formato además brinda una optimización adicional a nuestras imágenes ya que al convertirlas, reducirán aún más su peso incluso después de que Tinypng haya concluido su trabajo de optimización.
Para convertir tus imágenes a estos formatos bastará con utilizar herramientas como Convertio, una plataforma web que nos brinda la capacidad de convertir varios tipos de imágenes. Es excelente y rápida para conseguir esta novedosa optimización.
Después de utilizar las herramientas anteriores y subir tus nuevas imágenes optimizadas a tu sitio web, descubrirás que ya has ganado muchos puntos de calificación en Page Speed Insights. Sin embargo, ¡aún podemos lograr más!.
Minifica tu código javascript
La siguiente optimización que deberemos cuidar, es el peso y la carga de nuestros scripts en javascript. Los programadores a veces no vemos el impacto que tiene la manera en cómo cargamos estos archivos en nuestros sitios web, sin embargo, un solo script puede retrasar muchísimo la carga de una página web.
Para ello, recuerda siempre minificar tus archivos .js antes de subir tu sitio web al hosting en donde vaya a estar almacenado. Hay diferentes maneras de hacer esto pero la forma más sencilla para que empieces a entender este proceso es utilizando herramientas online como JSCompres y JavaScript Minifier.
También es posible minificar nuestros scripts a través de herramientas de desarrollo como webpack utilizando sus opciones de optimización con plugins como TerserPlugin.
O si lo prefieres, puedes utilizar gulp de la misma manera para realizar la optimización automáticamente de tus scripts.
Minifica tu código css para optimizar la velocidad de tu sitio web
La misma optimización para mejorar la velocidad de tu sitio web que ya hicimos en javascript en el paso anterior se puede realizar con nuestros archivos css.
Al igual que con javascript, también existe lo propio para los archivos css. Una de esas herramientas que podemos encontrar es CSS Minifier, que nos permite pegar nuestras hojas de estilo y con un simple botón obtener el contenido minificado.
Sin embargo, te recomiendo que también pruebes el plugin optimize-css-assets-webpack-plugin de webpack. Este plugin es un buen complemento para el TerserPlugin que mencionamos anteriormente. Mientras TerserPlugin minifica nuestro javascript, este optimizador minificará todo nuestro css atendiendo a las configuraciones que nosotros le indiquemos en la configuración de webpack.
Ambos plugins de webpack son recomendados para usarse en ambiente de producción, ya que cuando estamos desarrollando, es mejor que el css sea legible para nosotros poder modificarlo con facilidad.
Prioriza el CSS “above the fold”
Esta es una de las últimas optimizaciones que tendremos que hacer. Así es, ya casi nos acercamos al final y es por eso que empezaremos a aplicar las técnicas más minuciosas.
El término “above the fold” o por su traducción al español “encima del pliegue” se refiere a todo el contenido que nuestros usuarios ven en nuestras páginas web sin haber hecho ningún tipo de scroll o desplazamiento. Es decir, el contenido del primer plano, lo que mostramos enseguida carga la página.
Con esta técnica, lo que pretendemos conseguir que la página solo cargue el css que le de estilo al primer plano que ve el usuario, dejando el css del contenido restante en una carga posterior, para no retrasar el tiempo de entrega de nuestra web al usuario. Con esto, nuestra página mejorará el tiempo de primer renderizado con contenido.
Y esto lo logramos identificando el css relacionado a todos los elementos que vemos apenas carga nuestra página, separándolos y colocando sólo estos estilos en una etiqueta
