feat: enhance SocketProvider to support polling and websocket transports, improve error logging for development, and update image preloading logic in webpack config for better performance on main pages

src/providers/SocketProvider.js

@@ -23,7 +23,9 @@ class SocketProvider extends Component {
     console.log(`SocketProvider: Connecting to socket server... ${url}`);
 
     this.socket = io(url, {
-      transports: ["websocket"],
+      transports: ["polling", "websocket"],
+      upgrade: true,
+      rememberUpgrade: true,
     });
 
     this.socket.on("connect", () => {
@@ -67,7 +69,10 @@ class SocketProvider extends Component {
     });
 
     this.socket.on("connect_error", (error) => {
-      console.error("SocketProvider: Connection error:", error);
+      // Only log connection errors in development mode to reduce noise in production
+      if (process.env.NODE_ENV === "development") {
+        console.error("SocketProvider: Connection error:", error);
+      }
       this.handleConnectionFailure();
     });
 
@@ -81,7 +86,9 @@ class SocketProvider extends Component {
     });
 
     this.socketB = io(url, {
-      transports: ["websocket"],
+      transports: ["polling", "websocket"],
+      upgrade: true,
+      rememberUpgrade: true,
     });
 
     this.socketB.on("connect", () => {
@@ -95,7 +102,10 @@ class SocketProvider extends Component {
     });
 
     this.socketB.on("connect_error", (error) => {
-      console.error("SocketProvider: Connection errorB:", error);
+      // Only log connection errors in development mode to reduce noise in production
+      if (process.env.NODE_ENV === "development") {
+        console.error("SocketProvider: Connection errorB:", error);
+      }
     });
 
     this.socketB.on("reconnect_attempt", (attemptNumber) => {

webpack.config.js

@@ -158,23 +158,37 @@ class InlineCssPlugin {
             // Add font preload links
             let fontPreloads = '';
             fontUrls.forEach(fontUrl => {
-              fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" type="font/truetype" crossorigin>\n`;
+              fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" crossorigin>\n`;
             });
             
-            // Add critical image preloads for LCP optimization
+            // Add critical image preloads for LCP optimization - only for pages that need them
-            const criticalImages = [
+            // These images are used in MainPageLayout (home, aktionen, filiale) and Content (category pages)
-              '/assets/images/filiale1.jpg',
+            // Skip preloading on product detail pages and other specific pages
-              '/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`;
+            // Extract current page path from the HTML to determine which images to preload
-            });
+            const htmlContent = data.html;
+            const isProductPage = htmlContent.includes('/Artikel/') || htmlContent.includes('product-detail');
+            const isSpecialPage = htmlContent.includes('/impressum') || htmlContent.includes('/datenschutz') || 
+                                 htmlContent.includes('/agb') || htmlContent.includes('/profile') ||
+                                 htmlContent.includes('/admin') || htmlContent.includes('/404') ||
+                                 htmlContent.includes('/widerrufsrecht') || htmlContent.includes('/batteriegesetzhinweise');
+            
+            // Only preload navigation images for main pages (home, categories, aktionen, filiale)
+            if (!isProductPage && !isSpecialPage) {
+              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'
+              ];
+              
+              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>`;