6 consejos para optimizar un sitio web

Última modificación el abril 9, 2021 by Cristian Vanegas

Para cualquier persona o empresa que quiere figurar en buscadores, una de las mayores preocupaciones está en cómo optimizar un sitio web, esto a raíz de las exigencias por tener una velocidad de carga óptima para nuestros sitios web, tema del cual ya había hablado con anterioridad, en donde doy algunos tips muy valiosos. Sin embargo, el post anterior se quedó un poco corto, por lo que esta vez te mencionaré seis pasos para mejorar notoriamente la velocidad de carga de tu sitio web.

1. Optimizar un sitio web : la clave está en minimizar recursos

Sonará un poco extraño pero los maquetadores visuales y AMP son a veces incompatibles, debido a que el primero usa mucho código CSS y recursos JavaScript, lo que dificulta a AMP traducirlo a códgo HTML. Depender además del primero nos dispone de inmediato a tener mediciones de veolicidad mediocres, debido a que estos lenguajes tardan más en cargar.

¿Significa entonces que debo dejar de usarlo? No, y la verdad resulta conflictivo para nosotros dejar de usar el maquetador visual ya que, además de ofrecer contenido de calidad, también queremos que esté en una presentación agradable. Lo que si debemos hacer es dejar de usar efectos que no sean tan necesarios, manteniendo los recursos al mínimo.

Además de esto, debemos considerar que no siempre es bueno meter una cantidad de funcionalidades a la página, no solo porque afecta su velocidad de carga, sino que en realidad resulta pesado visualmente para quien visita el sitio web.

Por lo demás, en los siguientes puntos puedes encontrar soluciones para que tu sitio web mejore su rendimiento sin renunciar al maquetador visual.

2. Traducir tus páginas a AMP

Este tema lo he abordado varias veces y cada vez toma más relevancia para los buscadores. Pero además de su importancia para el posicionamiento web, también nos va a ayudar a mantener nuestro preciado maquetador visual.

Si, es cierto que anteriormente había dicho que AMP y el maquetador visual no se llevan muy bien por su incompatibilidad de lenguajes. Sin embargo, al contar con una versión amp de cada una de tus páginas, Google va a favorecer a este sobre la versión de escritorio, dándote un puntaje satisfactorio en velocidad de carga.

Desde mi experiencia, lo que hice para lograr puntajes superiores a la media fue traducir mis páginas a AMP haciendo uso del plugin para WordPress. Para ello, trabajé con la función AMP Builder, el cual es una especie de Maquetador Visual en HTML, y con el que se puede hacer casi lo mismo.

Es cierto que al trabajar con AMP builder requieres hacer doble trabajo, pues te toca volver a hacer lo que hiciste con el maquetador visual. Pero realmente tampoco te va a quitar tanto tiempo, ya que lo que estas haciendo es una versión simplificada de tu diseño y que practicamente se va a ver igual al que planteaste.

3. Usar formatos multimedia de última generación

Optimizar un sitio web también requiere de mejorar los recursos multimedia que usas. Por esta razón es clave que, además de usar los tamaños de imagen justos, también se manejen formatos que nos brinden mejor comprensión sin perder la calidad.

Los formatos como PNG, JPEG y GIF para imágenes y MPEG4 para video son obsoletos, y ya llevan bastantes años rotando desde que el internet se volvió masivo en los años 90s. Por eso no es de extrañar que esta tecnología no brinden la calidad y comprensión necesaria para nuestros sitios web. Por esta razón, lo recomendable es usar los formatos .webp para imágenes y .webm para video.

¿Cómo usarlos? Existen varios conversores en internet que te permiten pasar los formatos como JPEG, GIF, PNG y MP4 a los nuevos formatos, pero si en realidad no te quieres complicar, existen plugins como WEBP Express que crea versiones alternativas de tus archivos. De este modo, cuando un navegador es compatible, automáticamente el sitio mostrará las versiones .webp, y si no es compatible, mostrará los archivos de vieja generación.

En cuanto a los GIF y formatos MP4, es recomendable directamente convertirlos y subirlos a la Biblioteca de Medios, no sin antes hacer los ajustes necesarios para que WordPress te permita subir los archivos .webm.

4. Posponer la carga de archivos

Este punto es clave para optimizar un sitio web y que te genere un score positivo en velocidad. Y es que, si te pones a meditarlo, lo inmediatamente necesario en un sitio web es el primer pantallazo que ves, por lo que la otra información que se encuentra más abajo no es necesaria sino hasta que el usuario baje.

Así que sin miedo activa la función de posponer la carga de archivos. En el maquetador visual es sencillo, ya que este te brinda opciones de aparición por animación que cumplen con esa función.

5. Permitir que el texto permanezca visible antes que carguen las fuentes

Es un hecho comprobado: las fuentes atrasan los procesos si la aparición de los textos están ligados a estas. Y es que de acuerdo a estudios realizados por Google, navegadores como Chrome, Firefox , Opera y Miscrosoft Edge agregan 3 segundos de carga por las fuentes.

Ya que no podemos controlar esos 3 segundos de carga que brindan los navegadores, se recomienda agregar las etiquetas font-face y font-display, la primera para describir la fuente que usamos, y la segunda para controlar eso mortales segundos.

Google lo explica mejor en su blog oficial.

Una forma de mejorar esta situación de forma más sencilla es que el sitio web cargue las fuentes desde el servidor de Google en vez de usar el hosting propio. Para ello, es necesario elegir la fuente en Google Fonts y crear un API para que el sitio web autorice su uso.

6. Evitar las redirecciones

A veces nos gusta agregar una cantidad de enlaces que apuntan al mismo lado, ya sea porque creemos que eso nos ayudará a mejorar el posicionamiento web o porque no queremos perder un trabajo hecho que ya está posicionado.

Si bien nuestras intenciones parecen ser buenas, la realidad es que agregar redirecciones nos agregan otro efecto negativo en la velocidad de carga, por lo que se recomienda evitar estas prácticas.

Empieza a optimizar un sitio web y notarás la diferencia

Estos seis pasos fueron los que seguí recientemente precisamente para este sitio web, y la verdad es que los resultados positivos fueron casi de inmediatos. Si bien yo ya había trabajado en la optimización de este sitio web, ya en unos meses mi score había pasado en PageSpeed Insight de Google a uno medicore 29%, dándome una velocidad de carga de 8 segundos.

Luego de pasar por un rediseño del sitio web más consciente pensado en la velocidad de carga sin sacrifica diseño, mi score ha superado el 80%, logrando un primer renderizado en 1 segundo y cargando completamente en solo 3 segundos.

Es cierto que aún queda por trabajar para lograr un meritorio 90% o más. Sin embargo con estos seis pasos logré aumentar el score en un 57%, un resultado significativo que me ayudará a mejorar ante los ojos de Google y otros buscadores.

¿Qué esperas entonces para mejorar tu sitio web? ¡Es hora de lograr grandes resultados!

Último consejo para optimizar un sitio web: Trata de usar las herramientas PageSpeed Insights y GTMetrix en cada uno de los enlaces que tienes. Te darán diagnósticos para cada uno y te brindará consejos específicos sobre los aspectos a mejorar.

¿Te resultó útil esta información sobre cómo optimizar un sitio web? Te invito a visitar otras publicaciones en mi blog relacionados con SEO.