Google 核心网页指标报告显示网页状态不好

问答 / 197 / 9 / 创建于 1年前 / 更新于 1年前

1. 运行环境

1). 当前使用的 Laravel 版本？

Laravel Framework 8.73.1

2). 当前使用的 php/php-fpm 版本？

PHP 版本：8.0.22

php-fpm 版本：

3). 当前系统

AWS Ubuntu 4 核 16 G

4). 业务环境

5). 相关软件版本

MySQL 8

2. 问题描述？

Google Search 中核心网页指标，所有网页均为红色（欠佳）
示例：

3. 您期望得到的结果？

期望不要有任何网页是欠佳的状态，需要改进 or 优质两种状态都可以接受

4. 您实际得到的结果？

刻意练习，日益精进。

课程读者 268 声望

Web 开发工程师 @ 自由职业者

刻意练习，日益精进。

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

《G01 Go 实战入门》

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

Laravel 使用 intervention/image 扩展包，生成带文字的海报 25 / 1 |

PHP Monitor: 从 macOS 状态栏管理 PHP 和 Valet 20 / 11 |

极简设计模式-状态模式 11 / 4 |

聊聊网络的那些事 14 / 3 |

基于 GD 、Imagick 和 phpqrcode 的海报生成插件 66 / 34 |

Dcat Admin 修改全局行操作按钮显示方式为文字+图标 16 / 2 |

cccyzloong

课程读者 161 声望

最佳答案

贴几个红色指标出来赛

1年前评论

cccyzloong （作者）

Laravel
我这边看起来是绿色的

补充，通过审查偏移量，发现页面在加载之后会有一小段的移动

Laravel
这个会影响cls(Cumulative Layout Shift)

翟宇鑫（楼主）

文中添加了几个示例 🙏

sparks1985

@cccyzloong 使用什么工具来检查的？

讨论数量: 9

cccyzloong

课程读者 161 声望

贴几个红色指标出来赛

1年前评论

cccyzloong （作者）

Laravel
我这边看起来是绿色的

补充，通过审查偏移量，发现页面在加载之后会有一小段的移动

Laravel
这个会影响cls(Cumulative Layout Shift)

翟宇鑫（楼主）

文中添加了几个示例 🙏

sparks1985

@cccyzloong 使用什么工具来检查的？

cccyzloong

课程读者 161 声望

谷歌控制台就可以

file

1年前评论

sparks1985

谢谢，了解了

翟宇鑫

课程读者 268 声望 / Web 开发工程师 @ 自由职业者

@cccyzloong 您好，根据您的指导我做了一些调整

比如：img 元素明确指定 width & height

应该是有一些改善的，我先使用 web-vitals JavaScript 库在本地调试

首页的话，有一个 grid 布局，cls 分数很高，不清楚该如何调整了，有空时可以再指导一下吗？

file

1年前评论

cccyzloong

课程读者 161 声望

首页还是我说的那个，主要是页面加载完毕之后有位移，所以整体的思路是，尽量让页面加载之后不要在移动元素之类的，我看看了下面的这个也可能会影响,这个css是后加载的，会导致移位

file

1年前评论

翟宇鑫（楼主）

好的，我从 css 入手试试看，谢谢🙏

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

268 声望

Web 开发工程师 @ 自由职业者

纠错改进

成为赞助商