{"id":83318,"date":"2022-10-13T20:38:39","date_gmt":"2022-10-13T18:38:39","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/"},"modified":"2020-09-16T21:02:54","modified_gmt":"2020-09-17T00:02:54","slug":"arreglar-la-inestabilidad-del-diseno","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/","title":{"rendered":"Correction de l&#039;instabilit\u00e9 de la conception"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Medicion-de-cambios-de-diseno\" >Medici\u00f3n de cambios de dise\u00f1o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Medicion-de-cambios-de-diseno-en-WebPageTest\" >Medici\u00f3n de cambios de dise\u00f1o en WebPageTest<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Identificar-las-causas-de-la-inestabilidad-del-diseno\" >Identificar las causas de la inestabilidad del dise\u00f1o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Arreglar-la-inestabilidad-del-diseno\" >Arreglar la inestabilidad del dise\u00f1o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Verificando-las-optimizaciones\" >Verificando las optimizaciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Conclusion\" >Conclusi\u00f3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/#Una-cosa-mas-Medicion-de-la-inestabilidad-del-diseno-experimentada-por-usuarios-reales\" >(Una cosa m\u00e1s) Medici\u00f3n de la inestabilidad del dise\u00f1o experimentada por usuarios reales<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Un tutorial sobre el uso de WebPageTest para identificar y solucionar problemas de inestabilidad de dise\u00f1o.\n        <\/p>\n<p>\n          <time>30 de septiembre de 2019<\/time><\/p>\n<\/header>\n<p>En una publicaci\u00f3n anterior escrib\u00ed sobre <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dev.to\/chromiumdev\/measuring-cumulative-layout-shift-cls-in-webpagetest-5cle\">medir el cambio de dise\u00f1o acumulativo<\/a> (CLS) en WebPageTest.  CLS es una agregaci\u00f3n de todos los cambios de dise\u00f1o, por lo que en esta publicaci\u00f3n pens\u00e9 que ser\u00eda interesante profundizar e inspeccionar cada cambio de dise\u00f1o individual en una p\u00e1gina para tratar de comprender qu\u00e9 podr\u00eda estar causando la inestabilidad y realmente intentar solucionar el problema ( s).<\/p>\n<h2 id=\"measuring-layout-shifts\"><span class=\"ez-toc-section\" id=\"Medicion-de-cambios-de-diseno\"><\/span>Medici\u00f3n de cambios de dise\u00f1o <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Usando la API de Layout Inestabilidad, podemos obtener una lista de todos los eventos de cambio de dise\u00f1o en una p\u00e1gina:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">PerformanceObserver<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">list<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">getEntries<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entry<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token operator\">!<\/span>entry<span class=\"token punctuation\">.<\/span>hadRecentInput<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">observe<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>type<span class=\"token operator\">:<\/span> <span class=\"token string\">\"layout-shift\"<\/span><span class=\"token punctuation\">,<\/span> buffered<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span>console<span class=\"token punctuation\">.<\/span>log<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Esto produce una serie de cambios de dise\u00f1o que no est\u00e1n precedidos por eventos de entrada:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"entryType\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"layout-shift\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"startTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">210.78500000294298<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"duration\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"value\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.0001045969445437389<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"hadRecentInput\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"lastInputTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>En este ejemplo, hubo un solo cambio muy peque\u00f1o de 0.01% a 210ms.<\/p>\n<p>Conocer el tiempo y la gravedad del cambio es \u00fatil para ayudar a reducir qu\u00e9 pudo haber causado el cambio.  Volvamos a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpagetest.org\">WebPageTest<\/a> para que un entorno de laboratorio realice m\u00e1s pruebas.<\/p>\n<h2 id=\"measuring-layout-shifts-in-webpagetest\"><span class=\"ez-toc-section\" id=\"Medicion-de-cambios-de-diseno-en-WebPageTest\"><\/span>Medici\u00f3n de cambios de dise\u00f1o en WebPageTest <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>De manera similar a medir CLS en WebPageTest, medir cambios de dise\u00f1o individuales requerir\u00e1 una m\u00e9trica personalizada.  Afortunadamente, el proceso es m\u00e1s f\u00e1cil ahora que Chrome 77 es estable.  La API de Layout Inestabilidad est\u00e1 habilitada de forma predeterminada, por lo que deber\u00eda poder ejecutar ese fragmento JS en cualquier sitio web dentro de Chrome 77 y obtener resultados de inmediato.  En WebPageTest, puede usar el navegador Chrome predeterminado y no tener que preocuparse por los indicadores de la l\u00ednea de comandos o usar Canary.<\/p>\n<p>As\u00ed que modifiquemos ese script para producir una m\u00e9trica personalizada para WebPageTest:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token punctuation\">[<\/span>LayoutShifts<span class=\"token punctuation\">]<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">PerformanceObserver<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">list<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>list<span class=\"token punctuation\">.<\/span><span class=\"token function\">getEntries<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entry<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token operator\">!<\/span>entry<span class=\"token punctuation\">.<\/span>hadRecentInput<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">observe<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>type<span class=\"token operator\">:<\/span> <span class=\"token string\">\"layout-shift\"<\/span><span class=\"token punctuation\">,<\/span> buffered<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La promesa en este script se resuelve en una representaci\u00f3n JSON de la matriz en lugar de la matriz en s\u00ed.  Esto se debe a que las m\u00e9tricas personalizadas solo pueden producir tipos de datos primitivos como cadenas o n\u00fameros.<\/p>\n<p>El sitio web que usar\u00e9 para la prueba es <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ismyhostfastyet.com\/\">ismyhostfastyet.com<\/a>, un sitio que cre\u00e9 para comparar el rendimiento de carga de los servidores web en el mundo real.<\/p>\n<h2 id=\"identifying-causes-of-layout-instability\"><span class=\"ez-toc-section\" id=\"Identificar-las-causas-de-la-inestabilidad-del-diseno\"><\/span>Identificar las causas de la inestabilidad del dise\u00f1o <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webpagetest.org\/custom_metrics.php?test=190918_6E_ef3c166b4a34033171d47e389cf82939&amp;run=5&amp;cached=0\">resultados<\/a> podemos ver que la m\u00e9trica personalizada LayoutShifts tiene este valor:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"entryType\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"layout-shift\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"startTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">3087.2349999990547<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"duration\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"value\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.3422101449275362<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"hadRecentInput\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"lastInputTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>En resumen, hay un cambio de dise\u00f1o \u00fanico del 34,2% a 3087ms.  Para ayudar a identificar al culpable, usemos WebPageTest&#8217;s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webpagetest.org\/video\/compare.php?tests=190918_6E_ef3c166b4a34033171d47e389cf82939-r%3A5-c%3A0&amp;thumbSize=200&amp;ival=100&amp;end=visual\">vista de tira de pel\u00edcula<\/a>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='layout-shift1-2742295' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/layout-shift1-2742295.png' alt=\"Dos celdas en la tira de pel\u00edcula, que muestran capturas de pantalla antes y despu\u00e9s del cambio de dise\u00f1o.\"><figcaption class=\"w-figcaption\">Dos celdas en la tira de pel\u00edcula, que muestran capturas de pantalla antes y despu\u00e9s del cambio de dise\u00f1o.<\/figcaption><\/figure>\n<p>Desplazarse hasta la marca de ~ 3 segundos en la tira de pel\u00edcula nos muestra exactamente cu\u00e1l es la causa del cambio de dise\u00f1o del 34%: la mesa colorida.  El sitio web recupera de forma asincr\u00f3nica un archivo JSON y luego lo convierte en una tabla.  La mesa est\u00e1 inicialmente vac\u00eda, por lo que esperar a llenarla cuando se cargan los resultados est\u00e1 provocando el cambio.<\/p>\n<figure class=\"w-figure\">\n  <img alt='layout-shift2-9850265' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/layout-shift2-9850265.png' alt=\"Encabezado de fuente web que aparece de la nada.\"><figcaption class=\"w-figcaption\">Encabezado de fuente web que aparece de la nada.<\/figcaption><\/figure>\n<p>Pero eso no es todo.  Cuando la p\u00e1gina se completa visualmente en ~ 4.3 segundos, podemos ver que el <code>&lt;h1&gt;<\/code> de la p\u00e1gina \u00ab\u00bfMi anfitri\u00f3n ya es r\u00e1pido?\u00bb  aparece de la nada.  Esto sucede porque el sitio usa una fuente web y no ha tomado ning\u00fan paso para optimizar la representaci\u00f3n.  En realidad, el dise\u00f1o no parece cambiar cuando esto sucede, pero sigue siendo una mala experiencia para el usuario tener que esperar tanto tiempo para leer el t\u00edtulo.<\/p>\n<h2 id=\"fixing-layout-instability\"><span class=\"ez-toc-section\" id=\"Arreglar-la-inestabilidad-del-diseno\"><\/span>Arreglar la inestabilidad del dise\u00f1o <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ahora que sabemos que la tabla generada de forma asincr\u00f3nica est\u00e1 provocando que un tercio de la ventana gr\u00e1fica se desplace, es hora de solucionarlo.  No conocemos el contenido de la tabla hasta que se cargan los resultados JSON, pero a\u00fan podemos completar la tabla con alg\u00fan tipo de <em>datos de marcador de posici\u00f3n<\/em> para que el dise\u00f1o en s\u00ed sea relativamente estable cuando se renderiza el DOM.<\/p>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo para generar datos de marcador de posici\u00f3n:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">getRandomFiller<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">maxLength<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">var<\/span> filler <span class=\"token operator\">=<\/span> <span class=\"token string\">'\u2588'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">var<\/span> len <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">ceil<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> maxLength<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Array<\/span><span class=\"token punctuation\">(<\/span>len<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span>filler<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">''<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token keyword\">function<\/span> <span class=\"token function\">getRandomDistribution<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">var<\/span> fast <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">var<\/span> avg <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span> <span class=\"token operator\">-<\/span> fast<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">var<\/span> slow <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span> <span class=\"token operator\">-<\/span> <span class=\"token punctuation\">(<\/span>fast <span class=\"token operator\">+<\/span> avg<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">[<\/span>fast<span class=\"token punctuation\">,<\/span> avg<span class=\"token punctuation\">,<\/span> slow<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><br>window<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">36<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">var<\/span> <span class=\"token punctuation\">[<\/span>fast<span class=\"token punctuation\">,<\/span> avg<span class=\"token punctuation\">,<\/span> slow<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">getRandomDistribution<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>window<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>platform<span class=\"token operator\">:<\/span> <span class=\"token function\">getRandomFiller<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br>client<span class=\"token operator\">:<\/span> <span class=\"token function\">getRandomFiller<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br>n<span class=\"token operator\">:<\/span> <span class=\"token function\">getRandomFiller<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br>fast<span class=\"token punctuation\">,<\/span><br>avg<span class=\"token punctuation\">,<\/span><br>slow<br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token function\">updateResultsTable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">sortResults<\/span><span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'fast'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Los datos del marcador de posici\u00f3n se generan aleatoriamente antes de ser ordenados.  Incluye el car\u00e1cter \u00ab\u2588\u00bb repetido un n\u00famero aleatorio de veces para crear marcadores de posici\u00f3n visuales para el texto y una distribuci\u00f3n generada aleatoriamente de los tres valores principales.  Tambi\u00e9n agregu\u00e9 algunos estilos para desaturar todos los colores de la tabla para dejar en claro que los datos a\u00fan no est\u00e1n completamente cargados.<\/p>\n<p>La apariencia de los marcadores de posici\u00f3n que usa no importa para la estabilidad del dise\u00f1o.  El prop\u00f3sito de los marcadores de posici\u00f3n es asegurar a los usuarios que el contenido <em>es<\/em> viene y la p\u00e1gina no est\u00e1 rota.<\/p>\n<p>As\u00ed es como se ven los marcadores de posici\u00f3n mientras se cargan los datos JSON:<\/p>\n<figure class=\"w-figure\">\n  <img alt='layout-placeholder-7909400' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/layout-placeholder-7909400.png' alt=\"La tabla de datos se representa con datos de marcador de posici\u00f3n.\"><figcaption class=\"w-figcaption\">La tabla de datos se representa con datos de marcador de posici\u00f3n.<\/figcaption><\/figure>\n<p>Abordar el problema de las fuentes web es mucho m\u00e1s sencillo.  Debido a que el sitio usa Google Fonts, solo necesitamos pasar el <code>display=swap<\/code> propiedad en la solicitud CSS.  Eso es todo.  La API de fuentes agregar\u00e1 <code>font-display: swap<\/code> estilo en la declaraci\u00f3n de fuente, lo que permite al navegador representar el texto en una fuente alternativa inmediatamente.  Aqu\u00ed est\u00e1 el marcado correspondiente con la correcci\u00f3n incluida:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/fonts.googleapis.com\/css?family=Chivo:900&amp;display=swap<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"verifying-the-optimizations\"><span class=\"ez-toc-section\" id=\"Verificando-las-optimizaciones\"><\/span>Verificando las optimizaciones <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Despu\u00e9s de volver a ejecutar la p\u00e1gina a trav\u00e9s de WebPageTest, podemos generar un antes y un despu\u00e9s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webpagetest.org\/video\/compare.php?tests=190918_6E_ef3c166b4a34033171d47e389cf82939%2C190918_WF_60f9c9a1c669b20039860c09ca27df7c&amp;thumbSize=200&amp;ival=100&amp;end=visual\">comparaci\u00f3n<\/a> para visualizar la diferencia y medir el nuevo grado de inestabilidad del dise\u00f1o:<\/p>\n<figure class=\"w-figure\">\n  <img alt='layout-comparison-2278210' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/layout-comparison-2278210.png' alt=\"Tira de pel\u00edcula WebPageTest que muestra ambos sitios carg\u00e1ndose uno al lado del otro con y sin optimizaciones de dise\u00f1o.\"><figcaption class=\"w-figcaption\">Tira de pel\u00edcula de WebPageTest que muestra ambos sitios que se cargan uno al lado del otro con y sin optimizaciones de dise\u00f1o.<\/figcaption><\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br><span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"entryType\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"layout-shift\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"startTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">3070.9349999997357<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"duration\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"value\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0.000050272187989256116<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"hadRecentInput\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token property\">\"lastInputTime\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>De acuerdo con la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webpagetest.org\/custom_metrics.php?test=190918_WF_60f9c9a1c669b20039860c09ca27df7c&amp;run=9&amp;cached=0\">m\u00e9trica personalizada<\/a>, todav\u00eda se produce un cambio de dise\u00f1o a 3071ms (aproximadamente al mismo tiempo que antes) pero la gravedad del cambio es <em>mucho<\/em> menor: 0,005%.  Puedo vivir con esto.<\/p>\n<p>Tambi\u00e9n est\u00e1 claro en la tira de pel\u00edcula que el <code>&lt;h1&gt;<\/code> La fuente vuelve inmediatamente a una fuente del sistema, lo que permite a los usuarios leerla antes.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Los sitios web complejos probablemente experimentar\u00e1n muchos m\u00e1s cambios de dise\u00f1o que en este ejemplo, pero el proceso de correcci\u00f3n sigue siendo el mismo: agregue m\u00e9tricas de inestabilidad de dise\u00f1o a WebPageTest, haga una referencia cruzada de los resultados con la tira de pel\u00edcula de carga visual para identificar los culpables e implemente una soluci\u00f3n usando marcadores de posici\u00f3n para reservar el espacio de la pantalla.<\/p>\n<h3 id=\"(one-more-thing)-measuring-layout-instability-experienced-by-real-users\"><span class=\"ez-toc-section\" id=\"Una-cosa-mas-Medicion-de-la-inestabilidad-del-diseno-experimentada-por-usuarios-reales\"><\/span>(Una cosa m\u00e1s) Medici\u00f3n de la inestabilidad del dise\u00f1o experimentada por usuarios reales <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Es bueno poder ejecutar WebPageTest en una p\u00e1gina antes y despu\u00e9s de una optimizaci\u00f3n y ver una mejora en una m\u00e9trica, pero lo que realmente importa es que la experiencia del usuario est\u00e1 mejorando.  \u00bfNo es por eso que estamos tratando de mejorar el sitio en primer lugar?<\/p>\n<p>Entonces, lo que ser\u00eda genial es si comenzamos a medir las experiencias de inestabilidad de dise\u00f1o de usuarios reales junto con nuestras m\u00e9tricas tradicionales de rendimiento web.  Esta es una pieza crucial del ciclo de retroalimentaci\u00f3n de optimizaci\u00f3n porque tener datos de campo nos dice d\u00f3nde est\u00e1n los problemas y si nuestras correcciones marcaron una diferencia positiva.<\/p>\n<p>Adem\u00e1s de recopilar sus propios datos de inestabilidad de dise\u00f1o, consulte el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/ChromeUXReport\/status\/1138555303379816448\">Informe de UX de Chrome<\/a>, que incluye datos de cambio de dise\u00f1o acumulativo de experiencias de usuarios reales en millones de sitios web.  Le permite saber c\u00f3mo se est\u00e1 desempe\u00f1ando usted (o sus competidores), o puede usarlo para explorar el estado de inestabilidad del dise\u00f1o en la web.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un didacticiel sur l&#039;utilisation de WebPageTest pour identifier et r\u00e9soudre les probl\u00e8mes d&#039;instabilit\u00e9 de mise en page. 30 septembre 2019 Dans un article pr\u00e9c\u00e9dent, j&#039;ai \u00e9crit sur la mesure du changement\u2026<\/p>","protected":false},"author":1,"featured_media":82208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83318","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Arreglar la inestabilidad del dise\u00f1o - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Un tutorial sobre el uso de WebPageTest para identificar y solucionar problemas de inestabilidad de dise\u00f1o. 30 de septiembre de 2019 En una publicaci\u00f3n\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Arreglar la inestabilidad del dise\u00f1o\" \/>\n<meta property=\"og:description\" content=\"Un tutorial sobre el uso de WebPageTest para identificar y solucionar problemas de inestabilidad de dise\u00f1o. 30 de septiembre de 2019 En una publicaci\u00f3n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-13T18:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Arreglar la inestabilidad del dise\u00f1o\",\"datePublished\":\"2022-10-13T18:38:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/\"},\"wordCount\":1320,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/\",\"name\":\"Arreglar la inestabilidad del dise\u00f1o - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"datePublished\":\"2022-10-13T18:38:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Un tutorial sobre el uso de WebPageTest para identificar y solucionar problemas de inestabilidad de dise\u00f1o. 30 de septiembre de 2019 En una publicaci\u00f3n\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/arreglar-la-inestabilidad-del-diseno\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"width\":1200,\"height\":1200,\"caption\":\"social-6815535-9949209-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Arreglar la inestabilidad del dise\u00f1o - R Marketing Digital","description":"Un didacticiel sur l&#039;utilisation de WebPageTest pour identifier et r\u00e9soudre les probl\u00e8mes d&#039;instabilit\u00e9 de conception. 30 septembre 2019 Dans un billet","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/","og_locale":"fr_FR","og_type":"article","og_title":"Arreglar la inestabilidad del dise\u00f1o","og_description":"Un tutorial sobre el uso de WebPageTest para identificar y solucionar problemas de inestabilidad de dise\u00f1o. 30 de septiembre de 2019 En una publicaci\u00f3n","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/arreglar-la-inestabilidad-del-diseno\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-13T18:38:39+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Arreglar la inestabilidad del dise\u00f1o","datePublished":"2022-10-13T18:38:39+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/"},"wordCount":1320,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/","url":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/","name":"Arreglar la inestabilidad del dise\u00f1o - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","datePublished":"2022-10-13T18:38:39+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Un didacticiel sur l&#039;utilisation de WebPageTest pour identifier et r\u00e9soudre les probl\u00e8mes d&#039;instabilit\u00e9 de conception. 30 septembre 2019 Dans un billet","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/dev\/arreglar-la-inestabilidad-del-diseno\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","width":1200,"height":1200,"caption":"social-6815535-9949209-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83318"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/82208"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}