Typecho默认主题网页性能优化
之前用谷歌网站分析工具PageSpeed Insights在手机端和桌面设备都是100分的，今天测试了一下，有几项需要优化，分数还不到90分，不知道怎么回事，可能打分逻辑改了吧，继续优化。
之前已经对Typecho默认主题改造过很多东西，具体看Typecho默认主题修改汇总，现在又有了新想法，把博客精简到极限，由于我也不懂代码，只能在默认主题上边搜索边精简了，以下做为记录，供以后查询。
去掉侧边栏
这个比较简单，在各个主题php文件里去掉<?php $this->need('sidebar.php'); ?>，然后再把head.php文件里和搜索相关代码去掉，最后再把侧边布局框架去掉，就是各个php文件里的class="col-mb-12 col-8" id="main" role="main”，大概就是这样。
删除侧边栏原因
去掉侧边栏，除了想要精简的外观外，也是想让DOM元素量减少，因为我发现typecho默认主题的侧边栏虽然在手机端不显示了，但网页依然在加载这些内容，只是隐藏起来了，在手机上查看网页源代码就能看到，所以为了让任何设备都快速加载，也必须删除了。侧边栏，目前来看也没什么主要用处，一个归档页面全包含侧边栏的功能了。
避免DOM 元素总数过多
根据谷歌页面提示，大型 DOM 树会以多种方式降低网页性能：
网络效率和负载性能：大型 DOM 树通常包含许多用户首次加载页面时不可见的节点，这会不必要地增加用户的数据费用并延长加载时间。
运行时性能：当用户和脚本与您的页面互动时，浏览器必须不断重新计算节点的位置和样式。大型 DOM 树与复杂的样式规则相结合可能会严重降低渲染速度。
内存性能：如果您的 JavaScript 使用常规查询选择器（例如 document.querySelectorAll('li')），您可能会在无意中存储了对大量节点的引用，这可能会使用户设备的内存容量超负荷。
Lighthouse 使用符合以下条件的 DOM 树标记网页：
当 body 元素所含的节点超过 800 个左右时发出警告。
当 body 元素所含的节点数量超过约 1,400 个时出现的错误。
DOM 元素数量查询
在浏览器开发者工具的控制台里，输入以下代码回车即可查询总数。document.getElementsByTagName('*').length
更详细的查看方式，可以输入这个代码$$('*')
css精简
把Typecho默认主题的三个css文件进行精简合并成一个，方法很简单，手动复制到其中一个css文件里面就行。最后再把head.php文件里的引用链接替换一下。
代码覆盖率
精简css的方法，主要是靠谷歌浏览器开发者工具里的覆盖率来完成的（在网页右键，点击最下方检查即可调出开发者工具，然后点击右上角三个点，选择更多工具，就能看到覆盖率功能了，点击左侧小图标，开始覆盖率检测），代码左侧标红就是当前页面为使用的代码，注意，是当前页面，删除一个css样式前要测试有没有在其他页面应用，确认都没有使用后即可删除，最终css大小为2.4k，Gzip压缩后为1.2k。
代码精简合并
比如可以共用一个选择器的、删除不重要的样式、简写css选择器等等。
代码压缩
等把没用的css代码删除后，再压缩一下让文件更小一些。推荐使用这个在线压缩工具，相比其他工具功能更多，比如有个静化功能，就是把css代码压缩成单行并去除注释，这样即保证了压缩，又不影响可度性。还有一个整理功能，按一定顺序重新排列css属性，也不错。
cdn加速
本来想的是把css和ico图标放到cdn的，后来想想这么小的文件也不值当，而且cdn的hppts请求还是按次计费的，不用比较省心。
缓存设置
在服务器根目录.htaccess文件里添加如下内容，缓存设置的是一年。
<FilesMatch "\.(css|js)$">
SetOutputFilter DEFLATE
Header set Cache-Control "public, max-age=31536000, must-revalidate"
</FilesMatch>
<FilesMatch "\.(ico|gif|jpg|png|jpeg|webp|pdf|flv|mp3|mp4)$">
Header set Cache-Control "public, max-age=31536000, must-revalidate"
</FilesMatch> 缓存说明
- public：这个指令指定响应可以被任何缓存所缓存
- max-age：这个指令指定了资源被缓存的最大时间，单位是秒。
- must-revalidate：这个指令要求缓存在资源超过期限（由max-age指定）之后，必须向服务器发送请求进行验证，以确保资源仍然是有效的。
删除评论相关js依赖
在精简的过程中，发现html源代码里，在header里有评论相关的js依赖，由于我的博客早已关闭评论，所以这个也没啥用了，但删除着实费了一些劲，原来这个js并没有在主题里面，而且写到了博客程序里，删除路径：在博客程序目录里找到该文件var/Widget/Archive.php，删除以下代码
if ($this->options->commentsThreaded && $this->is('single')) {
if ('' != $allows['commentReply']) {
if (1 == $allows['commentReply']) {
$header .= "<script type=\"text/javascript\">
~~~省略部分~~~
</script>";
} else {
$header .= '<script src="' . $allows['antiSpam'] . '" type="text/javascript"></script>';
}
}
}精简html头部元数据
在博客程序目录里找到该文件var/Widget/Archive.php，删除想要删除的内容即可，比如generator和template，还有上面评论相关的js输出等。
/**
* 输出头部元数据
* @param string|null $rule 规则
*/
public function header(?string $rule = null)
{
$rules = [];
$allows = [
'description' => htmlspecialchars($this->description ?? ''),
'keywords' => htmlspecialchars($this->keywords ?? ''),
'generator' => $this->options->generator,
'template' => $this->options->theme,
'pingback' => $this->options->xmlRpcUrl,
'xmlrpc' => $this->options->xmlRpcUrl . '?rsd',
'wlw' => $this->options->xmlRpcUrl . '?wlw',
'rss2' => $this->feedUrl,
'rss1' => $this->feedRssUrl,
'commentReply' => 1,
'antiSpam' => 1,
'atom' => $this->feedAtomUrl
];或者在主题header文件相应位置加上过滤参数
<?php $this->header('generator=&template=&pingback=&xmlrpc=&wlw=&rss2=&rss1=&atom='); ?>简化文章分页
自定义分页页数和省略符等，默认前后分页数为3。
<?php $this->pageNav('上一页', '下一页', '2', '…'); ?>如果要改包裹的css选择器名称可以用下面的代码，nav为新选择器名称，更加精简。
<?php $this->pageNav('←', '→', '1', '…',array('wrapClass' => 'nav')); ?>分页包裹css选择器相关代码解释，想要修改哪个位置的选择器，直接按照上面格式进行添加就好。
wrapTag 外层包裹标签名， 默认ol
wrapClass 外层包裹类名
itemTag 内层标签名， 默认li
textTag 直接输出文字的标签名
currentClass 当前聚焦类名
prevClass 上一页类名
nextClass 下一页类名如果想直接不显示分页数据，直接用上一页和下一页，不过这种方式需要重新设定一下相应的css样式。
<?php $comments->pageLink('上一页'); ?><?php $comments->pageLink('下一页','next'); ?>上一页和下一页的文字可以用特殊符号代替，搜html实体特殊符号编码或者Unicode特殊符号编码都可。
精简文章页面的标题链接
由于已经在文章页面了，文章标题有超链接并没有什么用，点击后相当于刷新，所以精简掉比较好。在post.php文件里修改标题相关代码，更改后的内容如下，顺便去掉了itemprop的name，和headline作用重复了。
<h1 itemprop="headline"><?php $this->title() ?></h1>结果
最终网页性能测试效果还不错，虽然没有100分，但我已经尽力了，现在已经全部100分了，网站除了网页本身外，只有一个css文件和一个ico图标，无JS脚本，无代码统计，无广告，干干净净，舒服多了。在保证阅读体验的情况下，最大化精简。目前整站css样式gzip压缩后只有1.2kb（已经包含dark样式），网站html页面gzip压缩后平均在5kb左右（具体看文章字数），加上ico图标，整体加载最大也没有超过10kb。
其他修改的细节还有很多，也记不清楚了，关于主题修改的大概内容，可以看Typecho默认主题修改汇总
更多网站性能优化方案，推荐看一下Yahoo的这篇文章Best Practices for Speeding Up Your Web Site，介绍的很详细了。