{"id":1111,"date":"2021-02-13T14:10:49","date_gmt":"2021-02-13T13:10:49","guid":{"rendered":"https:\/\/www.wsdigitalconsulting.com\/coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site\/"},"modified":"2021-02-13T14:10:49","modified_gmt":"2021-02-13T13:10:49","slug":"coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site","status":"publish","type":"post","link":"https:\/\/www.evolurise.com\/es\/coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site\/","title":{"rendered":"[CoreWeb Vitals] \u00bfC\u00f3mo puede reducir el tama\u00f1o de los DOM para mejorar el rendimiento de su sitio?"},"content":{"rendered":"
Analizando su sitio web mediante Google PageSpeed Insights<\/a>Es posible que haya observado un error del tipo \"Evite un tama\u00f1o excesivo del DOM\":<\/p>\n\n\n\n O en GTmetrix<\/a> \" Reducir el n\u00famero de elementos DOM:<\/p>\n\n\n\n Cuando su navegador recibe un documento HTML, necesita convertirlo en una estructura de \u00e1rbol que se utiliza para renderizar y pintar utilizando CSS y JavaScript.<\/p>\n\n\n\n Esta estructura de \u00e1rbol se conoce como DOM o Modelo de Objetos del Documento.<\/p>\n\n\n\n Lighthouse y Google PageSpeed Insights comienzan a marcar las p\u00e1ginas si se cumple una de las siguientes condiciones:<\/p>\n\n\n\n Un tama\u00f1o excesivo del DOM puede afectar al rendimiento de varias maneras.<\/p>\n\n\n\n Mayor tiempo de an\u00e1lisis y renderizado (FCP)<\/strong> Un gran \u00e1rbol DOM y complicadas reglas de estilo (CSS) que requieren una enorme cantidad de procesamiento por parte del navegador. El navegador tiene que analizar el HTML, construir el \u00e1rbol de renderizado, etc. Cada vez que el usuario interact\u00faa o algo cambia en el HTML, el navegador tiene que recalcularlo. Por ejemplo, el tama\u00f1o del DOM se reduce t\u00e9cnicamente de la siguiente manera:<\/p>\n\n\n\n Elige :<\/p>\n\n\n\n B\u00e1sicamente, necesitas deshacerte de todos los elementos HTML que puedas. Tambi\u00e9n puedes utilizar Flexbox o Grid para reducir a\u00fan m\u00e1s el tama\u00f1o del DOM.<\/p>\n\n\n\n \u00bfSi tiene una p\u00e1gina con varias secciones? \u00bfComo servicios, formularios de contacto, productos, entradas de blog, testimonios, etc.?<\/p>\n\n\n\n Intente dividirlas en varias p\u00e1ginas y enlazarlas desde la cabecera, por ejemplo (barra de navegaci\u00f3n).<\/p>\n\n\n\n \"Lazyload\" todos los elementos posibles. Por ejemplo:<\/p>\n\n\n\n Nota: La carga perezosa de im\u00e1genes no reducir\u00e1 el tama\u00f1o del DOM.<\/em><\/p>\n\n\n\n A veces puede ser necesario eliminar elementos inyectados por el tema\/constructor. Por ejemplo, a\u00f1adir al bot\u00f3n de la cesta en las p\u00e1ginas de productos, el bot\u00f3n de clasificaci\u00f3n, informaci\u00f3n sobre el autor, la fecha de publicaci\u00f3n, etc.<\/p>\n\n\n\n Una soluci\u00f3n r\u00e1pida es ocultarlos mediante CSS :<\/p>\n\n\n\n Aunque esta soluci\u00f3n parece f\u00e1cil de implementar, no es la soluci\u00f3n \u00f3ptima, ya que est\u00e1 distribuyendo c\u00f3digo no deseado a los usuarios (que incluye tanto el marcado HTML como los estilos CSS).<\/p>\n\n\n\n Comprueba la configuraci\u00f3n de tu tema\/plugin para ver si hay una opci\u00f3n para eliminarlo. Si no es as\u00ed, busca el c\u00f3digo PHP correspondiente y elim\u00ednalo.<\/p>\n\n\n\n Un buen tema juega un papel importante en el tama\u00f1o del DOM. Utiliza temas bien codificados como GeneratePress o Astra.<\/p>\n\n\n\n Los constructores de p\u00e1gina tambi\u00e9n inyectan demasiados divs. Utilice constructores como Ox\u00edgeno<\/a> que no inyectan divs no deseados y tienen m\u00e1s control sobre la estructura HTML.<\/p>\n\n\n\n Si no conoce Oxygen, eche un vistazo a \"\u00a0Crear un sitio web en Oxygen desde cero.<\/a>\"\u00a0<\/p>\n\n\n\n Otros plugins o par\u00e1metros del tema pueden inyectar demasiados divs. Ejemplo: plugins de \"mega men\u00fa\" como UberMenu.<\/p>\n\n\n\n A veces son cruciales para la experiencia de usuario de su sitio web. Pero a veces los usuarios nunca los utilizan.<\/p>\n\n\n\n Puede que nunca se haga clic en los enlaces del pie de p\u00e1gina porque la mayor\u00eda de los visitantes se limitan a desplazarse hasta el 75% de la p\u00e1gina.<\/p>\n\n\n\n Utiliza herramientas como HotJar o los eventos de Google Analytics para ver qu\u00e9 usan y qu\u00e9 no usan los visitantes. Analice, mida e itere.<\/p>\n\n\n\n Si necesita ayuda para optimizar el rendimiento web de su sitio o mejorar la velocidad de carga de sus p\u00e1ginas estrat\u00e9gicas, WS Consultor\u00eda Digital<\/a>Contamos con expertos cualificados y certificados dispuestos a ayudarle y a ofrecerle soluciones adaptadas a sus instalaciones y a su presupuesto. P\u00f3ngase en contacto con nosotros y solicite un presupuesto personalizado GRATUITO: P\u00f3ngase en contacto con nosotros<\/a><\/p>","protected":false},"excerpt":{"rendered":" Al analizar su sitio web mediante Google PageSpeed Insights, es posible que haya observado un error del tipo \"Evite un tama\u00f1o excesivo del DOM\": o en GTmetrix \"Reduzca el tama\u00f1o del DOM\":...<\/p>","protected":false},"author":2,"featured_media":4794,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275,276,277],"tags":[],"class_list":["post-1111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coreweb-vitals","category-performance-web","category-vitesse-de-chargement-des-sites-internet"],"yoast_head":"\n<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
\u00bfQu\u00e9 es el DOM?<\/h2>\n\n\n\n
\n
\n
\n
\u00bfQu\u00e9 impacto tiene el tama\u00f1o del DOM en el rendimiento?<\/h2>\n\n\n\n
Mayor uso de la memoria<\/strong> Tu c\u00f3digo JavaScript puede tener funciones para acceder a los elementos del DOM. Un arbo DOM m\u00e1s grande significa que JavaScript utiliza m\u00e1s memoria para procesar estos elementos. He aqu\u00ed un ejemplo de consultas para manipular el DOM con JS: document.querySelectorAll('img') que lista todas las im\u00e1genes, com\u00fanmente utilizado por las bibliotecas LazyLoad.
Aumenta el TTFB<\/strong> A medida que aumenta el tama\u00f1o de su DOM, tambi\u00e9n lo hace el tama\u00f1o del documento HTML (en KB). Como hay que transferir m\u00e1s datos por la red, aumenta el TTFB.<\/p>\n\n\n\n
\u00bfC\u00f3mo puedo reducir t\u00e9cnicamente el tama\u00f1o del DOM?<\/h2>\n\n\n\n<div id="navigation-main">\n <ul>\n etc.\n <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n
\u00bfC\u00f3mo puedo reducir el tama\u00f1o del DOM en WordPress?<\/h2>\n\n\n\n
Divida las p\u00e1ginas con varias secciones en varias p\u00e1ginas<\/h3>\n\n\n\n
Aplique un Lazyload a los elementos de su sitio y pagine todo lo posible<\/h3>\n\n\n\n
\n
No ocultes elementos no deseados con CSS<\/h3>\n\n\n\n.cart-button {
display:none ;
}<\/code><\/p>\n\n\n\nUtilizar temas y creadores de p\u00e1ginas bien codificados<\/h3>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n