NotionNext博客精简优化 | Homelab Dolingou Network

type

status

date

slug

summary

📝 NotionNext优化

NotionNext是一个使用Next.js框架和Notion API的博客程序，使用Notion作为数据库，将写作与博客展示分开。对于我来说，NotionNext提供了一个良好的写作体验，同时也不用担心因为服务器到期或者网站遭受攻击导致的文章数据丢失问题，而且又能部署在Vercel上，节省了一笔服务器费用。

我使用的NotionNext是通过yarn export生成SSG静态页面方式部署在Vercel。在首次通过Page Speed Insights测试时，Performance分数只有70分出头，这还是在之前已经通过《🔧用Cursor帮我优化博客SEO》这篇文章所提及的优化之后。之前在Google Search Console中，Core Web Vitals也提示我的大部分页面需要进行LCP优化，原因是LCP时长超过了2.5秒。这也是促成我再次对博客进行优化的一个原因。

以后后的结果如下，终于偶尔可以在移动端达到全绿的结果，就算Performance无法到达90分以上，大部分时候也是在80-90之间，之后需要解决的就是继续压缩FCP延迟的问题。

文章只是提供一种修改的思路，在根据文章内容进行删减时，建议做好备份操作，避免产生不可逆影响。目前我使用的是NotionNext 4.7.11版本。在修改的过程中，请善用下面两条git命令用于回滚版本。同时不建议向我一样直接提交到GitHub并同步到Vercel部署，可以通过yarn dev 在本地u使用测试环境查看结果。

这次优化的另一个重点就是完善一下博客的SEO。尽管NotionNext已经默认配置好了一些SEO的部分，但是还是存在一些问题，需要自己手动调整和优化。

JS加载分析

在Vercel每次部署的时候，Build Log中均会生成+ First Load JS shared by all ，这是每次需要加载的总JS大小。在未经优化之前，整体加载大小为214KB，其中主要部分均为_app-*.js 这个文件。所以我们的首要目标就是缩小_app-*.js 这个文件的大小。在优化完成后，我成功的将_app-*.js 从112kb大小缩小到了63kb大小，将近50%，页面加载速度也所有提升。

_app.js分析及优化

_app-*.js 文件是通过NotionNext中pages/_app.js 文件生成，_app.js 是Next.js用于自定义App组件进行全局初始化页面的js文件。NotionNext默认的_app.js 包括如下内容：

从各种扩展插件部分开始，这里分别是：

BLOG：blog.config.js的各种配置信息。_app.js会把blog.config.js中的各项配置信息读取并在生成_app-*.js时包括在内。

ExternalPlugins：读取/components/ExternalPlugins.js 内的配置信息，主要是外部第三方的插件调用。会写入到_app-*.js中。

SEO：读取/components/SEO.js 内的配置信息。主要为SEO相关的配置，影响位置在<head></head>标签内。

Clerk：包括zhCN、ClerkProvider等部分，主要是登录、注册部分功能，同时与openwrtite插件有关联。

那么核心需要优化的部分就是如下这些：

精简blog.config.js 内的配置信息，不使用的功能部分配置进行注释或者删除。

精简ExternalPlugins.js 内的插件调用，不使用的插件功能删除或者注释掉。

精简SEO.js 内的插件调用，以及对部分SEO配置项进行优化。

由于我不需要登录、注册以及OpenWrite插件进行微信公众号导流，所以将Clerk部分功能删除。

去除Clerk部分

Clerk是一个serverless登录鉴权服务，支持大量第三方的OAuth登录，很方便就能搭建起登录体系。但是我并不需要这个登录体系，并且Clerk会引用一个较大的JS包，并合并到_app-*.js 中，这应该是最大的引入内容。我直接选择删除。

在直接全部删除之后，部署之后会出现错误，无法正常显示网站内容，需要添加如下代码，使NotionNext可以返回正常内容：

另外，Clerk在lib/global.js 文件中也有植入，所以需要一并清除：

`blog.config.js` 优化

blog.config.js内的配置信息太多。且由于在Github上fork的NotionNext项目无法修改为私有模式。存在部分配置泄露的可能。所以我尽可能的将配置信息放在Notion中的配置中心和Vercel的环境变量中。以下列出部分可安全注释或删除的配置：

基本信息部分

以上配置项可将内容部分删除。减少写入到_app-*.js 内的字符

社交链接部分

以上各种社会化媒体的配置部分，可将不需要的配置删除。我只保留了邮箱。其他均删除。

路径和组件映射

由于我不需要登录注册相关的功能，所以对应的页面也就不需要进行渲染。这里将验证页面、登录页面、注册页面以及管理台的页面路径和组件映射删除。你也可以选择注释掉，避免之后可能会用到相关的功能。

Facebook Fan Page组件配置部分

Facebook Fan Page主要是用来在Widget进行展示使用。我没有Facebook，所以也不需要这部分的功能及配置。

ALGOLIA搜索

Algolia搜索目前我使用的Medium主题还不支持。所以我选择暂时先注释掉。如果之后研究明白怎么在Medium主题内使用Algolia搜索，再取消注释。

各种特效、AI文章摘要、机器人以及音乐播放插件

我不喜欢各种特效，降低页面性能的同时，还会干扰浏览者。同时我也暂时不需要各种机器人帮助总结文章内容。我会尝试在每篇文章的底部总结去自己手写一些要点。音乐播放器对于我来说更是用不到的部分。以上这些我都是直接选择删除。

评论插件

NotionNext内置了包括twikoo、utterance、gitscus、gitalk、valine、webmention等评论插件，但是我实际使用到的只有twikoo，且没有选择更其他评论插件的想法。所以除了twikoo之外的插件部分全部删除。

站点数据统计

NotionNext在站点数据统计部分插件也内置了挺多的，包括Vercel、Busuanzi、Baidu、CNZZ、Google Analytics、51la、Matomo、Ackee、Clarity等等。目前我都用不到，只保留了一个SEO_GOOGLE_SITE_VERIFICATION 用于Google Search Console的站点认证使用。同时对于网站的数据统计，我通过使用Cloudflare Zaraz来使用Google Analytics，也就不在NotionNext启用并配置相关内容了。

广告营收部分

因为我之后可能还是会想尝试一下Google Adsense，所以这部分配置项进行了保留，仅将数值内容删除。

万维广告及对应的广告屏蔽插件检测我均不需要，所以删除。

订阅部分

我没有也不提供邮件订阅。访客群体大多数也是国内浏览者，没有太多使用邮件的习惯，所以我甚至邮件服务器都懒得去弄。这里只保留一个RSS就可以了。

作废配置部分

这里虽说是作废配置，但是经过我测试不可以直接删除，所以我将部分配置项的值进行了修改，能缩短一字节也是有意义的。

`seo.js` 优化

seo.js这个文件，名字虽然是seo，但是其实他是一个NotionNext的<head></head> 管理js文件。如果需要修改meta信息，或者添加网站认证代码，均可以在这个文件进行配置。

去除重复的favicon

在seo.js中有重复的<link rel=’icon’ />标签，可以移除一个。我移除的是下面这个：

修改Meta Charset位置

Charset位置建议放在<head></head> 标签中的第一个位置

删除Baidu站点管理相关部分

我不使用Baidu站点统计及站点管理功能，百度的抓取与收录对于我来说也没有什么意义。这个博客没有任何的备案，也未部署在国内的云服务器。

删除Busuanzi数据统计部分

删除WebMention部分头信息

Webmention需要通过xmlrpc使用pingback功能，所以会在<head>标签中添加link引用。我不适用Webmention，这部分删除，减少<head>标签体积。

添加canonical标签

默认的NotionNext没有添加canonical标签，在SEO中存在一点点缺憾，为了能让搜索引擎更好的理解站点结构和唯一性结果，所以在<head>中添加canonical标签。关于canonical是什么，可以参考这里：《如何使用 rel="canonical" 及其他方法指定规范网址》

在<head></head>之间添加上述canonical代码，href即链接为当前页面的链接。

Facebook Page相关

由于我不需要Facebook Page，同时在blog.config.js中也删除了相关的配置信息，所以在seo.js文件中也移除相关的代码。

DNS-Prefetch相关

因为我的博客有使用外部CDN提供的JS文件，所以添加了dns-prefetch到<heaad> 标签中。在浏览者访问网站的时候，可以预解析外部引入的JS文件域名，从而加快一些网站的访问速度。涉及到的域名包括https://cdnjs.cloudflare.com 、https://cdn.jsdelivr.net 以及~~https://npm.elemecdn.com~~

`ExternalPlugins.js` 优化

ExternalPlugins.js 这个文件相当于引用外部插件的一个入口，在NotionNext的初始默认情况下，调用了太多的插件，包括：主题切换（THEME_SWITCH）、调试（DEBUG）、ACKEE数据统计、Vercel数据统计、Busuanzi数据统计、Facebook Page、烟花特效（FIREWORKS）、樱花特效（SAKURA）、星空特效（STARRY_SKY）、音乐播放器（MUSIC_PLAYER）、彩带（FLUTTERINGRIBBON）、自定义右键菜单（CUSTOM_RIGHT_CLICK_CONTEXT_MENU）、禁止复制（CAN_COPY）、WHIZ数据统计（WEB_WHIZ_ENABLED）、Chatbase、DAO_VOICE、万维广告（AD_WWADS_ID）、百度数据统计、CNZZ数据统计、ARTALK评论插件、Gitter评论插件、Matomo评论插件、51la数据统计插件、Tianli机器人、DIFY机器人、Clarity数据统计、鼠标跟随插件、COZE机器人、Vconsole调试插件等等插件。

在默认情况下，这些插件及外部引入的js文件均会加载并合并至_app-*.js文件中，这也是造成_app-*.js 文件过大的一个原因。我所删除的部分包括:

主题部分优化

除去上面_app.js 这些部分。在主题中，也有不少的插件直接植入。例如busuanzi、备案信息等等，这部分对于不同的主题并不通用，所以需要自己酌情修改。我所使用的是NotionNext主题是medium，在medium主题中，这些基本都是在footer.js文件或者articleinfo.js文件内。所以直接进行修改即可：

ArticleInfo.js

Footer.js

多语言引入JS优化

NotionNext提供了多语言，包括中文简体、中文繁体、英文、土耳其语、日语等，但由于博客主要使用中文，且没有多语言计划，所以只保留中文简体与英文。其他部分去掉。编辑lib/lang.js ,去除除中文简体与英文外其他部分：

CSS优化

NotionNext部分插件CSS写入了全局配置，在global.css 中可以找到。因为我的评论系统使用的是Twikoo，没有使用Waline和WebMention，所以相关CSS样式可以移除，在133行附近。同时因为我未使用ChatBox，所以相关代码也进行了移除。同时也对Fontawesome所使用的图标进行了优化，默认配置中是引用了Cloudflare CDN上的all.min.css ，包括全部可使用的FontAwesome图标，我使用不到那么多。

其他优化

这次对博客的整体瘦身优化过程中，也对以下部分进行了修改与调整：

添加了DNSSEC认证，避免中间人攻击及域名污染问题。由于目前为了提高国内的访问速度，使用的是SaaS回源优选Cloudflare IP，所以只在回源域名增加了DNSSEC认证。

关闭了Cloudflare提供的Crawler Hints功能，因为我怀疑我被Bing Excluded就是因为Cloudflare利用IndexNow推送一些不重要的页面、字体文件、图片等等。

关闭了Github Action中NotionNext提供的PushUrl功能。我经常会调整博客，所以每次Push之后都会触发，这也可能是Bing认为我滥用IndexNow的一个原因。

~~不再使用Cloudflare优选IP，尽量少白嫖一点赛博菩萨。同时在考虑是否关掉小黄云，这样国内的浏览者访问速度会更快些。~~

精简了列表页面的展示文章数量，从12减少到10。因为我认为从搜索引擎而来的访客都具有明确的目的，并且到达的也是明确的落地页，所以列表页的重要性没有那么高。而较少文章数量的列表页，能够提供更好的加载速度，尤其是首页（首页也是一个列表页）。

优化了标签页面和文章分类页面的meta description ，使他们具有和首页不同的meta描述信息。

去除了首页和全站搜索页面的输入框。因为我是通过yarn export方式的SSG部署，所以搜索功能其实并不可用，反而会跳转到404页面。

添加了部分页面的内链及锚文本，尽可能的做好SEO。

更换Prism Autoloader的CDN为cdnjs.cloudflare.com，通过IT DOG查了一下cdnjs在国内的访问速度并不差，原来的elemecdn会多一次请求，同时在使用Pagespeed Insights测试时候偶尔会timeout。

🤗 总结归纳

首先特别感谢tangly1024所开发的NotionNext，让我又重新开始写博客，这是一个我认为很棒的开始。

在过去的这一年时间里，慢慢的将博客从0收录，到现在日访客200多将近300，看着访问曲线上升以及评论区的反馈，真的感到很有成就感，也真的为自己所分享的内容帮助到别人而开心。简中互联网现在可查阅的内容太少了，我也真的希望自己可以记录下一些能够解决别人问题的内容。

在过去的这一年中，通过写博客这件事情，我也慢慢开始上手进行写一些代码，尽管大部分都是在AI（Cursor、Cline等等）的帮助下，但是也感觉自己是在进步，有在学会找解决问题的方式。昨天还和朋友在聊现在AI的势头，会不会大部分工作都变得没有意义。我想，在AI普及之后，只是我们找答案的方式变了，但是提出问题与寻找答案，还是要靠我们人类自己。

我不太是一个善于描述内容的人，写博客对于我来说也是一种讲述内容的锻炼：如何将一件事的过程讲给浏览者听，让他们明白与理解。所以我也需要对访问博客的浏览者表示感谢，你们在帮助我锻炼这种能力。

最后，祝各位圣诞节、元旦新年快乐。

📎 参考文章

Custom App - Routing

💡

有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~

✍🏼NotionNext博客精简优化