homefinance blog
Usamos cada truco en el libro para acelerar nuestros sitios web. Optimización de imágenes. CDNS. Gzip. Memorizando en caché. Pero, a medida que los sitios se vuelven más complejos y cargados por el peso de la página, la respuesta reactiva a las interacciones de los usuarios no es suficiente. Tenemos que ser proactivos: tenemos que anticipar lo que los usuarios quieren e incluso preparar ese contenido para ellos antes de preguntarles. Con sugerencias y directivas sobre recursos, puede hacer exactamente esto: dígale a los navegadores que se hagan cargo y descarguen recursos para sus páginas para un mejor desempeño del sitio web, real y percibido. Esta técnica se conoce como prebrowsing.
En esta publicación, exploraremos tres sugerencias clave de recursos: precarga, adquisición preliminar y pre -control, junto con la forma en que funcionan, sus beneficios y cómo usarlos. ¿Qué es el prebrowsing? Steve Souuders inventó el término pre-rock (de la navegación predictiva) en 2013. Pre navegar significa anticipar las acciones de los usuarios y preparar contenido en su sitio. Es posible que deseen antes de que lo necesiten. Es un concepto que es un paso hacia una Internet más rápida, como Santiago Valdarrama escribe en una parte de la lista en su artículo, un paso adelante: rendimiento improvisante con el prebrowsing:
“Los navegadores ya están trabajando detrás de escena, buscando modelos en nuestros sitios para hacer la navegación lo más rápido posible. La navegación preliminar se basa en esto: podemos combinar la información que tenemos en nuestras propias páginas con un análisis posterior de los patrones de usuario. Al ayudar a los navegadores a hacer un mejor trabajo, aceleramos y mejoramos la experiencia para nuestros usuarios “. Podrías preguntarte: “¿No es el almacenamiento en caché?” Bueno, sí. La memoria del navegador en caché es esencial para la carga rápida de las páginas. Pero hay momentos en que la memoria en caché necesita un poco de ayuda: la primera visita del sitio web: la primera vez que un usuario visita un sitio, su navegador aún no ha almacenado ningún recurso estático.
Datos del navegador eliminado: los usuarios que eliminan su caché del navegador ya no tendrán una copia de sus recursos la próxima vez que visite su sitio.
Datos del navegador vencido: según el archivo HTTP, el 69% de los recursos no tienen almacenamiento de caché o pueden almacenarse en caché por menos de un día. Si el usuario revisa estas páginas y el navegador determina que el recurso ha expirado, se requiere una solicitud HTTP para verificar que haya actualizaciones. Incluso si la respuesta indica que el recurso almacenado en caché sigue siendo válido, estos retrasos en la red aún hacen que las páginas se carguen más lentamente, especialmente en el móvil.
Datos antiguos del navegador: incluso si un usuario ha almacenado en el caché contenido de una visita anterior, el sitio web puede haber cambiado o haberse actualizado con nuevos recursos.
Afortunadamente, las técnicas de navegación pueden ayudarlo a evitar estos problemas.
1. Preparado ¿Alguna vez ha querido contarle a su navegador sobre una fuente o script importante sin retrasar el evento de carga de la página? Con precarga, puedes hacer esto exactamente. Esta directiva le dice al navegador que se requiere un recurso como parte de la navegación actual y que debe comenzar a tomarse lo antes posible. Aquí hay un ejemplo de uso:
Como explica Yoav Weiss, un arquitecto principal de Akamai, que trabajó en este estándar web:
“[Preluntead ofrece] un control más granular de la carga de desarrolladores web. Brinda a los desarrolladores la oportunidad de definir la lógica de carga personalizada sin sufrir la penalización de rendimiento involucrada por los recursos basados en recursos bíblicos “. Cuando especifica que precarga un recurso, es prioridad y se almacena en el navegador, esperando hasta que se mencione en DOM, JavaScript o CSS. El atributo le diría al navegador qué tipo de recurso se descargará para que se pueda administrar correctamente. Sin esto, el navegador no utilizará el recurso de precalentamiento. Los valores posibles incluyen:
“Fuente”
“guión”
“estilo”
“imagen”
“Medios de comunicación en masa”
“documento”
reemplaza , que, según Google, tenía errores y desventajas significativas. Nunca se implementó en otros navegadores. Como tal, Chrome 50 eliminó el apoyo en marzo 2016. También es importante saber que la precarga es una instrucción obligatoria del navegador. A diferencia de las otras sugerencias de recursos que analizaremos en esta publicación, la precarga es algo que el navegador tiene que hacer, en lugar de opcional. Weiss ha publicado una guía de precarga definitiva antes Lanzamiento en Chrome. Si está interesado en aprender a usar esta pista de recursos, le recomiendo leer su guía. Recuerde que la precarga también es útil para optimizar la puntuación más alta de la pintura de contenido. 2. Hazte el control de que crees que puedes predecir lo que el usuario se hará clic o con qué interactuará? La sugerencia de recurso precargado es algo diferente precarga. No trata de hacer algo crítico para suceder más rápido; Más bien, trate de hacer algo que no sea crítico que suceda antes, si existe una posibilidad.
Al hacerse cargo, puede decirle al navegador que se haga cargo de los recursos que cree que el usuario puede necesitar más tarde, como parte de una futura navegación o interacciones, si el usuario toma la acción que espera. Estos recursos se llevarán a la más mínima prioridad en el navegador cuando finalice la página actual y hay ancho de cinta disponible. Esto significa que hacerse cargo se utiliza mejor para anticipar la próxima acción del usuario y prepararse para ello, como tomar los scripts o imágenes necesarios. Hay 3 tipos de precarga, y lo que he descrito anteriormente generalmente se conoce como precarga de enlace. Según los documentos web de MDN para la toma previa de enlaces: “… después de que el navegador haya terminado de cargar la página, comienza a silenciar los documentos especificados y almacenarlos en el caché. Cuando el usuario visita uno de los documentos tomados de antemano, se puede transmitir rápidamente desde el caché del navegador “. Para este tipo de adquisición preliminar, el navegador está buscando adquisición preliminar, ya sea en un encabezado HTML o en un enlace HTTP: Aquí hay un ejemplo de uso de la etiqueta de enlace:
Y aquí está la misma indicación del enlace que toma el uso de un enlace HTTP ::
Enlace: ; Rel = Prefecto
Los otros tipos de adquisición preliminar son la adquisición preliminar de DNS y el juego preliminar. DNS Take DNS le permite decirle a su navegador que realice búsquedas de DNS en un fondo mientras el usuario navega. Entonces, cuando el usuario hace clic en un enlace como se anticipó, el aspecto DNS ya ha tenido lugar, reduciendo así la latencia. El DNS que se hace cargo se puede agregar a una determinada URL agregando la etiqueta Rel = “DNS-Prefetch” al atributo del enlace. Por ejemplo:
La entrada preliminar de los documentos web de MDN de Mozilla explica lo siguiente: “Las solicitudes de DNS son muy pequeñas en términos de ancho de banda, pero la latencia puede ser bastante alta, especialmente en las redes móviles. Al especular los resultados del DNS, la latencia puede reducirse significativamente en ciertos momentos, como cuando el usuario hace clic en el enlace. En algunos casos, la latencia puede reducirse en un segundo “. Prerrequisito La preadringe aumenta las cosas, lo que le permite decirle al navegador que descargue páginas completas. Supongamos, por ejemplo, que ciertamente lo sabe (porque ha verificado su análisis y es un modelo de uso regular) que los usuarios llegarán a su página inicial y luego continúan visitando Services.html, porque esta es la navegación más popular. Puede darle al navegador un toque de recurso:
Después de descargar la página inicial, el navegador descargará Services.html en segundo plano y la preparará para el usuario tan pronto como lo solicite.Cuando finalmente haga clic en el enlace “Servicios”, la página previamente representada se cobrará instantáneamente.Pero, ¿qué sucede si el usuario no hace clic para visitar su página de “Servicios” y, en cambio, navega en la página “Acerca de”?No hace falta decir que el prevenir previamente es una técnica arriesgada, porque apuesta en el próximo movimiento del usuario.Si tiene razón, ahorrará el tiempo de descarga de otra página.Pero si se equivoca, puede causar grandes pérdidas de ancho de banda, que es especialmente en detrimento de los usuarios móviles.
¿Qué es preconnecto? El tercer tercer recursos puede ralentizar realmente una página, debido a la cantidad de viajes de ida y vuelta antes de que el navegador pueda comenzar a descargar el recurso. Estos viajes de ida y vuelta incluyen DNS Search, TCP Handshake y TLS Negteriation para HTTPS. Dependiendo de la página y las condiciones de la red, estos viajes de ida y vuelta pueden agregar cientos de milisegundos de latencia o más, lo que se puede agregar rápidamente si solicita recursos de varios hosts diferentes. Por ejemplo, su página podría conectarse a Twitter y Facebook para compartir social, Guary para comentarios y Google Analytics. Pero, ¿qué sucede si pudieras eliminar algunos de estos viajes redondos y acelerar el rendimiento percibido y el tiempo de carga real? Preconnection le permite decirle a su navegador que su página tiene la intención de establecer una conexión a un recurso externo y que desea que el proceso comience lo antes posible. Aquí hay un ejemplo de cómo usar esta indicación de recursos: Suponga que desea acelerar la visualización de las fuentes web de Google Fonts en su página. El servicio es confiable y generalmente rápido debido al CDN global de Google. Pero debido a que las reglas de facilidad de @font deben descubrirse primero en los archivos CSS antes de que el navegador realice solicitudes de fuentes web, puede haber un contenido visible sin luz (FOUC) durante la página. Con la prenección, puede reducir enormemente este retraso agregando la siguiente indicación de prenección:
Como Jeremy Frank escribe, el principal desarrollador Viget, en su guía de indicaciones previas al control, la adición de la prenección ha eliminado 3 ida y vuelta del juego crítico durante su prueba y ha reducido más de medio segundo de latencia: lo que es genial de esto El ejemplo especial es que el uso de la prenección ayuda a reducir el bloqueo y mejorar el tiempo de pintura (incluido LCP una vez más). Según el ingeniero de rendimiento web de Google Ilya Grigorik: “Preconing es una herramienta importante en el conjunto de herramientas de optimización … puede eliminar muchos viajes de ida y vuelta costosos, en algunos casos, reduciendo la latencia de la solicitud con cientos e incluso miles de milisegundos. ” Conclusión Las técnicas de prebrowsing han existido durante algunos años y están más extendidos de lo que puede resolver: Google usa recursos para realizar una búsqueda casi instantánea de sus usuarios. ¡Además, con WP Rocket, puede beneficiarse de la precarga y la precarga de DNS sin levantar un dedo! ¡Y no olvide que la mejora del rendimiento web también significa la mejora de sus puntajes centrales de Web Vitals! ¿Estás listo para comenzar a navegar antes de tu sitio? Piense en lo que sabe sobre sus páginas y sus usuarios; Inicie la nota los patrones de usuario, busque en Google Analytics para averiguar cómo los usuarios navegan en su sitio y qué recursos uso. Armado con esta información, puede acelerar y mejorar la experiencia del usuario.
