<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>性能优化 on 因特吧</title><link>https://blog.inte8.top/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/</link><description>Recent content in 性能优化 on 因特吧</description><image><title>因特吧</title><url>https://blog.inte8.top/logo.png</url><link>https://blog.inte8.top/logo.png</link></image><generator>Hugo</generator><language>zh_CN</language><lastBuildDate>Wed, 29 Apr 2026 23:40:00 +0800</lastBuildDate><atom:link href="https://blog.inte8.top/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/index.xml" rel="self" type="application/rss+xml"/><item><title>Hexo 博客性能优化实践</title><link>https://blog.inte8.top/posts/hexo%E5%8D%9A%E5%AE%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%AE%9E%E8%B7%B5/</link><pubDate>Wed, 29 Apr 2026 23:40:00 +0800</pubDate><guid>https://blog.inte8.top/posts/hexo%E5%8D%9A%E5%AE%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%AE%9E%E8%B7%B5/</guid><description>&lt;h2 id="前言"&gt;前言&lt;/h2&gt;
&lt;p&gt;搭建好 Hexo 博客之后，性能优化是提升用户体验的重要一环。本文记录了我在优化博客加载速度过程中的实践和心得。&lt;/p&gt;
&lt;h2 id="性能分析"&gt;性能分析&lt;/h2&gt;
&lt;p&gt;首先使用工具分析当前博客的性能瓶颈：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Google PageSpeed Insights&lt;/strong&gt;：综合评分工具&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Lighthouse&lt;/strong&gt;：Chrome 内置的性能审计工具&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;WebPageTest&lt;/strong&gt;：详细的加载瀑布图分析&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="图片优化"&gt;图片优化&lt;/h2&gt;
&lt;p&gt;图片通常是网页中最大的资源，优化效果立竿见影：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;使用 WebP 格式替代 PNG/JPG，体积减少 30%-50%&lt;/li&gt;
&lt;li&gt;添加图片懒加载（Lazy Load），首屏外的图片延迟加载&lt;/li&gt;
&lt;li&gt;压缩封面图片，控制在 200KB 以内&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="静态资源优化"&gt;静态资源优化&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;span class="lnt"&gt;2
&lt;/span&gt;&lt;span class="lnt"&gt;3
&lt;/span&gt;&lt;span class="lnt"&gt;4
&lt;/span&gt;&lt;span class="lnt"&gt;5
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 开启 Gzip 压缩&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 在 GitHub Pages 上默认已开启&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 合并 CSS/JS 文件减少请求数&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 使用 CDN 加速静态资源加载&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h2 id="缓存策略"&gt;缓存策略&lt;/h2&gt;
&lt;p&gt;合理设置缓存策略可以大幅提升回访速度：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;HTML 文件：短期缓存，确保内容及时更新&lt;/li&gt;
&lt;li&gt;CSS/JS/图片：长期缓存，通过文件名哈希实现版本控制&lt;/li&gt;
&lt;li&gt;字体文件：设置较长的缓存时间&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="优化效果"&gt;优化效果&lt;/h2&gt;
&lt;p&gt;经过一系列优化后：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;指标&lt;/th&gt;
&lt;th&gt;优化前&lt;/th&gt;
&lt;th&gt;优化后&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;首屏加载&lt;/td&gt;
&lt;td&gt;4.2s&lt;/td&gt;
&lt;td&gt;1.8s&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PageSpeed 评分&lt;/td&gt;
&lt;td&gt;62&lt;/td&gt;
&lt;td&gt;91&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;请求数&lt;/td&gt;
&lt;td&gt;48&lt;/td&gt;
&lt;td&gt;32&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;性能优化是一个持续的过程，后续还会继续探索更多优化手段。&lt;/p&gt;</description></item></channel></rss>