facebook / facebook/docusaurus
Improving image loading
- Dominant language
- TypeScript
- Stars
- 66.2k
- Forks
- 10k
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 52
Description
### Have you read the Contributing Guidelines on issues?
- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).
### Prerequisites
- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).
### Description
This is not so much a bug as gathering useful points on image loading from the Hacker News discussion on https://johnnyreilly.com/2023/01/15/how-i-ruined-my-seo
https://news.ycombinator.com/item?id=34389421

> > You don't have to get 100 score, but passing the core web vitals score and having higher score on mobile is recommended
Note that they don't have a CWV score yet due to low traffic. But a 39 performance score from the simulated Lighthouse is often more than enough for a passing grade. That is: if a Moto G4 can do OK, your normal users will likely do great.
>
> For instance, a site I made[0] has a 22 from Lighthouse, but a passing CWV grade, so further improvement to the LCP, FID, and CLS would confer no direct Google SEO benefit.[1] (But it may help things like bounce rate, which may confer second-order benefits)
>
> > by removing the lazy load effect from the LCP
>
> Indeed. Even better, making it high priority instead of normal: https://addyosmani.com/blog/fetch-priority/
The proposal is: for the *first* image in a post, we use `fetchpriority="high"` as documented in @addyosmani's post. And possibly remove `loading="lazy"` for that image - although removing may not be necessary
### Reproducible demo
_No response_
### Steps to reproduce
n/a
### Expected behavior
n/a
### Actual behavior
n/a
### Your environment
- Public source code:
- Public site URL:
- Docusaurus version used:
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):
### Self-service
- [X] I'd be willing to fix this bug myself.
Contributor guide
Assessment
This issue has not been assessed yet.