Este artículo ofrece algunos consejos sobre cómo mejorar el rendimiento de tu sitio web y diagnosticar por qué es posible que no se ejecute de la manera más eficiente posible.
Este artículo de optimización es para cualquier sitio web que se haya creado a medida o de manera personalizada utilizando HTML/CSS/JS y cualquier otro lenguaje de fondo como PHP.
Si en su lugar creaste tu sitio usado el instalador de WordPress de DreamHost, revisa el siguiente artículo para ver las opciones de optimización.
Optimizar tu CSS y JavaScript
Usar un CDN para cargar jQuery
Si tu sitio usa jQuery, cárgalo en tu documento HTML usando un CDN en lugar de una versión local en tu servidor web. Cargar jQuery desde un CDN como Google puede ayudar a acelerar la carga de la página. Esto se debe a que lo más probable es que tus visitantes ya hayan visitado varios sitios que están utilizando un CDN jQuery (como Google o Microsoft). Como ya han descargado la biblioteca jQuery en tu navegador, ya está en caché y no será necesario volver a descargarla. Las siguientes páginas enumeran las opciones de CDN jQuery:
- https://code.jquery.com/
- https://developers.google.com/speed/libraries/#jquery
- https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview
- https://www.w3schools.com/jquery/jquery_get_started.asp
- https://cdnjs.com/libraries/jquery/
Optimizar la entrega de JavaScript
JavaScript se ejecuta cuando el navegador lee la página web (de arriba hacia abajo). Cuando se encuentra un archivo JavaScript, el navegador deja de mostrar la página hasta que el archivo JavaScript se haya leído completamente. Esto se llama 'Bloqueo de renderizado de JavaScript y podría causar un retraso a medida que se carga la página.
Si no se necesita un script para cargar la página, aplaza la carga hasta que la página se haya cargado por completo. Esto puede ayudar a que las partes más importantes de la página se carguen primero. Mira los siguientes artículos para obtener más información:
- https://developers.google.com/speed/docs/insights/BlockingJS
- https://www.w3schools.com/tags/att_script_defer.asp
Optimizar la entrega de CSS
CSS también se puede optimizar para mejorar la carga inicial de la página. Visita los siguientes enlaces para más detalles:
- https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Comprobar si hay scripts o código mal escritos
A veces, un script mal escrito o un código que entra en conflicto con otros elementos del sitio puede conducir a un sitio lento y un rendimiento deficiente. Intenta ejecutar una prueba de página completa en cualquiera de los siguientes sitios:
Cualquier script que tarde mucho tiempo en cargarse debe investigarse para ver si puede optimizarse mejor. También puede valer la pena desactivar cualquier script que parezca problemático para probar y ver si desactivarlo conduce a un mejor rendimiento.
Minificar tus scripts
Los archivos CSS y JavaScript tienen mucho espacio vacío, lo que los hace más fáciles de leer para los humanos. Cuando se minifica el código, elimina todo ese espacio vacío. Esto hace que el archivo sea más pequeño y puede ayudarlos a cargar más rápido.
Una búsqueda rápida en línea enumerará muchos sitios web y herramientas disponibles para minificar o comprimir tu código.
Optimizar contenido Multimedia
Imágenes
Las imágenes son a menudo una razón principal de páginas lentas. Tener un megabyte o más de imágenes ralentizará seriamente tu sitio porque lleva más tiempo descargar todos los archivos del sitio. Optimizar tus imágenes contribuirá en gran medida a reducir el tiempo de carga de la página.
Revisa los siguientes enlaces para obtener más información:
Video
Asegúrate de comprimir tus videos para reducir el tamaño total. Si son demasiado grandes, los videos pueden pausarse/almacenarse mientras el usuario intenta verlos.
También es una buena idea convertir tus videos a un formato compatible con HTML5. Esto garantiza que la mayor cantidad de navegadores puedan verlos.
PHP
OPcache es un motor de almacenamiento en caché integrado en PHP. Cuando está habilitado, disfrutarás de mejoras significativas en la velocidad del sitio web automáticamente.
Está habilitado por defecto en los planes de alojamiento Shared, DreamPress, y VPS, por lo que si ya estás usando uno de esos planes, no necesitas habilitarlo.
Si tienes un plan de Alojamiento Dedicado o DreamCompute, sigue las instrucciones en el siguiente artículo para habilitarlo manualmente.
Asegúrate de probar todos los scripts PHP. Los scripts PHP que no finalizan correctamente pueden hacer que se omitan los procesos por alcanzar el límite del proceso FCGI, lo que puede causar la lentitud del sitio.
Almacenamiento en caché
Una caché es un área de almacenamiento temporal para diferentes tipos de datos computarizados. Por ejemplo, el almacenamiento en caché del navegador permite que los archivos de páginas web como imágenes, CSS y JavaScript se almacenen en caché (almacenados) en el navegador. Dado que esos archivos ya están almacenados, la próxima vez que visites el mismo sitio web, tu navegador no necesita descargarlos nuevamente, lo que resulta en una experiencia de navegación más rápida.
Existen muchos tipos diferentes de opciones de almacenamiento en caché para sitios web. A continuación se muestran algunos ejemplos comunes:
- Cloudflare — (Comenzar con Cloudflare Cache)
- OPcache — (caché de PHP)
- WordPress WP Super Cache — (Plugin de caché para sitios de WordPress)
Usar un CDN para entregar archivos estáticos
Puedes usar un CDN para entregar archivos estáticos como imágenes, video, CSS y archivos JavaScript. Esto puede ayudar a acelerar su entrega al usuario final.
Bases de Datos
Tu base de datos MySQL podría funcionar lentamente si tiene mucha sobrecarga. Si las tablas en tu base de datos tienen una "sobrecarga" excesiva (espacio vacío no utilizado), puede hacer que las consultas a la base de datos demoren más y puede hacer que el servidor web agote el tiempo de espera antes de que pueda recibir la respuesta del servidor de la base de datos.
Consulta el siguiente artículo para obtener instrucciones detalladas sobre cómo optimizar tu base de datos utilizando phpMyAdmin o SSH.
Problemas de internet
Traceroute
Una razón importante para el bajo rendimiento del sitio es cuando uno o más "saltos" tomados por los paquetes de datos que pasan a través de Internet están obstruidos o retrasados. La herramienta 'Traceroute' se usa a menudo para la resolución de problemas de red. Al mostrar una lista de enrutadores atravesados, permite al usuario identificar la ruta tomada para llegar a un destino particular en la red. Esto puede ayudar a identificar problemas de enrutamiento o firewalls que pueden estar bloqueando el acceso a un sitio. Revisa el artículo de Traceroute para más información:
ISP
Algunos usuarios pueden sufrir un peor rendimiento que otros. Esto puede ser el resultado de problemas con un proveedor de servicios de Internet en particular. La congestión de la red, la limitación del ancho de banda y las restricciones, la discriminación y el filtrado de datos, e incluso el filtrado de contenido pueden dar como resultado un rendimiento deficiente del sitio. Consulta con tu ISP (Proveedor de Internet) para ver si actualmente tienen problemas de conectividad.
Herramientas de red
Asegúrate de probar tu propia velocidad local de Internet en un sitio como Speedtest.net. Esto puede ayudar a confirmar si tu conexión local tiene problemas de conectividad.
También hay varias herramientas en línea para verificar diferentes partes de una red. Mira el artículo 'Herramientas del sitio web' para obtener una lista de herramientas de red y herramientas de carga del sitio.
Servidor Web
También es posible que haya un problema con el servidor web DreamHost en el que está alojado tu sitio. Consulta el siguiente artículo para ver ejemplos de línea de comandos que puedes usar para solucionar problemas de tu sitio y servidor:
Extensiones para el navegador
También hay complementos/extensiones del navegador que puedes agregar que te ayudan a investigar la causa de la lentitud. YSlow es bueno para probar: