facebook / facebook/docusaurus

Improving image loading

Đang mở
#8,552 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
domain: performance feature status: needs more information
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.