Slow Loading Times - Githubissues

Describe the bug For now, just dumping what I find here as I find it. Not always sure what I am looking at. Using this page to test loading times using the chrome debugger: https://opensanghafoundation.org/newsite/a-mikey-test-page/

google maps elements not found (don't need to be loaded)

these are being called and have errors and timeouts: paypal recaptcha bettermessages youtube google play

deprecated Elementor (elementor needs updating)

bp-messages has many tasks labeled as "Long Tasks" in chrome indicating that it is loading in slow also bp-messages audio content not allowed to start

"Found 2 elements with non-unique id": This occurs several times, not sure how to track yet

can also convert images and icons to ".webp" format for faster loading

jQuery: some javascript code uses deprecated formating; "event shorthand is deprecated"

AI Explanation for JQuery-

The Cause of the Error (Likely): Somewhere in your web application's JavaScript code, you're probably using a syntax like this:

Copy code $('form').submit(function(event) { // Your form submission logic here }); Use code snippets with caution

This shorthand way of binding the submit event is considered deprecated. The Solution: You should replace the shorthand with the more standard .on() method:

Copy code $('form').on('submit', function(event) { // Your form submission logic here }); Use code snippets with caution

Explanation: .submit() shorthand: This was a convenient way to attach an event handler to the submit event, but it's no longer the recommended approach. .on() method: This is the more versatile and preferred way to bind events in jQuery. It allows you to attach events to elements even if they are added to the DOM later.

also uploaded a console log for AI to analyze; here are the results

Key Takeaways:

Passive Event Listeners: Your site has multiple instances of non-passive event listeners on scroll and wheel events. These can significantly hinder scrolling smoothness.
Deprecated jQuery: You're relying on outdated jQuery features (shorthands for events). Modernizing your jQuery code will improve performance.
Google Maps Loading: Your Google Maps integration isn't using async loading, which can delay how quickly the map appears on the page.
Blocked Resources: Several resources are blocked by the client (likely a browser extension). While we can't pinpoint the cause without knowing the extension, identify and address any conflicts.
Duplicate IDs: You have duplicate HTML element IDs, which is a violation of best practices and can lead to unexpected JavaScript behavior.
Autocomplete Issues: Your password fields lack autocomplete attributes, which hurts usability and may trigger browser warnings.
Long-Running Handlers: Some setTimeout and setInterval handlers are taking an unusually long time, potentially blocking other processes.

Detailed Explanations and Solutions:

Passive Event Listeners:
- Problem: When an event listener is not marked as 'passive', the browser assumes it might prevent the default scroll behavior. This forces the browser to wait for the listener to finish before updating the scroll position, making scrolling feel janky.
- Solution: Add { passive: true } as the third argument when attaching event listeners to scroll or wheel events. For example:
```
element.addEventListener('scroll', myScrollHandler, { passive: true });
```
Deprecated jQuery:
- Problem: Using deprecated jQuery shorthands like .click(), .submit(), etc., forces the jQuery Migrate plugin to run extra code, increasing execution time.
- Solution: Update your jQuery code to use modern event handling with .on(). For example, replace $('form').submit(function() { ... }); with:
```
$('form').on('submit', function() { ... }); 
```
Google Maps Loading:
- Problem: Loading the Google Maps API synchronously delays the rendering of other parts of your page until the Maps API is fully loaded.
- Solution: Load the Google Maps API asynchronously using the async and defer attributes:
```
<script async defer src="https://maps.googleapis.com/..."></script>
```
Blocked Resources:
- Problem: Browser extensions, particularly ad blockers or privacy-focused ones, can block certain resources. This can manifest as broken functionality or slow loading.
- Solution:
  - Identify: Temporarily disable extensions one by one to determine which one is causing the issue.
  - Address: If it's essential, explore alternative resources or methods that comply with the extension's rules.
Duplicate IDs:
- Problem: Duplicate IDs make your HTML invalid. JavaScript may behave unpredictably when trying to target elements by ID.
- Solution: Ensure that every HTML element has a unique ID. Use classes for styling elements that need to share common characteristics.
Autocomplete Issues:
- Problem: Missing autocomplete attributes on password fields negatively impact user experience and may trigger browser security warnings.
- Solution: Add autocomplete="new-password" to your password input fields:
```
<input type="password" name="user_password" id="user_password" autocomplete="new-password"> 
<input type="password" name="confirm_user_password" id="confirm_user_password" autocomplete="new-password"> 
```
Long-Running Handlers:
- Problem: Time-consuming setTimeout or setInterval handlers can block the main thread, making the page feel unresponsive.
- Solution:
  - Identify: Use the performance profiler in your browser's developer tools to find the slow handlers.
  - Optimize: Break down complex tasks within these handlers into smaller chunks. Use asynchronous operations where possible (promises, async/await). Consider using requestAnimationFrame for animation-related tasks.

Additional Performance Tips:

Image Optimization: Compress images without sacrificing quality using tools like TinyPNG or ImageOptim. Use responsive image techniques (srcset attribute) to serve appropriately sized images.
Caching: Set up proper caching headers on your server to reduce the need to download the same resources repeatedly.
Minify and Combine Files: Minify (remove whitespace and comments) and combine CSS and JavaScript files to reduce their size and the number of requests.
Lazy Loading: Delay loading of images or content below the fold until they are needed. This speeds up initial page load.
Code Profiling: Regularly use your browser's developer tools to identify performance bottlenecks in your code and target them for optimization.

Remember: Implementing these solutions requires understanding the underlying code of your website. Consider working with a web developer if you're not comfortable modifying the code yourself.

OpenSanghaFoundation / OSF

Slow Loading Times #63