Recommendations for performance improvements in Cloudinary React SDK

未关闭
  • 哪里不对？
#240 1 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
30/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
react, typescript
领域
documentation, frontend, performance

调研方向

首先查看 PR #239 和 React 图像转换文档，尤其是 Plugins 和 Lazy Loading 部分。检查 AdvancedImage 如何处理提议的开发警告，然后确认文档建议使用原生加载，并且两个警告都可以按照描述关闭。

由索引模型根据 Issue 内容生成。

描述

Hello!

As part of my work with the Chrome Aurora team, I’ve been working with image-focused React libraries to help improve application performance (measured in Core Web Vitals) for the apps that use those libraries. I spoke with @colbyfayock, and he told me that Cloudinary would be willing to take a look at my recommendations.

Please see the accompanying PR(#239) for code related to these recommendations.

Recommendations:

1. Change the official documentation to recommend the use of native loading instead of the loading plugin.

The current intersectionObserver-based lazy loading plugin relies on JavaScript and does not work for server-side rendered images. [Native lazy loading] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) is well-supported across modern browsers, and works in a SSR context.

Additionally, the native lazy loading syntax is very simple, and works cross-framework.

Rather than modify the existing plugin, I would recommend a change to the plugin documentation visible on the transformation pages such as https://cloudinary.com/documentation/react_image_transformations#plugins. I suggest removing the initial link to the lazy loading plugin, and then modifying the section under the “Lazy Loading” subheading to describe lazy-loading as a technique that can be implemented just by adding loading=“lazy” as an attribute on the AdvancedImage element. You could mention that the lazy loading plugin is still available for legacy purposes, and (optionally) to support the cases where users need to customize their root margin and threshold.

2. Implement a warning for lazy-loading the LCP image.

In other image components I’ve worked with, one performance issue I’ve seen come up repeatedly is users applying loading=“lazy” to all their images, including the one which ends up being the largest contentful paint element. Doing so negates much of the LCP benefits that come from server-side rendering, and often I’ve found that (from a Core Web Vitals) perspective, apps that make this mistake would have been better off not doing any lazy loading at all.

As such, I recommend implementing a simple dev-environment-only warning message that logs a warning when it detects an LCP image with the loading=“lazy” attribute. See the accompanying PR(#239) for an implementation of this warning.

3. Implement a warning for oversized images.

Another common cause of bad image-related LCP scores is applications including oversized images. That is, images which are downloaded with an intrinsic size substantially larger than their rendered size. Especially given that applications using the Cloudinary have access to dynamic image resizing, we should make sure to alert users when this is happening.

To do so, I’ve included another warning in the accompanying PR(#239), which logs a warning in development environments when oversized images are detected. Both this and the above warning are dismissible with a attribute on the AdvancedImage element

Please let me know if you have any questions about these recommendations. Thank you!

主要语言
TypeScript
星标
49
派生
17
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

cloudinary/frontend-frameworks 的其他 Issue

查看 cloudinary/frontend-frameworks 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。