Ленивая загрузка

Ленивая загрузка загружает объекты, только когда они попадают в область видимости человека, таким образом, значительно увеличивается скорость загрузки сайта и повышается рейтинг в google page speed! Без ленивой загрузки, все картинки, видео файлы и другие объекты грузятся сразу, что вызывает тормоза, если страница большая. Первый экран не для ленивой загрузки, он должен работать в обычном режиме, а начиная со второго экрана, всем картинкам, видео-фонам, iframe(гугл, яндекс карты) нужно ставить ленивую загрузку! Ленивую загрузку не стоит ставить на маленьких страницах, у которых 1-2 экрана. Для объектов «iframe»,«video»,«audio», которые вы вставляете как html код, ленивую загрузку можно применить так: находите scr="путь к файлу" и меняете это на data-aload data-original="путь к файлу" Если вы вставляете тег «img» как html код, то у него ленивую загрузку можно сделать так: находите src="http://" и меняете это на data-aload data-original="http://" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" Внимание: вместо обычных одинарных угловых кавычек в примерах используются двойные, так как гугл не разрешает вставлять одинарные кавычки в описании! Примеры html кодов: Без ленивой: «audio src="/files/storage/Queen-TheShowMustGoOn.mp3" controls»«/audio» С ленивой загрузкой: «audio data-aload data-original="/files/storage/Queen-TheShowMustGoOn.mp3" controls»«/audio» Без ленивой: «img width="100%" src="/files/storage/130d14d5a467517c7a950f4310nh.jpg" /» С ленивой загрузкой: «img width="100%" data-aload data-original="/files/storage/130d14d5a467517c7a950f4310nh.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /» Без ленивой: «iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15546537.955258714!2d49.5310727011924!3d43.77621932715184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2s!4v1544691529126" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen»«/iframe» С ленивой загрузкой: «iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15546537.955258714!2d49.5310727011924!3d43.77621932715184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2s!4v1544691529126" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen»«/iframe» https://cportfolio.ru/