{"id":74891,"date":"2024-05-07T12:46:20","date_gmt":"2024-05-07T10:46:20","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74891&preview=true&preview_id=74891"},"modified":"2024-05-17T09:52:17","modified_gmt":"2024-05-17T07:52:17","slug":"speculative-loading","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/speculative-loading\/","title":{"rendered":"C\u00f3mo Speculative Loading puede aumentar la velocidad de p\u00e1gina de tu sitio de WordPress"},"content":{"rendered":"

Hoy en d\u00eda, las p\u00e1ginas web est\u00e1n repletas de im\u00e1genes, v\u00eddeos y elementos interactivos que pretenden mejorar la experiencia del usuario. Sin embargo, estos elementos pueden ralentizar el tiempo de carga de tu p\u00e1gina.<\/p>\n

A medida que la tecnolog\u00eda avanza, un objetivo permanece constante: el rendimiento<\/em>. Todo el mundo espera que sus p\u00e1ginas web se carguen a la velocidad del rayo<\/a>.<\/p>\n

Una forma de hacer que las p\u00e1ginas web se carguen m\u00e1s r\u00e1pido es prerrenderizarlas o precargarlas antes de que el usuario navegue hasta ellas.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Breve historia del prerrenderizado<\/h2>\n

En 2011, el equipo de Chromium introdujo una primera forma de prerrenderizaci\u00f3n<\/a> en el navegador Chrome mediante la etiqueta <link rel=\"prerender\" \u2026 ><\/code>.<\/p>\n

Esto permit\u00eda a los desarrolladores<\/a> indicar a los navegadores<\/a> qu\u00e9 p\u00e1gina(s) visitar\u00eda el usuario a continuaci\u00f3n. Entonces, el navegador buscaba y procesaba silenciosamente estas p\u00e1ginas en segundo plano, reduciendo dr\u00e1sticamente<\/em> el tiempo de carga cuando el usuario navegaba a esas p\u00e1ginas.<\/p>\n

A pesar de sus ventajas, esta primera implementaci\u00f3n del prerrenderizado utilizaba mucho ancho de banda y recursos de CPU y pod\u00eda dar lugar a problemas de privacidad si el usuario no visitaba las p\u00e1ginas prerrenderizadas. Adem\u00e1s, ten\u00edas que seleccionar manualmente qu\u00e9 enlaces prerrenderizar, lo que no siempre era eficaz o factible.<\/p>\n

Para solucionar algunos de estos problemas, Chrome dej\u00f3 de utilizar el prerrenderizado mediante la sugerencia de enlace rel=prerender<\/code> en favor del m\u00e9todo NoState Prefetch<\/a>, que consist\u00eda en obtener recursos para una p\u00e1gina sin ejecutar JavaScript ni otras acciones potencialmente invasivas de la privacidad.<\/p>\n

El m\u00e9todo NoState Prefetch mejoraba la carga de recursos, pero no pod\u00eda ofrecer una carga instant\u00e1nea de la p\u00e1gina, como un prerrenderizado completo.<\/p>\n

Presentaci\u00f3n de la API Speculation Rules<\/h2>\n

La API Speculation Rules<\/a> es una nueva API experimental definida por JSON que precarga especulativamente las URL antes de navegar hacia ellas, lo que permite tiempos de renderizado m\u00e1s r\u00e1pidos y mejores experiencias de usuario.<\/p>\n

La API permite a los desarrolladores configurar reglas con una estructura definida en formato JSON dentro de un script type=\"speculationrules\"<\/code> que el navegador puede utilizar para decidir qu\u00e9 URLs deben ser prerrenderizadas.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Lo mismo se aplica a la precarga, que a menudo puede ser un buen primer paso en el camino hacia el prerrenderizado:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Los fragmentos de c\u00f3digo anteriores muestran c\u00f3mo funcionaba la API Speculation Rules, especificando una lista de URLs que prefijar o prerrenderizar.<\/p>\n
Recientemente, Google anunci\u00f3 nuevas mejoras en la API Speculation Rules<\/a>, que ahora ofrece la opci\u00f3n de b\u00fasqueda autom\u00e1tica de enlaces mediante reglas de documentos<\/em>. Esto funciona obteniendo URLs del documento bas\u00e1ndose en una condici\u00f3n where<\/code>.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
En este fragmento de c\u00f3digo, todas las URL de la p\u00e1gina se tienen en cuenta para el prerrenderizado, excepto las que llevan a las p\u00e1ginas de administraci\u00f3n e inicio de sesi\u00f3n de WordPress<\/a>. Tambi\u00e9n puedes especificar un nivel\u00a0de eagerness<\/code> \u2014 eager<\/code> (inmediatamente), moderate<\/code> (al pasar el rat\u00f3n 200 ms) y conservative<\/code> (al pasar el rat\u00f3n o tocar el bot\u00f3n).<\/p>\n
Los selectores CSS<\/a> tambi\u00e9n se pueden utilizar como alternativa o junto con, las coincidencias href<\/code> para encontrar enlaces en la p\u00e1gina actual:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Cuando utilices la API Speculation Rules, puedes inspeccionarla utilizando los servicios en segundo plano de Speculative loads<\/strong>\u00a0en la pesta\u00f1a Aplicaci\u00f3n<\/strong> de Chrome al inspeccionar la p\u00e1gina.<\/p>\n
\"Inspecciona
Inspecciona la API Speculation Rules con los servicios en segundo plano de Speculative loads en la pesta\u00f1a Aplicaci\u00f3n de Chrome<\/figcaption><\/figure>\n
Hay m\u00e1s cosas \u2014 las exploraremos en la secci\u00f3n de depuraci\u00f3n.<\/p>\n
Compatibilidad con navegadores<\/h3>\n
La API Speculation Rules est\u00e1 soportada<\/a> en los navegadores modernos basados en Chromium, incluidos Chrome y Edge, a partir de versiones espec\u00edficas.<\/p>\n
\"Soporte
Soporte de navegadores para la API Speculation Rules (Fuente: Mozilla<\/a>).<\/figcaption><\/figure>\n
Esto garantiza que los usuarios de los navegadores compatibles puedan beneficiarse de tiempos de carga m\u00e1s r\u00e1pidos, mientras que los de otros navegadores no experimentar\u00e1n ning\u00fan efecto negativo, ya que la API es una herramienta de mejora progresiva.<\/p>\n
El plugin de WordPress Speculative Loading<\/h2>\n
Para disfrutar de las ventajas de la API Speculation Rules en WordPress, el equipo de rendimiento de WordPress<\/a> (que incluye desarrolladores de Google) ha publicado recientemente el plugin Speculative Loading<\/a>. Este plugin permite la carga especulativa de las URLs del frontend enlazadas en la p\u00e1gina.<\/p>\n
Hasta ahora, el plugin no ha tenido mucha aceptaci\u00f3n, ya que la API a\u00fan est\u00e1 en su fase inicial, pero ha recibido algunas reviews positivas.<\/p>\n
\"Rese\u00f1as
Rese\u00f1as de la comunidad de WordPress sobre el plugin Speculative Loading.<\/figcaption><\/figure>\n
Por defecto, el plugin est\u00e1 configurado para prerrenderizar las URLs del frontend de WordPress cuando el usuario pasa el rat\u00f3n por encima de un enlace relevante. Esto puede personalizarse a trav\u00e9s de la secci\u00f3n Speculative Loading<\/strong> en Settings > Reading<\/strong>.<\/p>\n
\"Personaliza
Personaliza el plugin Speculative Loading en los ajustes de administraci\u00f3n de WordPress.<\/figcaption><\/figure>\n
Esto significa que cualquier URL enlazada en la p\u00e1gina se prerrenderiza con una configuraci\u00f3n\u00a0eagerness<\/code>\u00a0moderate<\/code>, que normalmente se activa al pasar el rat\u00f3n por encima de un enlace. Por lo tanto, no tienes que hacer nada despu\u00e9s de activar el plugin; simplemente funciona<\/em>.<\/p>\n
Por ejemplo, si ya has instalado el plugin Speculative Loading<\/strong>\u00a0en un sitio de WordPress. Utiliza las DevTools de Chrome<\/a> para inspeccionar el sitio y haz clic en la pesta\u00f1a Elements<\/strong>. Cuando te desplaces hacia abajo, ver\u00e1s que ya se te ha a\u00f1adido un script type=\"speculationrules\"<\/code> con las distintas reglas de Especulaci\u00f3n.<\/p>\n
\"Inspecciona
Inspecciona el sitio de WordPress para ver que Speculative Rules se a\u00f1ade autom\u00e1ticamente con el plugin Speculative Loading.<\/figcaption><\/figure>\n
Utiliza un Regex para especificar los enlaces que deben prerrenderizarse, especifica los enlaces que no deben prerrenderizarse y establece el eagerness. Las siguientes secciones explican estas reglas en detalle.<\/p>\n
L\u00edmites para evitar el uso excesivo<\/h3>\n
Chrome dispone de l\u00edmites para evitar el uso excesivo de la API:<\/p>\n\n\n\n\n\n
Eagerness<\/strong><\/td>\nPrecarga<\/strong><\/td>\nPrerrenderizado<\/strong><\/td>\n<\/tr>\n
immediate\/eager<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
moderate\/conservative<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Evitan el uso excesivo mediante varios ajustes basados en la urgencia y la interacci\u00f3n del usuario.<\/p>\n