Influencia de la velocidad de la página
La velocidad de la página afecta en gran medida la experiencia de usuario del visitante y, por ende, tu tráfico. La mayoría de los usuarios abandonan el sitio si las páginas o sus elementos cargan lentamente. Esto provoca una disminución de los ingresos y una caída en el posicionamiento. Además, la velocidad de la página es tenida en cuenta por los motores de búsqueda y, por ello, puede influir ligeramente en el ranking general del sitio web.
¿Cómo medir la velocidad del sitio web?
Page Speed es el parámetro que mide la velocidad de carga del sitio web. Hay varias formas de medirla. Se describen en este artículo (añadir enlace).
¿Cómo acelerar tu sitio web?
Rojo - muy importante, naranja - recomendado, verde - opcional.
1. Optimiza las imágenes.
Es evidente que las imágenes de gran tamaño cargan bastante lento.
Hoy en día hay muchos modificadores y minificadores de imágenes en línea. Сompressor es una de las herramientas más populares que permite reducir el tamaño de la imagen o foto con o sin pérdida de calidad. Puede comprimir la imagen hasta un 90%. Otra herramienta, Imagify, no solo puede comprimir imágenes, sino también optimizar todas las imágenes al mismo tiempo. En cuanto a la optimización de GIF, es inútil revisar todas las herramientas ya que hay muchas y cada una tiene sus pros y contras.
También es posible reducir el tamaño de las imágenes manualmente usando Adobe Photoshop u otro editor gráfico. Recomendamos realizar una compresión más o menos sin pérdidas. Si las imágenes son de muy mala calidad, los usuarios no estarán muy dispuestos a visitar tu sitio web porque se verá horrible. En este caso, es mejor acelerar el sitio mediante otros métodos.
Extensión de archivo. Recomendamos usar png y jpg. La primera tiene la mayor tasa de compresión y la segunda admite transparencia. También recomendamos encarecidamente usar la extensión WebP. WebP es un formato de imagen moderno que ofrece compresión con y sin pérdida para imágenes en la web.
Las imágenes WebP sin pérdidas son un 26% más pequeñas en tamaño en comparación con PNG. Las imágenes WebP con pérdidas son un 25-34% más pequeñas en comparación con JPEG con una tasa de compresión equivalente.
2. Configura el almacenamiento en caché del navegador
Cuando alguien visita tu sitio web, el navegador carga todos sus elementos (imágenes, estilos CSS, texto, etc.) desde el servidor donde se aloja el sitio. El almacenamiento en caché del navegador es el proceso de guardar temporalmente estos datos en el disco del visitante. Significa que, la próxima vez que el usuario visite tu sitio, cargará mucho más rápido porque el navegador solo cargará los elementos que hayan cambiado y tomará el resto de su memoria (caché). Qué almacenar lo determina el propio sitio web.
Para habilitar la caché, debes añadir el siguiente código al archivo .htaccess (ten en cuenta que solo es aplicable al servidor web Apache, no a Nginx):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>
El tiempo de almacenamiento en este código está establecido en 1 mes, ya que consideramos que este período es óptimo. Puedes definir otros valores, p. ej., 7 días, 1 año, etc.
Ten en cuenta que el módulo mod_expires.c debe estar habilitado por tu proveedor de hosting para que este código se ejecute. La mayoría de las empresas de hosting lo activan por defecto. Aun así, algunas lo tienen deshabilitado y quizá debas contactar con su soporte para resolverlo.
Puedes añadir el siguiente código para optimizar la caché de scripts:
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
Los proveedores de hosting más grandes tienen todas estas funciones integradas en sus paneles de control, por lo que puedes activarlas/desactivarlas sin modificar manualmente el archivo .htaccess.
3. Habilita la compresión Gzip
Cómo funciona: cuando un usuario intenta abrir una página web, el servidor donde se encuentra el sitio toma los datos solicitados y los hace más pequeños (los comprime). Así, la cantidad de datos transferidos es menor y se recibe más rápido que si se enviaran sin comprimir. Al llegar al dispositivo del usuario, el navegador los descomprime y se muestra tu página. La ventaja es que, aunque el proceso lleva algo de tiempo, sigue siendo menos que descargar el archivo a tamaño completo.
Dado que muchos proveedores de hosting tienen Gzip habilitado a nivel de servidor por defecto, no tendrás que activarlo tú mismo. Rara vez se menciona en la web del proveedor, por lo que quizá quieras confirmarlo con su soporte.
Aquí tienes una guía (añadir enlace) para quienes deban activarlo manualmente.
4. Optimiza los archivos CSS
La optimización de CSS no aporta una diferencia significativa en la experiencia de usuario. No obstante, hacerlo mejorará la velocidad de la página. Hay muchos servicios en línea que puedes usar para este propósito.
Tus estilos funcionarán como se pretende. Se eliminarán espacios innecesarios y se compactarán los datos cuando corresponda. Nada más cambiará.
Recomendamos usar cleancss.com. Alternativamente, puedes usar las siguientes herramientas:
- CSS Compressor (desmarca la casilla “Output using smallest size” para que se preserve la estructura del CSS).
- YUI Compressor (recomendado por Google), que no nos resulta tan cómodo.
Los proveedores de hosting suelen esforzarse por retener a los clientes ofreciendo más herramientas. Por ello, es posible que puedas optimizar CSS desde el panel de control de tu hosting.
5. Optimiza JavaScript
Al igual que con la optimización de archivos CSS, vale la pena optimizar JavaScript, aunque no suponga una mejora significativa en la experiencia de usuario. Inserta el código JavaScript en este servicio en línea (recomendado por Google) y obtén el script minificado que carga más rápido. jslint.com (de Yahoo) puede considerarse una alternativa razonable.
Tu proveedor de hosting podría incluir herramientas similares en su panel de control. Funcionarán tan bien como las que hemos indicado, así que siéntete libre de usarlas.
6. Optimiza las consultas a la base de datos
Si tu sitio usa una base de datos, conviene revisar si hay consultas que puedan optimizarse. De no hacerlo, pueden cargar el servidor y afectar a la velocidad de la página.
Comprueba si tu proveedor de hosting ofrece algún sistema de monitorización de base de datos para identificar consultas lentas. Esto te permitirá analizar el rendimiento de la web y señalar los puntos que necesitan cambios.
En el mejor de los casos, las consultas deberían ejecutarse en menos de 15 segundos.
7. Carga asíncrona de JavaScript y CSS
Normalmente, las páginas se cargan así: primero los estilos y scripts, y después el resto del contenido. Todo ese contenido se carga de forma síncrona y, hasta que se cargan ambos (JS y CSS), el contenido no se muestra al usuario. Se aconseja configurar la carga asíncrona de CSS, JS y el contenido principal (texto, imágenes, etc.).
No lo recomendamos. Si un script o un archivo CSS tarda en cargar, tardará lo mismo con la carga asíncrona. Si habilitas la carga asíncrona, el usuario verá el texto un poco antes. Si se apresura a hacer clic en algo que usa JavaScript mientras aún se está cargando, probablemente recibirá un mensaje de error.
Para evitarlo, aconsejamos optimizar tus scripts y estilos para que carguen más rápido.
8. Codifica primero la parte superior de la página web
Intenta organizar tu código de modo que los elementos situados en la parte superior de la página estén también en la parte superior del código (para que se ejecuten antes que los elementos de abajo). Esto es útil si tienes una página larga: así el usuario verá la parte superior lo antes posible y el resto del contenido cargará mientras la revisa.
9. Usa la herramienta Page Speed
Page Speed es una herramienta de Google. Identifica los principales problemas de velocidad de una página y proporciona consejos útiles para solucionarlos.
10. Revisa las herramientas del panel de control de tu proveedor de hosting
La mayoría de las empresas de hosting ofrecen un conjunto bastante amplio de herramientas en el panel de control. Allí encontrarás la mayoría de utilidades que te ayudarán a acelerar tu sitio.
Aconsejamos usarlas. Si algo sale mal y el sitio deja de funcionar, siempre puedes contactar con el soporte del proveedor y te ayudarán.
11. Usa OpCache o Memcache/Memcached
Recomendamos usar OpCache/Memcache. Ambas herramientas funcionan de manera similar, pero OpCache optimiza scripts, mientras que Memcache/Memcached está diseñado para optimizar consultas a la base de datos.
OpCache mejora el rendimiento de PHP almacenando en memoria compartida el bytecode precompilado de los scripts, lo que acelera su ejecución. Memcache/Memcached (cuál usar depende de la versión de PHP) almacena en caché las consultas a la base de datos.
Si tienes algún consejo para mejorar la velocidad de carga, déjalo en los comentarios y estaremos encantados de añadirlo al artículo.
No dudes en hacer cualquier pregunta relacionada en los comentarios. Nuestros expertos responderán lo antes posible.
