本站(fakedev.com)细节优化记录

下面是本站的一些小改动,简单的记录下,前端方面个人主观审美就这样,轻喷 😄。

2020-02-03:

更改外链资源地址

本来外链资源在阿里云 OSS,不知为什么,过年期间有一段时间竟然无法加载。某些地区的联通网络无法加载,这让人很吃惊,它不是所有的 OSS 都不能加载,而是只有本站对应的二级域名的 OSS 外链资源无法加载 🤔,真奇怪,不过后来好了。

但是这次莫名其妙的状况,让我想出了一个很尬的操作,我想用 Cloudflare Worders 来代理加载阿里云 OSS 的外链图片。怎么实现呢?基本上就是用 JavaScript 的 fetch API 来获取阿里云 OSS 上的资源,然后返回给浏览器,具体不在这儿写了。

这个骚操作其实是负优化,因为图片多转了一次,而且对于国内来说,Cloudflare 速度肯定比不上阿里云的。另外,还给这些静态资源带上了 cookie 😕,这也让本站在测速服务上产生了扣分项,如此一来,就做不到 100 分了。

前后网址对比如下:

https://fakedev.oss-cn-hangzhou.aliyuncs.com/images/taxonomy/hugo.png    #之前
https://images.faas.workers.dev/taxonomy/hugo.png    #现在

2020-01-21:

文章内部样式小更改

  • 微调文章内小标题背景色

渐变背景颜色数值稍微改了下。

  • 文章内部 ul list 样式

感觉不太喜欢默认的黑色圆点,使用 pseudo element 改成了左右箭头。

2020-01-20:

增加 Favicon

之前模板写的比较匆忙,很多细节没处理,比如 Favicon,现在把它丰富一下。

Favicon 也是一个体现站点是否注重用户体验的细节,而目前的设备多样性,要求站长能尽可能的考虑到各种设备屏幕的适配,PC、平板、手机,安卓、iOS、Windows等等,我们要尽可能把各种平台都照顾到。

本站之前推荐过一个比较全能的 Favicon 生成服务(Favicon Generator),请见:网站 Favicon 自动生成,全平台解决方案,本站也是用的这个服务生成的 Favicon。

<link rel="apple-touch-icon" sizes="180x180" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/favicon-16x16.png">
<link rel="manifest" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/site.webmanifest">
<link rel="mask-icon" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="FakeDEV">
<meta name="application-name" content="FakeDEV">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-config" content="https://fakedev.oss-cn-hangzhou.aliyuncs.com/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

修改部分字体大小

之前文章列表页的文章提要部分字体有些太小了,改大一点,不过目前也不是很大。另外把菜单栏字体也稍微调大了一点。

2020-01-17:

文章列表缩略图的处理

文章列表缩略图尺寸修改,之前为大尺寸图片放在阿里云 OSS,然后在调用时顺便使用 OSS 的自动处理功能截取为 90x60 像素的 .jpg 图片,后来觉得不如直接在本地自动处理完毕,直接传到阿里云 OSS。

另外,阿里云 OSS 好像没法设置一个全局的 cache-control,只能手动添加,这个如果文件数量大的话,不可操作。好像 SDK 有上传时自动添加的设置,但是对于我这种只想使用 OSS Browser 来简单的上传下载的人来说就不行了 🤔。

另外,文章列表缩略图具体尺寸是固定的 88x58 像素,外加边框的话是 90x60 像素,之前没注意,就是觉得不太清楚,原因就在这,之前的图片实际是 90x60 像素,但是却以 88x58 的尺寸来显示,所以模糊了。这次重新生成的缩略图正好是 88x58 像素,也就不模糊了。这也是 box-sizing: border-box; 的效果,只是之前忘了。

文章缩略图对比

关于 GTmetrix 测速网站 YSlow 项目的分数

【注意:分数仅供参考,追求满分没意义】

GTmetrix 是一个比较常用的网站测速服务,因为本站纯手写加纯静态,比较 minimal,所以使用 GTmetrix 测试时得分基本上在 100%。但是其中 YSlow 下面 Add Expires headers 这一项在 98%。

YSlow 截图-1

都 98% 了,为什么不直接 100% 呢,看着多舒服。其实我是故意不想缓存 css 文件,因为我经常改动,而且本身这个文件也不大,放在阿里云国内加载起来其实没什么问题。

那么到底设置成多少才算是 far-future 呢?无聊的我开始测试,其实网上也能搜到,应该是整两天,也就是 48 小时(172800s),经过我的几次测试,确实是,如果 Cache-Control 设置成 max-age=172800 它还会提示不够长,但是如果设置成 max-age=172801 就不会了。

阿里云 OSS Cache-Control 截图

Response Headers Cache-Control 截图

如果你也想要这项变成 100%,那么把它提示的文件改成大于 172800 就可以了,当然还是要根据实际。我这个纯粹是要 100% 看着舒服,本来我不在乎这个最佳实践的,因为我知道情况特殊。

YSlow 截图-2

另外,其实测速网站列出的很多项目,虽然总体上是最佳实践,但是有时自己的网站真的没必要这么做,所以还是要结合自己的实际情况。比如我使用了阿里云 OSS,而且只针对国内用户,而且流量也很小,那么就这几个缩略图加不加 CDN,其实真没什么大不了,因为压根也不会有明显区别。所以,我直接把阿里云的域名定义为 CDN 了,这也是为什么没有减分 😄。

文章缩略图添加 alt 属性

图片加 alt,谁都知道,只是刚开始写时懒得没加,这次加上。另外,对于有些小图标加不加 alt,还涉及 WAI-ARIA,详细可参考 https://www.w3.org/WAI/

去掉首字母变大

/* article .content-self::first-letter {
  font-size: 2em;
} */

感觉没必要,不要了。