大家有什么个人博客前端优化的宝贵经验？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2930 天前的主题，其中的信息可能已经有所发展或是发生改变。

之前用 pelican 建了个静态博客,托管在 UCLOUD 上，前段时间读了高性能网站优化，感觉很受用，对着里面的规则对自己的博客作了优化，今天在百度统计的测试结果如下：

感觉还有一定的优化空间啊，大家有什么前端优化的经验了？一起探讨探讨。

大家可以点击我的博客测试一下，看看速度体验如何？

博客

优化

Pelican

探讨

31 条回复 • 2016-11-27 11:34:49 +08:00

kamal

2016-11-23 16:12:00 +08:00

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.metaquant.org%2F&tab=desktop

kamal

2016-11-23 16:16:06 +08:00

还没说完，发出去了。
楼主做的不错了，根据谷歌的建议，再压缩代码，启用缓存什么的也提升不了多少了。

主要的问题是这里

但是你用了 bootstrap ，已经不方便优化了。
看你用到 bootstrap 特性不多，博客也挺整洁（简单）的，自己写代码能省掉这里大部分的请求。打开速度应该可以在 1 秒中内。

metaquant

2016-11-23 16:24:08 +08:00

@kamal 感谢，这应该是后期优化的方向，几个多余的字体文件占用了不少时间，虽然这已经是启用了七牛 CDN 与 GZIP 之后的结果了

kamal

2016-11-23 16:25:58 +08:00

一点不成熟的意见而已。
还有我说的不是加载时长，是时机，第一个红框的内容，完全可以在绿色的线后面的。

ferrum

2016-11-23 16:30:12 +08:00

已经很快了，还要快的话，大概只能从资源出发了。加载 Web Font 很费时间，可以考虑用 Windows 和 Mac 上都有的 Georgia 代替，配合楷体，效果也过得去。

xiaoz

2016-11-23 16:32:22 +08:00

有个 js 文件加载略慢，如下截图： https://img.bsdev.cn/uploads/1611/230431475448.png

metaquant

2016-11-23 16:38:44 +08:00

@ferrum 感谢，考虑 Georgia ，不过不太喜欢，不好意思，有点排版强迫症

metaquant

2016-11-23 16:39:31 +08:00

@xiaoz 是的，那个 JS 文件体积太大，考虑后期还要再压缩一下

metaquant

2016-11-23 16:41:12 +08:00

@kamal 好的，后期再研究一下，看了你的博客，原来是前端优化的专家啊

kamal

2016-11-23 16:55:02 +08:00

汗，最近这方面的文章看的多了一点而已，不是专家艾。

bdbai

2016-11-23 18:43:22 +08:00 via Android

专家？
@qgy18

shyling

2016-11-23 20:14:36 +08:00 via iPhone

我觉得快慢不太重要。。。

metaquant

2016-11-23 20:23:26 +08:00

@bdbai JerryQu 的博客确实厉害，首屏不到 100KB ，只有 7 个请求，我前些天一直用它测速对比来着

adminsvv

2016-11-23 20:42:30 +08:00

@metaquant 他那个 ssl 优化是真的屌

bdbai

2016-11-23 21:39:00 +08:00 via Android

@metaquant 静态资源丢 localStorage 大概只有他想得出来

metaquant

2016-11-23 21:55:05 +08:00

@bdbai 这一点我一直奇怪来着，为什么会没有静态文件？他博客里有写怎么做的吗？

bdbai

2016-11-23 22:04:05 +08:00 via Android

@metaquant https://imququ.com/post/wpo-of-mobile-web-1.html

metaquant

2016-11-23 22:12:43 +08:00

@bdbai thanks

liuxingou

2016-11-23 22:13:00 +08:00

@metaquant

主题很赞啊，给个 link 啊~

metaquant

2016-11-23 22:19:25 +08:00

@liuxingou 感谢支持，我在[About]( http://metaquant.org/pages/about.html)页面介绍了，这个主题是我自己在 Bootstap Flat UI 主题上修改而成的，取名叫 Zening,做了很多定制，可能不太通用，感兴趣的话可以点击 ABOUT 页面里的链接下载

yhxx

2016-11-23 22:30:59 +08:00

此处应 @qgy18

tSQghkfhTtQt9mtd

2016-11-23 22:55:06 +08:00

@yhxx 这种 topic 一律 @qgy18 https://imququ.com

aisin

2016-11-23 23:03:55 +08:00

我的也很快呢： http://geek100.com/

qgy18

2016-11-23 23:54:18 +08:00 via iPhone

@metaquant 有静态资源的，第一次 inline 并存在 localstorage 里，后续从 ls 读。这种做法很常见的，很多公司线上服务都在用。原理介绍：
https://imququ.com/post/wpo-of-mobile-web-1.html

下面是我们写的编译工具，不过暂时没啥文档。
https://github.com/stcjs/stc-localstorage

metaquant

2016-11-24 07:15:36 +08:00 via iPhone

感谢大神回复，看了文章后明白些了，不过静态博客没有 server-side logic ，这个优化似乎暂时做不了吧，以后做其他动态博客的时候再尝试吧

lan894734188

2016-11-24 07:49:12 +08:00 via Android

静态化 cdn 分发请求缓存

des

2016-11-24 08:54:28 +08:00 via Android

我说一句，如果能两秒内打开。
网站内容明显就要重要多了

metaquant

2016-11-24 10:02:53 +08:00 via iPhone

@des 有一定道理，不过只要速度提升不影响内容呈现的话，这应该是两个层面的问题

metaquant

2016-11-24 10:06:08 +08:00 via iPhone

这些工作都做了一些，当然还可以进一步提升

des

2016-11-24 12:20:56 +08:00 via Android

@metaquant 层面的确是不一样的，但是时间只有一次，除非你能带三个表

ioREQcom

2016-11-27 11:34:49 +08:00

百度 MIP 和 Google AMP 是新一代的加速方案，可以参考
http://www.uoota.com/blog/archives/12219?v2ex