Técnicas Avanzadas de Priorización de Contenido para Desarrolladores Web – CodesCode

Optimizar el rendimiento web utilizando la priorización de contenido, la división de código, la optimización de imágenes, las sugerencias de recursos y los trabajadores de servicio para una mejor experiencia de usuario.

Crear sitios web de alto rendimiento y sitios web responsivos es una prioridad para los desarrolladores web. Una forma de lograr esto es a través de la priorización de contenido, que implica cargar el contenido crítico antes que el contenido no crítico. En este artículo, exploraremos técnicas y herramientas avanzadas que pueden ayudar a los desarrolladores web a optimizar sus proyectos utilizando la priorización de contenido.

Técnicas y herramientas avanzadas de priorización de contenido

Extrayendo CSS crítico con PurgeCSS y Critical

Extrae solo las reglas CSS necesarias para renderizar el contenido por encima del pliegue utilizando PurgeCSS (https://purgecss.com/) y Critical (https://github.com/addyosmani/critical). PurgeCSS elimina el CSS no utilizado, mientras que Critical extrae y enlaza el CSS crítico, mejorando la renderización del contenido crítico.

Ejemplo

Instala PurgeCSS y Critical:

npm install purgecss critical

Crea un archivo de configuración para PurgeCSS:

// purgecss.config.jsmodule.exports = {  content: ['./src/**/*.html'],  css: ['./src/css/main.css'],  output: './dist/css/',};

Extrae e enlaza el CSS crítico:

const critical = require('critical').stream;const purgecss = require('@fullhuman/postcss-purgecss');const postcss = require('postcss');// Procesa el archivo CSS con PurgeCSSpostcss([  purgecss(require('./purgecss.config.js')),])  .process(cssContent, { from: 'src/css/main.css', to: 'dist/css/main.min.css' })  .then((result) => {    // Enlaza el CSS crítico usando Critical    gulp.src('src/*.html')      .pipe(critical({ base: 'dist/', inline: true, css: ['dist/css/main.min.css'] }))      .pipe(gulp.dest('dist'));  });

División de código e importaciones dinámicas con Webpack

Utiliza la división de código e importaciones dinámicas en Webpack (https://webpack.js.org/guides/code-splitting/) para fragmentar tu JavaScript en trozos más pequeños. Esto garantiza que solo se carguen los scripts críticos inicialmente, mientras que los scripts no críticos se cargan cuando sea necesario.

Ejemplo

// webpack.config.jsmodule.exports = {  // ...  optimization: {    splitChunks: {      chunks: 'all',    },  },};// Uso de importaciones dinámicasasync function loadNonCriticalModule() {  const nonCriticalModule = await import('./nonCriticalModule.js');  nonCriticalModule.run();}

Optimización de imágenes e imágenes responsivas

Optimiza imágenes utilizando herramientas como ImageOptim (https://imageoptim.com/) o Squoosh (https://squoosh.app/). Implementa imágenes responsivas utilizando el atributo srcset y formatos de imágenes modernos como WebP o AVIF para mejorar el rendimiento.

Ejemplo

<picture>  <source srcset="image.webp" type="image/webp">  <source srcset="image.avif" type="image/avif">  <img src="image.jpg" alt="Imagen de ejemplo"></picture>

Recursos Hints: Preload, Prefetch y Preconnect

Utiliza recursos hints como rel="preload", rel="prefetch" y rel="preconnect" para priorizar la carga de recursos críticos y precargar recursos no críticos para futuras navegaciones.

Ejemplo

<!-- Precargar recursos críticos --><link rel="preload" href="critical.css" as="style"><!-- Prefetch recursos no críticos --><link rel="prefetch" href="non-critical-image.jpg" as="image"><!-- Preconectar a orígenes de terceros importantes --><link rel="preconnect" href="https://fonts.gstatic.com">

Implementando Service Workers con Google Workbox

Utiliza Workbox de Google (https://developers.google.com/web/tools/workbox) para configurar service workers que almacenen en cache recursos críticos y los sirvan al instante en cargas de página subsiguientes, mejorando el rendimiento.

Ejemplo

// workbox.config.jsmodule.exports = {  globDirectory: 'dist/',  globPatterns: ['**/*.{html,js,css,woff2}'],  swDest: 'dist/sw.js',};// Genera service worker con Workbox CLInpx workbox generateSW workbox.config.js

Conclusión

Aprovechando técnicas y herramientas avanzadas de priorización de contenido, los desarrolladores web pueden mejorar significativamente el rendimiento y la experiencia del usuario en sus sitios web. Enfocarse en entregar contenido crítico primero y posponer contenido no crítico permite a los usuarios acceder rápidamente a la información que necesitan. Implementar estas técnicas avanzadas en tus proyectos web resultará en una mejor percepción del rendimiento, tasas de rebote reducidas y un mayor compromiso de los usuarios.