是100/100页的评分足够了吗?答案是不。

网站需要快速维持竞争力,并提供良好的用户体验,以维护每个访客的高页面景观,减少反弹或购物车放弃率,以及改善搜索引擎排名

Google's Gary Illyes tweet on pagespeed您可能已经阅读了很多专注于制作网站的文章,其中WordPress插件可能有助于,哪些可能不会提高您的网站速度的类似提示。您可能还可以在移动和桌面设备上实现100/100页的分数。 但重要的问题是,是100/100页的评分足够?这是否意味着绝对的最大性能? Google's Gary Illyes tweet on pagespeed

[(6]

本文将解释为什么100分与 Pagespeed 工具可能还不够。如果您是表演爱好者,您将发现有几个有趣的优化技术将应用于您的网站。如果您不是,这些优化可能会帮助您在网站绩效方面保持领先于您的竞争。让我们首先开始引入Pagespeed工具。

什么是Google Pagespeed?以及如何工作

Google Pagespeed Insights 衡量移动和桌面网页的性能,并提供可操作的指导,以提高网站的速度。然后,该工具将网站分别为移动和桌面排列0到100的分数,其中100表示​​性能评分的标准是w满足。

标准包括

第一种满足涂料,最大的含量涂料,速度指数,总阻断时间,交互时间和累积布局换档。 有各地的许多文章可以帮助您了解如何最佳了解Pagespeed工具的工作,以及如何使用工具提供的指导并实际将其应用于您的网站。

然而,但是你在这里,我假设你已经很好地过去了,准备更多地了解你可以采取的下一步,让你的网站更快地让你的网站更快。

没有Pagespeed工具指导您到绝对最大性能?

编号

我还需要担心性能吗?

是。

Pagespeed工具很好始终使您的网站更快,但这并不意味着100分意味着什么都没有做到。在大多数情况下,您仍然有机会在页面重量和页面加载时间中节省大时间。

所以,让我们看一下一旦获得100/100得分,就可以看一下可以完成的额外步骤Pagespeed工具。

1。使用竞争对手的浏览器缓存

如果您有一个竞争对手,其中略高于您的关键字,则用户在点击您的网站之前访问其网站的机会。但是,如果用户已在另一个站点上,您可以通过检查站点的源代码来重复使用访问者的浏览器缓存,以查看它是否使用任何公共CDN,如果是的话,则为哪个库。

如果是您都使用相同的库(IE),例如,jQuery 3.2.1,您可以从您的竞争对手使用的相同公共CDN加载。

如您所猜,这个技巧很少,在某些情况下,可能会导致竞争对手的福利访客首先访问您的网站,然后访问您的竞争对手。

从公共CDN加载所有开源资源可帮助您从用户过去任何时间访问的第三方网站的浏览器缓存中重用公共资源。

一些免费的WordPress插件如

轻松加速

Commonwp帮助自动链接到公共CDN上托管的开源主题,插件和库。此类插件使得可以轻松地重用其他Web的浏览器缓存尺度的网站没有很多努力。

这种方法可能不适用于一些游客,但可能为其他访客工作。好处是,这可以是

即使是第一次访问者

也可以减少页面加载时间。额外的好处是这些开源资产从CDN提供,没有任何带宽费用。

2。合并文件,但警告

几个性能测试工具可能会建议您将多个CSS和JavaScript文件组合成一个以提高速度。 css and javascript minification via wp-rocket example这曾经很久以前是真正的,但现在时间已经改变了。 css and javascript minification via wp-rocket example在这个流行的博客文章中写在Google Chrome V8博客上标题为“ 2019年的JavaScript成本

,Addy Osmani提供了一些关于改善下来的指导加载JavaScript的时间。他建议将JavaScript捆绑捆绑在一起,如果捆绑尺寸超过50-100KB,则将其分成较小的捆绑包。他还注意到一般的经验法则,如果脚本大于1 kB,则避免内联。

总体而言,不值得将较小的文件捆绑成一个或多个捆绑包,因为它没有改善页面加载速度了解 – 它确实相反,并影响移动设备上的速度。这是因为,通过HTTP / 2多路复用,多个请求和响应可以同时在飞行中,减少其他请求的开销。

所以,您的网站代码是否需要任何重构来做旧的事情又来了?您可能希望考虑禁用在WordPress站点上启用此功能的插件。这将是redu.CE插件膨胀并将加快您的网站。

但是,它并不意味着将整个JavaScript代码库拆分为许多较小的文件不会伤害您。您需要仔细测试您的用例。 3。图像格式之间的切换

图像有助于页面加载的大部分。因此,它们需要多于公共

图像优化技术

的考虑。

如果您的网站使用图像,并且我相信它可能需要了解哪种图像格式适合您的需求。一些图像格式更适合于载体中,而其他的工作最好与照片。

上面的图表可以帮助您在之间选择正确的格式eeds。 JPEG支持照片的有损压缩,而SVG是一种基于文本的格式,可以在飞行中压缩,并且在大多数情况下,可以将文件大小降低至小于PNG的文件。Is 100/100 PageSpeed score enough? The answer is No.. Image 2 另一个代价是新的图像格式。 Pagespeed建议,“以下一代格式提供的图像”。唯一受到广泛支持的下一代格式WPP支持的是只有77%的浏览器Is 100/100 PageSpeed score enough? The answer is No.. Image 2,无需支持Safari浏览器。因此,WebP由Web上的使用WebP。

所以,使用webp作为主要图像格式仍然是一个大的号码。但是WPP格式的文件大小减少了如此巨大的文件,使其成为性能优化的非常有吸引力的选择。而且,大多数时候,它是服务图像的好选择到浏览器基于它们的兼容性。 这可能听起来很复杂,但它不是。有解决方案可以自动化此动态图像转换。一旦您准备好在网站上使用WebP,您可以使用多个选项:

您可以使用使用

基于云的图像优化和转换服务的简单加速WordPress插件

对WordPress和非-WordPress网站并服务于浏览器可以支持的最佳图像格式。还有一个

PHP库可用于自动为非WordPress网站自动执行此作业,而无需增加存储使用情况。对于我的客户来说,图书馆是如此善于这样做,我已经看到它转换并优化了PNG图像到WPP,并将其大小降低了95%的原始问题l图。这并不总是发生,但有时候会这样做。你的旅费可能会改变。对于现场优化和转换,WPP Express 将图像转换为WPP并为服务器上的每个图像维护多个副本,以将右侧图像传送到正确的浏览器。缺点是它膨胀了文件系统,增加了备份大小,并使迁移困难。它们还将负载放在托管上,因为转换和优化图像是一个昂贵的任务。将图像转换为WEPP及时关闭。节约是巨大的,在大多数情况下,总页面尺寸减少到一半甚至更少。

侧说

:在苹果公司22日,2020年6月22日,WWDC主题演讲期间,他们指出它们有

在Safari中第一次添加了WebP图像支持 t这里更重要。 另一个重要的事情是留意令人兴奋的即将到来的图像格式JPEG XL。它处于标准化的最后阶段,可能很快完成并开始查看一些浏览器支持。它基于谷歌的PIK Cloudary的FuIF 图像格式研究的组合。 JPEG XL的格式设置了以下

两个设计要求

,使其成为网页未来的图像格式:

高质量:在合理的比特率下视觉无损;解码速度:多线程解码应该能够在大图像上达到约400万像素/秒。 JPEG XL预计将降低原始尺寸的1/3的图像尺寸,而不会损失质量。它将是支持摄影和禁像的通用格式PHY图像有效。因此,您希望在将来更快地使您的网站更快地让您的网站可能希望关注JPEG XL浏览器支持。早期移动器的优点是显着的。 4。静态压缩静态压缩 这可能

加快您的网站大时间

,最低努力,可能是我要建议的最简单的技术。让我解释一下。网站通常使用来自Web的一段代码到.htaccess或nginx配置文件,为所有可压缩资源启用GZIP或Brotli压缩。这是有效的,但留下了更多优化的空间。网页可以额外的额外

,因为更好的

brotli压缩。想学习诀窍吗?很简单。差异静态压缩压缩。 您的Web服务器主机可以分为两种类型,动态和静态的可压缩内容。动态内容在飞行时生成,不能提前压缩。 HTML页面是一个示例。像CSS和JS一样的静态内容保持一段时间。 您可以预先压缩这些资产并配置您的服务器

,以便在飞行中为这些预压缩文件提供服务。预压缩允许您使用更高的压缩级别,如Brotli:11,通常在飞行上的压缩时通常太慢。如果每次文件更改,您也可以使用PageCDN等第三方服务,如PageCDN为您无缝为您完成此操作。

5。减少DNS查找时间

DNS LoOkup时间是在将域名解析为IP地址的时间。然后,此IP地址用于查找Internet上服务器的位置。

当用户访问页面时,浏览器执行的第一个高延迟任务是域名的DNS查找。除非浏览器从DNS查询获取IP地址,否则它无法继续连接到服务器并进行HTTP请求。理想情况下,减少DNS查找时间应该是最初的一部分 – 字节优化策略,但似乎Pagespeed工具没有考虑它,因为在许多情况下,网站管理员无法在这方面进行优化。结果,大量的网站管理员不会打扰他们的DNS提供商的表现。

几乎没有方法,其中可以为单个用户减少DNS查找时间:通过使用快速DNS提供程序来降低。如从DNS基准管理服务所拍摄的上面的屏幕截图

DNSPERF.COM

,多个服务提供了小于30ms的全局平均水平,足以使DNS查找过程不可察觉。通过使用更高的TTL缓存DNS响应。 DNS递归解析器可以将这些响应缓存到全球最终用户附近,并且可以显着降低DNS查找时间,以进一步为它们所服务的所有用户。

6。 Leverage浏览器缓存fonts for fonts

您可以通过插件或主题在您的网站上使用的谷歌字体来实现95或98分,而不是100个,并且您可能会认为您可以达到多少改进e这个前面的得分;这个问题有多个解决方案。

谷歌字体CSS仅为1天到期。这是一个特征而不是错误,因为这允许谷歌字体团队将更改传播到最终用户的更快。但是,问题是Pagespeed工具希望您使用静态资产使用30天的缓存。

如果您有兴趣解决此浏览器缓存问题,则首先需要通过优秀和详细的方式进行自主托管与第三方托管的字体。一种解决方案是使用下载字体和CSS的工具DNS Lookup Time graph。您只需选择家庭,您的向后兼容性偏好和可下载文件就可以在您的目录中提取项目并使用HTML中的CSS来服务字体。如果您使用WordPress, OMGF插件是否可以为您完成所有这些。DNS Lookup Time graph 您还可以使用

简单的字体

,即

Google字体克隆,但有些添加的CSS实用程序,使使用字体更容易,并促进快速原型设计。幸运的是,这个CDN托管库还修复了浏览器缓存问题。 7。使用HTTP / 2服务器推动

服务器推送是HTTP / 2协议的一个功能,允许Web服务器在甚至要求此类文件之前先将文件推送到浏览器,以便预期浏览器很快需要请求这些文件。

因此,当服务器收到对文件的请求时,它将发送此文件加上它配置的一个或多个其他文件发送与触发服务器推送的文件。这消除了往返时间为后续请求,使立即提供给浏览器的资源。

服务器推动是一个大的性能特征,即您可能想要尝试。但是,要注意的一个重要措施不是在每个请求上积极推动文件。浏览器可能已经为您提供了一个资源的缓存副本,并且必须有浏览器的空间来使用该缓存。积极推动太多的不需要的资源可以浪费可能在计量连接的用户的带宽。如果要尝试此操作,本文详细介绍了如何安装服务器推动Nginx

。 CSS-Tricks上的这篇文章有助于

设置缓存感知服务器推送设置

。此博客帖子有很多关于使用服务器推送的建议和见解

。对于WordPress站点,相同的简单加速插件提供此服务器推送功能。

8。 HSTS或HTTP严格的运输安全性,是一种能够强制执行HTTP的方法,以确保入侵者没有机会改变请求或响应,如果用户使用普通旧的HTTP请求页面。

HSTS预加载是由Google Chrome团队维护的列表,以创建此类网站的目录,以支持整个域及其子域的HTTPS。此域列表由大多数主要浏览器供应商使用,包括Chrome,Firefox,Opera,Safari,EDGE,以及IE。如果网站位于此HSTS预加载站点的此列表中,浏览器始终与其进行安全连接。即使用户尝试通过未加密的HTTP打开此类站点,浏览器也会在列表中查找网站,并将请求更改为HTTPS。本技术具有多种要求,如HST在HST上所提到的预加载网站,但提供了改进的安全性。 但是,安全不是唯一的好处。在此列表中拥有一个网站,将用户从HTTP到HTTPS中的不必要重定向保存在网站上有几个旧反向链接。提供HSTS的安全性和性能优势证明了它的使用,只要您可以满足其要求。 9。使用imuctable缓存HTTP/2 Server Push chart ‘cache-control’是一个HTTP标题,它告诉浏览器关于多长时间e文件可以存储在浏览器中。对于HTML页面等用户特定的动态内容,此标题用于告诉浏览器不再缓存此文件。但是对于像图像,CSS和JS等静态内容,该标题成为同一用户重复访问的最重要的带宽节省的最重要的来源。 但是,没有单一的缓存控制配置,适合所有静态资产。一些静态资产变化了很多,而其他静态资产根本不会改变。例如,如果一个名为jquery-3.4.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.M的资源存在,并且您确定您将永远不会编辑此文件,则需要某种方式告诉浏览器此文件不会更改。HTTP/2 Server Push chart

Preload Your Host chart Preload Your Host chart

幸运的是,通过新的’不可变’指令,您现在有办法恰好告诉浏览器他一样。如果浏览器看到“缓存控制:Unmutable”用于资产的标题

,这会告诉浏览器文件永不改变,并且浏览器不应该尝试使用条件’if-验证新鲜度文件修改 – 由于’请求。

保存往返时间

并使缓存资产可用于无需重新验证。但是,您需要确保此标题未与一个大多保持不变的文件一起使用,但可能每年一次或两次获得一些编辑,因为在这种情况下,编辑可能无法到达某些用户而没有适当的缓存失效。该标题指令的最佳拟合是开源库,其中版本编号添加为URL的一部分,具有唯一ID或名称的用户上传的图像,以及获得U的CSS和JS捆绑包每个变化后的nique网址。

10。 Leverage主机整合

主机整合是通过删除经典和附带域分布开销来加速其客户端的PageCDN到加速网站的方法。您可以轻松使用此方法为您自己的网站。通过这种方法,PageCDN仅利用HTTP / 2协议的多路复用功能,但它以创新的方式执行。

主机整合与域分片技术相反。它取决于HTTP / 2用于并行传递所请求的资源,并通过单个主机(或域)代理所有外部资源,以避免不必要的DNS查找和连接成本。这种保存的连接和DNS查找开销

可以加快移动和桌面用户的网站

paGECDN自动化主机整合和

列出了多种方式它最大限度地提高了这种方法的使用。我们可以使用相同的原理在任何网站上实现相同的行为。避免太多开源CDN。如果您的网站从几个不同的CDN加载多个开源库,请尝试将所有CDN加载到它们。下载和自主谷歌字体。对于WordPress网站,

omgf插件只需点击几下即可为您完成作业。离开旧域分片技术后面并从单个主机加载所有资产,而不是创建用于并行内容传递的分片。让HTTP / 2为您执行并行化。如果您的网站使用来自多个主机的静态内容,请考虑通过单个主机代理所有内容。 11。一种void CSS精灵

‘CSS精灵’是将多个图像组合成一个大图像的技术,并使用CSS在网页上的不同位置显示相应的像素。这曾经是几年前是一种非常常见的技术。

缺点是这使得整体页面结构复杂且减少灵活。此外,即使只需要从中使用箭头,也需要加载大图像,添加到页面的总重量。通过精灵添加另一个图标是耗时的,因为您必须先修改图像并确保它不使用网站其他地方使用的任何像素。这可能导致网站设计中的几个错误。同样,更改从大图像显示图标的一个HTML元素的大小将需要y你要在大图像上调整图标的大小并重新定位在那之后出现的图像上的所有图标。

这是复杂的,并且由于HTTP / 2在那里为您做几乎同样的工作来产生几乎没有好处。 HTTP / 2可以在相同的连接上复用几个请求和响应。不使用CSS精灵的另一个好处是,只有此类图像或图标加载页面绝对必要的页面。浏览器甚至可以在折叠图标上方优先考虑并将它们留在折叠图像下方以供以后,进一步加速页面加载。

所以,如果您为您的小型图像使用’CSS Sprites’,则更好地让他们自由加载,让浏览器决定如何在一次要求的请求中优先考虑,并且还有一次要求哪一个。

12。经常更新

WordPress 5.5将很快发布并将添加

支持图像的本机延迟加载

。因此,依赖于插件使用此功能的站点现在将具有右侧内置的本机延迟加载解决方案。

延迟加载是一个重要的性能优化,在这种情况下,它将可用只需点击键“以更新WordPress到下一个版本的数百万个网站。

更新CMS,插件,主题,工具,服务器软件,语言运行时期,周期性地带来明显的性能改进。例如,新的PHP版本的每一种发布都带来了

相当大的性能改进

,这种趋势似乎在可预见的未来在地平线上与PHP 8进行了可预见的未来

具有新JIT编译器的IP 。对于Node.js的情况,与V8 JavaScript引擎的每个新版本的新速度和内存优化有益于Node.js。 相同适用于像Nginx或Apache这样的服务器软件。目前的服务器开发人员正在处理HTTP命名HTTP / 3的下一个主要更新。 HTTP / 3承诺为使Internet连接更快

,更可靠,更安全。一旦您最喜欢的服务器船舶船舶,请务必应用此更新。

早期版本的软件的性能通常不是很好的优化,因为在这个阶段,速度通常不是首先偏好。但随着该产品变得成熟,开发人员可能会开始更多地努力使其更快地适合更多用户和Compe更好地使用替代选择。因此,作为每块软件的新版本都提供了可用的,更新以避免错误,可用安全修复并使您的堆栈更快地进行更新。结论

Pagespeed工具在建议可能的性能陷阱方面做得非常好,它留下了一些优化,可用于获得可用工具和技术的最大值。我试图涵盖我所知道的所有这些优化。我还涵盖了一些您可能需要知道的其他事情。所有这些都可以帮助您在比赛中保持您的网站。