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 鈥渉acer 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 鈥淎ccelerated 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 鈥渉ip贸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 鈥渘ube鈥 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 鈥嬧婭nsights 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 鈥嬧婭nsights 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铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.