Si sus sitios web están experimentando problemas de respuesta y rendimiento, siga estos pasos para intentar resolver los problemas y hacer sonreír a los usuarios.
Puede identificar los problemas que normalmente causan una respuesta lenta y un rendimiento reducido en los sitios web utilizando herramientas como Google Developers Chrome DevTools, Web Page Analyzer – 0.98 y Pingdom Website Speed Test. Destaqué estos productos gratuitos en línea en mi artículo anterior, «Herramientas de diagnóstico gratuitas para la respuesta del sitio web y cuestiones de rendimiento».
Una vez que las herramientas de diagnóstico identifican los problemas, es necesario saber cómo resolverlos. En este artículo, enumero los recursos, objetos, elementos, archivos y otros problemas típicos que hacen que los sitios web tengan un rendimiento inferior o muestren tiempos de respuesta lentos, y luego describo cómo eliminarlos o al menos reducirlos.
Recuerde que usted siempre quiere que su sitio web sea accesible para el mayor número de usuarios, y aunque parezca arcaico, todavía hay muchos usuarios que confían en las conexiones de módem de 56Kbps para acceder a Internet. Los objetivos y los umbrales de optimización deben basarse en estándares que permitan los tiempos de carga más rápidos con las conexiones de usuario más lentas.
Mejore la utilización de la red de su sitio web
Se sabe que los elementos que se enumeran a continuación causan problemas de utilización de la red para los sitios web, y las sugerencias ayudarán a minimizar estos cuellos de botella conocidos.
Galletas: Aunque las cookies son herramientas muy útiles para los sitios web, también se sabe que ralentizan los tiempos de respuesta. Las mejores prácticas para administrar sus cookies son:
- Minimice el tamaño del archivo cookie manteniéndolo lo más pequeño posible – 3000 bytes (o menos) cada uno si es posible.
- Elimine las cookies innecesarias, colóquelas en el nivel de dominio adecuado y sirva contenido estático de un dominio que no sirva cookies.
Imágenes: Usted debe optimizar sus imágenes para los sitios web utilizando las siguientes pautas:
- Los sprites CSS se incorporan agrupando varias imágenes en un solo archivo, y luego posicionándolas dentro de su CSS ayuda a reducir el número de peticiones.
- Data URI proporciona una forma de incluir datos en línea y permite normalmente que elementos separados como imágenes y hojas de estilo se llamen en una única petición HTTP en lugar de en múltiples peticiones HTTP.
- Especifique el ancho y la altura en el código del tamaño real de la imagen; el redimensionamiento de las imágenes que son más grandes que las dimensiones codificadas tarda más tiempo en renderizarse.
Tamaño total de los archivos HTML: Mantenga el tamaño total de sus archivos HTML a menos de 50K para ayudar a mantener los tiempos de carga al mínimo y asegurar tiempos de respuesta de menos de 10 segundos para conexiones de 56K.
Número total de objetos: Trate de mantener el número total de objetos en cada documento de página web HTML por debajo de 20. Cuantos más objetos totales tenga, mayor será la latencia esperada, lo que ralentizará los tiempos de respuesta. La sobrecarga de objetos contribuye a más del 80% de los problemas de pagelatencia.
Tamaño total de los objetos: Intente mantener el tamaño total de los archivos de la página web en 100K o menos para garantizar que los tiempos de carga y respuesta se mantengan por debajo de 20 segundos para las conexiones de 56K.
Mejorar el rendimiento de la página web
Los siguientes puntos ayudarán a aumentar la carga de la página web y los tiempos de respuesta y le darán a sus visitantes una experiencia en línea mucho mejor.
- Optimizar el orden de los archivos CSS y de script: Asegúrese de enlazar las llamadas a los archivos CSS externos en paralelo y de incluirlas en el <head>. El estilo en línea dentro del <cuerpo> también ralentizará el renderizado, así que asegúrese de que todo el CSS está contenido dentro de los archivos CSS externos. Todos los archivos de script deben colocarse en la parte inferior de la etiqueta <body> y justo antes del cierre </body>; esto permite la visualización progresiva del contenido de la página web.
- Eliminar reglas CSS no utilizadas: Las reglas CSS que no son utilizadas por la página web añaden sobrecarga innecesaria, que necesita ser cargada primero antes de que se cargue cualquier <cuerpo>contenido.
- Total de archivos CSS y tamaño: La combinación de su CSS en un solo archivo y la minimización de la CSS permitirá optimizar los tiempos de carga de estilo. Combinar, refactorizar, minify, y compresión GZIP son todos buenos medios para optimizar su CSS.
- Ficheros Totalscript y tamaño: Sé que es más fácil decirlo que hacerlo para algunas implementaciones, pero trate de combinar sus archivos de script <script> con el menor número posible, ya que cada archivo de script externo añadirá más sobrecarga a sus páginas web. Las técnicas de optimización para archivos de script incluyen las mismas opciones queCSS, combinar, refactorizar, minificar o incluso incrustar scripts cuando corresponda.
- Leveragebrowser caching: Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTPresource estáticas (que incluyen instrucciones al navegador para que cargue objetos previamente descargados desde el cliente local en lugar de arrastrarlos sobre la red) hará mejoras significativas en los tiempos de respuesta del navegador y en el rendimiento del sitio web.
- Minimizeredirects: Cuando, por ejemplo, las páginas web antiguas se renombran o se mueven a nuevas ubicaciones, una simple redirección apunta a los usuarios a la nueva página o ubicación; otras opciones incluyen el uso de redirecciones JavaScript o Meta. Los redireccionamientos deben utilizarse como mínimo para reducir los tiempos de ida y vuelta.
- Eliminar cadenas en URLs de recursos estáticos: Para habilitar el almacenamiento en caché de recursos estáticos proxy, asegúrese de que los parámetros de nombre de archivo se utilizan en lugar de las cadenas de consulta (es decir, «?».
- Evite las bóvedas: Otro temido recurso bastante similar a los redireccionamientos es la mala petición o las respuestas «No encontrado» o «Desaparecido» que se producen cuando el código del módulo de acceso no se ha actualizado para reflejar los objetos o recursos que se han movido o que han sido renombrados. No sé cuántas veces hemos tenido que hacer una comprobación de «enlaces rotos» en sitios web y micrositios porque los recursos externos se mueven o renombran.
Recursos adicionales
Puede profundizar en este tema leyendo cinco artículos de ConsejoTecnologico.com y consultando los dos recursos de Google Developers que enumero a continuación.