Optimizando Angular con Lighthouse

Clase 5 de 8 • Laboratorio de Angular: Optimización Web con Lighthouse y SSR

Clase anteriorSiguiente clase

Resumen

npm run start:prod

jose zuñiga

student•

Les dejo algunas consideraciones y datos de esta clase:

Los algoritmos de compresión solo aceptan formatos de imágenes png y webp. Debes tener tu imagen original en los dos formatos.
Si vas a usar el servidor para build como en la clase es necesario instalar de manera globlal npm install -g http-server
Prefiero usar ng serve --configuration=production
El nombre de la carpeta src/images debe coincidir con el de los dos scripts de compress.mjs y resize.mjs
El directorio de scripts debe estar al mismo nivel del directorio src no adentro de el.
Estos son los dos scripts:

compress.mjs

import imagemin from 'imagemin';
import pngquant from 'imagemin-pngquant';
import imageminWebp from 'imagemin-webp';
import webp from 'imagemin-webp';
const directory = "./src/assets/image/*.{webp, png}";
(async () => {
	const files = await imagemin([directory], {
		destination: "./src/assets/image/",
		plugins: [pngquant({ quality: [0.8, 0.8]}), imageminWebp({ quality: 80}), webp({ quality: 80})],
	})
	console.log('Images optimized', files);
})();
```resize.mjs

```js
import sharp from "sharp";
import * as fs from "fs";
const directory = "./src/assets/image";
fs.readdirSync(directory).forEach(async (file) => {
	try {
		const image = sharp(`${directory}/${file}`);
		const name = file.split(".")[0];
		const { format } = await image.metadata();
		if (
      !name.includes ("small") &&
      !name.includes("medium") &&
      !name.includes ("large") &&
      (format === "png" || format === "webp")
		) {
		image
      .resize(450) // width
      .toFile(`${directory}/${name}-small.${format}`);
		image
      .resize(750) // width
      .toFile(`${directory}/${name}-medium.${format}`);
    image
    .resize(1800) // width
    .toFile(`${directory}/${name}-large.${format}`);
  }
  }catch(error){
    console.log("Error: ", error);
    console.log(file);
  }
})

```7. Este es el ts del componente img

```js
import { Component, Input, AfterContentInit } from '@angular/core';
interface Source {
  path: string;
  media: string;
}
@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss']
})
export class ImgComponent implements AfterContentInit{
  srcset: string = '';
  media: string = '';
  sources: Source[] = [];

  @Input() path: string = '';
  @Input() alt: string = '';

  ngAfterContentInit(): void {
    this.generateSizes();
  }

  generateSizes(){
    // Descomposición de nombre de imagen, path y extensión
    const splitPath = this.path.split('/');
    const fullName = splitPath.pop();
    const path = splitPath.join('/');
    const splitName = fullName?.split('.') ?? [];
    const ext = splitName.pop();
    const name = splitName.pop();

    // Ruta de imagenes
    this.sources = [
      {
        path: `${path}/${name}-large.webp`,
        media: '(min-width: 2000px)',
      },
      {
        path: `${path}/${name}-medium.webp`,
        media: '(min-width: 640px)',
      },
      {
        path: `${path}/${name}-small.webp`,
        media: '(min-width: 200px)',
      },
      {
        path: `${path}/${name}-large.${ext}`,
        media: '(min-width: 2000px)',
      },
      {
        path: `${path}/${name}-medium.${ext}`,
        media: '(min-width: 640px)',
      },
      {
        path: `${path}/${name}-small.${ext}`,
        media: '(min-width: 200px)',
      },
    ];
  }

}

```y este su html:

```js
<picture>
  <source
    srcset="source.path"
    media="source.media"
    *ngFor="let source of sources"
  >
  <img [src]="path" alt="alt" loading="lazy" decoding="async">
</picture>

Jorge Caloir

student•

no entiendo nada!

Agustin Cammarota Muti

student•

Es bastante avanzado algunos cosas que se están tocando, performance, accesibilidad, CEO... Te recomiendo que lo dejes para el final de la ruta de aprendizaje

import imagemin from 'imagemin';
import pngquant from 'imagemin-pngquant';
import imageminWebp from 'imagemin-webp';
import webp from 'imagemin-webp';
const directory = "./src/assets/image/*.{webp, png}";
(async () => {
	const files = await imagemin([directory], {
		destination: "./src/assets/image/",
		plugins: [pngquant({ quality: [0.8, 0.8]}), imageminWebp({ quality: 80}), webp({ quality: 80})],
	})
	console.log('Images optimized', files);
})();
```resize.mjs

```js
import sharp from "sharp";
import * as fs from "fs";
const directory = "./src/assets/image";
fs.readdirSync(directory).forEach(async (file) => {
	try {
		const image = sharp(`${directory}/${file}`);
		const name = file.split(".")[0];
		const { format } = await image.metadata();
		if (
      !name.includes ("small") &&
      !name.includes("medium") &&
      !name.includes ("large") &&
      (format === "png" || format === "webp")
		) {
		image
      .resize(450) // width
      .toFile(`${directory}/${name}-small.${format}`);
		image
      .resize(750) // width
      .toFile(`${directory}/${name}-medium.${format}`);
    image
    .resize(1800) // width
    .toFile(`${directory}/${name}-large.${format}`);
  }
  }catch(error){
    console.log("Error: ", error);
    console.log(file);
  }
})

```7. Este es el ts del componente img

```js
import { Component, Input, AfterContentInit } from '@angular/core';
interface Source {
  path: string;
  media: string;
}
@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss']
})
export class ImgComponent implements AfterContentInit{
  srcset: string = '';
  media: string = '';
  sources: Source[] = [];

  @Input() path: string = '';
  @Input() alt: string = '';

  ngAfterContentInit(): void {
    this.generateSizes();
  }

  generateSizes(){
    // Descomposición de nombre de imagen, path y extensión
    const splitPath = this.path.split('/');
    const fullName = splitPath.pop();
    const path = splitPath.join('/');
    const splitName = fullName?.split('.') ?? [];
    const ext = splitName.pop();
    const name = splitName.pop();

    // Ruta de imagenes
    this.sources = [
      {
        path: `${path}/${name}-large.webp`,
        media: '(min-width: 2000px)',
      },
      {
        path: `${path}/${name}-medium.webp`,
        media: '(min-width: 640px)',
      },
      {
        path: `${path}/${name}-small.webp`,
        media: '(min-width: 200px)',
      },
      {
        path: `${path}/${name}-large.${ext}`,
        media: '(min-width: 2000px)',
      },
      {
        path: `${path}/${name}-medium.${ext}`,
        media: '(min-width: 640px)',
      },
      {
        path: `${path}/${name}-small.${ext}`,
        media: '(min-width: 200px)',
      },
    ];
  }

}

```y este su html:

```js
<picture>
  <source
    srcset="source.path"
    media="source.media"
    *ngFor="let source of sources"
  >
  <img [src]="path" alt="alt" loading="lazy" decoding="async">
</picture>

Optimizando Angular con Lighthouse

Preparación para la prueba

Tu primer día de trabajo como Angular Developer

Setup de Angular para SPAs

Optimiza una landing page con Angular

Solución de la prueba

Angular con dependencias optimizadas

Optimizando Angular con Lighthouse

Server Side Rendering en Angular

Animaciones en Angular

Próximos pasos