{"id":2213,"date":"2021-05-21T20:08:50","date_gmt":"2021-05-22T01:08:50","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=2213"},"modified":"2024-11-01T11:21:59","modified_gmt":"2024-11-01T16:21:59","slug":"que-es-y-como-implementar-lazy-loading","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/","title":{"rendered":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading"},"content":{"rendered":"<p><em>Lazy Loading<\/em> permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados (<em>iframe<\/em>). Miremos a detalle.<\/p>\n<p>Desde febrero de 2020, el atributo <code>loading<\/code> hace parte del est\u00e1ndar HTML. Este permite establecer si la carga de los recursos se realiza al inicio de la consulta o a medida que el usuario se desplaza por la p\u00e1gina web (movimiento de <em>scroll<\/em>).<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<p>Los posibles valores para <code>loading<\/code> son:<\/p>\n<ul>\n<li><code>lazy<\/code>: que retiene la carga del recurso hasta que el usuario llegue a \u00e9l (producto de un c\u00e1lculo que se realiza con el <em>viewport<\/em>).<\/li>\n<li><code>eager<\/code>: exige la carga de todos los recursos al momento de acceder a la p\u00e1gina web, independiente de su ubicaci\u00f3n.<\/li>\n<li><code>auto<\/code>: asume la configuraci\u00f3n que se haya establecido a nivel general en el navegador.\n<\/ul>\n<p>En palabras sencillas, si una p\u00e1gina web define el par\u00e1metro <code>loading<\/code>, con el valor <code>lazy<\/code>, en sus im\u00e1genes y recursos incrustados, su velocidad de respuesta ser\u00e1 mayor, pues solo presentar\u00e1 los primeros elementos de la vista actual (<em>above de fold<\/em>).<\/p>\n<p>Luego, a medida que el usuario navegue en la p\u00e1gina, por <em>scroll<\/em>, el navegador ir\u00e1 solicitando los nuevos recursos.<\/p>\n<p>El mejor ejemplo es Instagram: a medida que el usuario se desplaza, las im\u00e1genes van apareciendo. Esto, innegablemente, mejora los tiempos de respuesta.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/p>\n<\/div>\n<\/div>\n<h2>C\u00f3mo aplicar lazy loading<\/h2>\n<p>Al ser parte del est\u00e1ndar, la utilizaci\u00f3n de <code>loading<\/code> es bastante sencilla. Solo hace falta indicarlo al interior de la etiqueta <code>img<\/code> o <code>iframe<\/code>.<\/p>\n<p>Por cierto, tambi\u00e9n funciona adentro de <code>picture<\/code> e im\u00e1genes con el atributo <code>src<\/code>.<\/p>\n<p>Ejemplo para im\u00e1genes:<\/p>\n<pre>\r\n&lt;img loading=\"lazy\" src=\"https:\/\/mitisio.com\/img\/logo\" width=\"240\" alt=\"\" \/&gt;\r\n<\/pre>\n<p>En im\u00e1genes que hacen parte de <code>picture<\/code> se define en la etiqueta <code>img<\/code>:<\/p>\n<pre>\r\n&lt;picture>\r\n&lt;source media=\"(min-width: 300px)\" srcset=\"logo-x.jpg 1x, logo-x-hd.jpg 2x\"&gt;\r\n&lt;source srcset=\"logo-s.jpg 1x, logo-s-hd.jpg 2x\"&gt;\r\n&lt;img src=\"logo-empresa.jpg\" loading=\"lazy\"&gt;\r\n&lt;\/picture>\r\n<\/pre>\n<p>Igual que los dos ejemplos anteriores, la especificaci\u00f3n va la etiqueta HTML de imagen:<\/p>\n<pre>\r\n&lt;img src=\"logo-empresa.jpg\"\r\nsrcset=\"logo-x.jpg 1024w, logo-m.jpg 640w, logo-s.jpg 320w\"\r\nsizes=\"(min-width: 30em) 33.3vw, 100vw\"\r\nloading=\"lazy\"&gt;\r\n<\/pre>\n<p>Por \u00faltimo, un ejemplo de aplicaci\u00f3n en recursos incrustados:<\/p>\n<pre>\r\n&lt;iframe src=\"video.html\" loading=\"lazy\"&gt; &lt;\/iframe&gt;\r\n<\/pre>\n<p>Aqu\u00ed es preciso indicar que, al ser una funci\u00f3n reciente, es posible que algunos navegadores no la soporten. Para conocer la compatibilidad se puede revisar <a href=\"https:\/\/caniuse.com\/?search=loading\">Can I Use?<\/a>.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados (iframe). Miremos a detalle. Desde febrero de 2020, el atributo loading hace parte del est\u00e1ndar HTML. Este permite establecer si la carga de los recursos se realiza&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,44],"class_list":["post-2213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-seo","has-post-thumbnail-archive"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"juancadotcom\"\/>\n\t<meta name=\"google-site-verification\" content=\"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Escuela Digital - Aprende con e-Lexia.com\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital\" \/>\n\t\t<meta property=\"og:description\" content=\"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/\" \/>\n\t\t<meta property=\"fb:admins\" content=\"42896562054\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"975\" \/>\n\t\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t\t<meta property=\"article:tag\" content=\"escuela de producci\u00f3n\" \/>\n\t\t<meta property=\"article:tag\" content=\"c\u00f3digo\" \/>\n\t\t<meta property=\"article:tag\" content=\"seo\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2021-05-22T01:08:50+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-01T16:21:59+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"juancadotcom\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura estimado\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#blogposting\",\"name\":\"Qu\\u00e9 es y c\\u00f3mo implementar Lazy Loading - Escuela Digital\",\"headline\":\"Qu\\u00e9 es y c\\u00f3mo implementar Lazy Loading\",\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"datePublished\":\"2021-05-21T20:08:50-05:00\",\"dateModified\":\"2024-11-01T11:21:59-05:00\",\"inLanguage\":\"es-ES\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#webpage\"},\"articleSection\":\"Escuela de Producci\\u00f3n, c\\u00f3digo, SEO\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"position\":2,\"name\":\"Escuela de Producci\\u00f3n\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#listItem\",\"name\":\"Qu\\u00e9 es y c\\u00f3mo implementar Lazy Loading\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"name\":\"Inicio\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#listItem\",\"position\":3,\"name\":\"Qu\\u00e9 es y c\\u00f3mo implementar Lazy Loading\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\",\"name\":\"e-Lexia.com\",\"description\":\"Aprende con e-Lexia.com\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"telephone\":\"+573053933953\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/e-Lexia-Logo-v5-circle.png\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#organizationLogo\",\"width\":600,\"height\":600,\"caption\":\"Logo de e-Lexia.com\"},\"image\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/@escuela-digital\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/\",\"name\":\"juancadotcom\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g\",\"width\":96,\"height\":96,\"caption\":\"juancadotcom\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/juancadotcom\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#webpage\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/\",\"name\":\"Qu\\u00e9 es y c\\u00f3mo implementar Lazy Loading - Escuela Digital\",\"description\":\"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\\u00e1genes y recursos incrustados . Miremos a detalle.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#mainImage\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/que-es-y-como-implementar-lazy-loading\\\/#mainImage\"},\"datePublished\":\"2021-05-21T20:08:50-05:00\",\"dateModified\":\"2024-11-01T11:21:59-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"name\":\"Escuela Digital\",\"description\":\"Aprende con e-Lexia.com\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital","description":"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.","canonical_url":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#blogposting","name":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital","headline":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading","author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"datePublished":"2021-05-21T20:08:50-05:00","dateModified":"2024-11-01T11:21:59-05:00","inLanguage":"es-ES","mainEntityOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#webpage"},"isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#webpage"},"articleSection":"Escuela de Producci\u00f3n, c\u00f3digo, SEO"},{"@type":"BreadcrumbList","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","position":1,"name":"Inicio","item":"https:\/\/e-lexia.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","position":2,"name":"Escuela de Producci\u00f3n","item":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#listItem","name":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading"},"previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","name":"Inicio"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#listItem","position":3,"name":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading","previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}}]},{"@type":"Organization","@id":"https:\/\/e-lexia.com\/blog\/#organization","name":"e-Lexia.com","description":"Aprende con e-Lexia.com","url":"https:\/\/e-lexia.com\/blog\/","telephone":"+573053933953","logo":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/01\/e-Lexia-Logo-v5-circle.png","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#organizationLogo","width":600,"height":600,"caption":"Logo de e-Lexia.com"},"image":{"@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/@escuela-digital","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"Person","@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author","url":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/","name":"juancadotcom","image":{"@type":"ImageObject","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g","width":96,"height":96,"caption":"juancadotcom"},"sameAs":["https:\/\/x.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/juancadotcom","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"WebPage","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#webpage","url":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/","name":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital","description":"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#breadcrumblist"},"author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"creator":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#mainImage","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"primaryImageOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/#mainImage"},"datePublished":"2021-05-21T20:08:50-05:00","dateModified":"2024-11-01T11:21:59-05:00"},{"@type":"WebSite","@id":"https:\/\/e-lexia.com\/blog\/#website","url":"https:\/\/e-lexia.com\/blog\/","name":"Escuela Digital","description":"Aprende con e-Lexia.com","inLanguage":"es-ES","publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"}}]},"og:locale":"es_ES","og:site_name":"Escuela Digital - Aprende con e-Lexia.com","og:type":"article","og:title":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital","og:description":"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.","og:url":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/","fb:admins":"42896562054","og:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:secure_url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:width":975,"og:image:height":550,"article:tag":["escuela de producci\u00f3n","c\u00f3digo","seo"],"article:published_time":"2021-05-22T01:08:50+00:00","article:modified_time":"2024-11-01T16:21:59+00:00","twitter:card":"summary_large_image","twitter:site":"@juancadotcom","twitter:title":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading - Escuela Digital","twitter:description":"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.","twitter:creator":"@juancadotcom","twitter:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","twitter:label1":"Escrito por","twitter:data1":"juancadotcom","twitter:label2":"Tiempo de lectura estimado","twitter:data2":"2 minutos"},"aioseo_meta_data":{"post_id":"2213","title":null,"description":"Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus im\u00e1genes y recursos incrustados . Miremos a detalle.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-12-24 03:35:37","updated":"2025-06-04 16:02:31","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\" title=\"Inicio\">Inicio<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/\" title=\"Escuela de Producci\u00f3n\">Escuela de Producci\u00f3n<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tQu\u00e9 es y c\u00f3mo implementar Lazy Loading\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Inicio","link":"https:\/\/e-lexia.com\/blog"},{"label":"Escuela de Producci\u00f3n","link":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/"},{"label":"Qu\u00e9 es y c\u00f3mo implementar Lazy Loading","link":"https:\/\/e-lexia.com\/blog\/que-es-y-como-implementar-lazy-loading\/"}],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/2213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=2213"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/2213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=2213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=2213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=2213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}