菜单
菜单
文章目录
  1. 使用Yarn包管理器
  2. 代码压缩
  3. 图片压缩
  4. 图片缓存
  5. 优化第三方资源加载
  6. 使用预加载
  7. 针对性引入第三方资源
  8. 其他方法

对本站进行的一系列优化

首先将站点搬到国内服务器,弃用各种不必要的统计并精简和删除不必要的资源。

2020-11-30 更新,针对性加载网页所需资源。

使用Yarn包管理器

Yarn会并行执行安装包所以速度要快很多,以及其拥有的离线模式更是显著提高安装下载的速度。

安装Yarn

npm install yarn -g

删除原 node_modules 再重新安装

rm -rf node_modules
yarn

Yarn安装全部依赖

yarn
#或者
yarn install

切换为淘宝源

yarn config set registry https://registry.npm.taobao.org

使用方法见: https://yarn.bootcss.com/docs/usage

代码压缩

代码压缩使用的是hexo-neat插件,其配置使用简单。
安装:

yarn add hexo-neat

博客根目录下做如下配置

# hexo-neat
neat_enable: true
# 压缩 html
neat_html:
enable: true
exclude:
# 压缩 css
neat_css:
enable: true
exclude:
- '**/*.min.css'
- '**/*.css.map'
# 压缩 js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'

图片压缩

统一全站图片格式,本站全部使用 .webp 格式图片。

使用图片压缩工具,我使用的是 Imagine客户端,其也支持各格式间的转换。

1

注: .jpg转换为 .png 格式需要安装 ImageMagick,且 .jpg.png 在保证清晰度情况下由于色彩丰富度增加一般图片大小会相应变大。

也有其他图片压缩网站或工具,比如 【I love IMG】、【TinyPNG】 以及 【ImgBot】等。

图片缓存

使用 hexo-image-cloudflare 插件,其利用 【images.weserv.nl】 把博客所有图片缓存到 Cloudfare上。

具体见: https://github.com/njzjz/hexo-image-cloudflare

优化第三方资源加载

字体资源、Jquery、图标CSS等第三方资源使用【BootCDN】或者【jsdelivr】等公共CDN的引用地址,并适当启用预加载或者异步加载。

使用预加载

使用【instant.page】开启页面预加载

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%!

使用方法:
直接将此 HTML 片段放在</body>之前即可。

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

或者自托管

<script src="路径/js/instantpage.js" type="module"></script>
注意:

使用 Instant.page会显著增加自己的站点的 PV 以及请求量,对于使用CDN全站加速的小伙伴需要着重注意,因为CDN的请求数也是要收费的。

针对性引入第三方资源

摒弃全局引入所有第三方资源,只在所需页面才做引入,以减少页面不必要的资源请求。
全局layout.ejs仅引入 字体CSS预加载JS点击爱心JS

<body>
<!-- 其他代码 -->
<!-- Noto Serif SC && Anonymous Pro -->
<link type="text/css" rel="preload stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" crossorigin >

<!-- 预加载 -->
<script type="text/javascript" aysnc src="/js/instantpage.js" type="module"></script>

<!-- 页面点击小爱心 -->
<script type="text/javascript" defer src="/js/clicklove.js"></script>

</body>

仅在文章页面需要引入 图标CSSJquery代码复制功能相关JS

article.ejs文件底部引入

<article>
<div>
<!-- 其他代码 -->
</div>

<!-- fortawesome CSS -->
<link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
<link type='text/css' rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

<!-- 引入jquery -->
<script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- 代码块复制功能 -->
<script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/clipboard@1.7.1/dist/clipboard.js" ></script>
<script type="text/javascript" defer src="/js/clipboard_use.js"></script>

</article>

首页图标所需样式与文章所需样式冲突,也针对性引入。

首页图标样式,在home.ejs中引入:

<div class="content-home text-center">
<!-- 其他代码 -->

<!-- fortawesome CSS -->
<link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
</div>

其他方法

使用对象存储以及开启全站CDN等。

在此暂时不做考虑,等续不起服务器再说!

本文作者: Senorui

本文链接: https://senorui.top/posts/6bcd.html

版权声明: 本站所有文章除特别声明外,均采用【CC BY-NC-ND 4.0】国际许可协议,若转载请注明出处!

支持一下
欢迎和Senorui进行PY交易😎!
  • 微信扫一扫
  • 支付宝扫一扫