Оптимизация на изображението — Мързеливо зареждане за Angular с използване на lazysizes

Оптимизацията на изображенията е много важна. Те често имат много големи размери на файлове и заемат голямо количество интернет честотна лента. Това може да забави времето за зареждане на вашата уеб страница и да накара потребителя ви да затвори вашата уеб страница, преди дори да види съдържанието. Изображения, които са извън екрана и може да се зареждат бавно. Те ще бъдат заредени, когато потребителят превърти вашата уеб страница, което ще ви спести първоначално време за зареждане. Тази публикация ще ви покаже как да го направите лесно с библиотеката lazysizes.

Какво е мързеливо зареждане?

Мързеливото зареждане е модел на уеб производителност, който забавя зареждането на изображения. Вместо да се зарежда цялото съдържание на уеб страницата, некритичните изображения се зареждат асинхронно при поискване, когато потребителят трябва да ги види. Важните изображения, които са поставени във видими за потребителя зони, се зареждат веднага, но изображенията по-долу, които все още не са видими, могат да бъдат заредени по-късно — само когато потребителите превъртат страницата надолу и е необходимо да ги покажат. Това се използва в много забележителни сайтове, например Medium.

Лесно е да се провери какви изображения трябва да се променят. Можете да извършите одит на сайта, който ще подчертае възможностите за по-добро оптимизиране на вашите изображения. Можете да използвате например Lighthouse в Chrome DevTools, за да получите предложения как да промените вашата уеб страница.

Мързеливото зареждане има много предимства. Намалява потреблението на данни. Можете да заредите само минимален брой изображения и да заредите повече, ако е необходимо. Това също така означава по-малко натоварване за браузъра, което може да спести живота на батерията на мобилния телефон. Мързеливото зареждане също ще подобри времето за зареждане на уеб страницата, което може да окаже влияние върху оставането на потребителя на уеб страницата. Това също е по-добро потребителско изживяване, когато потребителят може да види съдържание почти веднага.

Ъглова директива за отложено зареждане с отложени размери

Можете да намерите много техники и добавки, налични за отложено зареждане. Използвах „lazysizes“. Това е javascript библиотека, която не изисква конфигурация. Има много добра производителност и позволява незадължителна интеграция с Intersection Observer. Той също така поддържа плъгини. Може да се използва със стотици изображения на CSS и JS-тежки страници и уеб приложения. Също така е подобрен за SEO, не крие активи от роботи и роботи.

Можете да добавите lazysizes към вашия проект много лесно, страницата на github е много ясна и няма нужда да пишете публикация в блог за инсталиране на плъгин. Мога обаче да ви покажа как да го използвате по-добре с няколко подобрения. Създадох проста директива, която прави използването на lazysizes много лесно, или с img таг, или като background-image свойство. Кодът с обяснение е по-долу:

import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
import 'lazysizes/plugins/unveilhooks/ls.unveilhooks';
import { lazySizes } from 'lazysizes';
@Directive({
  selector: '[lazyload]',
  exportAs: 'lazyload'
})

Да импортираме lazysizes с допълнителен плъгин, добавен към библиотеката, и да създадем директива.

public tempImage: string = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  @Input('lazyload') imgSrc: string;
  public img;

Във вашата директива създайте временно изображение, което ще се показва преди зареждане на оригиналния файл. В моя пример използвах низ base64 с бяло изображение, но вие можете да използвате друго. Това се използва за запълване на място за изображението, когато се зарежда малко по-бавно, така че потребителят няма да забележи, че съдържанието на страницата „скача“, докато изображението се зарежда. Добре е да използвате просто обикновена картинка с цвят на фона на вашата уеб страница. Нуждаете се също от въвеждане на директива за източник на изображение и променлива за изображение.

constructor(private el: ElementRef, private renderer: Renderer2) {          }
  
  ngOnInit() {
    this.img = require(`../../assets/img/${this.imgSrc}`);
    this.initLazyLoading();
    this.setAttributes();
  }
initLazyLoading() {
    if (lazySizes) {
      lazySizes.init();
    }
  }

Когато директивата се инициализира, тя ще изгради пътя на изображението, като използва директорията с активи и библиотеката ще бъде заредена. Операторът If ще помогне да се скрие грешката, която може да се появи. След това ще изпълни функция setAttributes, представена по-долу.

setAttributes() {
    this.renderer.addClass(this.el.nativeElement, 'lazyload');
    if (this.el.nativeElement.localName === 'img') {
      this.setImgSrc();
    } else {
      this.setElementBackgroundImage();
    }
  }

Тази функция ще добави CSS клас lazyload към дадения елемент. Използва се от библиотеката, за да разпознае кой елемент трябва да бъде зареден отложено. След това localName на елемента се проверява, за да се провери какъв тип DOM елемент се използва. Елементите img ще бъдат обработени по различен начин от останалите.

setImgSrc() {
    this.renderer.setAttribute(this.el.nativeElement, 'data-src', this.img);
    this.renderer.setAttribute(this.el.nativeElement, 'src', this.tempImage);
  }

Елементът img се редактира въз основа на изискванията от документацията на библиотеката. Добавени са два атрибута. Временното изображение се добавя като src, а пътят на оригиналното изображение се добавя като data-src.

setElementBackgroundImage() {
    this.renderer.setAttribute(this.el.nativeElement, 'data-bg', this.img);
    this.renderer.setStyle(this.el.nativeElement, 'background-image', `url(${this.tempImage})`);
  }

За други елементи приемаме, че зареденото изображение ще се използва като фоново изображение. Добавяме свойство abackground-image с временно изображение като стойност и атрибут data-bg с оригиналния път на изображението.

Пълният код на директивата е представен по-долу:

import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
import 'lazysizes/plugins/unveilhooks/ls.unveilhooks';
import { lazySizes } from 'lazysizes';
@Directive({
  selector: '[lazyload]',
  exportAs: 'lazyload'
})
export class LazyloadDir {
  public tempImage: string = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  @Input('lazyload') imgSrc: string;
  public img;
  constructor(private el: ElementRef, private renderer: Renderer2) {          }
  
  ngOnInit() {
    this.img = require(`../../assets/img/${this.imgSrc}`);
    this.initLazyLoading();
    this.setAttributes();
  }
  initLazyLoading() {
    if (lazySizes) {
      lazySizes.init();
    }
  }
  setAttributes() {
    this.renderer.addClass(this.el.nativeElement, 'lazyload');
    if (this.el.nativeElement.localName === 'img') {
      this.setImgSrc();
    } else {
      this.setElementBackgroundImage();
    }
  }
  setImgSrc() {
    this.renderer.setAttribute(this.el.nativeElement, 'data-src', this.img);
    this.renderer.setAttribute(this.el.nativeElement, 'src', this.tempImage);
  }
  setElementBackgroundImage() {
    this.renderer.setAttribute(this.el.nativeElement, 'data-bg', this.img);
    this.renderer.setStyle(this.el.nativeElement, 'background-image', `url(${this.tempImage})`);
  }
}

Директивата може да се използва по много лесен начин, независимо от типа на елемента. Просто трябва да зададем атрибут lazyload с име на изображение или местоположение на изображението и всичко останало ще бъде обработено правилно. Вижте примерите по-долу:

<div lazyload={{images.section_backgroud}} class="section">
  <p>This is section</p>
</div>
<img lazyload="footer/linkedin.svg" alt="Linkedin Logo">

Надявам се, че тази бърза публикация в блога ще ви помогне с внедряването и оптимизирането на вашата уеб страница. Ако имате някакви въпроси, моля, оставете коментар.