Тут в комментах пару ссылок давали, например ссылка на коммент, где приводят простейшую библиотеку отложенной загрузки контента… но учтите, таких библиотек море! вам выбирать какую использовать!
Или вот ссылка на коммент, в которой приводился пример фреймворка, в котором уже встроена отложенная и ленивые загрузки и вы об этом даже не думаете… как автор коммента сказал: ленивый рендеринг в этом фреймворке называется, но суть остается та же…
И в cProtfolio это тоже встроено.
Но если вам нужно, то просто погуглите, или тут в хабре поищите, найдете множество решений!
Я б назвал это хаком, при этом хаком, который замедляет загрузку сайта, а не ускоряет…
А цель этой статьи как раз улучшить скорость загрузки… тоесть такие обманки полный отстой!)
но вам решать…
Чем меньше счетчиков и метрик, тем быстрее сайт загружается, это факт!
Сколько их ставить, это вам решать… может «обидеться»))
Но не только в обиде дело, и гугл и яндекс анализирует поведение пользователя на вашем сайте, количество отказов, время проведенное на нем, количество посетителей и так далее… и по этим показателям либо повышает ваш сайт в рейтинге, либо понижает… если вы убираете их счетчик, то они не могут эти показатели отследить и повышать или понижать вас не могут…
А они не могут, они могут измерить только после загрузки их скрипта!
Ну в любом случае, с яндекс.метрикой и гугл.аналитикой вы ничего не можете сделать, так как они должны грузится сразу и их нельзя в отложенную или ленивую загрузку запихнуть… откладывается только то, что визуализируется ниже первого экрана
Из 3, что я выбрал когда-то, точно запомнил dinbror.dk/blog/blazy
Другие не помню…
Но, ссылку что вы дали, похоже, что именно эту библиотеку я тогда тоже встречал и возможно из-за нее решил такое название сделать атрибуту!)
Помню, что мне понравилась она тем, что очень маленькая и простая…
И решение с фоновыми картинками понравилось, своей простотой.
Библиотек ленивой загрузки сотни, а может и тысячи, при этом лидеры каждый год меняются, то одна в топе, то другая… Так как меняются технологии и совершенствуются браузеры… Какая лучше сейчас, я не знаю… не проверял… Поэтому я просто написал 3 названия для примера, а дальше уж дело техники: найти лучшую и применить… и еще есть фреймворки, в которых уже встроен такой функционал и не нужно отдельно библиотеку подключать, выше в комментах пример такого фреймворка был.
Атрибут data-aload это просто название, которое я применил в cPortfolio, мне показалось такое название более логичным и запоминающимся, хотя если вы используете библиотеку, в которой вместо атрибута data-aload, используется loading=«lazy» или class=«b-lazy» или любой другой, это сути не меняет…
Но спасибо что дали ссылку, может кому-то это поможет!)
Когда я изучал и внедрял в cPortfolio ленивую загрузку, то я взял 3 штуки топовых на тот момент и изучил их, каждую строчку кода) у каждого были свою плюсы или минусы… и потом самое лучшее из трех взял на вооружение и применил… мне лично не подходило: взять и использовать готовую, так как мне нужно было не только ленивая загрузка, а автозапуск видео, анимации при прокрутке и тому подобное… это нужно было все объединить в одно, а не вешать десятки библиотек для разных целей…
Замечу еще, что в ссылке которую вы указали, не используется атрибут data-original="" который в моем примере и я добавил когда-то в своем проекте для яндекса, чтоб этот урл считывал их бот, так как когда-то яндекс его рекомендовал для правильной индексации картинок ленивой загрузки…
Но data-original уже немного устаревшее, сейчас я в своем проекте использую микроразметку на тегах itemtype=«schema.org/ImageObject», itemprop=«contentUrl» и другие полезные атрибуты… и теперь поисковику не нужно угадывать в каком атрибуте находится реальный урл, так как есть уже стандарт микроразметки и все поисковики следуют ему…
Конструкции хорошие)
Суть чуть в другом… Если у вас проект, прекрасно поживает без jquery, и вы понимаете что вам нужно получить данные из поля или сделать выборку элементов по id или классу, то ошибкой будет подключать jquery для этого, вам вполне хватит нативного JavaScript.
Ну а вместо $('#id').val() использовать document.getElementById('id').value — одинаковое по функционалу, только не требует подключение дополнительной библиотеки.
Но если у вас уже используется jquery в проекте и вы решили получить значение поля или выборку, то использование jquery нормально, тоесть конструкция $().val() в этом случае оправдана.
GoogleAnalitics и Яндекс метрика — используют асинхронную загрузку и разработаны так, чтоб минимально влиять на скорость проекта… по сути они минимум загружают на ваш сайт, если конечно вы не визуализируете их счетчики на странице.
Можете размещать их где угодно, но если вы размещаете в head, то они начнут грузиться на страницу до начала рендеринга страницы, если же вы их вставите в футере, то загрузка начнется после… Вам решать, где лучше, но влияние их минимальное!
>Ну и рекламные блоки того же яндекса… как их?
не использовал, не уверен, покажите вашу страницу с таким блоком
как по мне: игра слов… от изменения названия суть не меняется…
Мои клиенты тоже используя мой продукт смотрят на показатели гугл спида и радуются! Как вы говорите: ничего не делали и результат около 100…
И они тоже думают: это особенность cPortfolio)
Но правда заключается в том, что кто-то сделал это на фреймворке за вас, а вы пользуетесь… возможно даже не понимая как это работает и почему именно так…
Да? а как это называется: когда я захожу на главную страницу хабра и делаю быструю прокрутку: сразу видно что пролистываю…
а когда на ваш первый сайт захожу и начинаю быстрое пролистывание, то вижу пустоту и потом постепенно все прорисовывается… чтоб не быть голословным, беру открываю дебаг в хроме и перехожу во вкладку нетворк и начинаю листать и вижу как большинство объектов подгружаются во время прокрутки, тоесть не сразу прогружаются, а как раз во время прокрутки!
посмотрел я ваши тесты: 18 и 17 успешных аудитов! так что не надо!) просто вы достигаете большинства успешных аудитов за счет JavaScript, отложенная загрузка и так далее… о чем я и говорил в статье… по сути, отложенная загрузка, это одно из самых важных, для хороших показателей в гугл спид… но не только… ну и ваши примеры, это не примеры реальных сайтов… сложно это сравнивать… но вы правы, хорошего результата можно достичь разными способами! Ниже zlo1 написал что он 96 добился за счет установки модуля под друпал: AdvAgg…
Кто-то писал, что если поставить на body display:none, то результаты будут 100/100 — но это вообще плохой пример, если он работает, по сути хак)
написал вам ответ и потом увидел ваше сообщение)
>А вы его хоть асинхронно подключаете?
нет, и причину написал в другом комменте… сначала делал асинхронно для себя, но проблема еще в клиентах, которые вставляют свой код и у них фатальная ошибка появляется… проще оставить так, чем учить каждого клиента, отложенному исполнению кода.
Или вот ссылка на коммент, в которой приводился пример фреймворка, в котором уже встроена отложенная и ленивые загрузки и вы об этом даже не думаете… как автор коммента сказал: ленивый рендеринг в этом фреймворке называется, но суть остается та же…
И в cProtfolio это тоже встроено.
Но если вам нужно, то просто погуглите, или тут в хабре поищите, найдете множество решений!
А цель этой статьи как раз улучшить скорость загрузки… тоесть такие обманки полный отстой!)
но вам решать…
Сколько их ставить, это вам решать… может «обидеться»))
Но не только в обиде дело, и гугл и яндекс анализирует поведение пользователя на вашем сайте, количество отказов, время проведенное на нем, количество посетителей и так далее… и по этим показателям либо повышает ваш сайт в рейтинге, либо понижает… если вы убираете их счетчик, то они не могут эти показатели отследить и повышать или понижать вас не могут…
Ну в любом случае, с яндекс.метрикой и гугл.аналитикой вы ничего не можете сделать, так как они должны грузится сразу и их нельзя в отложенную или ленивую загрузку запихнуть… откладывается только то, что визуализируется ниже первого экрана
Другие не помню…
Но, ссылку что вы дали, похоже, что именно эту библиотеку я тогда тоже встречал и возможно из-за нее решил такое название сделать атрибуту!)
Помню, что мне понравилась она тем, что очень маленькая и простая…
И решение с фоновыми картинками понравилось, своей простотой.
Атрибут data-aload это просто название, которое я применил в cPortfolio, мне показалось такое название более логичным и запоминающимся, хотя если вы используете библиотеку, в которой вместо атрибута data-aload, используется loading=«lazy» или class=«b-lazy» или любой другой, это сути не меняет…
Но спасибо что дали ссылку, может кому-то это поможет!)
Когда я изучал и внедрял в cPortfolio ленивую загрузку, то я взял 3 штуки топовых на тот момент и изучил их, каждую строчку кода) у каждого были свою плюсы или минусы… и потом самое лучшее из трех взял на вооружение и применил… мне лично не подходило: взять и использовать готовую, так как мне нужно было не только ленивая загрузка, а автозапуск видео, анимации при прокрутке и тому подобное… это нужно было все объединить в одно, а не вешать десятки библиотек для разных целей…
Замечу еще, что в ссылке которую вы указали, не используется атрибут data-original="" который в моем примере и я добавил когда-то в своем проекте для яндекса, чтоб этот урл считывал их бот, так как когда-то яндекс его рекомендовал для правильной индексации картинок ленивой загрузки…
Но data-original уже немного устаревшее, сейчас я в своем проекте использую микроразметку на тегах itemtype=«schema.org/ImageObject», itemprop=«contentUrl» и другие полезные атрибуты… и теперь поисковику не нужно угадывать в каком атрибуте находится реальный урл, так как есть уже стандарт микроразметки и все поисковики следуют ему…
Суть чуть в другом… Если у вас проект, прекрасно поживает без jquery, и вы понимаете что вам нужно получить данные из поля или сделать выборку элементов по id или классу, то ошибкой будет подключать jquery для этого, вам вполне хватит нативного JavaScript.
Ну а вместо $('#id').val() использовать document.getElementById('id').value — одинаковое по функционалу, только не требует подключение дополнительной библиотеки.
Но если у вас уже используется jquery в проекте и вы решили получить значение поля или выборку, то использование jquery нормально, тоесть конструкция $().val() в этом случае оправдана.
Можете размещать их где угодно, но если вы размещаете в head, то они начнут грузиться на страницу до начала рендеринга страницы, если же вы их вставите в футере, то загрузка начнется после… Вам решать, где лучше, но влияние их минимальное!
>Ну и рекламные блоки того же яндекса… как их?
не использовал, не уверен, покажите вашу страницу с таким блоком
Мои клиенты тоже используя мой продукт смотрят на показатели гугл спида и радуются! Как вы говорите: ничего не делали и результат около 100…
И они тоже думают: это особенность cPortfolio)
Но правда заключается в том, что кто-то сделал это на фреймворке за вас, а вы пользуетесь… возможно даже не понимая как это работает и почему именно так…
а когда на ваш первый сайт захожу и начинаю быстрое пролистывание, то вижу пустоту и потом постепенно все прорисовывается… чтоб не быть голословным, беру открываю дебаг в хроме и перехожу во вкладку нетворк и начинаю листать и вижу как большинство объектов подгружаются во время прокрутки, тоесть не сразу прогружаются, а как раз во время прокрутки!
Кто-то писал, что если поставить на body display:none, то результаты будут 100/100 — но это вообще плохой пример, если он работает, по сути хак)
но да, вы правы! решений много есть и ваши хорошие!
>А вы его хоть асинхронно подключаете?
нет, и причину написал в другом комменте… сначала делал асинхронно для себя, но проблема еще в клиентах, которые вставляют свой код и у них фатальная ошибка появляется… проще оставить так, чем учить каждого клиента, отложенному исполнению кода.