{"draftJsState":{"blocks":[{"data":{"image":{"id":"5d4ad5efbd45c000ad925258"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d320o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d05s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":100,"offset":0,"style":"BOLD"}],"text":"Скорость загрузки сайта влияет на показатель конверсии и результаты ранжирования в поисковой выдаче.\n","type":"unstyled","key":"aca85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":70,"style":"ITALIC"},{"length":6,"offset":76,"style":"ITALIC"}],"text":"Вскоре обновленный движок Google будет поддерживать атрибут для тегов img и iframe, позволяющий повысить скорость загрузки.","type":"unstyled","key":"deg9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":11,"style":"BOLD"}],"text":"Что это за атрибут? И как внедрить новую возможность на своем сайте уже сейчас?","type":"unstyled","key":"e7oju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберемся с вопросами далее.\n","type":"unstyled","key":"361ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Какой новый атрибут стал поддерживать Google?","type":"header-two","key":"6gob5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google обновил систему сканирования страниц сайтов. ","type":"unstyled","key":"cn4oh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":101,"style":"ITALIC"}],"text":"Теперь движок сканирования сайтов будет обновляться примерно синхронно с обновлением движка браузера Google Chrome.","type":"unstyled","key":"7jr0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":7,"style":"ITALIC"}],"text":"Движок рендеринга входит в систему сканирования сайтов.","type":"unstyled","key":"bsopi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Процесс рендеринга выполняется до этапа ранжирования.","type":"unstyled","key":"cse19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":51,"style":"BOLD"}],"text":"Теперь в системе рендеринга поддерживается атрибут loading. Точнее будет поддерживаться, но в будущей версии движка. Google заявляет, что поддержка будет реализована в одном из следующих обновлений.","type":"unstyled","key":"9l7m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь поисковые оптимизаторы имеют возможность использовать на сайтах новый атрибут loading для ускорения загрузки страниц. Г","type":"unstyled","key":"83nue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":91,"offset":21,"style":"BOLD"}],"text":"лавное в следующем — изображение, к которым применяется атрибут loading, подлежат индексации поисковой системой.","type":"unstyled","key":"en7m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":21,"style":"ITALIC"}],"text":"Ранее для реализации ленивой загрузки на практике требовалось использовать сторонние решения.","type":"unstyled","key":"f0218"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Минусы таких решений в следующем:","type":"unstyled","key":"cjo5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Увеличивается размер сайта из-за использования дополнительных скриптов;","type":"unordered-list-item","key":"7mrjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возрастает сложность поддержки;","type":"unordered-list-item","key":"85rdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"Не поддерживается индексация поисковой системой.","type":"unordered-list-item","key":"2dukv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Атрибут loading решает все приведенные выше проблемы. ","type":"unstyled","key":"8r7k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяя атрибут loading можно загружать данные по требованию, используя возможности движка браузера. В результате сайт будет открываться быстрее, а Googlebot проиндексирует такие изображения.\n","type":"unstyled","key":"51c5l"},{"data":{"image":{"id":"5d4ad56c04af1f00ac8ac01d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"5t78h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Как использовать атрибут loading на сайте?","type":"header-two","key":"3m9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Атрибут loading можно применять к двум тегам:","type":"unstyled","key":"dk603"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"img — тег для встраивания изображений на страницы сайта;","type":"unordered-list-item","key":"c8nku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"iframe — тег для встраивания медиа элементов.","type":"unordered-list-item","key":"cadk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"},{"length":3,"offset":27,"style":"ITALIC"}],"text":"Пример реализации тега для img:","type":"unstyled","key":"28ae0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"image\"$ ","type":"unstyled","key":"6qdkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"},{"length":6,"offset":27,"style":"ITALIC"}],"text":"Пример реализации тега для iframe:","type":"unstyled","key":"rg78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"brmgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":74,"offset":0,"style":"BOLD"}],"text":"Атрибут loading может принимать одно из трех значений. Значения следующие:","type":"unstyled","key":"1bkp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"lazy;","type":"unordered-list-item","key":"e2rt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"eager;","type":"unordered-list-item","key":"f2sl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"auto.","type":"unordered-list-item","key":"bu2h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":169,"offset":79,"style":"BOLD"}],"text":"Значение lazy указывает на то, что элемент должен быть загружен по требованию.\nЗначение eager указывает на то, что элемент должен быть загружен немедленно. Значение auto указывает на то, что решение о порядке загрузки должно определяться браузером.\nЕсли атрибут loading не задан, по умолчанию будет выполняться сценарий со значением auto.\n","type":"unstyled","key":"bo0u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, примеры имплементация на практике. Выполнять ленивую загрузку:\n $\"megaindex\"/$ ","type":"unstyled","key":"3rgbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для ряда изображений наоборот, загрузку требуется выполнить сразу. Не выполнять ленивую загрузку, загрузить изображение при загрузке страницы:\n","type":"unstyled","key":"72o2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"megaindex\"/$ ","type":"unstyled","key":"7t64l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Передать решение о порядке загрузки на сторону браузера\n","type":"unstyled","key":"dko4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"image\"/$ ","type":"unstyled","key":"5h87l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":90,"style":"ITALIC"}],"text":"Аналогичные значения применимы к тегу iframe. Например, тег iframe можно использовать для ленивой загрузкивидео с YouTube.\n","type":"unstyled","key":"3m94n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cm861"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":49,"style":"BOLD"},{"length":27,"offset":83,"style":"BOLD"}],"text":"Если учитывать и старые браузеры, то реализовать ленивую загрузку следует с учетом проверки поддержки атрибута.\n","type":"unstyled","key":"8f0eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выполнить проверку поддержки? Проверка поддержки loading выглядит так:","type":"unstyled","key":"9f1kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3chqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большие по размеру страницы являются проблемой при продвижении сайта в поисковой выдаче и требуют поисковой оптимизации.\n","type":"unstyled","key":"1ifa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяя к картинкам и iframe атрибут loading=lazy можно ускорить сократить передаваемый объем трафика и, как результат, ускорить загрузку страниц сайта.\n","type":"unstyled","key":"3eu2a"},{"data":{"image":{"id":"5d4ad56c04af1f00ac8ac01e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"ffoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выявить различные проблемы со страницами сайта можно используя сервис аудита от MegaIndex.\n","type":"unstyled","key":"6eut6"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":15,"offset":19}],"inlineStyleRanges":[],"text":"Ссылка на сервис — MegaIndex Аудит.\n","type":"unstyled","key":"e4mpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Сервис бесплатный.\n","type":"unstyled","key":"7b9p1"},{"data":{"image":{"id":"5d4ad56c78125e00aea10c1e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"598jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Вопросы и ответы","type":"header-two","key":"3epnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Зачем нужен атрибут loading?","type":"header-three","key":"17ej8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":97,"style":"BOLD"}],"text":"На страницах часто размещается множество изображений, что влияет на размер страниц, и приводит к замедлениюзагрузки страниц сайта.\n","type":"unstyled","key":"1d1aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":82,"style":"ITALIC"},{"length":7,"offset":119,"style":"BOLD"},{"length":13,"offset":165,"style":"BOLD"}],"text":"Зачастую множество изображений на странице находятся за пределами так называемого первого экрана пользователя. Атрибут loading позволяет загружать такие изображения по требованию.\n","type":"unstyled","key":"52d2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Как проверить поддерживается ли атрибут в браузере?","type":"header-three","key":"fhc8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":59,"style":"ITALIC"}],"text":"Проверка поддержки атрибута проводится посредством анализа HTMLImageElement.prototype.\n","type":"unstyled","key":"fhnr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для проверки достаточно открыть ссылку с кодом для анализа.\n","type":"unstyled","key":"cqkfr"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":8,"offset":11}],"inlineStyleRanges":[],"text":"Например — indexoid. \n","type":"unstyled","key":"14ahk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"}],"text":"Каким образом рассчитывается момент для загрузки изображений по требованию?","type":"header-three","key":"cc24s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За момент загрузки изображений отвечает движок браузера пользователя.\n","type":"unstyled","key":"7t9s9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер получает весь код страницы и выстраивает очередь загрузки из всех элементов.\n","type":"unstyled","key":"eqmi4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":11,"style":"BOLD"}],"text":"Элементы с ленивой загрузкой должны загружаться при прокрутке страницы, обычно незадолго до того момента, пока изображения будет отображено на экране.\n","type":"unstyled","key":"eons4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":70,"style":"BOLD"},{"length":19,"offset":129,"style":"BOLD"},{"length":15,"offset":90,"style":"ITALIC"}],"text":"Система организации ленивой загрузки в браузере основана не только на близости элемента к видимой области на устройстве, но и на скорости соединения с интернетом.\n","type":"unstyled","key":"36s86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":60,"style":"ITALIC"}],"text":"Итак, если для изображений и/или фреймов установлен атрибут loading=auto, то для выбора момента загрузки элементов браузер будет использовать такие данные:\n","type":"unstyled","key":"1uiib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Близость элемента к видимой части;","type":"unordered-list-item","key":"a8kkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорость соединение с интернетом.","type":"unordered-list-item","key":"6vrjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пороговые значения для срабатывания ленивой загрузки в отношении скорости соединения с интернетом заданы в исходном коде браузера Chrome.\n","type":"unstyled","key":"aef5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:\n","type":"unstyled","key":"8vjrq"},{"data":{"image":{"id":"5d4ad56c43bee300aef82c44"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"2vh00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Как браузер узнает о размере изображений?","type":"header-three","key":"clb75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер загружает первые 2 килобайта из файла картинки. В таких данных хранятся значения размера картинки.\n","type":"unstyled","key":"bi373"},{"data":{"image":{"id":"5d4ad56cbc251400ac91db2e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"4cg1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальнейшую часть картинки браузер загружает в момент приближения картинки к видимой части.\n","type":"unstyled","key":"o4m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":"Как включить поддержку атрибута в Google Chrome до глобального релиза?","type":"header-three","key":"f1smf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Любой пользователь Google Chrome может включить/выключить поддержку нового атрибута уже сейчас, до глобального релиза.\n","type":"unstyled","key":"bj9ne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подобная пригодится для тестирования.\n","type":"unstyled","key":"amveb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":44,"style":"BOLD"},{"length":25,"offset":84,"style":"BOLD"}],"text":"Для включения/выключения достаточно открыть chrome://flags/ и активировать значение Enable lazy image loading.\n","type":"unstyled","key":"errq1"},{"data":{"image":{"id":"5d4ad56cfe289100ac41043f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"5nv9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"}],"text":"В каких случаях атрибут lazy=loading использовать не следует?","type":"header-three","key":"f2cge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не следует использовать ленивую загрузку в случае, если по элементам собираются аналитические данные. Если отслеживаются показы в видимой части, то не следует использовать lazy loading для блоков такой рекламы.\n","type":"unstyled","key":"clcnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Какие браузеры будут поддерживать атрибут?","type":"header-three","key":"1jvre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В перспективе атрибут loading будет поддерживаться всеми популярными браузерами. Такая поддержка стала возможна по причине использования общих стандартов.\n","type":"unstyled","key":"5u34p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В перспективе такие браузеры будут поддерживать атрибут loading=lazy:\n","type":"unstyled","key":"6d0r8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chrome;","type":"unordered-list-item","key":"9utpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chrome Android;","type":"unordered-list-item","key":"a7o2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Opera;","type":"unordered-list-item","key":"3usj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Microsoft Edge;","type":"unordered-list-item","key":"7l6b1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Safari;","type":"unordered-list-item","key":"8chqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"iOS Safari.","type":"unordered-list-item","key":"5dh0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Выводы","type":"header-two","key":"5au3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":24,"style":"ITALIC"}],"text":"Применение атрибута для ленивой загрузки loading позволяет достичь следующих целей:\n","type":"unstyled","key":"e4tqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Увеличить скорость открытия страниц сайта. Скорость загрузки влияет на поисковую оптимизацию;","type":"unordered-list-item","key":"398rl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сэкономить трафик, а значит снизить расходы на интернет для пользователя;","type":"unordered-list-item","key":"3pnj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшить поведенческие факторы. Загрузки данных в видимой области страницы будет происходить быстрее. Исходя из аналитических данных Google известно, что от скорости загрузки сайта зависит показатель конверсии;","type":"unordered-list-item","key":"bilgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Снижение объёма передаваемых данных, что позволяет экономить средства для больших сайтов;","type":"unordered-list-item","key":"4fj43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":107,"style":"ITALIC"}],"text":"Уменьшить размер страниц за счет устранения из кода лишних скриптов, которые использовались для реализации ленивой загрузки ранее.","type":"unordered-list-item","key":"7ofdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":65,"style":"BOLD"}],"text":"Результат достигается за счет добавления к изображениям и iframe атрибута loading.\n","type":"unstyled","key":"420v6"},{"data":{"image":{"id":"5d4ad570ec575b00ad621053"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"877bd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":46,"style":"ITALIC"}],"text":"Атрибут loading может принимать три значения: auto; lazy; eager.\n","type":"unstyled","key":"4gtej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":96,"style":"BOLD"},{"length":20,"offset":190,"style":"ITALIC"}],"text":"Для ряда страниц на сайте атрибут loading=lazy позволяет сократить размер загружаемых данных на 99%. Исходя из статистических данных Google, при задержке загрузки сайта на 1 секунду падение показателя конверсии может достигать 20%.\n","type":"unstyled","key":"1jos5"},{"data":{"image":{"id":"5d4ad57178125e00aea10c1f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"4ivjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если применять значение auto, загрузка изображений будет начинаться по решению браузера. Решение принимается на основе данных о близости элемента к видимой области. Например, если элемент находится на расстоянии в 400 пикселей от видимого экрана, то загрузка начинается. Еще в принятии решения учитывается скорость соединения с интернетом.\n","type":"unstyled","key":"cks5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":338,"style":"ITALIC"}],"text":"Атрибут loading позволяет не использовать дополнительные скрипты, которые применяются для реализации функции ленивой загрузки. В результате повышается скорость загрузки страниц сайта и уменьшается объем передаваемого трафика, что снижает нагрузку на пропускную способность. Увеличение скорости загрузки страниц сайта приводит к улучшению поведенческих факторов на сайте и росту показателя конверсии.\n","type":"unstyled","key":"alsqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загрузка элементов с использованием loading=lazy обычно происходит в аккурат до вывода изображения.\n","type":"unstyled","key":"a40u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для наглядности:\n","type":"unstyled","key":"600g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":11,"style":"BOLD"}],"text":"Выгоды для пользователя:\n","type":"unstyled","key":"c0o3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Быстрее открываются страницы сайта;","type":"unordered-list-item","key":"e05sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экономия батарейки мобильного устройства;","type":"unordered-list-item","key":"duhm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Экономия денег на мобильном трафике. Если на стороне клиента используется мобильная связь в роуминге, экономия средств может достигать значимых цифр.","type":"unordered-list-item","key":"bi2df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":11,"style":"BOLD"}],"text":"Выгоды для владельца сайта:\n","type":"unstyled","key":"4dgc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повышение лояльности пользователя;","type":"unordered-list-item","key":"8lvbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение поисковой оптимизации сайта;","type":"unordered-list-item","key":"equ14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экономия на пропускном канале.","type":"unordered-list-item","key":"eic33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":11,"style":"BOLD"}],"text":"Выгоды для поискового оптимизатора:\n","type":"unstyled","key":"egldf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Индексация краулером поисковой системы изображений, которые загружаются с использованием атрибута loading=lazy;","type":"unordered-list-item","key":"boh4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":10,"style":"BOLD"}],"text":"Улучшение поведенческих факторов за счет повышения скорости загрузки страницы;","type":"unordered-list-item","key":"djif0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":10,"style":"BOLD"}],"text":"Улучшение поисковой оптимизации за счет повышения скорости загрузки сайта.","type":"unordered-list-item","key":"c7ppn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":45,"style":"ITALIC"},{"length":24,"offset":111,"style":"BOLD"}],"text":"Что делать, если на сайте никакие решения по ленивой загрузке не используются? Применяйте loading=lazy с целью прогрессивного улучшения страниц сайта. Браузеры, которые не поддерживают атрибут, будут загружать элементы, как и раньше. ","type":"unstyled","key":"eolid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"N3dlXjHhMNwaVeesHAlD"}],"entityMap":{"0":{"data":{"href":"https://ru.megaindex.com/a/audit?from=264","url":"https://ru.megaindex.com/a/audit?from=264"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://indexoid.com/speed/","url":"https://indexoid.com/speed/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}