Optimizando Angular con Lighthouse

Laboratorio de Angular: Optimización Web con Lighthouse y SSR

Contenido del curso

Preparación para la prueba

Solución de la prueba

Tomar examen

Optimizando Angular con Lighthouse

Resumen

npm run start:prod

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>

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

Resumen