ZAČÁTKYNÁVODYOOPDOKUMENTACE
教程/
来自实践的经验

如何有效优化页面加载速度

15. 10. 2021

Obsah článku

当我旅行时,我经常会遇到网络连接不畅的情况,作为一名网页设计师,这让我思考设计原则,以解决网络速度问题,即使是在连接不畅的情况下。

我从实践中总结出了一些有用的技巧。

重要的登陆页面通常很简单,使用自定义CSS样式是有好处的

例如,CMS的登录页面通常非常简单。一个简单的表单真的需要下载整个Bootstrap和其他CSS/JS框架吗?重要的页面是值得优化和编写本地代码的。

一旦页面完全呈现,我们会有几秒钟的时间让用户填写他们的详细信息,我们可以在后台下载并缓存浏览器中的剩余样式。当用户登录时,他们可能已经下载了Bootstrap(如果他们是在Edge上,他们就不会......)。

我们可以经常使用表情符号来代替图标

真的!表情符号有很多实用的优点。

  • 它只占用了4个字节,所以它胜过任何图片。
  • 它从来没有下载失败,所以用户总是看到至少有一个图标,而不是一个空白的空间
  • 以用户的视觉风格显示
  • 目前已经拥有广泛的设备支持
  • 节省了服务器请求,我们不必处理从哪里获得图片的问题(这可以通过CDN进行优化,但为什么,对吗?)
  • 很多图标你可能不想去处理。例如,从哪里获得你想在管理中显示的所有国家的国旗图标?使用表情符号: https://github.com/bara.../country/blob/main/flag…

在加载网站时直接在HTML中使用关键样式

我有时会把定义页面布局和基本布局的重要CSS样式直接放进HTML中。 我把限制为1KB,我尽量把它放进去。这种方法的缺点是,样式必须在每次请求中传输,不能被缓存,另一方面,它们的下载速度比图像快得多。

我不是这样一个关于加载速度的专家,[Martin Michalek](https://www.programia.cz/rozhovor-martin-michalek…

使用ajax!

我总是使用ajax来检索不重要的或缓慢的内容。它给应用的技术要求增加了一点,但我可以负担得起。

一个使用ajax的好地方的例子是几乎所有的管理。很多时候,有很多数据需要检索,但用户对所有的数据都不感兴趣。当用户只下载了一个薄的javascript客户端,所有的数据都是通过Vue和json获取的,只有最小的数据量被下载,而且响应是即时的。

如何在Vue中做到这一点:https://vue.baraja.cz/api-a-ajax-ve-vue-js

在后端,我使用Nette的库:https://github.com/baraja-core/structured-api

使用一个合适的CDN

对于静态内容发布,我建议所有类型的网站都使用CDN。如果你不知道如何设置CDN,至少可以在代理模式下使用Cloudflare。它将根据HTTP头信息自动将静态内容缓存到自身。并非每个主机提供商都能很好地设置Pops,对于长路线来说,这将在每次请求中为你节省数百毫秒的时间。

合适的图像格式

我的一个后辈最近在网站的主页上放了一张PNG图片,里面有一张照片,占了3MB。他说没问题,因为页面在他的连接上加载得很快(在他家里的光缆上也是如此,不是吗......),另外他说我们现在传输的数据很多,比如视频。

我在这方面是个老古董,能优化就优化。

照片转为JPG,或更好的WEBP。但将图片保存为JPG并不意味着什么,你需要通过优化服务来运行它:https://tinyjpg.com

如果你在Git上有图片,这个工具可以自动压缩它们,并发送一个拉动请求:https://imgbot.net。当添加新的图像时,它再次发送PR。

如果你需要压缩数以千计的图片(如网站上的整个产品库),我使用Mac的一个桌面应用程序来做:https://imageoptim.com/mac

适当地压缩图像通常会节省最多的数据。有时甚至是50%。

Jan Barášek   Více o autorovi

Autor článku pracuje jako seniorní vývojář a software architekt v Praze. Navrhuje a spravuje velké webové aplikace, které znáte a používáte. Od roku 2009 nabral bohaté zkušenosti, které tímto webem předává dál.

Rád vám pomůžu:

Související články

1.
3.