之前用谷歌网站分析工具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大小为3.8k，网页前端压缩后为1.8k。

代码压缩

等把没用的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>';
                }
            }
        }

结果

最终网页性能测试效果还不错，虽然没有100分，但我已经尽力，网站除了网页本身外，只有一个css文件和一个ico图标，无JavaScript，无Cookies，无代码统计，无广告，干干净净，舒服多了。

图片
图片

其他修改的细节还有很多，也记不清楚了，关于主题修改的大概内容，可以看Typecho默认主题修改汇总

更多网站性能优化方案，推荐看一下Yahoo的这篇文章Best Practices for Speeding Up Your Web Site，介绍的很详细了。