Updated render time

_includes/footer.html

@@ -23,8 +23,7 @@
           Total Size of Site: 
           {{ site.total_size | divided_by: 1048576.0 | round: 2 }} MB
         </p>
-
-        <p>Render Time: <span id="render-time">Calculating...</span></p>
+        <p id="footer-render-time">Render Time: Loading...</p>
       </div>
     </div>
   </div>

index.html

@@ -1231,22 +1231,31 @@ <h3 class="section-subheading text-light">Ready to elevate your business with ta
 
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-        // Get performance timings
-        var startTime = performance.timing.responseStart; // Time the browser starts receiving the page
-        var endTime = performance.timing.loadEventEnd;    // Time when the page is fully loaded
+        // Record the start time when the DOM content is loaded
+        var startTime = performance.now(); 
 
-        // Calculate render time in seconds
-        var renderTimeInSeconds = (endTime - startTime) / 1000;
+        // When the page is fully loaded (or document ready), record the end time
+        window.onload = function () {
+          var endTime = performance.now(); 
 
-        // Convert to minutes and seconds
-        var minutes = Math.floor(renderTimeInSeconds / 60);
-        var seconds = Math.round(renderTimeInSeconds % 60);
+          // Calculate render time in seconds
+          var renderTimeInSeconds = (endTime - startTime) / 1000;
 
-        // Update the DOM with the render time
-        var renderTimeText = minutes > 0 
-          ? `${minutes} minutes ${seconds} seconds` 
-          : `${seconds} seconds`;
-        document.getElementById("render-time").innerText = renderTimeText;
+          // Avoid negative or excessively large values
+          if (renderTimeInSeconds < 0 || renderTimeInSeconds > 100000) {
+            renderTimeInSeconds = 0; // Fallback to 0 if the value seems incorrect
+          }
+
+          // Convert to minutes and seconds
+          var minutes = Math.floor(renderTimeInSeconds / 60);
+          var seconds = (renderTimeInSeconds % 60).toFixed(1); // Round to 1 decimal place
+
+          // Update the DOM with the render time in the footer
+          var renderTimeText = minutes > 0 
+            ? `${minutes} min ${seconds} sec` 
+            : `${seconds} sec`;
+          document.getElementById("footer-render-time").innerText = "Render Time: " + renderTimeText;
+        };
       });
     </script>
   </body>