Cómo acelerar el tiempo de carga de la página con optimizaciones simples del sitio web

La velocidad de la página puede hacerte o deshacerte en Internet.

Una carga de página más rápida generalmente significa mejores resultados generales para la velocidad de su sitio. Cada aspecto del éxito de un sitio web está relacionado con la velocidad de la página, desde el SEO hasta las conversiones, la experiencia del usuario y más.

Desde el proveedor de alojamiento que elija hasta la aplicación con la que decida trabajar, hay muchas áreas que se pueden optimizar. Con tantas áreas a considerar, mejorar la velocidad de la página puede ser un proceso complejo. Aprender a optimizar el tiempo de carga de la página web de manera fácil de implementar es crucial para el éxito.

Entonces, ¿qué puedes hacer para asegurarte de estar optimizado? Veamos algunas formas de hacer que su página web sea más rápida, cómo acelerar el tiempo de carga de la página y otras mejores prácticas para el tiempo de carga de la página y el aumento de la velocidad.

Por qué es importante el tiempo de carga de la página

Antes de entrar en cómo acelerar el tiempo de carga de la página, primero comprendamos por qué es tan crítico.

Google anunció por primera vez que la velocidad del sitio afectaría la clasificación en 2010 y ha seguido demostrando su importancia. En 2018, Google introdujo la velocidad de la página como un factor de clasificación para la velocidad del sitio móvil.

Los especialistas en SEO rápidamente comenzaron a tratar de optimizar los elementos en la página y hacer que el motor de búsqueda corte. Los que no se quedaron atrás. Y ahora, con Core Web Vitals anunciado recientemente, la velocidad es más crítica que nunca.

¿Quieres aprender más sobre cómo mejorar la velocidad de carga de la página? Aquí hay algunas áreas clave a considerar.

Importancia de la velocidad de la página

El tiempo de carga de la página siempre ha sido importante por una razón bastante obvia: las conversiones. En pocas palabras, los sitios rápidos aumentan las conversiones y los sitios lentos las reducen.

De hecho, una mejora de 0,1 segundos en la velocidad del sitio web móvil da como resultado un aumento del 8,4% en las tasas de conversión para las empresas minoristas, según descubrió Google en un estudio de 2020.

La velocidad del sitio también afecta las tasas de rebote. Cuando los usuarios encuentran un sitio lento, se van. Un retraso de dos segundos en el tiempo de carga de la página podría aumentar la tasa de rebote de un sitio web en un 103 %, según un informe de Akamal Technologies.

Probar el tiempo de carga de su página

Para obtener una instantánea de su sitio web y crear puntos de referencia antes y después para el proceso de optimización, lo primero que querrá hacer es probar la velocidad actual de su página. Un par de herramientas con las que puede comenzar son Page Speed ​​Insights de Google y Webpagetest.org.

Asegúrese de ejecutar múltiples pruebas y promediar sus resultados. La prueba de página web le permite hacer esto automáticamente en el menú de configuración. Siempre es aconsejable elegir una ubicación de prueba que esté cerca de donde está alojado su sitio para asegurarse de obtener los resultados más precisos.

Así es como generalmente configuramos webpagetest.org para verificaciones básicas de velocidad.

A continuación, puede ver el promedio de los resultados de una prueba de velocidad de página en el sitio de demostración de Magento. Hemos seleccionado tres de las estadísticas más importantes y significativas que queremos usar para optimizar el sitio.

La primera estadística es el tiempo de carga. Esto nos muestra el tiempo completo que tarda en cargar nuestra página. Recuerde, si una página tarda más de tres segundos en cargarse, puede estar perdiendo la mitad de su tráfico potencial. Este número es el más importante para nosotros para cambiar.

La segunda estadística es Tiempo hasta el primer byte (TTFB). Si bien puede ayudar a brindar orientación, TTFB se puede manipular con relativa facilidad y su importancia puede variar. Si usa Google Lighthouse, también puede realizar un seguimiento de la primera pintura con contenido y la primera pintura significativa que informan sobre la rapidez con la que su página "pinta" la pantalla con elementos de su contenido.

¿Alguna vez cargó una receta y la mitad de ella no se ha puesto al día con la velocidad con la que se desplaza porque está tratando de pasar todos los anuncios y la narrativa? Eso es porque el tiempo de FCP/FMP es muy lento.

La tercera estadística es el tamaño de la información que se descarga en la página. Si este número es muy grande, puede ser útil observar más de cerca cuánto tiempo tardan los diferentes elementos de la página.

Cascada de velocidad de página

Si desea aprender cómo acelerar el tiempo de carga de la página, aísle qué elementos están ralentizando la velocidad de la página y eche un vistazo a la cascada. Un ejemplo de cómo se ve la cascada se puede ver a continuación.

Una vez que haya mirado la cascada, debería tener una mejor idea de lo que se puede mejorar. Arriba, podemos ver que algunos de los archivos front-end .js probablemente se pueden acelerar un poco.

Más abajo en la cascada (fuera de la página), también hay algunos archivos de imagen que tardan más en cargarse y deben optimizarse. Comprender qué elementos hacen que las páginas se retrasen es clave cuando su enfoque es un tiempo de carga de página más rápido.

Cómo acelerar el tiempo de carga de la página a través del contenido web

Comprimir y optimizar imágenes

Al buscar cómo acelerar el tiempo de carga de la página, la compresión de imágenes es un excelente lugar para comenzar. Con demasiada frecuencia, los diseñadores web crean imágenes que adoptan resoluciones inútilmente altas. Las imágenes de alta resolución ocupan más espacio de almacenamiento en un servidor y pueden aumentar significativamente los tiempos de carga.

Recomendamos encarecidamente escalar las imágenes adecuadamente. Si una imagen solo va a ocupar un espacio de 100 x 100 píxeles en su sitio, no es necesario que sea de 1000 x 1000. Recomendamos un complemento como Smush o EWWW Image Optimizer si está ejecutando un sitio de WordPress.

Cómo convertir a imágenes WebP en WordPress >>

Extensiones de tipo de imagen

Al guardar imágenes, es importante saber qué extensión usar. ¿Debe ser .jpg o .png? ¿Alguien te envió un logo en .svg? Hay mucha información contradictoria sobre lo que es mejor.

Muchos dicen que .png (Portable Network Graphics) es la mejor opción porque está diseñado para comprimir imágenes tanto como sea posible sin perder calidad. Eso es parcialmente cierto. Dicho esto, hay excepciones a la regla. Por ejemplo, los archivos .JPEG funcionan mucho mejor cuando se utilizan fotografías.

Nuestra sugerencia es verificar cómo guardar su archivo de diferentes maneras afecta el tamaño y la calidad cuando se muestra en una vista previa de su página. Si nota una clara diferencia, opte por la mejor extensión.

Comprimir contenido del sitio

Las imágenes no son los únicos elementos de la página que necesitan un apretón. También debe comprimir elementos CSS, HTML y JavaScript en su sitio. GZip es una herramienta de compresión muy recomendada que Google sugiere probar antes de implementarla en un entorno de producción. Recomendamos hacer uso de un entorno de sitio de desarrollo que imite su propio entorno de producción si planea hacer esto.

Lo que pasa con la compresión del contenido de su sitio es que hay alguna evidencia de que puede aumentar marginalmente la duración del tiempo hasta el primer byte. Sin embargo, también aumenta drásticamente el tiempo de carga de la velocidad general de la página, que algunos expertos en SEO sugieren que Google podría priorizar. Recomendamos probar la compresión en páginas individuales en lugar de hacer un cambio en todo el sitio.

Simplifique el diseño web

Si desea un tiempo de carga de página más rápido, menos es casi siempre más. En lugar de agregar funcionalidad adicional a las páginas principales, ¿qué tal decidirse por algo más simple y rápido? Cuantas menos solicitudes HTTP tenga una página, más rápido se cargará.

Además de mejorar la velocidad de la página, también se ha demostrado que el diseño web simple mejora la experiencia del usuario en muchos casos. En un estudio de UX realizado por Google, se descubrió que los usuarios tienden a juzgar la estética de un sitio web entre 1/50 y 1/20 de segundo, y que los sitios visualmente complejos casi siempre se consideraban menos hermosos que sus contrapartes más simples.

Cuanto más hermoso se perciba un sitio web, mejor UX y SEO serán, y más conversiones aumentarán. Un diseño de sitio web más simple es uno de los métodos más rápidos para mejorar la velocidad de la página en un corto período de tiempo. Sin embargo, recomendamos realizar pruebas A/B para ver cómo funcionan realmente los cambios en lugar de realizar un cambio del 100 % de inmediato.

Cómo acelerar el tiempo de carga de la página a través de su host

Su host también juega un papel importante en el tiempo de carga de la página. Aquí hay algunas maneras de hacer que el tiempo de carga de la página sea más rápido con su host.

Habilitar almacenamiento en caché

El almacenamiento en caché es donde los visitantes repetidos pueden cargar su sitio mucho más rápido gracias a que los elementos de la página se almacenan en su disco duro en un caché o almacenamiento temporal. Para los sitios de WordPress y WooCommerce, utilizamos Redis Object Cache para administrar las funciones de almacenamiento en caché. Esto vendrá preinstalado y preconfigurado cuando compre un plan de alojamiento optimizado para WordPress a través de Nexcess.

Para optimizar aún más la velocidad de la página, Nexcess Cloud permite el uso de Cloud Accelerator. Esto se puede activar y desactivar fácilmente con solo hacer clic en un botón en la sección de rendimiento del Portal del cliente.

¿No está seguro de si debe activar Varnish o NGINX? Obtenga más información sobre la diferencia entre Varnish y NGINX en nuestra Guía definitiva para optimizar Magento 2.

Almacenamiento en caché y CDN

El almacenamiento en caché con una CDN (red de entrega de contenido) es un proceso más complicado y puede requerir una configuración avanzada. Sin embargo, una configuración de almacenamiento en caché adecuada con una CDN puede ayudarlo a llegar a esa audiencia global como si estuviera con un host local.

Por qué necesita un CDN de WordPress >>

Para WordPress y WooCommerce, consulte nuestra guía sobre cómo configurar Nexcess CDN con WordPress y CDN Enabler.

Otras áreas a considerar

¿Qué página estás optimizando?

La estructura de su sitio hace una gran diferencia cuando se trata de optimización. Es importante pensar en qué página está optimizando y cómo es relevante para la estructura total del sitio. Si actualiza una página, también se deben considerar las páginas con las que interactúa.

Por ejemplo, no es útil para nosotros simplemente optimizar Nexcess.net, también necesitamos optimizar Nexcess.net/magento/hosting y Nexcess.net/cloud/hosting.

Antes de comenzar este proceso, elabore un plan sobre qué páginas clave generan la mayor cantidad de conversiones y atraen el mayor ROI. Comience aquí para obtener el mayor impacto.

Velocidad de página y SEO

Si bien la velocidad de la página y el SEO están intrínsecamente vinculados, no se equivoque, no es el factor definitivo para determinar el rango de la página. Google mismo ha dicho que si el contenido es más relevante y las personas están dispuestas a esperar a que se cargue, no penalizarán ese sitio.

En última instancia, la velocidad de la página es una parte importante de la optimización, pero el contenido, la calidad y la experiencia del usuario siempre deben ser el enfoque principal.

Acelere el tiempo de carga con el host adecuado

Hemos recorrido un largo camino desde esperar que las imágenes se carguen línea por línea. La velocidad de la página no es solo algo de lo que se quejan los consumidores, también puede hacer o deshacer conversiones, clasificaciones y más. Hacer todo lo posible para aumentar la velocidad de la página SIEMPRE es una buena idea.

Si está invirtiendo tiempo y esfuerzo en mejorar el tiempo de carga de la página, está protegiendo su negocio digital. Haga coincidir su capital de sudor con inversiones inteligentes. Dé su próximo paso eligiendo un host que tenga escalabilidad, seguridad, velocidad y soporte comprobados, como Nexcess.

Nexcess proporciona alojamiento de WordPress completamente administrado que incluye:

• Actualizaciones automáticas.
• SSL por seguridad.
• CDN integrado.
• Compresión de imágenes.
• Almacenamiento en caché.
• ¡Y más!

Compruébelo usted mismo con una prueba gratuita de dos semanas.

contenido relacionado

• Cómo afecta la velocidad de la página al SEO
• 5 técnicas avanzadas para acelerar su sitio de WordPress
• Cómo aumentar la velocidad del sitio de WooCommerce y evitar consultas lentas
• Los mejores trucos de tamaño de imagen de WooCommerce para mantener su sitio web rápido
• ¿Qué es una red de entrega de contenido (CDN)?
• Los 7 temas de WordPress más rápidos
• ¿Por qué necesita un CDN? | Charla técnica de Nexcess

Este blog se publicó originalmente en julio de 2018. Desde entonces, se ha actualizado para que sea más preciso y completo.