Pigeon For Typecho 主题优化指南:提高网页加载速度的策略


叙述366 阅2 评

前言

发现主题有些卡顿,通过浏览器F12的网络功能,进行探索。

字体分包

字体是主要的加载 “大户”,花了3s才加载出来

ziti.png

解决办法:在线搜索字体分包工具,执行会得到左边hm文件夹。

/usr/themes/pigeon/assets/fonts/hm

把文件夹上传到服务器,路径在/fonts下(也可以任意,记得路径就好)。

20240218004006.png

把字体名字复制好。

<link rel="stylesheet" href="https://xxx.xxx.xxx/usr/themes/pigeon/assets/fonts/hm/result.css">

在Pigeon 4.1 设置面板——其他设置——自定义代码添加,添加上方的代码,自行修改网站地址。

body {font-family: 'HarmonyOS_Sans_SC_Medium', sans-serif;}

在Pigeon 4.1 设置面板——其他设置——自定义CSS,添加上方的代码后保存,'HarmonyOS_Sans_SC_Medium',自行修改字体名字。

20240218004903.png

当刷新后显示如上图,则代表成功。

隐藏评论头像

<!-- <img class="avatar" src="<?php echo feature::avatarHtml($comments); ?>" /> -->

在路径usr/themes/pigeon/common内打开comments.php,搜索 comment_list_avatar ,注释如上(也可以删除)。

隐藏评论表情

<!-- <div class="rko"><div class="OwO">OωO</div></div> -->

在路径usr/themes/pigeon/common内打开comments.php,搜索 comment_left,注释如上(也可以删除)。

20240218005945.png

在comments.php,搜索OwO.json(也可以划到代码底部),同理注释掉。

总结

还有把需要通过外链引用的文件,下载到服务器,在通过自定义CSS,自定义代码添加引用,获得更快的加载速度,当然也可以上传assets到CDN,也能有流畅的体验。且不局限于Pigeon For Typecho,其他的主题也可以字体分包,这是很有效的方法,未完待续......

最后更新 2024-02-18
评论 ( 2 )
隐私评论
  1. 字体的话,用CDN还是更好一些。特别是如果使用的人多的话,效果会很好。

    2024-02-19 16:43广东省广州市回复
    1. 蓝河 博主
      @天一生水

      了解,现在勉强够用,就不上CDN了。

      2024-02-21 10:37广西回复
CC BY-NC-ND 4.0 DEED