{"id":318,"date":"2020-11-25T06:51:21","date_gmt":"2020-11-25T06:51:21","guid":{"rendered":"https:\/\/softwareinformatico.com\/blog\/?p=318"},"modified":"2020-11-25T06:51:23","modified_gmt":"2020-11-25T06:51:23","slug":"que-es-lazy-load-y-por-que-usarlo","status":"publish","type":"post","link":"https:\/\/softwareinformatico.com\/blog\/que-es-lazy-load-y-por-que-usarlo\/","title":{"rendered":"Qu\u00e9 es Lazy Load y por qu\u00e9 usarlo."},"content":{"rendered":"\n<p><strong>Lazy Load se usa para cargar los recursos de una p\u00e1gina web<\/strong> (im\u00e1genes, iframes) <strong>solamente cuando se necesiten<\/strong>, mejorando la experiencia del usuario y haciendo que la velocidad de la web sea m\u00e1s alta.<\/p>\n\n\n\n<p>Estas mejoras est\u00e1n dentro de la categor\u00eda <a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimizaci\u00f3n web<\/a> , el propio Google reconoce que usar la carga en diferido <strong>proporciona mejores puntuaciones en<\/strong> <strong>Page Speed<\/strong>.<br><br>En resumen, Lazy Load aumenta la velocidad de carga, reduce el consumo de recursos y Google lo tiene en cuenta. <strong>Est\u00e1 bastante clara la relevancia de cara<\/strong> al <a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/softwareinformatico.com\/posicionamiento-en-google\/\" target=\"_blank\" rel=\"noreferrer noopener\">posicionamiento en google<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cuando aplicar lazy load.<\/h2>\n\n\n\n<p>Todos <strong>los recursos que est\u00e9n fuera de la pantalla deben de usar lazy load<\/strong>. Es decir, los que cuando entramos en una url no son visibles sin hacer scroll.<\/p>\n\n\n\n<p>No tiene mucho sentido cargar 20 im\u00e1genes cuando el usuario est\u00e1 visualizando un bloque de texto, ya que es muy posible que el usario no llegue a verlas, evitando as\u00ed un consumo innecesario de recursos.<\/p>\n\n\n\n<div class=\"div_consulta_bordes\"><p class=\"text_ini\">Somos expertos en <a href=\"https:\/\/softwareinformatico.com\/\" title=\"aplicaciones inform\u00e1ticas\">aplicaciones inform\u00e1ticas<\/a> ,preg\u00fantanos, podemos ayudarte.<\/p><div class=\"creatutienda\"><a href=\"https:\/\/softwareinformatico.com\/consulta-informatica\/\" title=\"consulta informatica\">CONSULTA INFORMATICA<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Como Implantar Lazy Load<\/h2>\n\n\n\n<p>Existen diversas forma de de implantar la carga en diferido en nuestra web:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-very-dark-gray-color\">Programaci\u00f3n a medida<\/span><\/strong><span class=\"has-inline-color has-vivid-red-color\"><strong>.<\/strong><\/span> Se puede hacer un un desarrollo a medida con Javascript para detectar cuando el usuario hace scroll y mediante eventos obtener la imagen o iframe.<br><\/li><li><strong><span class=\"has-inline-color has-very-dark-gray-color\">Librer\u00edas<\/span><\/strong>.<ul><li><a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/github.com\/aFarkas\/lazysizes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lazysizes<\/a>. Una de las mejores bibliotecas y f\u00e1cil de usar. Se har\u00eda de la siguiente forma:<ul><li>A\u00f1adir la class lazyload.<\/li><li> Definir la imagen que se cargar\u00e1 en segundo plano mediante data-src.<\/li><li>Opcional atributo src, para mostrar una imagen de menor calidad o con poco peso mientras se carga la imagen.<br><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img data-src=\"image.jpg\" class=\"lazyload\" \/><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><ul><li><a aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/github.com\/malchata\/yall.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Yall.js<\/a>. Otra opci\u00f3n recomendable, es una biblioteca que usa \u00abObserver\u00bb y mediante controladores de eventos maneja la carga en diferido.  <br>Es compatible con la mayor\u00eda de navegadores y tiene poco peso.<br><br><\/li><\/ul><\/li><li><strong><span class=\"has-inline-color has-very-dark-gray-color\">Nativo<\/span><\/strong>. Incluida por el propio navegador, <strong>es la m\u00e1s f\u00e1cil de usar y la que apenas consume recursos<\/strong>. Se utiliza tanto en iframe como en im\u00e1genes. El \u00fanico problema que<strong> no todos los navegadores la soportan<\/strong>, por ejemplo Safari a\u00fan no la tiene incluida.<br><br>Una buena forma de usar la forma nativa, ser\u00eda <strong>primero comprobar si la etiqueta loading es aceptada<\/strong> por el navegador, en caso afirmativo se usar\u00eda de forma normal, <strong>en caso negativo podr\u00edamos usar una librer\u00eda externa<\/strong> o programaci\u00f3n a medida.<br><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/Primero para detectar si tiene carga nativa\nif ('loading' in HTMLImageElement.prototype) {\n  \/\/ soportado por el navegador, usamos carga nativa\n    &lt;img src=\"product-4.jpg\" loading=\"lazy\" width=\"200\" height=\"200\">\n}else{\n    \/\/ no soportado por el navegador, usamos librer\u00edas externas\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Anotaciones<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>No usar lazyload para aquellas im\u00e1genes que directamente se muestran al abrir la url<\/strong>, esas im\u00e1genes deben cargarse por defecto como siempre. En cambio aquellas im\u00e1genes que no sean visibles y haya que hacer scroll si deben de ir por lazyload.<br><\/li><li>Intentar <strong>usar etiquetas img en vez de im\u00e1genes en el css<\/strong>, ya que lazyload no soporta la carga en diferido mediante css.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Lazy Load se usa para cargar los recursos de una p\u00e1gina web (im\u00e1genes, iframes) solamente cuando se necesiten, mejorando la experiencia del usuario y haciendo <a class=\"mh-excerpt-more\" href=\"https:\/\/softwareinformatico.com\/blog\/que-es-lazy-load-y-por-que-usarlo\/\" title=\"Qu\u00e9 es Lazy Load y por qu\u00e9 usarlo.\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[27,23,26,24],"class_list":["post-318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web","tag-carga-en-diferido","tag-optimizacion-web","tag-pagespeed-google","tag-wpo"],"_links":{"self":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":0,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media\/326"}],"wp:attachment":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}