fbpx Skip to content

Lectura de gr√°ficos de cascadas para centrarse en la velocidad de la p√°gina

No hay duda de que es importante hacer que las p√°ginas de su sitio web se carguen r√°pidamente. Las investigaciones muestran que las personas empiezan a perder el enfoque en algo despu√©s de un solo segundo, y pierden el inter√©s por completo en alg√ļn momento entre 4 y 10 segundos. Incluso existe una correlaci√≥n directa entre los tiempos de carga lentos y la p√©rdida de ventas, seg√ļn Amazon y Kissmetrics. Pero, ¬Ņqui√©n tiene tiempo para herramientas complejas como la lectura de cartas de cascada? La soluci√≥n f√°cil ser√≠a mantener los archivos peque√Īos y el dise√Īo simple, ¬Ņverdad?

Tal vez no. Las tendencias del dise√Īo moderno se dirigen hacia la animaci√≥n y las im√°genes detalladas a pantalla completa. Si usted no tiene estos activos, su sitio puede parecer lavado al lado de sus competidores. Y aunque estas funciones pueden aumentar la participaci√≥n de los usuarios y las ventas en un vac√≠o, no hacen nada por usted si atascan tanto su sitio que nadie las ve. Esto ni siquiera menciona el hecho de que Google comenz√≥ a incluir la velocidad de la p√°gina en sus algoritmos de clasificaci√≥n.

Los grandes medios de comunicaci√≥n no son lo √ļnico que puede ralentizar un sitio web, tampoco. Aqu√≠ es donde una habilidad como la lectura de gr√°ficos en cascada puede resultar √ļtil, ya que estas herramientas proporcionan un potente an√°lisis de cada paso entre las conexiones DNS y un renderizado de p√°gina completa.

El mejor punto de partida: Lectura de tablas de cascadas

Herramientas como Pingdom y Google PageSpeed Insights le pueden dar una idea decente de por dónde empezar, pero el mejor punto de partida en un gráfico de cascada, como los que proporciona Web Page Test. Estas herramientas en profundidad le ofrecen un impresionante desglose de todo lo que se está cargando en su sitio: cuándo comienzan, cuándo son visibles, cuándo terminan y cómo se relacionan con todos los demás archivos. Aunque Pingdom y Google pueden indicarte la dirección correcta, un gráfico de cascadas te mostrará exactamente dónde ir.

Después de realizar la prueba, verá una puntuación general en la parte superior de la página, al igual que otras herramientas.

Sin embargo, es importante no distraerse con esto. El verdadero poder de esta herramienta es un simple desplazamiento, leyendo la tabla de cascadas en sí misma. Abajo encontrarás el primer tercio de la prueba del mismo sitio.

Aunque la tabla puede parecer abrumadora, no es demasiado difícil de leer. Cada elemento está clasificado, y cada clase está codificada por colores. A la izquierda está el nombre del archivo o recurso (pasando el puntero del ratón sobre él mientras se proporciona el nombre completo del archivo y su ubicación), y a la derecha se hace un seguimiento del tiempo en segundos, desde que comienza a cargarse hasta que es visible hasta que se hace.

A pesar de que este sitio obtuvo una calificaci√≥n general de “A”, podemos ver que hay algunas im√°genes que podr√≠an aumentar significativamente la velocidad de carga si reciben cierta atenci√≥n. Si queremos ir m√°s lejos, podemos ver que algunas fuentes tardan un poco en cargarse, y algo est√° devolviendo un error 404 tambi√©n. Mirando el gr√°fico completo, podemos empezar a identificar los archivos exactos que est√°n ralentizando nuestro sitio, y abordarlos en consecuencia.

Cómo abordar los problemas en consecuencia

Cada sitio web es diferente, y requerir√° diferentes arreglos y tal vez incluso diferentes rutas a esos arreglos que el siguiente sitio. Sin embargo, hay algunos consejos generales para mantener su sitio lean y r√°pido.

Optimizar medios

Optimizar los medios simplemente significa reducir el tama√Īo del archivo de im√°genes o v√≠deo sin sacrificar la calidad. Esto significa que no tardan tanto en transferirse al navegador de un usuario, lo que significa que no tardan tanto en cargarse. El proceso real es bastante t√©cnico, pero puedes encontrar toneladas de herramientas gratuitas en l√≠nea (Google PageSpeed Insights incluso te ofrecer√° hacerlo por ti cuando realices una prueba).

Incluso puede conservar la calidad en todos los dispositivos utilizando el atributo srcset en sus etiquetas de imagen. Esto le permite proporcionar a la etiqueta m√ļltiples im√°genes de diferentes resoluciones y tama√Īos, y el navegador elegir√° la mejor para servir a cada usuario.

Minimizar archivos

Al igual que la optimizaci√≥n de medios, la miniaturizaci√≥n de archivos se trata de reducir el tama√Īo de los mismos. La mayor√≠a de los sitios extraen de una amplia gama de archivos HTML, CSS, JavaScript y otros. Todo lo que hace falta para minimizarlos es recortar los caracteres innecesarios: espacios, saltos de l√≠nea, comentarios, etc. Por lo general, la mejor pr√°ctica es mantener dos archivos: uno “bonito” para el desarrollo y otro “feo” para la producci√≥n. Podr√≠a hacerlo manualmente, pero es mucho m√°s f√°cil ejecutar sus archivos a trav√©s de una herramienta gratuita.

Aplazar la carga de archivos

Si incluso un archivo Javascript minificado est√° ralentizando su sitio, podr√≠a considerar aplazar su carga hasta que se cargue el resto de la p√°gina. Para los archivos externos, puede lograr esto con un simple atributo en sus etiquetas de script. Aunque si un plugin captura estos archivos autom√°ticamente, y ni siquiera ves las etiquetas del script, las cosas se pueden complicar. Para los archivos internos, puede separar su c√≥digo en “necesario para la carga” e “innecesario para la carga”, poner el c√≥digo innecesario en un archivo separado, y luego poner este script cerca de la parte inferior de sus etiquetas de cierre de cuerpo.

Almacenamiento en caché de objetos

El almacenamiento en caché de objetos es cuando archivos como HTML e imágenes se almacenan temporalmente en el navegador de un usuario después de que se cargan. Esto es genial ya que significa que la página ni siquiera se recarga cada vez que alguien pulsa el botón de regreso, o incluso cuando regresa una semana después. Hay toneladas de plugins en el mercado para ayudar a cachear automáticamente, pero es posible hacerlo usted mismo usando APIs (como en WordPress o Drupal) si así lo desea.

Compresión GZIP

La compresi√≥n GZIP es una pr√°ctica bastante est√°ndar, pero a√ļn no es totalmente universal. Los detalles de esta pr√°ctica podr√≠an ocupar una entrada del blog por s√≠ mismos, pero hay una manera r√°pida de ver si esto necesita su atenci√≥n con la herramienta “Check GZIP Compression”.

Estas son técnicas fundamentales para mantener la carga rápida de su sitio, pero existen medios más complejos disponibles. Todo depende de lo que su sitio necesita para alcanzar esos tiempos de carga tan rápidos. Esperamos que el aprender a leer las cartas de las cascadas te haya guiado en la dirección correcta!