V4if 's Blogwebsite

博客启用全站HTTPS

发表于2016-10-06
默认

https_is_coming
可以看到网站左上方https绿色的小锁,启用全站HTTPS

为支持全站HTTPS做的一些改动:

cloudflare 全站https解析
多说新浪头像sinaimg采用默认微博logo
去掉百度云分享链接,所谓有得必有失
七牛云存储https化,添加图片水印

更新 2016-10-09 11:40:08
由于cloudflare的dns经常被墙,放弃cloudflare全站https解析,改用GitHub二级域名,并相应做了一些加载优化 https://v4if.github.io

全站改版中。。。

1、js、css压缩之后放在cdn上,并设置最大缓存时间,加载一次之后再次访问from cached接近0ms。
2、放弃使用font awesome和font diao的web icon font,加载速度太慢,而且我只需要其中五六个icon > font,却加载了所有的ttf,网络延迟在Network中看的时候每个文件都已经到了5-6秒的样子,整个网站完全加载之后要10多秒。
采用阿里巴巴矢量图标库,只加载自己需要的那几个web icon font。
3、特定页面的优化。
比如首页和文章页的css是分开的,所以首页是不需要加载文章页的post.css文件。
建站日志页面去掉了多说评论,因此对于多说的embed.js也是不需要加载的。
之前为了添加视频对博客引入了video-js,这个加载的时候也是相当的慢,也是需要好几秒的延迟时间,毕竟是个对于部分文章页面的小众需要,于是对于需要引入video-js的文章加一个type: > video-js的属性,只对添加属性的页面加载video-js。
4、css、js加载顺序优化
至于css、js应该放在head标签里面还是body标签结束之前,我的原则是css用到时加载,对页面渲染影响不大的js和css放在body标签结束前加载,如果在head标签里放了比较多的css、js加载会拖慢整个页面的显示。

我在自己的电脑上用chrome加载,先清理掉浏览器缓存第一次加载,整个页面的加载基本都控制在了ms级别,站点图标favicon.ico和新浪的默认加载图标sinaimg.ico还是放在了github上,因此加载会比较慢,整个页面需要2.86s才能渲染完成,相对之前10多秒的样子已经提升了4-5倍左右。

https_is_coming
然后在已经有缓存的情况下加载日志页面情况,可以看到速度已经非常快了,整个页面879ms就已经渲染完成了。

https_is_coming