# HomeMoreProject Performance Logs
## Known Issues and Possible Solutions
### 1. Preloading many JS scripts prevents page from being rendered before all the scripts are fully downloaded (render-blocking scripts). *May be limited in solutions due to Squarespace CMS.*

- [x] Write a custom script to enable the `defer` attribute to all the existing `script` tags to defer loading up scripts until the end.

    const scripts = document.getElementsByTagName("script");
    for (let i = 0; i < scripts.length; i++) {
      scripts[i].defer = true;
    }

**Custom JS in Squarespace CMS has the last priority causing it to load last. Therefore, not affecting any existing scripts.**
- [x] Check CMS version and enable AJAX loading (JQuery asynchronous JS and XML loading).
- [x] Enabled in some templates by default in CMS version 7.0.

### 2. No default font to load while custom font is being downloaded. This is causing a delay in rendering text for users with slower networks and resources.
- [x] Add custom CSS rules to use default user system font while custom font is downloaded.
- [x] `@font-face { font-display: swap; }`
* May need to explicitly state default system font using `src` attribute.
### 3. Large image sizes increasing the overall website size.
- Images that could be affected:
* Main logo (Default size: 78.1 KB)
* Thumb Image (Default size: 59.6 KB)
- [ ] Compress images.
- [ ] Covert images to WEBP for better compression(smaller size).
- [ ] Explicitly state `width` and `height` attribute for all images.
- [ ] Attributes missing from main logo image.
### 4. Big chunk of site HTML is being generated client-sided. (16KB)
- [ ] Only possible solution is to choose a template with less dynamic elements. CMS is limited in customizing DOM rendering.
### MISC Issues:
- [ ] Some JS CDNs have latency due to chosen CDN hosting provider (Donor Box).
- [ ] SquareSpace delivering unused CSS code (Site.CSS 85.6 KB unused and Less Compiler 29.6 KB unused).
- [ ] jQuery version is outdated. May be a security venerability. (Current version: 1.11.1)
- [ ] Accessibility issues:
- [ ] Some `a` tags don't have visible text and `aria-label` attributes.
- [ ] Carousel must have `tabindex='-1'` attribute.
## MISC Solutions

- [ ] Cloudflare
- [ ] Minify delivered code to reduce total page size.
- [ ] Image caching to reduce total load for old users.
- [ ] Change DNS for faster domain lookup.
- [ ] More security tools. Ex DDOS protection

- [ ] Fix aspect ratio using proper `width` and `height` for all images.

## Additional Notes
* Disabling Google Captcha script significantly lowered total load time on mobile devices.
* Tried to defer Captcha script until the user clicks on a form input box but CMS doesn't allow customization of Captcha script.
* Could disable captcha and check for spam in the backend?

## Summary
The web server does a great job at quickly connecting to client and delivering code. However the first render is delayed to many requests to external JS scripts and client side HTML generating. SquareSpace CMS is limited in customizing render-blocking scripts so we are very limited in solutions.

## Lighthouse Logs (JSON)
### Desktop:

### Mobile: