Разгоняем Google PageSpeed до 100 и больше

да, выжать больше 100% нельзя) просто многим хотелось бы)

Мобильный сафари поддерживает и кстати очень классно сделали, лучше чем у других… а вот с десктопным они чет тормозят и сильно… и придется пользователю мака вводить вручную дату… вместо удобной выборки… хотя процент маков не такой уж и большой… большинство браузеров сафари под iOS…
Получается: вам решать, стоит ли оно того, и прикручивать ли доп скрипты ради пользователей Mac OS или пусть вводят дату с клавы…
Как крайний случай: можно на уровне HTTP заголовков определять OS и если это Mac, то подставлять JS календарик, а всем остальным дефолтный.

да, когда body пустое, то достаточно легко получить 98 или даже 100

96 отличный результат!)

Это все советы) И выбирать вам, где можно или нужно следовать совету, а где вредно!) Заметьте, в примере я показал, что jquery сама по себе не сильно влияет на метрики, и показатели были 98-100… если убрать jquery то возможно будет 99-100, но стоит ли оно того… это вам решать!
Но с другой стороны, если у вас на странице много чего, то влияние jquery может быть значительным…
И я с вами согласен, на jquery написано очень много классных плагинов!

Ничего не копировал) просто рассказал что знаю!
jQuery и React нельзя ставить в один ряд и сравнивать их…
У них разные цели!
jQuery была создана лет 15 назад и главной ее целью было: сделать прослойку между нативным JavaScript и разработчиком и уберечь его от проблем несовместимости… Тогда действительно была проблема со стандартизацией и унификацией… у каждого браузера был свой JavaScript сильно отличающийся от других… По этой причине jQuery раньше было спасением… Даже элементарные операции порождали сотни условий и проверок, например, если вы хотели выбрать элемент по ID, то вам нужно было как минимум сделать такое:

    if (document.getElementById) {
    	return document.getElementById(objID);
    }
    else if (document.all) {
    	return document.all[objID];
    }
    else if (document.layers) {
    	return document.layers[objID];
    }

И это была вершина айсберга! Так было во всем… а Jquery в то время предложил свою унификацию $('#objID'), $('.objID') и т.д., и это очень упрощало жизнь разработчикам.
Сейчас же, у JavaScript появились стандарты, которым следуют браузеры и они их разрабатывают совместно. По этой причине, в большей степени Jquery прослойка уже лишняя, хотя очень полезная, когда нужен уже готовый плагин написанный кем-то 5 лет назад… Jquery скопилась огромная база плагинов, это огромный плюс! так что ее стоит использовать, но не для того чтоб выбирать объект по ID, а таких людей и проектов хватает)
React же, это полноценный фреймворк и цель его не прослойка между нативным JS и разработчиком, а создание пользовательского интерфейса на компонентной основе… тоесть это все равно, что сравнить небо и землю… и я конечно же не мог сказать: не используйте React…
но вы правы, чистый html быстрее)

Это атрибуты для JavaScript кода, у каждой JS библиотеки они свои. Просто по ним JavaScript определяет: какой элемент должен ждать загрузки.
Но data-original — это рекомендованный от яндекса атрибут, они говорили что его считывают, если нет SRC

Да, вы правы!

GoogleAnalitics и Яндекс метрика — используют асинхронную загрузку и разработаны так, чтоб минимально влиять на скорость проекта… по сути они минимум загружают на ваш сайт, если конечно вы не визуализируете их счетчики на странице.
Можете размещать их где угодно, но если вы размещаете в head, то они начнут грузиться на страницу до начала рендеринга страницы, если же вы их вставите в футере, то загрузка начнется после… Вам решать, где лучше, но влияние их минимальное!

>Ну и рекламные блоки того же яндекса… как их?
не использовал, не уверен, покажите вашу страницу с таким блоком

Библиотек ленивой загрузки сотни, а может и тысячи, при этом лидеры каждый год меняются, то одна в топе, то другая… Так как меняются технологии и совершенствуются браузеры… Какая лучше сейчас, я не знаю… не проверял… Поэтому я просто написал 3 названия для примера, а дальше уж дело техники: найти лучшую и применить… и еще есть фреймворки, в которых уже встроен такой функционал и не нужно отдельно библиотеку подключать, выше в комментах пример такого фреймворка был.

Атрибут data-aload это просто название, которое я применил в cPortfolio, мне показалось такое название более логичным и запоминающимся, хотя если вы используете библиотеку, в которой вместо атрибута data-aload, используется loading=«lazy» или class=«b-lazy» или любой другой, это сути не меняет…

Но спасибо что дали ссылку, может кому-то это поможет!)

Когда я изучал и внедрял в cPortfolio ленивую загрузку, то я взял 3 штуки топовых на тот момент и изучил их, каждую строчку кода) у каждого были свою плюсы или минусы… и потом самое лучшее из трех взял на вооружение и применил… мне лично не подходило: взять и использовать готовую, так как мне нужно было не только ленивая загрузка, а автозапуск видео, анимации при прокрутке и тому подобное… это нужно было все объединить в одно, а не вешать десятки библиотек для разных целей…

Замечу еще, что в ссылке которую вы указали, не используется атрибут data-original="" который в моем примере и я добавил когда-то в своем проекте для яндекса, чтоб этот урл считывал их бот, так как когда-то яндекс его рекомендовал для правильной индексации картинок ленивой загрузки…

Но data-original уже немного устаревшее, сейчас я в своем проекте использую микроразметку на тегах itemtype=«schema.org/ImageObject», itemprop=«contentUrl» и другие полезные атрибуты… и теперь поисковику не нужно угадывать в каком атрибуте находится реальный урл, так как есть уже стандарт микроразметки и все поисковики следуют ему…

Из 3, что я выбрал когда-то, точно запомнил dinbror.dk/blog/blazy
Другие не помню…
Но, ссылку что вы дали, похоже, что именно эту библиотеку я тогда тоже встречал и возможно из-за нее решил такое название сделать атрибуту!)
Помню, что мне понравилась она тем, что очень маленькая и простая…
И решение с фоновыми картинками понравилось, своей простотой.

[data-aload] { background-image: none !important; }

За счет отложенной загрузки