程序员经验分享-hwhale

如何提高我的 Nuxt 网站的 LCP 分数？

2023-12-27

我一直在努力降低 Nuxt 应用程序中几种页面类型的 LCP 分数。 Google Search Console 给出的 LCP 分数目前为 5.9 秒，lighthouse 给出的分数为 7.5 秒（均高于 4 秒，因此为红色）。您可以找到这样的示例page https://www.sekonj.design/fa/decor/5cc7d5ab08e60a05717f8d12/%D8%AE%D9%88%D9%86%D9%87-%D9%85%D8%AC%D8%B1%D8%AF%DB%8C-%D8%AF%D8%AE%D8%AA%D8%B1%D8%A7%D9%86%D9%87.

这是该页面的链接绩效报告 https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.sekonj.design%2Ffa.

根据我的镀铬灯塔，“最大的内容元素”是大图像。我已经提供了图像的 srcset（两种尺寸）。该图像是一个 htmlimg标签而不是v-img（我使用 Vuetify 作为我的组件库）。因此，我认为加载 Nuxt JS 块的顺序应该对 img 加载时间没有影响（我推迟了加载 JS 块，并且我正在使用 SSR）。这是我的img元素：

<img src="https://www.sekonj.design/static/scenes/lowres/47cae5395250790de484389141b07433.jpg" srcset="https://www.sekonj.design/static/scenes/47cae5395250790de484389141b07433.jpg 1920w, https://www.sekonj.design/static/scenes/lowres/47cae5395250790de484389141b07433.jpg 670w" sizes="(max-width: 700px) 670px, 1920px" style="width: 100%; height: auto; display: block;" data-v-567ccede="">

如何才能让LCP低于4s，甚至2s？


Web 性能是一个很大的话题，有很多东西可以帮助您。

不确定 Google Search Console，但您不应该真正在本地使用 Lighthouse，因为它取决于您的本地计算机。
https://web.dev/measure/ https://web.dev/measure/是开始调试错误的好地方。

Here https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.sekonj.design%2Ffa%2Fdecor%2F5cc7d5ab08e60a05717f8d12%2F%25D8%25AE%25D9%2588%25D9%2586%25D9%2587-%25D9%2585%25D8%25AC%25D8%25B1%25D8%25AF%25DB%258C-%25D8%25AF%25D8%25AE%25D8%25AA%25D8%25B1%25D8%25A7%25D9%2586%25D9%2587是您链接的页面的报告。

您应该首先阅读几篇文章，然后进一步深入研究图像优化。因为，说你的图像由于特定原因加载缓慢是不能这样做的。

一个快速的答案是查看您从哪个位置加载这些图像（CDN？）、它们的压缩、它们的格式、它们的大小、子采样等等......

这是一个起点：https://web.dev/optimize-lcp/ https://web.dev/optimize-lcp/

这篇文章是今天写的，作者是优秀的 Addy Osmani，他正在处理很多关于图像的事情，看一下：https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

这是一本圣经，您可以在其中找到更多信息。我想说这是关于 Web 性能的最完整的文章，提供了大量资源和链接来实现有史以来最快的 Web 应用程序，请认真阅读：https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/ https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

我想说，获得良好性能的最快方法就是使用 Cloudinary 并让它们为您处理所有繁重的工作：https://cloudinary.nuxtjs.org/ https://cloudinary.nuxtjs.org/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

image

nuxtjs

Lighthouse

corewebvitals

如何提高我的 Nuxt 网站的 LCP 分数？ 的相关文章

  • 如何使用 WebAPI 处理图像

    问题 将图像发布 获取到我的服务有哪些不同的方法 我想我可以在 JSON 中使用 Base 64 文本 也可以保持原生二进制形式 我的理解是 通过将图像转换为文本 包大小会显着增加 如果我发送图像 从 Web 表单 从本机客户端 从另一个服

  • 如何在SQL Server数据库表列中存储图像[重复]

    这个问题在这里已经有答案了 我有一张名为FEMALE在我的数据库中 它有ID as Primary Key 它有一个Image column 我的问题是如何使用 SQL 查询存储图像 尝试一下 insert into tableName I

  • 如何移动图像（动画）？

    我正在尝试在 x 轴上移动船 还没有键盘 我如何将运动 动画与boat png而不是任何其他图像 public class Mama extends Applet implements Runnable int width height i

  • 如何在 Picasso 中使用磁盘缓存？

    我正在使用 Picasso 在我的 Android 应用程序中显示图像 load image This is within a activity so this context is activity public void loadIma

  • 从BackgroundWorker线程更新图像UI属性

    在我正在编写的 WPF 应用程序中 我有一个 TransformedBitmap 属性 该属性绑定到 UI 上的 Image 对象 每当我更改此属性时 图像就会更新 因此显示在屏幕上的图像也会更新 为了防止在检索下一张图像时 UI 冻结或变

  • 如何强制网络浏览器不缓存图像

    背景 我正在为两个公益网站编写并使用一个非常简单的基于 CGI Perl 的内容管理工具 它为网站管理员提供了事件的 HTML 表单 他们可以在其中填写字段 日期 地点 标题 描述 链接等 并保存 在该表格上 我允许管理员上传与该活动相关的

  • 在 Magento 中使用缩略图切换基本图像

    在定制的产品视图页面上 我正在处理基本图像 大图像 和缩略图列表 这些缩略图是与媒体库中的产品相关的其他图像 它们只是普通图像 而不是定义的图像 缩略图 我的任务是获取它 以便当您单击缩略图时它会更改上面的基本图像 我已经可以工作了 但是我

  • jQuery 插件 imagemapster 没有做任何事情

    我对 javascript 和 jQuery 还比较陌生 所以请记住 这可能是一个我没有看到的明显解决方案 我引用了 jQuery 它对于其他事情来说工作得很好 也许 imagemapster 参考有问题 我下载了here http www

  • fancybox - 如何添加打开图像的链接？

    大伙计们有什么想法吗 我正在尝试链接 fancybox 中打开的图像 我到处都找遍了 听起来很简单 这是我正在使用的代码 a href img src example thumb png alt example a

  • 更新表格视图图像子视图中的图像的最佳方法是什么？

    具体来说 如何从 uitableview 单元格中获取图像子视图 我的表视图从网络异步获取数据 当我第一次创建图像视图时 我通过以下方式添加了视图 imageView setImage image cell addSubview image

  • 如何用PHP读取图像？

    我知道 localfile FILES media tmp name 如果使用 POST 方法 将获取图像 我正在尝试读取与我的代码位于同一目录中的图像 我如何读取它并将其分配给像上面这样的变量 您发布的代码不会读取图像数据 而是读取其文件

  • 如何在D3节点中放置图像？

    到目前为止 我已经创建了这些 D3 节点 用于创建可折叠的层次树 到目前为止 这些节点的颜色为 AA1C1C 深红色 以表明如果您单击它们 它们将扩展到更多节点 我想要做的是在节点中使用图像中的位置 这对于所有用户来说都是一个加号 以知道它

  • Android - 带图像的按钮 - 禁用按钮时图像变暗

    在 Android 中 我有一个包含图像和文本的按钮 禁用该按钮时 文本会自动变灰 但图像保持不变 当按钮被禁用时是否可以使图像变暗而不需要两个单独的图像 在您的代码中 您还可以使用彩色滤光片 http developer android

  • imageio.IIOException：无法读取输入文件

    我一周前启动了 Java 现在我想将图像插入到我的窗口中 无论我尝试什么 我都会在 Eclipse 中看到这个 javax imageio IIOException 无法读取输入文件 package graphics import java

  • Firefox 中出现图像映射问题

    我的图像地图无法在 Firefox 中运行 但可以在 Chrome 和 Safari 中运行 我认为这与 div 内的一些标签有关 你们能帮帮我吗 因为我对此不太了解 div style font size 14px img src dat

  • OpenCV非旋转图像拼接

    我正在 OpenCV 中进行图像拼接 从不同位置拍摄平面场景的照片并尝试构图全景图 我修改了缝合示例以满足我的需要 openCV 拼接管道的问题是 它假设相机纯粹旋转 但对我来说情况并非如此 当拍摄的照片与场景完全正交时 没有相机旋转 只是

  • 边缘检测和透明度

    使用在一致背景下拍摄的服装图像 我希望使图像中除服装之外的所有像素都透明 解决这个问题的最佳方法是什么 我研究了这个常见的算法和开源库opencv http opencv willowgarage com wiki 除了自己动手或使用 op

  • 如何使用 IO Codenameone 发布图片/图像

    因为 codenameone 不能使用外部库 HttpConnection 所以我必须使用 Codenameone 提供的内部库 API 只是我已经设法使用 ConnectionRequest 将数据发布到格式化文本 字符串 我想知道是否有

  • 如何从 dataurl 在服务器上创建图像文件

    我有一个 dataurl 格式的图像 例如 data image jpeg base64 9j 4AAQSkZJRgABAQAAAQABAAD 2wBDAAMCAgMCAgMDAwMEAwME iiigAooooAKKKKACiiigAoo

  • Asyncdata 与 Fetch 之间的区别

    获取数据和异步数据之间的确切区别是什么 官方文档是这么说的 异步数据 您可能想要获取数据并在服务器端呈现它 Nuxt js 添加 asyncData 方法 让您可以在之前处理异步操作 设置元件数据 异步数据每次在加载组件之前调用 仅适用于

随机推荐

热门标签