seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

feat: optimize image loading and critical rendering path by adding image preloads in webpack config, updating image handling in multiple components, and ensuring alt attributes are set for accessibility

Browse Source
This commit is contained in:
sebseb7
2025-07-20 15:19:16 +02:00
parent e0da7ed312
commit 2b64719758
5 changed files with 81 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webpack.config.js
View File

@@ -161,14 +161,32 @@ class InlineCssPlugin {
fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" type="font/truetype" crossorigin>\n`;
});
// Add critical image preloads for LCP optimization
const criticalImages = [
'/assets/images/filiale1.jpg',
'/assets/images/filiale2.jpg',
'/assets/images/seeds.jpg',
'/assets/images/cutlings.jpg',
'/assets/images/presse.jpg',
'/assets/images/purpl.jpg'
];
let imagePreloads = '';
criticalImages.forEach(imagePath => {
imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
});
// Add inlined CSS to head
const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`;
data.html = data.html.replace('</head>', `${fontPreloads}${styleTag}\n</head>`);
data.html = data.html.replace('</head>', `${fontPreloads}${imagePreloads}${styleTag}\n</head>`);
console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`);
if (fontUrls.length > 0) {
console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
}
if (criticalImages.length > 0) {
console.log(`✅ Added image preloads: ${criticalImages.length} critical images`);
}
}
cb(null, data);