对于在更新Google PageSpeed之后遇到各种问题并因客户或老板的主张而感到困惑的人来说，这篇文章将很有趣。 以及那些进行网站优化的人。
首先，值得一提的是，在我看来，
本文中的所有内容都非常能干且易于使用。
我本人将添加更多
实用建议，并且倾听您的观点并查看最佳实践也将很有趣。
我将在本文中列出我要谈论的内容：
- CSS和JS
- 字型
- 图片
- 不同的格式（jpg，png，webp，base64）
- 精灵
并且，如果您直到现在仍在关注本文，那么您很可能会感兴趣（或者“后退”按钮已为您关闭），下面是有关每个项目的详细信息。
CSS和JS
s- 插件脚本（jQuery除外）的async属性将是必需的。 这肯定会使您摆脱GPSpeed关于异步脚本加载的评论。
- 建议是司空见惯的，但它非常明智-尽量减少使用复杂且庞大的库。
- 最好将一个执行不同任务的js库设置（滑动，fancybox）或一小段代码上传到一个文件中。 就我而言，用于发送邮件的脚本，用于输入和动画的掩码以及所有内容都在同一个build.js文件中（我也将其设置为async） 。
- 这个建议是有条件的，即看情况。 如果在第一个屏幕上打开页面后立即运行某种脚本，那么将其单独连接而不给它异步将是更正确的选择
的CSS- 这里有点复杂。 您将需要在链接标记中添加这样的属性。
<link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>
通过这种形式，您的css文件将仅在DOM树之后连接。 粗略地说，这仅适用于.css 异步 - 非常重要和有效的建议！ 他增加了5到10分。 您需要将main.css分成两个文件 。 在第一个页面中，只有那些为打开页面后立即可见的内容加载的样式。 这是顶部栏，标题，第一张图片，第一张表格等。 通常，您在网站的“面孔”上放置的内容。 第二，其他一切都已经存在。
字型
我发现了字体的新CSS属性
font-display
具体来说，它的
swap参数无需等待漂亮而笨拙的字体加载，就使用同一浏览器中内置的字体（例如，sans-serif）在浏览器中显示文本。 这将立即消除GPSpeed中的错误之一。
看起来像这样
@font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
还有一个这样的脚本（您需要连接fontfaceobserver.js进行操作）：
<script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script>
就个人而言，我并没有真正的帮助，但是您可以尝试，也许可以更好地控制它。 毕竟，我在茫茫人海中找到了他，人们说这确实有帮助。
字体连接
- 基本上有两种类型的连接-使用链接（例如，指向Google字体或在服务器上本地链接）。因此，关于第二种方法，它也可以分为2：单独的CSS文件（使用链接，我们连接fonts.css ），并直接通过代码（通过style.css）。
而且，由于我们现在正在讨论的是为GPSpeed优化站点，因此我确保最好通过主CSS文件连接字体。 - 另一个有用的技巧是将字体文件（woff，ttf等）放在请求它的css文件旁边。 我以前在服务器上有一个单独的字体文件夹，但是后来我将其字体下载速度提高了2倍。 （根据GPSpeed，之前连接Muller字体花了180毫秒，现在是70-90毫秒）
图片，图片等
我保证接下来的两个技巧，它们不仅对我有帮助，而且对整个办公室甚至我的朋友都提供了远程帮助。
1.使用惰性加载绝对下载所有
<img >图片。 看起来像这样
<img class="yourClass lazy" data-src="../images/image.jpg" alt=""/>
并且不要忘记连接
lazyload.min.js2.如果页面上有很多
sv g元素，则最好
使用干净的代码添加它们，而不要不必要地使用img标签。 另外，需要压缩svg，例如，使用此网站
jakearchibald.imtqy.com/svgomg （非广告）。
3.整理，但不要忘记挤压网站上的所有图片。 即使是那些重5kb的文件。 尽管您赢得的这3 kb不会以任何方式影响下载速度，但您将摆脱GPSpeed上的错误，最多可增加10分。
！ 现在的问题是图像格式。 即，我们关注
webp，JPEG 2000，JPEG XR 。 实际上，现在它是推荐的GPSpeed扩展之一。 如您所知，某些浏览器仍不支持它们，其中包括颇受欢迎的Mozila Firefox。 尽管他们宣布
三月份将完全支持这种格式，但我们仍然需要等待一年，直到该浏览器的所有用户都更新到最新版本...我在大量站点，大量脚本中翻阅，但我没有发现任何明智的选择。 现在是时候问您一个问题：您使用的是webp格式还是其他任何新的图像格式？ 那你怎么做？