记一次博客优化

233，本次博客优化主要对网站的层叠样式表（CSS）以及字体方面做了微调。

🎨 层叠样式表

为了使页面更快响应，我对网站的层叠样式表做了微调及压缩：目前CSS文件的大小由原来的 243 KB 变为了 221 KB 。

经过本地测试，网站首页CSS的响应速度为 33.96 ms 。

在分页测试中，CSS的响应速度为 11.92 ms。

实际表现虽然不是很理想，但还是比以往要快的。不过受制于CloudFlare CDN的速度，上云的实际速度会比本地测试慢。

✏ 字体

字体方面，由以往单一的 <i>思源黑体 </i> 拓展到 <b>思源黑体+思源宋体+Roboto字体 </b> 一并使用。

网站主体部分以及博客文章方面，标题使用思源宋体（font-weight值为 800），正文使用思源黑体 + Roboto字体（font-weight值为 300）。

字体对比

Google Fonts

1
2
3
4
5

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,200,300,400,500,700,800,900">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:100,200,300,400,500,700,800,900">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,800,900">

功能测试区

Mermaid Flowchart

flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Emojis

😃

Mathjax

$$A = \begin{bmatrix} a_{11} & a_{12} & ... & a_{1n}\\ a_{21} & a_{22} & ... & a_{2n}\\ a_{31} & a_{22} & ... & a_{3n}\\ \vdots & \vdots & \ddots & \vdots\\ a_{n1} & a_{n2} & ... & a_{nn}\\ \end{bmatrix} , b = \begin{bmatrix} b_{1} \\ b_{2} \\ b_{3} \\ \vdots \\ b_{n} \\ \end{bmatrix}$$