[Dossier] Los secretos de la optimización web

La velocidad de un sitio web influye directamente en la comodidad de los usuarios. Se sabe que un sitio lento reduce considerablemente el tiempo que los visitantes pasan en él, y todo indica que también afecta al posicionamiento en buscadores. Optimizar la velocidad de su sitio es, por tanto, un aspecto fundamental que no debe descuidar en ningún caso.

Las causas de la lentitud

Contrariamente a lo que se suele creer, la lentitud de un sitio no siempre se debe a la lentitud del servidor que lo aloja. Por supuesto, un servidor sobrecargado o de mala calidad puede provocar lentitud, pero en HaiSoft hacemos todo lo posible para descartar esa posibilidad.

Ponemos todos los medios para que disfrute en todo momento de un alojamiento rápido y disponible: todos los servidores de alojamiento compartido de HaiSoft, así como todos los servidores nuevos, se entregan con discos SSD para obtener un rendimiento máximo y constante. Además, los servidores se supervisan de forma activa, de modo que cualquier carga elevada se detecta de inmediato y el problema se resuelve con gran rapidez. Los alojamientos de HaiSoft son, por tanto, una excelente forma de disfrutar de un rendimiento excepcional en cualquier circunstancia. Consulte en particular:

SSD para todos: ¡nosotros también lo hemos hecho!

En este contexto, comprobamos que la gran mayoría de las consultas sobre sitios web lentos se deben a una falta de optimización de dichos sitios; de ahí la utilidad de este artículo.

¿Qué es la optimización?

El tiempo que tarda en mostrarse un sitio depende de dos factores principales:

• Los recursos de CPU (procesador) utilizados en el servidor, normalmente por los scripts PHP y la base de datos MySQL durante la carga de las páginas del sitio.
• Los recursos que el servidor envía a los visitantes del sitio, es decir, archivos multimedia, imágenes, scripts, etc.

La optimización consiste, por tanto, en actuar sobre estos dos factores: por un lado, generar las páginas rápidamente en el servidor y, por otro, que los usuarios las reciban rápidamente, sea cual sea la velocidad de su conexión a internet.

¿Le parece rápido este blog? Sepa que actualmente está alojado en un servidor de alojamiento compartido de HaiSoft y que le hemos aplicado las optimizaciones recomendadas en este artículo.

1) Optimización de los recursos del servidor

Nota: aquí hablaremos principalmente de la optimización de los CMS, aunque algunos consejos son aplicables a cualquier caso. En este artículo no adoptaremos el punto de vista de un desarrollador, que en principio ya debe saber lo que es un código optimizado.

El tiempo de carga de una página de su sitio está directamente relacionado con la potencia de cálculo necesaria para generarla. Por eso es importante asegurarse de que el código PHP que genera las páginas esté lo más optimizado posible, a fin de ofrecer un tiempo de carga razonable.

Además, en algunos casos extremos, un sitio mal optimizado (o nada optimizado) puede llegar a ralentizar un servidor entero. Si, por ejemplo, cada página provoca consultas MySQL muy largas (más de 20 segundos) y el sitio recibe varias visitas por segundo, el uso de CPU del servidor puede alcanzar rápidamente el 100 % y el rendimiento se degradará drásticamente; el servidor puede incluso dejar de responder si los límites de uso definidos en sus distintos servicios son demasiado altos. Es precisamente aquí donde entran en juego ciertos límites establecidos en los servidores MySQL y Apache, cuyo objetivo es preservar el acceso al servidor evitando su saturación total.

Hay que tener en cuenta también que PHP solo utiliza un núcleo de procesador por proceso (y, por tanto, por página cargada). Esto significa que las páginas de su sitio no se cargarán más rápido con 8 núcleos que con 2 si solo hay un visitante (suponiendo que los demás procesos no saturen los recursos restantes); en cambio, podrá recibir a más visitantes simultáneamente sin ralentizaciones. También hay que tener en cuenta el uso de CPU de MySQL: si una consulta recorre millones de filas, tardará varios segundos en ejecutarse, lo que cargará el servidor y ralentizará su sitio.

Errores y pistas falsas que conviene evitar

Para ganar tiempo, empecemos por lo que hay que evitar.

• Mantener un sitio sin actualizar con una versión obsoleta de PHP: además del grave problema de seguridad que supone, puede estar dividiendo el rendimiento de su sitio por 1,5 o hasta por 3. Le recordamos que las últimas versiones de PHP están siempre disponibles en HaiSoft y que puede actualizarlas en cualquier momento (en francés).
• Empezar instalando plugins de caché (WPSupercache, WPRocket…) a la mínima lentitud. Si la lentitud es importante, primero hay que atacar el problema de raíz y preguntarse de dónde viene, en lugar de recurrir directamente a un parche que suele ser mucho menos eficaz que una verdadera optimización. Conviene, por tanto, empezar a optimizar sin plugin de caché y terminar con este paso, que debe ser la «guinda del pastel». Los plugins de caché no solo no pueden almacenarlo todo en caché (pueden quedar algunas consultas lentas), sino que además pueden causar numerosos problemas durante el desarrollo: una razón más para reservar este paso para el final.

Veamos ahora las buenas prácticas para optimizar su sitio.

Actualizaciones

Asegúrese de que su CMS esté actualizado, así como todos sus temas, módulos, extensiones, etc.

Aproveche en particular la actualización automática de su sitio WordPress desde su panel de control Plesk, disponible con nuestros planes WordPress.

Versión de PHP

Asegúrese de utilizar la última versión de PHP compatible con su script y su proveedor de alojamiento. En HaiSoft, su versión de PHP se puede configurar desde su panel de control Plesk (ambos enlaces en francés), y ofrecemos las nuevas versiones de PHP en cuanto se publican. Un sitio web actualizado admitirá las últimas versiones de PHP, que son más rápidas y más seguras. Calculamos que PHP 5.6 es el doble de rápido que PHP 5.3, y PHP 7.1 el doble de rápido que PHP 5.6: ¡así que hay que empezar por aquí!

Plugins y extensiones

Son la causa n.º 1 de la lentitud de los sitios, por lo que hay que vigilar muy de cerca los módulos instalados en su sitio.

• Limite al máximo el número de plugins/extensiones/módulos instalados: cada módulo es una fuente adicional de ralentización. Elimine periódicamente los plugins inútiles u obsoletos.
• Compruebe que no tiene plugins o módulos que consuman demasiados recursos. Para ello, desactive todos los módulos, compruebe la velocidad del sitio y vuelva a activarlos poco a poco para encontrar el plugin o los plugins que lo ralentizan. Para WordPress, el plugin «Query Monitor» le ayudará a medir con precisión el tiempo de carga de las páginas y a detectar los elementos que consumen muchos recursos. Haga lo mismo con los plugins de optimización: puede que le sorprenda comprobar hasta qué punto algunos de ellos ralentizan su sitio.
• La misma recomendación vale para los temas: asegúrese de utilizar un tema optimizado que no ralentice su sitio y pruebe otros temas para comparar.

Los «builders» o constructores de sitios

Los «builders» son la trampa moderna, sobre todo en WordPress. Los builders para CMS (que no deben confundirse con los constructores externos, que generan código HTML estático y, por tanto, no tienen este problema de optimización) prometen crear un sitio a medida de forma rápida y eficaz.

El problema: los builders consumen muchísimos recursos de MySQL y PHP.

Generan consultas MySQL y cálculos de página interminables que ralentizan mucho el sitio. Cada elemento es un shortcode que PHP debe convertir en un código PHP más completo y después en HTML, lo que en algunos casos provoca una pérdida de velocidad dramática. Insisto, porque hemos medido una diferencia de un factor de 3 a 4 en la mayoría de los builders de moda: un sitio que tarda 0,3 s en cargar con el tema por defecto de WordPress tarda más de un segundo cuando se selecciona el tema con builder. En un sitio que ya tarda 1 s en cargar, el visitante pasa a esperar varios segundos, sin contar el tiempo de envío de los datos. En algunos casos, esto puede ser muy molesto.

Los builders también pueden provocar numerosos errores y no se pueden cambiar fácilmente: hay que rehacer todo el sitio, ya que las páginas no se almacenan en el formato nativo de WordPress.

Piense bien, por tanto, antes de elegir un builder y dé preferencia a los temas nativos, que son mucho más sencillos, estables, versátiles y eficientes.

El contenido de sus páginas

¿Es realmente necesario cargar la vista previa de 300 artículos en su página de inicio? ¿Cargar los extractos de los artículos? ¿Cargar los 100 últimos comentarios en un widget? Ningún servidor puede mostrar rápidamente una página de CMS así sin caché, ya que la carga de cada página está limitada a un único núcleo de procesador.

En WordPress, hemos observado una mejora de velocidad considerable simplemente desactivando los extractos de los artículos en la página de inicio. Por eso le aconsejamos elegir títulos e imágenes explícitos y reducir todo lo posible (o incluso eliminar) los extractos del contenido de los artículos, ya que son otras tantas consultas MySQL que se ahorran. También le recomendamos evitar la multiplicación de widgets innecesarios. Un sitio sencillo resulta a veces más atractivo para los visitantes y, en cualquier caso, es sin duda más rápido de ejecutar para el servidor.

En general, lo más importante es prestar especial atención a la optimización de las páginas más visitadas, en particular la página de inicio.

Bases de datos MySQL

La rapidez de ejecución de las consultas MySQL de su sitio influye directamente en su velocidad. Es posible actuar sobre este aspecto incluso sin conocimientos específicos de MySQL. No obstante, siempre recomendamos mucha prudencia al manipular su base de datos: ¡exporte volcados y haga copias de seguridad antes de cualquier modificación! Esto se hace en unos pocos clics desde su panel de control Plesk, proporcionado por HaiSoft.

• Reduzca el tamaño de su base de datos: cuanto más pequeña sea la base de datos MySQL, mejor será el rendimiento.
• Si su base de datos contiene registros de conexión u otros datos similares, busque la forma de limpiarla periódicamente (desde el back office, con un plugin o manualmente con PHPMyAdmin, por ejemplo).
• La base de datos de un CMS (salvo excepciones en las que realmente haya muchos datos, como un sitio periodístico) no debería superar los 100 MB como máximo absoluto.
• Revise el contenido de los comentarios, que pueden contener spam, y compruebe los ajustes de registro y la política de aprobación de comentarios del sitio.
• En sitios como WordPress, plantéese borrar las revisiones antiguas de los artículos y limpiar los «Transients» con ayuda de un plugin.
• Si dispone de un servidor dedicado o una VM, consulte con el equipo de servicios gestionados de HaiSoft si es posible cargar una mayor parte de su base de datos en RAM, siempre que la capacidad del servidor lo permita; en algunos casos puede suponer una mejora.

2) Optimización de los recursos del cliente

El tamaño de una página, el número de recursos cargados, su procedencia, el tamaño de las imágenes y su compresión son otros tantos parámetros que intervienen en la velocidad de carga de un sitio.

Medir la optimización con GTMetrix

Le recomendamos leer nuestro artículo dedicado para dominar esta herramienta:

Domine GTmetrix: la herramienta imprescindible para optimizar su sitio

El sitio https://gtmetrix.com/ permite analizar en detalle el rendimiento de su sitio desde el punto de vista de los visitantes.

Antes de cualquier optimización de los recursos, le aconsejamos realizar esta prueba para hacerse una idea clara de los elementos que debe mejorar y también para seguir la evolución de las optimizaciones realizadas.

En este artículo le detallaremos algunas de las recomendaciones más frecuentes, pero la lista no es exhaustiva y le invitamos a ampliar su investigación si lo necesita.

Tamaño total de la página

Hay que tener en cuenta que no todo el mundo dispone de una conexión a internet rápida o de un dispositivo potente (móvil u otro) para ver su sitio.

• En la medida de lo posible, le aconsejamos no superar 1 MB por página, de modo que incluso una conexión de solo 2 Mbit/s cargue la página en unos 5 segundos.
• Si su sitio es muy «gráfico» y contiene imágenes grandes, puede llegar eventualmente a un tamaño de página de 2 MB.
• Si tiene un sitio de fotografía, ya no hay normas propiamente dichas, pero lo ideal es mostrar una vista previa comprimida de las imágenes con la posibilidad de ampliarlas con buena calidad.
• Si inserta vídeos, salvo excepciones, es preferible utilizar una plataforma externa (YouTube, Vimeo, etc.), que sabrá ofrecer distintas calidades y comprimir el vídeo como es debido.

Número de solicitudes externas

Se trata de las solicitudes que se realizan al visitar su sitio para cargar recursos que no proceden de él. Los recursos externos suelen ser costosos en tiempo de carga para el visitante.

Proceden principalmente de temas y plugins que modifican el aspecto de su sitio y consisten sobre todo en fuentes, scripts JS y CSS.

Por cada sitio externo del que procede un recurso, el visitante debe realizar una consulta DNS adicional. Estas consultas tardan unos milisegundos que, sumados, pueden representar un tiempo nada despreciable, al menos en la primera carga de la página.

Además, los servidores externos pueden estar ubicados lejos del país del visitante, lo que aumenta la latencia y reduce el caudal.

Por tanto, hay que intentar reducir al mínimo los recursos externos cargados. GTMetrix los indica en los apartados «YSlow» y «Make fewer HTTP requests», así como en el «Waterfall».

Lo ideal sería no cargar ningún recurso externo, pero esto es prácticamente imposible con un CMS moderno. El umbral que no conviene superar es, por tanto, de 30 recursos externos como máximo absoluto, idealmente con menos de 10 solicitudes externas.

Para ello, a veces es necesario elegir otros temas y plugins que almacenen estos recursos localmente.

Número total de solicitudes

Cada recurso genera una pequeña latencia. Si hay demasiados recursos distintos, el sitio se ralentiza, sobre todo en conexiones con un ping (latencia) elevado.

Este valor aparece en la parte superior derecha de la prueba GTMetrix: «Requests».

Le aconsejamos intentar no superar las 100 solicitudes como máximo absoluto, idealmente con menos de 50.

La concatenación de scripts es un método que permite reducir el número de archivos de script enviados y, por tanto, el número de solicitudes. Es una vía que merece la pena explorar, pero no la única: hay que elegir scripts eficaces que no necesiten demasiados archivos para funcionar. Esto puede implementarse mediante scripts de caché; los plugins de caché suelen encargarse después de concatenar y comprimir los scripts.

Escalado de imágenes

En la medida de lo posible, hay que intentar cargar en el sitio únicamente imágenes con el tamaño final al que se mostrarán.

Es evidente, por ejemplo, que usar una imagen de alta resolución como miniatura de un artículo no es lo ideal: ¿para qué cargar una imagen de 8 MB en alta resolución cuando una imagen de unos pocos kilobytes en 128×128 probablemente habría bastado?

Afortunadamente, la mayoría de los CMS, incluido WordPress, que durante mucho tiempo fue rezagado en este tema, gestionan las miniaturas y son capaces de generar distintos tamaños de imagen y utilizar el adecuado según el contexto. No obstante, hay que asegurarse de que el tema aproveche correctamente estas miniaturas. Si no es así, habrá que redimensionar las imágenes manualmente.

Algunos plugins se ofrecen a realizar esta tarea: le aconsejo hacer una copia de seguridad de sus archivos y de su base de datos antes de esta operación, que pone en riesgo la calidad de las imágenes publicadas.

En GTMetrix, esta información se encuentra en «PageSpeed», apartado «Serve scaled images».

En VM y servidores dedicados, puede ayudar el módulo Google PageSpeed, que se puede integrar en Plesk. Este módulo puede convertir sobre la marcha las imágenes del sitio al tamaño de la pantalla (siempre que las imágenes originales no sean demasiado grandes). Su soporte técnico puede configurarlo, y usted deberá proporcionar una clave de API de Google para que funcione.

Optimización de la compresión de imágenes

Se recomienda utilizar una buena tasa de compresión de imágenes, así como formatos modernos.

Al igual que con el escalado, el módulo «PageSpeed» (solo en VM y servidores dedicados) puede ayudar en este aspecto. Algunos plugins o scripts también pueden encargarse de ello; en ese caso, es aconsejable hacer antes una copia de seguridad de su sitio, ya que estas compresiones pueden a veces desvirtuar sus imágenes.

Conclusión

Estos consejos cubren los casos más frecuentes y deberían permitirle mejorar drásticamente el rendimiento de su sitio y/o servidor, mejorar la experiencia de usuario y así maximizar la retención de visitantes. Esto no es más que el principio: existen miles de otras formas de optimizar un sitio, propias de cada contexto. Por eso le aconsejamos no limitarse a esta introducción y profundizar aún más, sobre todo en los sitios con mucho tráfico, donde la optimización puede marcar toda la diferencia.

¿Necesita más potencia?

¿Sigue sin estar satisfecho con el rendimiento de su sitio tras seguir esta guía?

• ¿Todavía no es cliente de HaiSoft? Póngase en contacto con nuestro departamento comercial a través de nuestro sitio web
• Clientes de HaiSoft: contacten con el soporte de HaiSoft mediante ticket o por teléfono para encontrar la solución