如果你是一个企业主，你有兴趣为你的网站获得更好的搜索排名. 如果你是一名开发者, 你需要迎合客户的需求，创建一个能够很好排名的网站. 当谷歌在其搜索引擎排名页面(SERP)中决定网站的顺序时，它会考虑数百个特征。.

页面速度被官方引用为一个重要的排名属性 2018年中期. 在本文中, 我们将解释性能分数，企业主应该注意:页面速度的见解. 我们将深入探讨一些技术细节，这些细节将帮助软件开发人员进行页面速度优化, 特别是在复杂的情况下, 就像那些与单页应用程序相关的, 相关的React网站和更多.

为什么获得谷歌的页面速度洞察测试很重要

当谷歌在2010年推出PageSpeed工具时，大多数网站所有者都熟悉了它. 那些不知道如何使用的人 PageSpeed见解 只需要打开工具就可以查看自己的网站.

该服务生成页面速度报告，提供网站在桌面和移动浏览器上的运行情况的详细信息. 你很容易忽略这样一个事实:你可以使用页面speedinsights分析顶部的移动和桌面选项卡在它们之间切换:

因为移动设备体积小巧，旨在延长电池寿命, 它们的web浏览器往往表现出比运行桌面操作系统的设备更低的性能, 因此，预计台式机的得分会更高.

大型科技公司在任何领域都不会出现亏损, 但预算紧张的小型网站可能会. 企业所有者也可以在竞争对手的网站上运行PageSpeed见解，并将结果与自己的网站进行比较，看看是否需要在提高性能方面进行投资. 通过这种方式，页面速度测试可以成为竞争性分析的重要组成部分.

什么分数是足以通过网页速度评估?

PageSpeed使用的指标来自 核心网络生命 提供合格/不合格评估.

这个工具有三个分数:

1. 页面速度显著显示 表演。 在“诊断性能问题”部分用彩色圆圈标出分数. 它是使用页面sspeed内置的虚拟机来计算的，这些虚拟机的特性与一般的移动或桌面设备相匹配. 请记住，此值适用于页面加载和PageSpeed的虚拟机，并且是 不 被谷歌搜索引擎考虑.

   

   当开发人员对网站进行更改时，这个数字很有用, 因为它允许他们检查更改对性能的影响. 然而，谷歌的搜索引擎只考虑详细的分数.

2. a的详细分数 特定的页面以及PageSpeed认为与所分析的页面相似的页面，是根据Chrome浏览器在真实计算机上收集并发送给谷歌的统计数据计算出来的. 这意味着在Firefox、Safari和其他非chromium浏览器上的性能不会被考虑在内.

   

3. 摘要 所有页面 网站的得分与单页得分的方法相同. 要访问它，请选择Origin选项卡而不是This URL选项卡. 在标签栏下列出的URL将是不同的, 因为Origin将显示网站的主页(仅限域名).

   

谷歌不断更新PageSpeed考虑的指标列表, 所以关于什么是重要的最好的来源是体验/核心Web生命部分 谷歌搜索控制台，假设你已经在那里添加了你的网站.

要通过核心网络生命体征评估，所有分数必须是绿色的:

让值变为绿色, 该页面需要在测试中获得至少75%的分数, 许多用户需要体验同等或更好的价值. 每个分数的阈值不同，支撑材的阈值明显更高.

为了更好地理解这些数值，请点击分数标题:

这链接到一篇博客文章，详细解释了给定类别的阈值.

数据累计28天, 另外还有两个与真实用户体验不同的地方:

1. 实际设备的性能和网速各不相同, 所以这个测试产生的结果与页面sspeed的虚拟机结果不同.
2. 详细的评级是在整个页面寿命期间计算的, 从页面打开的每五秒间隔中取最差值.

如果一个网站的许多用户生活在网速较慢的地区，并且使用过时或性能不佳的设备, 这种差异可能令人惊讶. 这不是PageSpeed见解的改进建议之一. 乍一看，如何处理这个问题并不明显，但我们稍后会尽力解释.

使用pagspeed Insights建议提高分数

评级的主要部分来自于如何 大多数 用户打开页面. 尽管并非所有用户都会长时间访问一个网站, 大多数人偶尔会访问一个网站, 所有用户都被考虑在评级中, so 提高页面加载速度，这是一个很好的开始.

我们可以在评估结果下面的机会部分找到建议.

我们可以扩展每个项目，并得到详细的改进建议. 有很多信息，但这里是最基本和最重要的提示:

• 提高服务器响应速度. 例如, 如果您使用的是共享主机, 升级您的计划或迁移到虚拟专用服务器(VPS)，甚至是专用服务器. 而且，并不是所有的主机都是一样的. 尝试选择具有良好硬件和正常运行时间保证的可靠主机.
• 降低打开网站所需的流量. 为了实现这个目标, 您可以用优化的图像替换图像:更改其格式, 调整分辨率和压缩, 如果需要，用静态图像替换动画图像, 等. 流行的内容管理系统有插件使这个过程变得简单.
• 缓存更多数据. 最简单的方法是使用内容分发网络(CDN) Cloudflare 对于静态内容(图像、样式、脚本、不会改变的页面). 您可以通过配置缓存规则来优化性能.

现在让我们看看更复杂的因素，经验丰富的程序员可以在这些方面提供帮助.

如何在页面生命周期中调试分数

正如前面提到的, 谷歌搜索控制台考虑过去28天从基于chrome的浏览器获得的平均分数，还包括页面的整个生命周期的值.

无法看到在页面的生命周期中发生了什么是一个问题. PageSpeed的虚拟机无法解释页面加载和用户交互后的表现, 这意味着网站开发人员将无法获得改进建议.

解决方案是包括谷歌 Chrome Web vital 库，以查看当用户与页面交互时发生了什么.

有关如何包含此库的各种选项都在其 自述.md文件 GitHub上. 最简单的方法是添加以下脚本. 它被调整为在主模板的页面生命周期中显示值 :

注意，累积布局移位(CLS)和最大内容绘制(LCP)计算仅适用于基于chrome的浏览器, 包括铬, 歌剧, 勇敢(禁用勇敢盾牌使图书馆工作), 以及其他大多数现代浏览器, 除了火狐, 是基于Mozilla引擎的吗, 以及苹果的Safari浏览器.

添加脚本并重新加载页面后, 打开浏览器的开发人员工具并切换到Console选项卡.

查看如何为移动版本计算这些值, 使用“设备”工具栏切换到移动设备. 要访问它，请单击浏览器的开发人员工具中的切换设备工具栏按钮.

这将有助于找出问题所在. 在控制台中展开行将显示触发分数更改的详细信息.

大多数时候, 其他分数的自动提示足以让你知道如何提高它们. 然而, 使用用户交互加载页面后，CLS会发生变化, 而且可能根本没有任何建议, 特别是对于单页应用程序. 您可能会在“诊断性能问题”部分看到一个完美的100分, 即使你的页面没有通过搜索引擎考虑的因素的评估.

对于我们这些与CLS斗争的人来说，这将是有帮助的. 展开日志记录，然后展开条目、特定条目、源、特定源，并进行比较 currentRect 与 previousRect:

现在我们可以看到改变了什么，我们可以确定一些方法来修复它.

减少累积布局移位

在所有分数中，CLS是最难掌握的，但它对用户体验至关重要. 当向文档对象模型(DOM)添加元素或更改现有元素的大小或位置时，就会发生布局移位. 它会导致该元素下面的元素发生移位, 用户会觉得他们无法控制正在发生的事情, 导致他们 离开网站.

在一个简单的HTML页面上处理这个问题相对容易. 设置图像的宽度和高度属性，使其下方的文本在加载时不会移位. 这可能会解决问题.

如果您的页面是动态的，并且用户像使用应用程序一样使用它, 考虑以下步骤来解决CLS问题:

1. 将页面设置为在用户单击按钮或链接500毫秒后显示内容，而不会触发CLS.
2. 更改不会导致其他DOM元素移位的参数:背景、颜色等.
3. 确保当改变一个元素的大小或位置时，其他元素不会发生移位.

更详细的建议可在谷歌开发人员 优化CLS 页面.

500毫秒如何降低CLS

来说明如何使用500毫秒阈值, 我们将使用一个涉及图像上传的示例.

通常，当用户上传文件时，脚本会添加一个 元素转换为DOM，然后客户机浏览器从服务器下载图像. 从服务器获取图像可能需要500毫秒以上的时间，并可能导致布局变化.

但是有一种方法可以让图像更快，因为它已经在客户端计算机上了, 这样就产生了 元素，在500毫秒的截止日期之前.

下面是一个没有库的纯ECMAScript的通用示例，它可以在大多数现代浏览器上工作:

    
    



欧洲杯买球
欧洲杯买球
Buy-a-net-for-Euro-2024-info@zsjf.net
线上博彩平台排名
博彩网站大全
A-surname-service@bookstothephilippines.com
esball-is-easy-to-Expo-info@dalianzuqiu.com
esball-is-easy-to-Expo-info@dalianzuqiu.com
彩票平台
欧洲杯下注平台
吉美思
Buy-ball-app-careers@taolipinle.com

法制节目网
万物 
薇姿官网

广西水利电力职业技术学院 
字体传奇
三国杀英雄传官网
吉林小说网
我爱卡信用卡在线申请

正如我们前面看到的，解决这类问题可能需要敏捷的思维. 有了移动设备，尤其是便宜的，还有缓慢的移动互联网，90年代的艺术 性能优化 变得有用和老派的web编程方法可以启发我们的技术. 现代浏览器调试工具将有助于实现这一点.

更新谷歌搜索控制台

在发现并消除问题之后, 谷歌的搜索引擎可能需要一些时间来记录这些变化. 为了更快地更新结果，请让谷歌搜索控制台知道您已经解决了问题.

使用左上角的搜索属性框选择正在处理的页面. 然后导航到左侧汉堡包菜单中的Core Web vital:

单击移动或桌面报表右上角的Open Report按钮. (如果你在这两方面都遇到过问题, 请记住稍后对第二个报告重复相同的操作.)

下一个, 转到图表下的Details部分，并单击验证失败警告的行.

然后单击此问题的“查看详细信息”按钮.

最后单击Start New Validation.

不期望立竿见影. 验证可能需要长达28天.

优化是一个持续的斗争

搜索引擎优化优化是一个持续的过程，性能优化也是如此. 随着用户的增长，服务器接收到的请求越来越多，响应越来越慢. 不断增长的需求通常意味着向站点添加新功能，而它们可能会影响性能.

当涉及到性能优化的成本/收益方面时, 有必要取得适当的平衡. 开发人员不需要在所有网站上始终实现最佳价值. Concentrate on what causes the 大多数 significant performance problems; you’ll get results faster and 与 less effort. 大公司有能力投入大量资源并取得所有成绩, 但对于中小企业来说，情况并非如此. 在现实中, 小企业很可能只需要赶上或超过竞争对手的表现, 而不是像亚马逊这样的行业巨头.

企业主应该明白为什么网站优化是至关重要的, 哪些方面的工作是最重要的, 以及在他们的人身上寻找哪些技能 雇人来做这件事. 开发人员, 对他们来说, 是否应该始终牢记性能, 帮助他们的客户创建网站，不仅对最终用户来说感觉很快, 而且在pagspeed Insights中得分也很高.