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

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

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

重要的登陆页面通常很简单，使用自定义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%。