Optimización de sitios web (WPO)

Optimización de sitios web WPO Alvaro Rosa Diseño Multimedia
Optimización de sitios web WPO Alvaro Rosa Diseño Multimedia
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Hay muchísimos factores que tener en cuenta en la creación de un sitio web. El factor más importante es siempre el contenido, pero el mejor contenido hay que presentarlo de la mejor manera posible en la web. Hay muchos factores técnicos a tener en cuenta.

Una característica muy importante es la velocidad de carga. Aunque las personas lleguen a tu sitio, por el medio que sea, si tu web es lenta, se irán.

Uno de cada cuatro usuarios se va de una página web que tarda más de 4 segundos en cargar.

Una de las maneras en que las personas pueden llegar a tu sitio es a través de los buscadores, podemos conseguir más visitas si utilizamos técnicas de SEO. Los buscadores analizan la velocidad de tu sitio y una web lenta te penalizará. La velocidad de carga del sitio es un factor importante en el posicionamiento en buscadores. Google mostrará antes los resultados de webs más rápidas. 

Para conseguir acelerar la carga de tu web existen las técnicas de WPO (Web Performance Optimization) Optimización del rendimiento web, que trabajan todos los factores en que tu web puede mejorar en velocidad. Son técnicas para optimizar la carga de páginas web.

Motivos para optimizar el rendimiento de tu web

Experiencia de usuario

No debes olvidar nunca que tu objetivo no son más que las personas. Quieres que las personas visiten tu web. Normalmente porque es donde vendes tu producto o servicio. Que intentamos ser buenos con Google nada más que para llegar a las personas.

Estamos acostumbrados a la inmediatez y si una web tarda más de lo que deseamos, nos vamos. 

Posicionamiento en buscadores 

Google sabe que la gente no quiere esperar y no envía a sus usuarios a las webs lentas. Esto implica que la velocidad de tu sitio influirá en tus posiciones en las SERP (Search Engine Results Pages). Las webs más rápidas ocupan mejores posiciones en los resultados de Google.

Factores a tener en cuenta

Hosting

El factor más importante es el proveedor de hosting. Debemos alojar nuestra web en un servicio de hosting de calidad. Debemos tener en cuenta la ubicación de sus servidores, tipo de discos que utilizan, el tráfico de datos, el espacio de almacenamiento y muchos otros factores.

Las diferencias de precio no son tan elevadas y vale la pena contratar un buen servicio si queremos un sitio web de calidad.

Código

Cuando hablo de código me refiero al código utilizado en la programación del sitio. Tras un sitio web hay diferentes lenguajes como PHP, HTML o CSS. Nuestra web debe tener el código optimizado. Hemos de conseguir un buen resultado con el mínimo código de programación. Hay que conseguir la máxima funcionalidad con la programación justa para lo que necesitamos.

Una web mal programada te dará problemas de velocidad o de visualización en ciertos navegadores. 

Usar la caché

Por resumirlo mucho, la memoria caché es una foto de cada página que queda guardada en el servidor o en el navegador. De esta manera el usuario tiene la página mucho más rápido. 

Una web dinámica, como son la mayoría actualmente, funciona así: el visitante intenta acceder a la página, el servidor recibe la consulta, envia la consulta a la base de datos, aplica la maquetación del tema y devuelve la información, también adjunta los demás archivos como imágenes. Todo este proceso es rápido, pero debemos optimizar cualquier factor que ralentice la presentación de las páginas.

La caché guarda toda esa información ya preparada. Digamos que sería la diferencia de comprar un plato preparado. No esperas a que lo cocinen. En el momento que alguien pide una página, se le sirve la que se ha guardado en caché.

Minificación (Minify) del código

Minificar es una traducción inventada de Minify. Es una técnica que consiste en eliminar de los archivos CSS, HTML y JavaScript, todo aquello innecesario. Al programar en estos lenguajes, a las personas nos es útil separar las líneas, usar tabuladores o añadir comentarios, para poder entender mejor el funcionamiento.

También existe la técnica consistente en fusionar los diferentes archivos de cada lenguaje en uno solo. Solo se envían tres archivos: HTML, CSS y Javascript.

Con la minificación, se consigue reducir el tamaño de los archivos y, por lo tanto, mejorar la velocidad.

CDN (Content Delivery Network)

El servicio de CDN está formado por redes de servidores que guardan algunos de tus recursos estáticos y los envían cuando alguien los pide. Digamos que se encuentran entre el visitante de tu web y tu hosting. Cuando alguien accede a una de tus páginas, llega al CDN que pide algunas cosas a tu hosting, pero tiene otras cosas ya guardadas. De este modo ahorras trabajo a tu servidor y sirves las páginas más rápido.

Siguiendo con el ejemplo de la comida preparada, el CDN es el restaurante de la cadena más cercano a ti. El plato se puede haber elaborado en cualquier lugar, pero el CDN tiene todos los platos cerca de tu casa y listos para servirlos.

Los servidores de los servicios de CDN son servidores externos, optimizados para almacenar tus páginas en caché y servirlas mucho más rápido. Con los servicios de CDN tienes más funciones de las que ya hablaremos.

Optimizar la base de datos

Ya hemos hablado de que las webs dinámicas guardan el contenido en una base de datos. Hay que mantener la base de datos limpia y ordenada. Cuanto peor esté, más tiempo necesitará para realizar cada consulta. No es lo mismo cocinar en una cocina limpia y ordenada, que en una llena de trastos desordenados. 

En la base de datos se guarda mucha información que puede ser útil, pero hemos de poner en una balanza la utilidad de esa información y la velocidad de las consultas.

Retrasar la ejecución de algunas partes de la web

Ya hemos hablado del código, lo debemos minificar y reducir al máximo, pero hay partes que no podremos evitar. Con ciertas partes del código como pueden ser Javascript o CSS, podemos retrasar la carga. Al tratarse de elementos necesarios, pero no imprescindibles, los retrasamos para que el usuario pueda ver la web lo antes posible. El usuario podrá ver la web, aunque es posible que no todo funcione hasta la carga total.

Imágenes

Las imágenes son las partes más pesada de una web. Todas las webs tienen imágenes, pero si se trata de la de un fotógrafo, ya no hay dudas de que habrá y muchas. 

Lo primero que tenemos que hacer es reducir y optimizar las imágenes al máximo. Lo podemos hacer nosotros mismos antes de subirlas o que esta optimización de imágenes se realice durante la carga. Es preferible subirlas ya optimizadas para ahorrar tráfico y trabajo al hosting.

Otra de las opciones que debemos activar es el Lazy Load, que consiste en que las imágenes no se cargan en el dispositivo del visitante hasta que sea necesario. Una web puede tener muchas imágenes. Algunas estarán en la cabecera, pero otras serán invisibles hasta que el usuario haga scroll. Estas segundas, no se cargarán en el primer momento, lo harán en el momento que sean visibles.

Las imágenes también pueden ser responsive. Debemos mostrar en cada momento la imagen con el tamño adecuado. Puedes mostrar una imagen grande para ordenadores y tener una versión más reducida para las personas que utilicen el móvil. 

AMP Páginas aceleradas

AMP (Accelerated Mobile Pages) es un protocolo creado por google y otros para servir las páginas web mucho más rápido. Es un html simplificado para facilitar la conexión desde dispositivos con menos ancho de banda. Se prescinde de CSS o JavaScript para ello.

Habitualmente tenemos dos versiones de la web, la versión de escritorio y la versión AMP. Google prioriza este tipo de páginas cuando se busca desde un móvil y tablet.

Comprimir Gzip

Otro modo de reducir el peso de los archivos de nuestra web es comprimirlos. Gzip es un sistema que permite servir los archivos comprimidos y que el navegador descomprime para mostrarlos.

Como aplicar la optimización a WordPress

Afortunadamente, WordPress dispone de herramientas para poder hacer todo lo que he comentado. Algunos asuntos los tendremos que solucionar con la elección del tema, otros los arreglaremos con plugins.

Es posible que debas pagar por algun tema o plugin. Ya comenté que a veces es preferible pagar.

Temas de WordPress

El tema es el encargado de la parte de código. Necesitamos temas bien diseñados, ligeros y rápidos.

Hay temas muy bonitos, con mil efectos, videos, imágenes enormes, etc. No tiene por qué ser así, pero muchos de estos temas son muy grandes y ralentizan la velocidad de carga de nuestra web.

Cosas como Google Fonts, Font Awesome icons, sliders, galerías, video y parallax scripts, etc; añaden elementos estéticos al diseño, pero hay que ser selectivo. Debemos prescindir de lo innecesario y retrasar la carga de lo imprescindible.

Plugins de WordPress

Lo mismo podemos decir de los plugins. Hay que tener los plugin justos y necesarios en nuestro WordPress. Cada plugin que añadimos, ralentiza un poco nuestro sitio. Añade código, añade estilos css, JAVASCRIPT, etc.

Elimina totalmente todos los plugins que no necesites y desactiva los que solo usarás en ciertos momentos.

Habitualmente los plugins de pago suelen tener muchas funciones y con un plugin de pago, podrás eliminar varios plugins gratuitos. Existen plugins de caché que minifican, retrasan algunos scripts, mantinene la base de datos o te configuran el CDN. Valora si te vale la pena la inversión.

Memoria caché

Existen plugins para poder utilizar la memoria caché. Algunos de ellos disponen de más funciones como configurar CDN o minificar el código.

AMP

Existen varias opciones, como:

CDN

Podemos utilizar CDN en cualquier tipo de web. Existen diferentes servicios de CDN como cloudflare o amazon cloudfront.

Estos servicios pueden ser gratuitos o de pago. Un CDN tiene otras utilidades aparte de la que hemos hablado.

Minify

Existen plugins de minificar y los hay de caché que también lo hacen

Imágenes

Puedes optimizar las imágenes antes de subirlas al servidor si tienes los conocimientos y las herramientas.

Si no es así, o no quieres complicarte, tienes diferentes plugins que lo harán por ti. Piensa si vale la pena añadir otro plugin más o no.

Conclusiones

La optimización de un sitio web es un equilibrio entre muchos factores, de manera que no perdamos funciones o dejemos de lado la estética, pero que la web se pueda descargar en el dispositivo del visitante lo antes posible.

Tenemos herramientas suficientes para poder tener una web que funcione correctamente y que cargue con una buena velocidad. Solo hemos de utilizarlas de la manera correcta.

Comparte este artículo en

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Álvaro Rosa

Álvaro Rosa

Grado Multimedia.

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable Álvaro Rosa Albalat.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  Siteground.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies. Si continuas navegando, estás aceptándolas.    Más información
Privacidad