简单实用的提示，可让您无需浏览Google PageSpeed和Lighthouse指标即可最大化您的网站。
Java脚本- 代替JavaScript，尝试更频繁地使用HTML5标签：<input type = date>，<input type = time>， Details / Summary等。
我们通常会忘记甚至根本不了解内置在浏览器中的现成解决方案，这些解决方案可以在不同设备上更好地工作，并且不需要其他JavaScript代码。 - 使用JavaScript代码的精简版。
- 尝试将所有JavaScript代码置于页脚或延迟加载，并且<head>中的JavaScript越少，Google PageSpeed的性能就越好。
- <script src =“ file-path”>需要对服务器的其他访问，请记住这一点。
如果不是JavaScript文件，请在页脚中插入文件内容：
<script> </script>
这样，第一次下载会更快，但是不会缓存JavaScript文件。
延迟加载- 对图像，iframe，视频，音频，javascript和其他类似对象使用延迟加载（延迟）。 对于弹出窗口中或页面第二个和下一个屏幕中的元素，应包括该元素。
为此，有许多库：lazyload，lazysizes，autoload等。 - 您可以在Chrome中使用本机延迟加载 。
- VK提供了将JavaScript代码连接置于<head>中以便其注释小部件正常工作的方法，但这会降低Google PageSpeed和页面加载速度。
代替VK提供的代码：
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
将稍作修改的代码粘贴到延迟下载下：
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
结果，我们得到一个仅在屏幕滚动到窗口小部件时才加载的代码。
Google提供的嵌入在网站上的地图代码：
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
如果该卡位于弹出窗口或页脚中很远的地方，那么访问您页面的人将立即开始从此框架加载很多额外的东西，并且该页面的下载速度将非常慢，Google PageSpeed会给您带来很大的负面影响！
将稍作修改的代码粘贴到延迟下载下：
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
归结为没有立即给浏览器src =“”，而是仅在一个人真正需要它时才给它。 所有的对象都这样！
jQuery的- 如果可能，请不要在您的项目中使用Jquery，这将大大提高网站的速度，但是，如果您已经在使用它，请逐渐将其替换为纯本机JavaScript。
- 如果将Jquery连接到<head>，则这将阻止页面的显示，因为浏览器将一直等待，直到<head>中的所有内容都被加载，然后才显示页面。 但是由于图书馆本身很小，而且每个人的互联网都很快，因此这对速度几乎没有影响；如果降低评分，Google大约是0.5，尽管在此之前我的得分是10或20分...
- 由于阻塞了显示，最好将您编写的所有jquery代码或使用的jquery库放在站点的页脚中。 如果您无法将其转移到页脚，那么也许您应该使用延迟执行代码，有关该主题的文章： 在包含jQuery之前安全地使用.ready（） 。
字型- Google字体
- 如果Google很久以来一直在连接字体，请确保再次连接字体，因为URL中存在＆display = swap很重要-这是一个会影响Google PageSpeed的新选项，它允许您在加载字体之前在页面上显示文本...并不总是很漂亮，但是它会增加网站显示速度...并影响Google PageSpeed
- 如果可以用您自己的字体替换Google字体，然后这样做，最好是将字体放在服务器上，这也可以提高速度。
- 在Google字体上选择字体时，请尝试选择最少的选项，仅选择所需的内容，如果您在网站上不使用倾斜字体或粗细为200的字体，请不要在设置中选择该字体，因为这会影响下载速度。
- 自定义字体
- 检查CSS样式的字体显示：swap; 在您的字体中，Google PageSpeed会注意这一点，并低估了这种样式是否值得：
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- 如果您通过单独的样式表连接字体，这会影响首次呈现的时间并降低Google PageSpeed的性能，最好不要这样做：
<link href="/fonts.css" rel="stylesheet">
如果通过<style>标记而不是通过<link>将字体连接插入到<head>中，则将提高Google PageSpeed的下载速度和性能，因为浏览器不需要分别访问样式表：
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- 如果可能的话，请从字体文件中删除所有不需要的不必要的东西，以提高下载速度。
- 您可以分两步执行字体加载： 为CSS-Tricks开发鲁棒的字体加载策略
的CSS- 尝试摆脱旧浏览器的多余CSS代码，包括前缀-moz- -o- -ms- -webkit-
- 尽量不要加载此页面上未使用过但该网站其他页面上已使用过的样式。
- 如果可能的话，值得通过延迟加载来加载CSS和HTML代码。
- 使用<link href ='st.css'rel ='stylesheet'>加载样式会减慢第一页的加载及其呈现速度，但使浏览器可以缓存此文件。
如果您对每个页面都有独特的样式，或者对您来说更重要的一点是第一页的加载速度更快，那么我们将插入样式标签而不是文件：
<style> </style>
- 使用CSS缩小，例如Cssresizer或其他类似工具。
的HTML- 页面上的HTML标签越多，浏览器呈现页面所需的资源就越多，并且这会影响Google PageSpeed的性能，但前提是您的页面中标签太多了。
- 避免过多嵌套HTML标签； Google PageSpeed也对此予以注意。
- 值得从旧版浏览器的代码中清除HTML，因为通常这种代码会创建大量额外的嵌套标签。
- 标签和嵌套的数量尤其会严重影响移动版Google PageSpeed。
图片- 使用<picture>标记可使用现代图像格式（JPEG 2000，JPEG XR和WebP）。 如果您没有延迟加载图片，Google PageSpeed会注意这一点。
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
您还可以使用媒体，并用不同的图像替换不同的分辨率和不同的像素密度。
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
这对于图片和视频都很有用。
减：您需要很多空间，因为您将必须存储不同的图像格式（视频）并使用不同的分辨率。 - 对页面上的弹出窗口或第二个和下一个屏幕中的所有图像使用延迟加载。
- 使用最大程度的图像压缩，Google PageSpeed也会引起注意。 有很多压缩工具，例如： compressor.io
服务器设定- 启用静态文件（字体，脚本，图片，css等）的缓存，同时设置缓存的年份，否则Google发誓。
- 启用gzip压缩。
- 使用Last-Modified和If-Modified-Since HTTP标头来缓存页面。
沟通交流- 结果高度取决于您的服务器与您之间的距离。 如果您在夏威夷，而服务器在莫斯科，那么为您带来的结果将是灾难性的。
- 结果取决于您的服务器和计算机，并且如果在测试过程中服务器或计算机超载了某些东西，那么结果将很糟糕。
结论压缩PageSpeed 108或更多点是不可能的:)
在移动设备下压缩100点毫无意义。 我们必须争取100，而不是陷入妄想症！ 这只是对该站点重要的许多指标之一。
您可以看到
一个页面示例，其中手机的指标是97-98，计算机的指标是100。
在此页面上，有2个YouTube视频出现在弹出窗口中，并且仅在打开弹出窗口时才激活该视频。
所有图片均被延迟加载。
所有JavaScript均从页面页脚中的<head>呈现。
但同时，以下各项与<head>连接：Jquery，GoogleFonts和Yandex（Google）计数器。
将样式插入样式代码的<style>标记</ style>中。
在此页面上不使用<picture>。
页面上存在许多部分，但是只有通过直接链接到客户才能访问这些部分，需要按需加载它们，这将减少html和css代码的数量。
感谢您的关注！