Una guía de buena práctica para reducir el peso de la página en WordPress

Actualización: marzo de 2021 Cuando se trata del peso de la página web, el tamaño es importante. Después de todo, cuanto menor sea el tamaño de una página web, más rápido se cargará. Es una idea en absoluto. Peso de la página, es decir, el tamaño de la página o hinchazón de la página, se refiere al tamaño total de una determinada página web, incluidos todos los archivos que se utilizan para crear la página: documentos HTML, hojas de estilo, imágenes, scripts y otros medios. Aún es otro valor del sitio a seguir, además de la velocidad de la página, el tiempo de operación, el tiempo para el primer byte, las solicitudes HTTP, etc.
pero, realmente importa? ¿Es un valor significativo? ¿Y cómo debe reducir el tamaño de la página y acelerar su sitio de WordPress? Vamos a ver. El promedio del sitio de escritorio en 2021 es de 2038.4 kb en la década de 1990, los sitios web eran bastante simples y consisten en archivos HTML simples e imágenes pequeñas (¡y GIF de construcción!). Hoy en día, han crecido para incluir varios archivos HTML, CSS y JavaScript, imágenes, videos, fuentes y otros tipos de archivos. El tamaño promedio de la página web en 2010 fue de 467.7 KB, en comparación con 2038.4 KB en 2021, según los datos recopilados por el archivo HTTP.

Increíble, el tamaño de las páginas web móviles aumentó en un 336% desde 2010, aunque debo señalar que el archivo HTTP comenzó a recopilar datos sobre el peso de las páginas web móviles en mayo de 2011: el tamaño promedio de las páginas web móviles luego fue 144, 8 kb. A medida que los sitios web han evolucionado a lo largo de los años, el tamaño promedio de una página web ha aumentado exponencialmente. Aunque hay algunas advertencias que vale la pena enfatizar antes de continuar:
El tamaño promedio de las páginas web, publicadas por el archivo HTTP, es un promedio tomado de un gran conjunto de datos. ¿Representa un sitio web “típico”? Tal vez no. Es decir, ¿qué es un sitio web típico? Es mejor no usar estos números en el archivo HTTP como punto de referencia para su propio sitio web. Son tendencias históricas.
Algunos sitios web han disminuido con el tiempo. Si bien algunos sitios web usaron los medios de comunicación en su enfoque, con videos, imágenes de pantalla completa, fuentes personalizadas y otros elementos de diseño, otros han adoptado un enfoque más minimalista.
El video representa el 65.9% del peso promedio de la página durante mucho tiempo, los desarrolladores han estado preocupados por el tamaño de las imágenes y cuánto representan para el tamaño total de la página. Pero woah … mira cómo los videos han superado por completo las imágenes:
Los últimos datos del archivo HTTP muestran que el video ahora representa dos tercios del tamaño total promedio de la página web. Para poner esto en perspectiva, el peso promedio de los videos fue de solo 286.3 kb para el escritorio en mayo de 2016. Curiosamente, el tamaño promedio de los videos en 2021 es mayor en el móvil que en el escritorio.

El uso de video ha explotado en los últimos años. Cada vez más sitios web usan encabezados de video y otros elementos de medios. Según WordStream, el 87% de los agentes de marketing en línea usan contenido de video, un tercio de la actividad en línea se gasta viendo videos y se ve más de la mitad del contenido de video en dispositivos móviles.

Las fuentes personalizadas no llegan a las fuentes web en ningún lado contribuyen al tamaño de la página, pero, como muestran las estadísticas, su crecimiento en la popularidad no es realmente algo de qué preocuparse. En noviembre de 2010, las fuentes representaron 59.2 kb del tamaño total de la página, en comparación con 132.1 KB en enero de 2021. Y más interesante es cómo el número promedio de solicitudes HTTP de fuentes alcanzó cuatro en 2015, disminuyó a tres en 2016 y permaneció Constantemente a las cuatro de 2017, solo el escritorio alcanzó cinco. Esto podría ser una indicación de que los diseñadores y desarrolladores han decidido un número óptimo de fuentes web.
No nos olvidemos de los scripts y las hojas de estilo El peso promedio de los archivos JavaScript continúa aumentando, aumentando en un 316,4% desde finales de 2010. El número promedio de solicitudes HTTP para JavaScript también ha aumentado.

Los bytes CSS también han aumentado constante: el promedio en 2021 es de 73.3 kb en el escritorio y 68.7 kb en el móvil.

¿El tamaño de la página realmente importa? ¿Internet no se vuelve más rápido? A medida que los ciclistas usan ropa apretada en la piel, que es aerodinámica, evitando la ropa ancha que sale en el viento, los desarrolladores deben mantener sus ubicaciones lo más débiles posible, para que puedan trabajar a velocidades óptimas.

Aunque el peso de la página es solo uno de los muchos valores del sitio web y, sinceramente, no debería ser su prioridad número uno, sigue siendo un factor importante a considerar, porque contribuye directamente a la velocidad de la página. Sí, Internet se vuelve más rápido. Los navegadores, caché, redes más rápidas, CDN y otras tecnologías hacen que la web sea más rápida para los usuarios. Pero esta no es una razón para que su sitio tenga una grasa extra, por así decirlo. Radware sigue los tiempos de carga de los primeros 100 sitios comerciales electrónicos en 2011 y descubrió que tanto los tiempos de carga como el tiempo de interacción han sufrido significativamente. ¿Causa? El tamaño y la complejidad de la página. A medida que las páginas se vuelven más hinchadas y complejas a veces, esto continúa una tendencia generalmente más lenta. ¿Qué tan grande es el tamaño ideal de la página web? El experto en rendimiento web, Tammy Everts, recomienda 1 MB como ideal para páginas web de carga rápida. Continúa escribiendo que muchas compañías están apuntando a 1 MB para sus páginas como parte de su presupuesto de rendimiento.

Para obtener más información sobre los presupuestos de rendimiento, consulte esta maravillosa lectura de Brian Jackson.
¿Pero tus usuarios móviles? Anteriormente he abordado el rendimiento percibido en este blog, por lo que sabe todo sobre cómo es posible hacer que los sitios web se sientan más rápido de lo que son, para obtener ganancias en la experiencia del usuario. Pero mejorar el rendimiento percibido no siempre es la respuesta, especialmente cuando se trata de dispositivos móviles.
Los usuarios de telefonía móvil que enfrentan el ancho de banda y/o los límites de datos simplemente no tienen el tiempo o la asignación de datos para descargar sitios web hinchados, por lo que su sitio debe ser lo más posible de manera eficiente posible para estos usuarios. Porque si su sitio no cobra lo suficientemente rápido por ellos, simplemente saldrá de su sitio. El ancho de banda y los límites de datos de sus usuarios variarán de un país a otro, pero hay una excelente computadora en línea, cuánto cuesta mi sitio, que puede decirle, en dólares, sus páginas de ubicaciones en el mundo. Abrirá los ojos sobre cómo los dispositivos móviles usan páginas en los países del primer mundo en comparación con el tercer mundo. 6 consejos para reducir el peso de la página en WordPress 1. La optimización de imágenes es una fruta que no cuelga cuando se trata de mejorar el peso de la página. A menudo, estos son los archivos que duran más de carga en una página web, pero son relativamente fáciles de optimizar. Comience por hacer tiempo para revisar sus fotos y eliminar las que no necesita. Luego comprimelos con una herramienta de optimización de imágenes, como Imagify. Esto eliminará la información innecesaria del archivo y ayudará a la imagen a cargarse más rápido. La creación de SPRits CSS puede ayudar a reducir aún más el peso de la página. Esta técnica le permite reducir más imágenes en una imagen. Luego, con CSS, puede manejar el sprite y mostrar solo una determinada parte en la página. Hay algunas herramientas excelentes que pueden ayudar a crear sprites CSS, como sprites.

Las imágenes de carga perezosa también pueden mejorar el tiempo de carga de la página, especialmente para los usuarios móviles, y es una función que puede activar en WP Rocket.¡Obtenga WP Rocket ahora y pruebe la mejora de inmediato!2. Reduzca y combine los elementos CSS y JavaScript minimizando y combinando hojas de estilo y guiones de su sitio.Esto no solo ayuda a reducir el peso de la página, sino que también puede reducir la cantidad de solicitudes HTTP para cargar su sitio.WP Rocket es la forma más fácil de reducir y comprimir archivos CSS y JS en unos pocos clics.De hecho, puede reducir y combinar los archivos en la pestaña “Archivos estáticos”.Verifique los archivos que desea minimizar y combinar.Haga clic en “Guardar sus cambios” cuando haya terminado.
3. Use una red de entrega de contenido utilizando un CDN puede acelerar tan pronto como sus páginas para usuarios en lugares estén lejos del lugar donde está su servidor, es decir, tráfico internacional. Para obtener más información sobre cómo funcionan los CDN y encuentran lo mejor para usted, consulte la guía de cohetes WP, las mejores redes de entrega de contenido de WordPress. Cloudflare, un CDN popular se puede integrar fácilmente con WP Rocket. Para hacer esto, vaya a la pestaña “CDN” en WP Rocket para activar CloudFlare y luego agregue su cuenta. Para obtener más información, consulte la documentación de WP Rocket sobre cómo usar CloudFlare con WP Rocket. 4. Use la memoria de su navegador Si el navegador del usuario puede almacenar archivos estáticos, no tendrá que descargarlos nuevamente la próxima vez que visite su sitio. Por lo tanto, asegúrese de activar la memoria de su navegador para su caché de cohetes WP. La memoria del navegador en caché se aplica automáticamente a los servidores Apache, por lo que no los usuarios deben tomar pasos adicionales. Pero aquellos en los servidores Nuginx pueden usar Rocket-Ginx, una configuración NGINX que hace que WP-Rocket y más rápido mediante el servicio directo de páginas estáticas sin cargar WordPress o PHP. 5. Reduzca las fuentes web innecesarias ¿Realmente necesita ocho fuentes en su sitio? ¿O dos harán el trabajo (uno para títulos y otro para el texto del párrafo)?
La tipografía es fundamental para un diseño web bueno y moderno: mejora la legibilidad, la legibilidad, la accesibilidad y contribuye a la marca. Pero también tiene un costo de rendimiento, porque cada fuente que usa es un recurso adicional que los visitantes deben descargar al visitar su sitio. El jurado establece exactamente cuántas fuentes hay demasiadas, aunque la regla general es que tres representan mucho y lo mejor es quedarse con dos. 6. Mantenga su sitio débil menos media. Si ya no usa un complemento, un tema, una fuente web, un script u otros recursos en su sitio, elimínelo. Si cree que es posible que deba hacerlo más tarde, debe eliminarlo, puede agregarlo en cualquier momento más tarde. Asegúrese de monitorear y revisar regularmente los recursos en su sitio web para que solo use lo que necesita y nada más. Esta buena práctica no es solo para mejorar el rendimiento del sitio, sino también para la seguridad del sitio. ¡Puede haber reglas CSS de CSS no utilizadas que bloqueen su sitio, en cuyo caso puede usar herramientas CSS no utilizadas o aprovechar el nuevo cohete WP para eliminar CSS sin usar con un solo clic!