Más

    Ganar la carrera de velocidad de la página

    - Advertisement -

    Las opiniones del autor son enteramente propias (excluyendo el improbable caso de hipnosis) y es posible que no siempre reflejen las opiniones de Moz.

    Una breve historia de la misión de Google de hacer que la Web sea más rápida

    En 2009, al hacer un llamado a las armas para “hacer la Web más rápida”, Google se propuso la misión de intentar persuadir a los propietarios de sitios web para que hicieran que sus sitios se cargaran más rápidamente.

    Para que los propietarios de sitios web se preocuparan por esto, en 2010 Google anunció que la velocidad del sitio se convertiría en un factor en sus algoritmos de clasificación de motores de búsqueda de escritorio (no móviles). Esto significaba que los sitios que se cargaban rápidamente tendrían una ventaja SEO sobre otros sitios web.

    Seis años después, en 2015, Google anunció que El número de búsquedas realizadas en dispositivos móviles superó a las realizadas en computadoras de escritorio.. Ese porcentaje sigue aumentando. La última estadística publicada dice que, a partir de 2019, El 61% de las búsquedas realizadas en Google fueron desde dispositivos móviles.

    El papel ahora dominante de los dispositivos móviles en las búsquedas llevó a Google a desarrollar su proyecto “Accelerated Mobile Pages” (AMP). Esta iniciativa tiene como objetivo alentar a los propietarios de sitios web a crear lo que es esencialmente otro tema móvil, además de su tema móvil responsivo, que cumpla con un conjunto muy estricto de pautas de desarrollo y rendimiento.

    Aunque muchos propietarios de sitios y SEO se quejan de tener que cuidar la velocidad de la página y AMP además de los otros más de 200 factores de clasificación que ya les causan dolores de cabeza, la velocidad de la página es de hecho un esfuerzo digno de atención para los propietarios de sitios. En 2017, Google realizó un estudio donde los resultados justificaron en gran medida su enfoque en hacer que la web sea más rápida. Encontraron que “A medida que el tiempo de carga de la página pasa de un segundo a 10 segundos, la probabilidad de que un visitante de un sitio móvil rebote aumenta un 123%.«

    En julio de 2018, La velocidad de la página se convirtió en un factor de clasificación para las búsquedas móviles.y hoy Google incorporará aún más factores relacionados con la velocidad (llamados Elementos vitales web básicos) en sus algoritmos de clasificación.

    Con la capacidad promedio de atención humana disminuyendo todo el tiempo y nuestra dependencia de nuestros dispositivos móviles creciendo constantemente, no hay duda de que la velocidad de la página es, y seguirá siendo, algo increíblemente importante a lo que deben prestar atención los propietarios de sitios web.

    Cómo optimizar un sitio web para la velocidad

    Piensa como un piloto de carreras

    Ganar la carrera de velocidad de la página requiere lo mismo que ganar una carrera de autos. Para ganar una carrera en un automóvil, debes asegurarte de que tu vehículo sea lo más liviano posible, lo más potente posible y de navegar por la pista de la manera más eficiente posible.

    Usaré esta analogía para intentar hacer que las técnicas de optimización de la velocidad de la página sean un poco más comprensibles.

    Hazlo liviano

    Hoy en día, los sitios web son más bellos y funcionales que nunca, pero eso también significa que son más grandes que nunca. La mayoría de los sitios web modernos son el equivalente a un autobús de fiesta o una limusina. Son súper elegantes, están repletos de todo tipo de comodidades y, por lo tanto, PESADOS y LENTOS. En el buscador “hipódromo” no ganarás con un autobús de fiesta o una limusina. Te verás bien, pero perderás.

    Desglose del tamaño del archivo de página, incluidos JavaScript e imágenes, que muestra un total de 2,23 MB.

    Fuente de la imagen: una página de resultados de la prueba de GTMetrix

    Para ganar la carrera de velocidad de la página, necesitas un vehículo de carreras adecuado, que sea liviano. Los autos de carrera no tienen radios, portavasos, guanteras ni nada que no sea absolutamente necesario. Del mismo modo, su sitio web no debe estar repleto de animaciones elaboradas, fondos de vídeo, imágenes enormes, widgets sofisticados, complementos excesivos o cualquier otra cosa que no sea absolutamente necesaria.

    Además de limpiar su sitio de elementos innecesarios y complementos excesivos, también puede reducir el peso del sitio web de la siguiente manera:

    • Reducir la cantidad de scripts de terceros (fragmentos de código que envían o reciben datos de otros sitios web)

    • Cambiar a un tema más liviano (con menos código) y reducir la cantidad de fuentes utilizadas

    • Implementando AMP

    • Optimización de imágenes

    • Comprimir y minimizar código

    • Realizar optimizaciones periódicas de la base de datos

    En un sistema de gestión de contenidos de código abierto como WordPress, hay complementos de velocidad disponibles que pueden facilitar muchas de estas tareas. WP Rocket e Imagify son dos complementos de WordPress que se pueden usar juntos para aligerar significativamente el peso de su sitio web mediante la optimización, compresión, minificación y una variedad de otras mejores prácticas de velocidad de página.

    Dale más poder

    No pondrías el motor de un carrito de golf en un auto de carreras, entonces, ¿por qué pondrías tu sitio web en un plan de alojamiento compartido muy barato? Puede que le resulte doloroso pagar más de unos pocos dólares al mes en alojamiento si ha estado en uno de esos planes durante mucho tiempo, pero nuevamente, carrito de golf versus motor de auto de carreras: ¿quieres ganar esta carrera o no? ?

    Los planes tradicionales de alojamiento compartido agrupan decenas de miles de sitios web en un solo servidor. Esto deja a cada sitio individual privado de potencia informática.

    Visual que muestra alojamiento compartido frente a alojamiento de servidor privado virtual.

    Si quieres competir en las grandes ligas, es hora de conseguir un plan de hospedaje para adultos. Para los sitios de WordPress, las empresas de alojamiento administrado como WP Engine y Flywheel utilizan servidores que son potentes y están específicamente optimizados para servir sitios de WordPress más rápido.

    Si el hosting administrado de WordPress no es lo tuyo, o si no tienes un sitio de WordPress, actualizar a un VPS (servidor privado virtual) hará que tu sitio web tenga muchos más recursos informáticos disponibles. También tendrá más control sobre su propio entorno de alojamiento, lo que le permitirá «afinar su motor» con cosas como las últimas versiones de PHP, MySQL, almacenamiento en caché Varnish y otras tecnologías modernas de servidor web. Ya no estará a merced de la avaricia de su empresa de alojamiento compartido, que introduce cada vez más sitios web en su servidor, que ya está gravado.

    En resumen, colocar su sitio web en un entorno de hosting bien adaptado puede ser como ponerle un sobrealimentador a su auto de carreras.

    Conducelo mejor

    Por último, pero no menos importante, un coche de carreras ligero y potente sólo puede ir a cierta velocidad sin un conductor capacitado que sepa cómo recorrer el circuito de manera eficiente.

    La parte «navegar por el curso» de esta analogía se refiere al proceso en el que un navegador web carga una página web. Cada elemento de un sitio web es otro giro o vuelta para que el navegador navegue a medida que viaja a través del código y procesa el resultado de la página.

    Cambiaré las analogías momentáneamente para intentar explicar esto con mayor claridad. Al remodelar una casa, primero se pintan las habitaciones antes de rehacer los pisos. Si rehizo los pisos primero y luego pintó las habitaciones, los pisos nuevos se mancharían de pintura y tendría que regresar y cuidar los pisos nuevamente más tarde.

    Cuando un navegador carga una página web, pasa por un proceso llamado (casualmente) «pintura». Cada página se «pinta» a medida que el navegador recibe bits de datos del código fuente de la página web. Este proceso de pintura se puede ejecutar de manera eficiente (es decir, pintar paredes antes de restaurar los pisos), o se puede realizar de una manera más caótica y desordenada que requiera varios viajes al comienzo del proceso para rehacer, arreglar o agregar algo. eso podría/debería haberse hecho antes en el proceso.

    Resultado de la prueba de WebPageTest.org (vista de tira de película)

    Fuente de la imagen: Resultado de la prueba de WebPageTest.org (vista de tira de película)

    Aquí es donde las cosas pueden volverse técnicas, pero es importante hacer todo lo posible para ayudar a que su sitio avance de manera más eficiente.

    El almacenamiento en caché es un concepto que todo sitio web debería tener implementado para facilitar la carga de una página web en el navegador. A un navegador ya le lleva bastante tiempo procesar todo el código fuente de una página y mostrarlo visualmente al usuario, por lo que también podría tener ese código fuente listo para usar en el servidor. De forma predeterminada, sin almacenamiento en caché, ese no es el caso.

    Sin almacenamiento en caché, el CMS del sitio web y el servidor aún pueden estar trabajando para generar el código fuente de la página web mientras el navegador espera para pintar la página. Esto puede hacer que el navegador tenga que pausar y esperar a que llegue más código del servidor. Con el almacenamiento en caché, el código fuente de una página se precompila en el servidor para que esté totalmente listo para enviarse al navegador en su totalidad de una sola vez. Piense en ello como una fotocopiadora que tiene muchas copias de un documento ya producido y listo para ser entregado, en lugar de hacer una copia a pedido cada vez que alguien la solicita.

    Se pueden lograr varios tipos y niveles de almacenamiento en caché a través de complementos, su empresa de alojamiento y/o mediante una CDN (red de entrega de contenido). Las CDN no solo proporcionan almacenamiento en caché, sino que también alojan copias del código del sitio web generado previamente en una variedad de servidores en todo el mundo, lo que reduce el impacto de la distancia física entre el servidor y el usuario en el tiempo de carga. (Y sí, Internet en realidad se compone de servidores físicos que tienen que comunicarse entre sí a través de distancias físicas. La Web no es en realidad una “nube” en ese sentido).

    Visual que muestra cómo funciona una red de entrega de contenido.

    Volviendo a nuestra analogía con los coches de carreras, utilizar el almacenamiento en caché y una CDN equivale a un viaje mucho más rápido por la pista.

    Estos son dos de los elementos básicos para pintar páginas de manera eficiente, pero también se pueden emplear aún más técnicas. En WordPress, se puede implementar lo siguiente mediante uno o más complementos (nuevamente, WP Rocket e Imagify son una combinación particularmente buena para lograr mucho de esto):

    • Carga asíncrona y/o diferida de scripts. Esta es básicamente una forma elegante de referirse a cargar varias cosas al mismo tiempo o esperar hasta más tarde para cargar cosas que no se necesitan de inmediato.

    • Precarga y captación previa. Básicamente, recuperar datos sobre los enlaces por adelantado en lugar de esperar a que el usuario haga clic en ellos.

    • Carga lenta. El término irónico es que este concepto existe para fines de velocidad de la página, pero de forma predeterminada, la mayoría de los navegadores cargan TODAS las imágenes en una página, incluso aquellas que están fuera de la vista hasta que el usuario se desplaza hacia ellas. Implementar la carga diferida significa decirle al navegador que sea lento y espere a cargar esas imágenes fuera de la vista hasta que el usuario realmente se desplace allí.

    • Sirviendo imágenes en formatos de próxima generación. Los navegadores pueden cargar nuevos formatos de imagen, como WebP, mucho más rápido que los antiguos formatos JPEG y PNG. Pero es importante tener en cuenta que no todos los navegadores son compatibles con estos nuevos formatos todavía, así que asegúrese de utilizar un complemento que pueda ofrecer las versiones de próxima generación a los navegadores que los admitan, pero proporcione las versiones antiguas a los navegadores que no. . WP Rocket, cuando se combina con Imagify, puede lograr esto.

    Configuración del complemento WP Rocket

    Fuente de la imagen: configuración del complemento WP Rocket

    Optimizar para Core Web Vitals

    Por último, optimizar para el nuevo Elemento vital central de la Web Las métricas (pintura con contenido más grande, retraso de la primera entrada y cambio de diseño acumulativo) también pueden hacer que un viaje por la pista de carreras sea mucho más eficiente.

    Elementos vitales clave de la Web: pintura con contenido más grande, retraso en la primera entrada y cambio de diseño acumulativo.

    Fuente de imagen

    Estos son conceptos bastante técnicos, pero aquí hay una descripción general rápida para que se familiarice con lo que significan:

    • Pintura con contenido más grande (LCP) Se refiere a la pintura del elemento más grande de la página. La herramienta PageSpeed ​​Insights de Google le dirá qué elemento se considera el elemento LCP de una página. Muchas veces se trata de una imagen principal o un área deslizante grande, pero varía de una página a otra, así que ejecute la herramienta para identificar el LCP en su página y luego piense en lo que puede hacer para que ese elemento en particular se cargue más rápido. Google PageSpeed ​​Insights muestra el elemento de pintura con contenido más grande.
    • Retraso de la primera entrada (FID) es el retraso entre la primera acción del usuario y la capacidad del navegador para responder a ella. Un ejemplo de un problema de FID sería un botón que es visible para un usuario antes de que se pueda hacer clic en él. El retraso se debe a que la funcionalidad de clic se carga notablemente más tarde que el botón en sí.

    • Cambio de diseño acumulativo (CLS) es un conjunto de tres grandes palabras que se refieren a un concepto simple. ¿Sabes cuando estás cargando una página web en tu teléfono y haces clic en algo o lees algo pero luego salta hacia arriba o hacia abajo porque algo más se cargó encima o debajo? Ese movimiento es CLS, es muy molesto y es un subproducto de la pintura de páginas ineficiente.

    En conclusión, coche de carreras > carrito de golf.

    La optimización de la velocidad de la página es ciertamente compleja y confusa, pero es un componente esencial para lograr mejores clasificaciones. Como propietario de un sitio web, usted está en esta carrera, le guste o no, por lo que también podría hacer lo que pueda para hacer de su sitio web un auto de carreras en lugar de un carrito de golf.

    Fuente: Ganar la carrera de velocidad de la página

    Populares

    Más de esta categoría

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aquí

    This site uses Akismet to reduce spam. Learn how your comment data is processed.