Cuando se trata de las páginas de su sitio web, el tamaño importa. Cuanto más pequeño sea el tamaño de archivo de una página, más rápido se cargará para cualquiera que lo solicite.
Y la gente hacer observe cuánto tarda una página en cargarse. De hecho, según los datos de Pingdom, 24% de los usuarios abandonarán un sitio eso toma cuatro segundos para cargar, y El 38% de los usuarios abandonarán la página. si toma cinco segundos
Sin mencionar que Google ha admitido usando la velocidad del sitio en el ranking de búsqueda web, ya que los sitios más rápidos tienden a crear usuarios más felices.
Además, hoy en día, muchos buscadores usan sus teléfonos móviles para buscar y explorar sitios web:donde las conexiones a Internet irregulares y las bajas velocidades de datos hacen que sea aún más difícil cargar páginas de gran tamaño.
En última instancia, para mantener un rango de página saludable, su negocio debe centrarse en ofrecer una experiencia de sitio web rápida y optimizada en todos los dispositivos. Para garantizar que su sitio web no se vea afectado por el tráfico, esta publicación le explicará todo lo que necesita saber sobre el tamaño de la página y cómo reducirlo.
¿Qué es el tamaño de página?
El «tamaño de página», también llamado peso de página, se refiere al tamaño general de una página web en particular.
Un tamaño de página incluye todos los archivos que se utilizan para crear la página web, incluido el documento HTML, las imágenes, los scripts y otros medios incluidos.
¿Qué es un buen tamaño para una página web?
Para ayudarlo a comparar el peso de su página, echamos un vistazo a tamaño promedio de una página web (tanto en computadoras de escritorio como en dispositivos móviles) entre el 1 de febrero de 2020 y el 1 de marzo de 2020:
En 2020, la página web promedio de escritorio pesa 2080 KB, mientras que la página móvil promedio pesa 1885 KB – esta es una gran diferencia con respecto a 2017, cuando un escritorio promedio página web pesaba 1532 KB y el promedio página web móvil pesaba 1354 KB.
Por supuesto, es importante tener en cuenta que los datos anteriores muestranpromediotamaño de una página web típica, lo que significa que muchos sitios web probablemente estén muy por debajo de este tamaño, mientras que otros más pesados podrían sesgar los datos en la otra dirección.
En definitiva, depende del sitio. Si bien algunos sitios pueden incorporar fuentes personalizadas, video de pantalla completa y otros elementos de diseño que «pesan» la página, otros sitios probablemente adopten un enfoque minimalista y se adhieran a texto simple y un fondo blanco.
Tenga en cuenta que el peso de sus páginas variará según su empresa o industria. Si tiene un sitio web de comercio electrónico con una amplia variedad de fotos, es probable que pueda anticipar un mayor peso de página.
Pero, en general, debes aspirar a ser a o abajo la media.
Por supuesto, es igualmente importante tenerlo en cuenta: el peso de la página no siempre es la métrica más importante a tener en cuenta.
Tome Amazon como ejemplo: usar PageSpeed Insights de Google, busqué en Amazon.com y vimos que obtuvieron un mísero 51% del 100% para el rendimiento de la página:
Sin embargo, si no está seguro de si el peso de su página podría reducir desproporcionadamente la calidad general de su página, intente ingresar su propio sitio web en PageSpeed Insights de Google para medir el rendimiento general.
Si no está satisfecho con la velocidad actual de su página o cree que el peso de su página debería ser menor, exploremos cómo puede reducir ese peso ahora mismo.
5 consejos para reducir el tamaño de la página
1. Cambia el tamaño y comprime tus imágenes
Cuando se trata del peso de la página, las imágenes son uno de los mayores contribuyentes. Si está buscando reducir el tamaño, querrá comenzar cambiando el tamaño de las imágenes innecesariamente grandes.
Al subir fotos, tenga en cuenta que las dimensiones de la imagen nunca deben ser mayores que el tamaño del contenedor. Si el contenedor tiene un ancho máximo de 500 píxeles, generalmente no hay razón para cargar una imagen de 1,000 píxeles de ancho.
Pero supongamos que le gustaría ofrecer una imagen de alta resolución que las personas puedan compartir y descargar, ¿qué debe hacer? Recomendamos cargar una imagen que tenga exactamente el ancho del contenedor en el que se encuentra y vincularla a la versión de alta resolución para evitar pesar su página.
Además de las dimensiones de la imagen, puede reducir aún más el tamaño de una imagen comprimiéndola. Comprimir una imagen ayuda a reducir su tamaño de archivo, lo que en última instancia ayuda a reducir el tiempo que tarda una página en cargarse.
Si está buscando una herramienta de compresión, estos son algunos de nuestros favoritos:
Si eres un usuario de HubSpot, estás de suerte: HubSpot COS presenta un cambio automático de tamaño de imagen y compresión de imagen.
«Si un usuario carga una imagen que tiene dimensiones de 5,000 x 5,000 pero solo la muestra en el sitio web como 500 x 500, entonces usar el cambio de tamaño automático de la imagen ayudará a disminuir el tiempo de carga del navegador. La compresión de imágenes, por otro lado, disminuye el tamaño del archivo al tiempo que conserva la calidad de la imagen que se cargó «, explica Maggie Himba de HubSpot.
Por supuesto, la forma más fácil de reducir el peso de su página es eliminar tantas imágenes innecesarias como sea posible. Pero para los que necesitan quedarse, los consejos mencionados anteriormente deberían ser útiles.
2. Use CSS Sprites
Entonces, ahora sabemos que tener una tonelada de imágenes, especialmente las grandes, en cualquier página aumentará el peso de la página y disminuirá el tiempo de carga, ¿verdad?
Esto se debe a que cada imagen genera una solicitud de servidor, lo que ralentiza todo el proceso.
Ingrese sprites CSS.
Un sprite CSS se refiere a una colección de imágenes que se combinan para crear un archivo de imagen,de acuerdo con W3School. Luego, usa CSS para mostrar solo la parte de la imagen combinada que desea que aparezca. Al hacer esto, está reduciendo la cantidad de solicitudes de servidor necesarias para que se cargue la página.
Para aclarar, a continuación hay una explicación más visual. El ejemplo A incluye archivos de imagen separados para cada uno de los íconos del navegador, con un total de 70.7 KB. El ejemplo B usa sprites CSS, una imagen que usa CSS para mostrar partes de esa imagen, para mostrar la misma información exacta. El tamaño total de esas imágenes es menos de la mitad del Ejemplo A.
Fuente: Tutorial Republic
3. Eliminar fuentes personalizadas innecesarias
Las fuentes personalizadas son divertidas.
Añaden personalidad a sus páginas y ayudan a diferenciar su negocio de los demás. Sin embargo, el problema con las fuentes personalizadas es que pueden tener algo de peso.
Afortunadamente, hay una solución si cree que las fuentes personalizadas son necesarias para el diseño de su sitio web: crear un archivo WOFF2.
Como Joshua Stopper, desarrollador principal de Wholegrain Digital, escribe: «Podría decirse que el cambio más fácil que se puede hacer, que no tiene inconvenientes, es convertir el [custom] fuente al formato más moderno y eficiente disponible en los navegadores, WOFF2 … en nuestro caso, logramos una reducción del 60% simplemente cargando un archivo WOFF2 sobre un TTF «.
Sin embargo, si está buscando una manera fácil de recortar algo de peso de su página, es posible que desee volver a evaluar la cantidad de fuentes personalizadas que está utilizando. Si bien una pareja no va a doler, usarlos en exceso podría dañar la velocidad de tu página.
4. Minimiza los recursos
¿Podría uno de sus recursos reducirse mediante la minificación?
«La minimización se refiere al proceso de eliminar datos innecesarios o redundantes sin afectar la forma en que el navegador procesa el recurso, por ejemplo, comentarios y formateo de código, eliminación de código no utilizado, uso de nombres de funciones y variables más cortos, y así sucesivamente». Los desarrolladores de Google explican.
De acuerdo con Google, así es como debe acercarse a minimizar sus recursos:
HTML
Genere una versión optimizada de su código HTML utilizando elPageSpeed Insightsherramienta. Use este análisis para ejecutar su página HTML y navegar por la regla ‘Minify HTML’. Finalmente, haga clic en ‘Ver contenido optimizado’ para acceder al código HTML minimizado.
CSS
Echa un vistazo a las siguientes herramientas:
JavaScript
Echa un vistazo a las siguientes herramientas:
5. Use una red de entrega de contenido (CDN)
Una red de entrega de contenido se refiere a «un sistema interconectado de servidores de caché que utilizan la proximidad geográfica como criterio para entregar contenido web». de acuerdo con TechTarget.
Qué significa eso? ¿Y por qué te importa?
Digamos que todos los elementos de su sitio web se almacenan en Boston, Massachusetts. Es una gran noticia para los bostonianos, o cualquier persona en los Estados Unidos, que están tratando de acceder a las páginas de su sitio. Pero, ¿qué pasa con ese visitante fiel en Londres? Es probable que les lleve mucho más tiempo cargar sus páginas solo por la ubicación de su servidor.
Un CDN tiene como objetivo resolver esto almacenando los elementos de su sitio web en múltiples ubicaciones en todo el mundo para garantizar que todos tengan una oportunidad justa en un tiempo de carga rápido.
Nota: Si bien este paso no necesariamente reducirá el peso de su página, ayudará a mejorar su velocidad, que es lo que realmente buscamos de todos modos, ¿verdad?
Listo para pesar?
Antes de que pueda aplicar estos consejos, es mejor comenzar por tener una idea de lo que está trabajando. Para probar la velocidad y el tamaño de su sitio web, consulte Analizador de página web de WebsiteOptimization.com.
Y si desea un informe más detallado del rendimiento general de su sitio web, echa un vistazo al recientemente rediseñado sitio web de HubSpot. Recibirás una p gratisInforme personalizado que califica las métricas clave de su sitio, incluido el rendimiento, la preparación móvil, el SEO y la seguridad.
