Técnicas y buenas prácticas de optimización de sitios web

No escribas una entrada de blog sólo porque sí, ¡un artículo mal escrito puede entorpecer tu sitio en lugar de ayudarlo!

Cuando se escribe bien, y para el lector en lugar de para los motores de búsqueda, las páginas contribuirán de forma natural a las palabras clave de tu sitio, entonces ten paciencia, el tráfico llegará.

No recomendamos especialmente el uso de esquemas de construcción de enlaces, incluso los denominados de "sombrero blanco", ya que es de esperar que los enlaces crezcan con el tiempo.

Tener un sitio con candado demuestra a la mayoría de los usuarios finales que te preocupas por su seguridad y que no eres una persona cualquiera.

Puede que ralentice ligeramente el sitio, pero ahora merece la pena añadirlo, y es imprescindible si piensas vender artículos en línea o permitir que el público se conecte y utilice tu sitio.

Google utiliza ahora HTTPS como señal de clasificación de páginas, lo que significa que los sitios seguros reciben un ligero impulso en comparación con aquellos que no lo utilizan. En el futuro, es probable que los sitios web que vendan cosas en línea utilizando HTTP estándar o un certificado débil también se vean penalizados en el posicionamiento de las páginas.

Una red de distribución de contenidos (CDN, por sus siglas en inglés) es una buena forma de acercar los contenidos a los usuarios finales, pero no es necesariamente para todos.

Si tu sitio recibe poco tráfico global, puede ser inútil, porque acabas añadiendo un paso más en el envío de los datos a tus clientes.

Esto es un poco más sencillo de lo que la mayoría de la gente cree. Cuando los sitios están en desarrollo, la mayoría de los programas insertan tabulaciones antes de los elementos para facilitar la lectura a los humanos. 

Aunque esto es estupendo para el desarrollo, aumenta considerablemente el tamaño de los archivos y el uso de recursos del servidor. Una solución sencilla puede ser utilizar shift+tab en Visual Studio hasta que todos los elementos queden alineados a la izquierda.

Este sencillo truco puede ahorrar miles de bytes por solicitud.

Al igual que las páginas HTML, CSS se construye generalmente con un montón de espacio en blanco para que sea más fácil de leer. Cuando publiques el sitio, quítalo, ¡las únicas personas que mirarán tu código serán los desarrolladores web entrometidos! Elimina también los comentarios en la medida de lo posible, ya que se envían pero nunca se leen.

No dudes en utilizar nuestra herramienta gratuita que elimina estos comentarios, los espacios en blanco innecesarios y arregla algunas otras cosas. También puedes pasar tu sitio por el análisis de PageSpeed y utilizar los datos que te devuelve.

Al igual que ocurre con las páginas HTML y CSS, JavaScript suele incluir muchos espacios en blanco para facilitar su lectura. Cuando lances tu sitio web, elimínalos, ¡los únicos que mirarán tu código serán los desarrolladores entrometidos!

No dudes en utilizar nuestra herramienta gratuita que elimina algunos comentarios y espacios en blanco innecesarios. También puedes pasar tu sitio por el análisis de PageSpeed y utilizar los datos que te devuelve.

La mayoría de los sitios ahora se construyen utilizando una de las muchas herramientas de construcción de sitios web disponibles como WordPress o con tecnología de despliegue rápido como Bootstrap y Angular, pero estos pueden sobrecargar el número de archivos incluidos en el sitio, haciendo que los tiempos de carga de la primera página sean lentos mientras el navegador realiza múltiples solicitudes para descargar los distintos archivos.

Si tienes acceso al backend de tu sitio web, suele ser una buena idea intentar combinar archivos similares en una sola petición.

Diseña tus sitios para que funcionen correctamente en dispositivos móviles y, a continuación, añade mejoras adicionales para los usuarios de ordenadores de sobremesa. Los dispositivos móviles representan ahora alrededor de la mitad de todas las búsquedas en todo el mundo, y los motores de búsqueda son lo suficientemente inteligentes como para no enviar a un dispositivo móvil a una página no optimizada.

Si tu sitio web no está optimizado para móviles, podrías estar perdiendo el 50% de tu tráfico potencial. Si este es el caso, puede que merezca la pena revisarlo.

Las imágenes suelen representar la mayor parte de los datos de cada solicitud. 

Existen varias herramientas gratuitas, tanto en línea como sin conexión, que se pueden utilizar para optimizar cada imagen. A continuación se enumeran algunas de ellas, que iremos ampliando con el tiempo:

png (Portable Network Graphics): algoritmo de compresión de datos sin pérdidas para imágenes.

• TinyPNG (conversor en línea)
• ImageOptim (aplicación Mac y servicio web)
  
• pngquant (ejecutable de línea de comandos que utilizamos como parte de OusiaCMS)
• pngout (ejecutable de línea de comandos que utilizamos como parte de OusiaCMS, después de pngquant)

jpeg/jpg (Joint Photographic Experts Group) - algoritmo de compresión con pérdida para imágenes.

• TinyJPG (conversor en línea)
• jpegtran (ejecutable de línea de comandos que utilizamos como parte de OusiaCMS)
  

svg (Scalable Vector Graphics) - imágenes vectoriales basadas en xml.

• svgminify (servicio en línea)
  

La compresión reduce el tamaño del archivo en el servidor utilizando varios algoritmos antes de enviarlo al dispositivo del visitante, que descomprime los datos y utiliza el archivo normalmente. A continuación se enumeran los métodos de compresión más comunes:

• GZip
  
• Deflate
  

Si es posible y utilizas un sistema de gestión de contenidos, activa también la compresión dinámica. Más información sobre cómo configurar la compresión en su servidor web.

Activar la compresión (Google)

Los servicios de SEO que brindamos son;

• Redes sociales
  
• Elegir las plataformas adecuadas
• Configurar
• Marca
• Gestión continua
• Optimización del sitio web (sabemos que los usuarios de nuestro CMS tienen uno de los más rápidos disponibles, pero nos complace trabajar con cualquier proveedor que utilice)
• Optimización de imágenes
• Optimización de CSS y JavaScript
• Amabilidad móvil.
• Identificar otras áreas de mejora
• Diseño del sitio web (cuando sea necesario)
• Análisis de contenido y utilidad
• Facilidad de navegación y menú
• Identificar el contenido que se puede mejorar y actualizar, o eliminar
• Facilidad de ponerse en contacto
• Vinculación a plataformas de redes sociales

Hay una serie de herramientas disponibles para probar su sitio. Usamos lo siguiente para analizar cada sitio que construimos.

También hemos resaltado algunos de los principales escollos y, en la medida de lo posible, cómo evitarlos.

Herramientas de prueba estructural;

• Google PageSpeed Insights (en línea, proporcionado por Google)
  
• YSlow (se instala en su navegador, disponible en Chrome, Firefox y Safari y algunos otros)
• GTMetrix (analiza tu sitio con informes de PageSpeed y YSlow)

Una cosa a tener en cuenta es que si prueba el mismo sitio en todas estas herramientas, es posible que le brinden información contradictoria. También recuerde que son solo guías, no siempre 100% precisas, y algunos errores pueden estar fuera de su control.