搜索

如何提高网站的页面加载速度

web前端开发

共 4037字，需浏览 9分钟

 ·

2021-04-19 10:13

英文 | https://javascript.plainenglish.io/how-to-improve-your-websites-page-load-speed-8fa81caf3ed2
翻译 | 小爱

如果你曾经遇到过网站加载缓慢的问题，那么，你今天需要来了解一下页面速度如何影响用户体验。没有人愿意等待10秒钟甚至更长的时间来访问他们正在寻找的信息或者网页。
快速加载的页面具有更好的用户留存率和更低的跳出率，并且更快地赢得了用户的信任。
无论你的设计或内容有多强，如果你的网站加载速度过慢，用户都不会在你的网站上投入更多时间。
有数据研究发现，延迟一秒钟的电子商务网站，“页面浏览量将减少11％，客户满意度下降16％，转化次数减少7％”。
因此，网站的用户体验非常重要，Google会积极跟踪负载速度指示器，例如大内容涂料（LCP），首次输入延迟（FID）和累积布局偏移（CLS）。必须在三个因素上取得良好的成绩。你可以通过Google Search Console中的核心网络生命力报告来衡量网站的效果。

3种测量页面速度的工具

你必须先了解自己的效果如何，才能优化网站速度。你可以使用三种简单的工具来完成这项工作：

1、Google Search Console

尽管从技术上讲它不能衡量站点速度，但是，你可以使用新的核心网络生命力报告来查找需要解决的加载问题。Google Search Console将为你的整体网站评分，并为你提供需要优化的URL列表。

2、PageSpeed

由Google开发的PageSpeed Insights是一个站点速度测试仪，能够识别潜在的负载速度问题。输入要检查的URL即可，该工具将对你的站点进行爬网并创建完整的报告。
该工具将生成“桌面和移动”得分，以及一些优化页面的建议。这是我们的目标：


这是我们需要避免的事情：

3、GTmetrix

如果你需要更高级的功能，或者要在特定位置测试页面速度，GTmetrix是一个有用的工具。
它将测试来自不同位置的网站的页面加载速度，因此，你可以专注于在目标地理位置内增加网站的用户体验。高级设置工具非常有用。你可以设置位置，设备，屏幕分辨率等，以执行更准确的信息。

改善网站页面加载速度的8个步骤

在不了解基础知识的情况下，让我们探索提高站点加载速度的八种方法：

1、优化图像

在谈论针对站点速度的图像优化时，我们指的是三件事：

图像文件大小

图像是添加上下文，解释复杂主题或只是在内容块之间提供喘息空间的好方法。但是，沉重的图像会减慢你的页面加载速度。
你应该将文件的大小尽可能地缩小。大图像的好标记是每幅图像150kb至500kb。毕竟，你可能会有几张图像，它们都会对你页面的整体大小有所帮助。
如果你需要压缩它们，TinyPNG是一个很好的免费工具，可以开始使用。只需从服务器下载图像，对其进行压缩，然后重新加载。
提示：借此机会优化其名称，alt属性和格式。

文件格式

创建内容时使用PNG图像并不少见。毕竟，它们更易于处理。
问题是这些是较重的图像类型，导致加载速度较慢。在不对图像扩展进行全面讨论的情况下，我们建议使用JPG。这些已成为网络上图像的标准格式。它们不会丢失图像数据信息，损失图片质量，并且图像文件很小。
注意：WebP是一种备受关注的半新格式。这种格式非常轻巧，比JPG轻33％。不利之处是该格式仍与某些浏览器存在兼容性问题。

图片尺寸

是的。你的图像分辨率很重要。但是，除非它覆盖了用户的所有屏幕空间，否则你实际上并不需要4000 x 4000像素的图像。
确保上传的图像在缩放时不会失去质量。即，文章上最常见的是800 x 1200的图像。
此外，你必须在image标签内直接声明图像的尺寸。浏览器将计算图像在加载之前需要“保存”的空间，从而减少页面的CLS（累积布局偏移）。
你可以添加width和height属性。例如：
<！—设置640：360，即16：9的长宽比→
<img src =“ puppy.jpg” width=“ 640”  height=“ 360” alt =“带气球的小狗” />

2、缩小CSS和JavaScript

最小化CSS和JavaScript文件旨在减少浏览器加载显示网站所需的每个元素所花费的时间。
由于机器对样式选择不敏感，因此我们可以通过删除空格，删除注释，使用较短的名称，以及基本上除去我们的机器运行它，所不需要的任何代码来创建较小尺寸的文件。
当然，你不想缩减正在使用的实际代码，因为它将变得几乎无法阅读。
你想创建文件的缩小版本，然后在你的实时项目中实现它们。为此，我们建议使用两个简单的工具：
  • https://cssminifier.com/
  • https://javascript-minifier.com/
这些简单易用的工具只需要你在“输入”框中添加代码，然后单击“缩小”即可将代码转换为可复制并粘贴到项目上的缩小版本。
提示：除了缩小文件之外，你还可以启用Gzip压缩以进一步减小文件大小。

3、当心第三方脚本

如果你使用的是Google Analytics（分析）之类的工具，那么你已经在使用第三方脚本。
这些脚本对于将新功能添加到你的站点非常有帮助。但是，它们仍然是需要在客户端渲染或读取的代码片段，从而增加了页面速度的加载时间。确保要添加的代码经过优化且必不可少。删除所有未使用的东西。

4、使用VPS托管服务

你的托管服务提供商使用的服务器对于你的站点速度至关重要。如果机器对用户请求的响应速度很慢，则无论用户的互联网连接速度有多快，浏览器都会缓慢接收信息。
另一个因素是你使用的计划。通常是共享计划是廉价的，因为托管服务提供商会为多个客户端租用同一台服务器，这对于流量低的站点来说绰绰有余。
但是，如果你确实需要提高站点速度，则需要从服务器访问更多资源。更重要的是，你将需要站点可访问的资源数量保持一致。
首先，我想到的是专用服务器。你基本上是在为自己租用整个服务器。但这可能会很昂贵，而且对于大多数用例而言，它远远超出了你的需求。
本质上，托管服务提供商在服务器的操作系统上创建一个层，使你可以完全控制虚拟机的资源，并将其与其他用户分开。这样可以防止其他站点从你的资源中获取资源，并允许你以所需的方式自定义服务器。

5、使用内容传送网络（CDN）

就像我们在上面指出的那样，你的托管只不过是一台存储你网站数据并在浏览器发出请求后就通过Internet传递数据的机器。
对于你的网站速度而言，意味着你的托管距离用户越远，传递数据所需的时间就越多。这就是CDN或内容交付网络发挥作用的地方。
简而言之，CDN是一个遍布全球的服务器网络，可将你的站点资产（例如图像，HTML文件，JSON文件等）从最近的服务器传递给最终用户。
你可以在其中找到一些选择，但是如果你急于赶快，建议你探索Cloudflare。
如果你不使用内容传送网络，则它可能是你获得的最快捷径。

6、推迟JavaScript加载

当你的网站加载时，浏览器会下载你的网站所需的所有文件，包括JavaScript文件。
但是，你的主要重点是向用户提供他们想要在页面上看到的信息。这就是为什么推迟JavaScript对缩短页面加载时间如此有用的原因。
简而言之，延迟文件可防止在加载其他（更重要的）元素之前将其加载。你可以先加载HTML和CSS，以便用户可以更快地访问内容，然后才加载脚本，以添加你为页面设想的额外功能。
你可以使用defer属性来执行此操作。这是有关如何使用defer有效加载JavaScript的深入指南。
提示：另一种有效加载javascript的方法是在关闭body标签之前添加脚本。这将使浏览器在获取并执行脚本之前先解析整个站点。

7、启用浏览器缓存

每次用户访问你的网站时，浏览器都需要下载构成你页面的所有文件。如果可以使浏览器存储数据，以便下次用户键入URL时，浏览器已经具有显示其内容所需的所有信息，该怎么办？
为此，你需要通过设置资产的过期日期来从.htaccess文件中启用浏览器缓存。
这将告诉浏览器，将这些文件保留到设置的时间。
注意：这是增加网站回访用户加载速度的好方法。

8、使用延迟加载

现在，让我们减少首次访问者的加载时间。
我们要使浏览器在加载页面其余部分之前首先呈现页面顶部（在折叠内容上方）。
因此，浏览器将确保用户看到的网站的第一部分立即加载，而不是等待所有图像和视频加载以使页面具有交互性。这个过程就是我们所谓的延迟加载。
我们可以使用图像和iframe中的loading属性来本地实现它。
<img src=”myimage.jpg” loading=”lazy” alt=”…” /><iframe src=”content.html” loading=”lazy”></iframe>

这些属性将告诉浏览器，仅在用户滚动到元素并且现在在视口上可见时才下载元素。

结论

当然，这些并不是改善网站性能的唯一方法。

实际上，还有其他方法，例如使用预取技术来告诉浏览器提前获取某些元素。但是，经过这8个步骤后，你网站的页面速度应该比最佳速度还要好。

尽管网站速度对于降低跳出率和增加用户留存率至关重要，但是，例如，在PageSpeed Insights中达到85-90后，你将看不到任何明显的好处。在对网站进行基准测试并明智地投资资源时，请记住这一点。

我希望今天的这个内容，对你很有用。如果你有其他想法，或者觉得我们应该讨论其他方法，请务必在留言中告知我们。

感谢阅读。

学习更多技能

请点击下方公众号


浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
原创丨如何大幅提高 Django 网站加载速度
FightingCoder
0
如何让网站加载速度变快（干货！）
前端下午茶
0
fast4web改善页面加载速度
fast4web 是基于 jQuery 的 Web 页面优化方案，按照移动端优先、速度优先的原则，
fast4web改善页面加载速度
fast4web是基于jQuery的Web页面优化方案，按照移动端优先、速度优先的原则，对于改善页面加载速度有很好的效果，特别是配合CDN服务后，基本上可以达到首屏秒开的效果，而且本方案有利于解决百度
如何提高爬虫速度?
大家好，欢迎来到 Crossin的编程教室 ！今天在浏览知乎时，发现一个有趣的问题：如何优化 Python 爬虫的速度？他的问题描述是：目前在写一个 Python 爬虫，单线程 urllib 感觉过于慢了，达不到数据量的要求（十万级...
如何提高Python的运行速度？（干货）
恋习Python
0
Python技巧：如何提高爬虫速度？
菜鸟学Python
0
initializr-websiteinitializr​ 的网站页面
initializr的网站页面。
fakeLoader.jsjQuery 页面加载
fakeLoader.js 是轻量级的 jQuery 插件，帮助你创建动态的全屏加载掩饰微调效果，模
fakeLoader.jsjQuery 页面加载
fakeLoader.js是轻量级的jQuery插件，帮助你创建动态的全屏加载掩饰微调效果，模拟页面预加载的效果。在线演示
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报