Codeinwp / Codeinwp/otter-blocks
Otter post generated css not loaded at the top of the page
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 198
- Forks
- 36
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 30
Description
Description
At the moment the css that we generate from Otter is added at the bottom of the page, which lowers it's loading priority: https://vertis.d.pr/i/2YznNZ.
This is particularly a problem when we are using background images at the top of the page, which are also defined in this CSS and cause a low priority and high waiting time for the hero image to be loaded.
I suggest we load this in the header as well.
Step-by-step reproduction instructions
- Go to https://demosites.io/zelle-gb/
- Look in the network tab loading waterfall
Screenshots, screen recordings, code snippets or Help Scout ticket
No response
Environment info
No response
Is the issue you are reporting a regression
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue at https://demosites.io/zelle-gb/ and inspect the network loading waterfall to confirm where the generated Otter CSS is loaded. Trace the CSS generation and page-output path to determine how it can also be loaded in the header. Done means the generated CSS is available earlier and the hero background image no longer waits on a low-priority stylesheet.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100