{"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":[],"_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}]}}