facebook / facebook/docusaurus

Improving image loading

Offen
#8,552 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
domain: performance feature status: needs more information
Vorherrschende Sprache
TypeScript
Sterne
66.2k
Forks
10k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
52

Beschreibung

### 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

![image](https://user-images.githubusercontent.com/1010525/212561134-8b467669-fdb1-4235-ae34-41fc70229c8e.png)

> > 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.