4 consejos para mejorar el rendimiento de su página

Sep 12, 2025

Cómo

Web-performance expert Henri Helvetica sitting with his laptop

[dieciséis]

Analista de rendimiento web Henri Helvetica estará compartiendo sus propuestas PRO sobre cómo aumentar el desempeño de su sitio en Generar nueva york 2018. Obtenga su boleto ahora .

El rendimiento finalmente se está convirtiendo en una parte más grande de la conversación en el diseño web y el desarrollo. Sin embargo, aún puede ser un desafío para que las personas consuman realmente el gran contenido que está por ahí y adopte un enfoque de desempeño de manera más regular.

Afortunadamente, el desarrollador freelance y el analista de rendimiento web Henri Helvetica (nombre real Henri Brisard), está a su disposición para ofrecer sus mejores consejos para soportar el rendimiento de su sitio.

01. esforzarse por medir

Helvetica sugiere que, en primer lugar, tiene que asegurarse de medida. "Nunca puedes mejorar lo que no mide", explica. "Una vez que tenga sus medidas y datos establecidos, debe averiguar qué elementos importantes deben medir. Puede tener dos páginas que se carguen en nueve segundos, pero uno puede tener la ventana electrónica llena mucho más rápido, por lo que tiene una mejor experiencia de usuario.

"Tienes que medir lo que es importante en el proceso de carga para su sitio y su empresa comercial. Piense en lo que es importante para que sus usuarios interactúen. Cada sitio tiene sus propias necesidades individuales".

Una vez que haya echado un vistazo a una carga de páginas, lo que lo ayuda a recoger cómo y cuándo se cargan ciertos artículos, el siguiente paso de Helvetica suele ser para activar Chrome DevTools para evaluar exactamente lo que está pasando. Es una opción obvia, porque está justo allí y es gratis, no necesita saltar a otra herramienta para intentar descubrir por qué una página puede ser lenta. Sin embargo, muchos desarrolladores apenas lo usan. "Devtools es un poco como un detector de humo", argumenta Helvetica. "Si hay un incendio, DevTools te lo dirá. Al menos le mostrará dónde está el humo ".

02. Pierde un poco de peso de la página

Luego, Helvetica mira la cascada, que indicará diversos temas, como el tamaño de un activo y la latencia que participó en la carga. Si el sitio contiene imágenes mal de tamaño, por ejemplo, generalmente verá una cascada muy larga, que es uno de los puntos más fáciles de detectar rápidamente. Las imágenes son una de las mayores culpables para un sitio de carga lenta, un problema que se puede fijar de manera bastante fácil. Como son la mayor fuente de datos, las imágenes también son la mayor fuente de ahorro de datos.

"Siempre tendría en cuenta su peso de la página", explica Helvetica. "No importa cómo lo cambie, si tiene una imagen que es de 3MB, o incluso tres imágenes a 1 MB cada una, es probable que tenga un desafío de la experiencia de usuario.

Web-performance expert Henri Helvetica coding on his laptop

"Ese peso de la página también será la víctima de su red, porque una red celular nunca puede predecirse realmente. Por lo tanto, desea asegurarse de que sus activos sean pequeños y optimizados para la ventana gráfica, lo que significa que no debe poder ver ninguna Activos de tamaño de escritorio en un dispositivo móvil ".

Helvetica también recomienda la carga perezosa, una técnica que retrasa la carga de un objeto hasta que sea necesario. "No todos los usuarios lo van a llegar al fondo de una página", advierte. "Muy a menudo, puede estar cargando activos que nunca se vieron. El empleo de una carga perezosa será muy beneficiosa porque está ahorrando en datos, así como un drenaje de la batería o la administración de la memoria. Si no está cargando la imagen, no va a tener ninguna memoria para usurpar en el dispositivo ".

03. Vea cómo se apila

Otra razón por la que Helvetica Favors DevTools es porque ahora también proporciona métricas como la primera pintura (el tiempo que lleva al usuario ver el primer píxel de contenido) y la primera pintura significativa (el tiempo que se necesita para que el contenido principal de la página sea visible. ).

Luego está la tira de película (ya sea en DevTools o Rendimiento WebPagetest) que muestra capturas de pantalla incrementales del navegador que representa un sitio, por lo que puede ver cómo se ve una página cuando se carga. Al examinarlos, puede averiguar qué activos se cargaron cuando se cargan en las formas de cargarlos en un momento anterior en la línea de tiempo.

En WebPagetest, que Helvetica elogia por su nivel de detalle inspirador, también puede exportar un video de la carga y comparar la transferencia de cine con la de un competidor. "Una vez que conecte los puntos, puede explorar cómo mejorar la experiencia del usuario al traer estos activos a la ventana más rápida", explica Helvetica.

04. Cortar el desorden.

Helvetica destaca que las decisiones de diseño también tienen un impacto en el rendimiento, y que su primera carga en la ventana gráfica idealmente no debe ser lo más rápida posible, sino también como libre de desorden posible.

Por esa razón, debe comprender la serie de eventos que tienen lugar para representar la vista inicial de una página web, la ruta de representación crítica. Estos eventos pueden optimizarse evitando la carga de activos que no son necesarios y tomando decisiones en la selección de fuentes web y formatos de imagen.

"Asegúrese de mantener a sus SVGS como sea posible de la complejidad posible", sugiere Helvetica a través de un ejemplo. "Entonces tendrás menos código cuando rindes tu SVG. Escucho esto de los desarrolladores todo el tiempo. Obtendrán un SVG de los diseñadores y tendrán que devolverlo porque afectaría el rendimiento ".

Este artículo se publicó originalmente en el número 303 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar Número 303 o suscribirse a la red .

¿Quieres una mayor idea de soportar la velocidad de tu sitio?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018

Si está interesado en garantizar que sus páginas sean más rápidas, asegúrese de tomar un boleto para Generar nueva york . Henri Helvetica se leerá en las prácticas actuales e incluso experimentales empleadas en la medición de aplicaciones web, y brindar experiencias de los usuarios de un ejercicio, además de ofrecer más información sobre las mediciones, como la primera pintura, la pintura significativa y el tiempo para interactiva.

Generar Nueva York tiene lugar del 25 al 27 de abril de 2018. Obtenga su boleto ahora .

Artículos relacionados:

7 consejos de expertos para clavar el rendimiento web
3 herramientas principales para probar el rendimiento web
¿Por qué el rendimiento web necesita sentirse rápido?

4 consejos para mejorar el rendimiento de su página

01. esforzarse por medir

02. Pierde un poco de peso de la página

03. Vea cómo se apila

04. Cortar el desorden.

¿Quieres una mayor idea de soportar la velocidad de tu sitio?

Cómo - Artículos más populares

Comienza con Artrage

Cómo tomar una captura de pantalla en una MAC

Una guía para la visión en la nube de Google

Procreate Tutorial: Cómo pintar como los maestros viejos

Cómo construir un sitio de blogs con Gatsby

Cómo dibujar un elefante

Crea una tabla de colores simple

Colourise Greyscale Trabajo en Photoshop

Categorías