Hexo页面加载速度优化

最新推荐文章于 2024-06-21 19:22:56 发布
最新推荐文章于 2024-06-21 19:22:56 发布
阅读量4.4k 收藏 10
点赞数
分类专栏： hexo 文章标签： hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MSDN_tang/article/details/106610897
版权

在hexo服务器配置好主题和博客文章后，发现主页访问速度极慢，最长可达到十几秒。

用Chrome分析一下页面加载项，发现加载的短板是谷歌字体和jquery库

在这里插入图片描述

于是将其换位国内的CDN服务

修改文件

hexo目录/themes/主题名称/layout/_partial/head.ejs

将fonts.googleapis.com替换为国内科大的库https://fonts.lug.ustc.edu.cn/或捷速网络https://fonts.css.network/

注：360的提供的节点fonts.useso.com 已停止使用

JQuery替换：

hexo目录/themes/主题名称/layout/_partial/after-footer.ejs

将//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js替换为//code.jquery.com/jquery-2.0.3.min.js



另外，可以下载懒加载插件并在配置文件中配置图片lazyload，进一步减少网页呈现的时间

优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度
∑
12-16 980
为什么要压缩页面静态资源 对于个人博客来说，优化页面的访问速度是很有必要的，如果打开你的个人站点，加载个首页就要十几秒，页面长时间处于空白状态，想必没什么人能够忍受得了吧。我个人觉得，如果能把页面的加载时间控制在三四秒内，就很不错了。 那么怎么提高hexo这个静态博客的页面加载速度呢？可以从以下的几个方面去入手： 将js文件尽可能放置到body的闭合标签之前，因为在加载或者引入js文件时是阻塞式...
解决Hexo的图片加载和评论问题
程序无言
09-25 1382
一.Hexo-Matery解决无法加载本地图片 步骤1 安装插件 打开Git控制台 由于npm速度比较慢，我这里使用的是cnpm淘宝的镜像 没有安装的小伙伴，可以使用npm install -g cnpm --registry=https://registry.npm.taobao.org 进行安装 输入cnpm install https://github.com/CodeFalling/hexo-asset-image – save 步骤2 修改主配置文件 找到根目录下面的_config.yml配
hexo博客突然加载很慢
codeSong的博客
06-21 259
title: hexo博客突然加载很慢。
Hexo博客因图标失效导致加载过慢（icarus主题）
.
07-19 991
导致问题原由 最近也不知到主题版本太老还是咋回是，我的Hexo博客的小图标突然就失 效，因为最近事情比较多，也没去管它，大体的美观不受影响，今天打开我 的博客发现访问速度超慢。当时首先考虑是网络的问题，于是打开本地预 览，结果还是很慢，经过一番百度，找到了许多原因，像默认使用Google字 体、端口好冲突呀，但都不是我所遇到的问题。 直到看到这位老哥的回答，找到了解决的思路 操作步骤 打开调试工具* 打开调试工具后，发现因为图标失效，导致加载缓慢，这个问题就找到了，如果是这种情况，它不光在本地加载缓慢，
Hexo博客技巧：提升博客访问速度
Amnesia-Fu的博客
05-10 4219
前言 之前说到，GitHub的服务器在国外较慢，虽然可以使用JSDeliver加速文件，但是效果并不是很明显，速度没有得到明显提升，这篇文章就讲讲怎么利用hexo-offline-popup插件提升博客访问速度，且还能实现博客更新后弹窗提醒的功能。 hexo-offline-popup hexo-offline-popup 是一个 hexo 插件， 它可加速您的Hexo网站的加载速度，以及网站内容更新弹窗提示。 该插件基于停止维护已久的hexo-service-worker插件，并在它的基础上加以改进。
hexo butterfly优化
Panda325的博客
08-11 948
魔改了两天的butterfly主题，说下心得吧 参考文档 butterfly主题官方的参考文档：https://demo.jerryc.me/ 0基础从hexo开始的参考文档：https://www.jianshu.com/p/a1a4ebf0e5fc 0基础从hexo开始的参考文档：https://blog.csdn.net/weixin_42429718/article/details/105723193 音乐页面的参考文档：https://blog.csdn.net/qq_464356
Hexo项目：网页反馈优化
修行的凡人的博客
03-10 234
基于Hexo架构，快速开发博客项目
hexo图片懒加载方案
周子川的博客
06-24 3566
文章目录配置 自从给hexo+next配置了背景图片之后，发现博客网站加载比较缓慢，就想着给图片添加上懒加载功能。 解决方案也很简单，就是通过依赖hexo-lazyload-image模块。 配置 新增hexo-lazyload-image模块 npm install hexo-lazyload-image --save 在站点配置文件_config.yml增加配置 lazyload:...
终于解决了hexo开启懒加载后图片无法立即显示的问题
东曜说
04-18 2473
干货时刻 本文主要介绍hexo-lazyload-image插件引发的bug以及相关API 问题描述 笔者最近在折腾hexo搭建的个人主页：东曜说 的时候，遇到了这样一个 bug： 网站开启图片懒加载后，首次加载页面图片不显示，但是刷新一次后会显示。 我的插件版本是：hexo-lazyload-image v1.0.10 。 问题原因 笔者为了提升网页的浏览体验，开启了pjax优化，其原理在于pjax封装了ajax实现局部刷新，将网站变成了单页面应用。 懒加载插件如果配置不当，将与pjax插件发生冲突，导致
网站图片过大加载很慢解决办法
weixin_30376083的博客
01-25 1391
1.使用缓存 2.使用CDN加速3.使用jq延迟加载图片, 用到那个 加载哪个.4.加大服务器宽带 5.检查服务器硬盘读取速度. 压缩图片: png建议使用https://tinypng.com/ 非常给力 直接上传图片就可以进行压缩、 转载于:https://www.cnblogs.com/yuancr/p/8351030.html...
Hexo和icarus主题那些坑：打开速度太慢，访问不了
m0_52549699的博客
06-26 1303
Hexo和icarus主题那些坑：打开速度太慢，访问不了 ​ 有很多人个人博客采用hexo+github的方式，把代码托管到github上，用户访问是由github托管的网站，这样访问速度其实还是比较慢的。部署后访问基本可能要十几秒，这对用户来说，简直太可怕了。原因肯能只有一个，托管网站的github是外网，访问外网慢是必然的。但按理说外网也不能这么慢吧。后面发现慢主要是加载icarus主题的一个谷歌字体用时最多，明白了这个就好办了。 icarus主题打开慢 换了icarus主题后，没有域名的情况下打开非常
【建站指南】解决个人网站图片加载缓慢的问题
XavierJ的博客
03-06 2915
项目场景 最近笔者用 hexo 框架搭建了一个静态博客，方便发布博文和日常随笔。发文章自然少不了插入图片，因此在专门 GitHub 建了一个仓库作为图床来管理图片。 问题描述 但 GitHub 在国内的访问速度很慢，这里可以考虑加上 jsdelivr 提供的免费 CDN 加速服务，笔者亲测加上后会有所提升，但大图的加载速度仍然很慢。 原因分析 GitHub 的服务器在国外，所以在 GitHub 仓库中存储的图片的访问速度才会很慢。 解决方案 找一家国内的代码托管平台作为我们的免费图床来替换 GitHub，这
压缩请求数据（优化页面加载太慢之一）
weixin_30408739的博客
05-09 197
1 /// <summary> 2 /// 允许压缩 3 /// </summary> 4 public class AllowCompressAttribute : System.Web.Mvc.ActionFilterAttribute 5 { 6 /// <summary> ...
Hexo速度优化及遇到的问题(gulp4、hexo-neat)
qwzf
02-08 1905
前言 这几天闲来无事，学习了下Hexo的博客速度优化，发现有好多方法。CDN加速、coding部署、gulp压缩、
blog网站中的图片加载优化问题
长路漫漫唯键做伴
02-17 540
Hexo开源blog搭建完毕后发现blog列表加载时图片记载很慢，由于使用material主题时，blog缩略图默认使用本地的图片，于是先将图片压缩，在研究原作者的blog后发现作者使用cdn图片加速，例如:https://cdn.viosey.com/img/bizhi/cw-76.jpg!osg，奇怪的是url后面的!osg，发现不带!osg时图片加载完成之前会显示黑屏，但是带有!osg时回家
闪电加载：Hexo博客性能优化全攻略
情义的博客
05-29 1369
这些年积累了很多前端性能优化的知识点和思路，日常工作很少涉及技术层极限优化，近期终于一点点把博客独立搭建并部署了，对之前的一些技术点进行了深度探索，最终结果也达到了预期效果，由于水平有限，写的不好的地方，敬请谅解。
Hexo博客开发之——jsDeliver+Github加速图片访问
2401_84121588的博客
04-05 1187
(Content Delivery Network，缩写：CDN)是指一种透过互联网互相连接的电脑网络系统利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户来提高性能、可扩展性及低成本的网络内容传递给用户。more二 为何使用jsDeliverGitHub上存储的图片、视频资源，由于某种因素会出现访问受限的情况，导致图片、视频显示异常；为了图片、视频显示正常可以使用CDN进行加速，从而使资源得以正确加载并显示的目的。
【blog】小白博客搭建和踩坑历程 hexo+butterfly
chierhy的博客
12-07 3152
blog 博客搭建和踩坑历程 hexo+butterfly
Hexo博客之butterfly主题优雅魔改系列（持续更新）
热门推荐
小康博客
06-21 2万+
为了便于各位博主了解到是否新增了魔改方案，请查看更新记录页 前置说明 魔改亮点 ????主题可升级：几乎不改动主题源码。即便魔改，也不需要为升级主题而烦恼。 ????简单快速：简单上手，快速修改。 ????看我72变：多种背景随意更换。 ????优雅阅读：对卡片进行不同的透明度设置，实现更优雅的阅读。 ????个性友联：为你的好友设置不同的颜色 ????页脚更炫酷：彩色渐变footer喜欢么？ ????更多优点等你发现 为什么写这篇文章? 相信在这之前，大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上
hexo优化访问速度
最新发布
03-31
### 优化 Hexo 博客访问速度的最佳实践 为了提升 Hexo 博客的访问速度，可以从多个方面入手，包括但不限于文件压缩、图片处理以及缓存策略等方面。以下是具体的优化方法： #### 1. 使用静态文件压缩插件 通过安装 `hexo-all-minifier` 插件来实现对 HTML、CSS 和 JavaScript 的自动压缩[^3]。这不仅减少了页面体积，还提升了加载效率。 ```bash npm install hexo-all-minifier --save ``` 在 `_config.yml` 中启用该插件并设置相关选项即可完成配置。 --- #### 2. 图片延迟加载技术 应用 jQuery LazyLoad 插件以支持图片的懒加载功能[^4]。这种方式使得只有当用户滚动至特定区域时才会加载对应的图像资源，从而显著减少初始渲染时间。 执行以下命令克隆所需库到本地目录下： ```bash git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload ``` 随后按照文档说明进一步集成此特性进入现有模板结构之中。 --- #### 3. 调整自定义样式与布局 合理编辑位于主题根路径下的 `_config.yml` 配置项，例如更改配色方案或者隐藏不必要的组件等操作均有助于精简整体架构[^2]。此外还需注意保持良好的语义化标记习惯以便搜索引擎更好地抓取内容。 --- #### 4. 启用浏览器端缓存机制 借助服务端头信息设定长期有效的 Expires 或 Cache-Control 值让重复访客无需再次下载未变动的部分素材；与此同时也可以考虑引入 CDN 加速网络分发节点分布优势降低跨地域延时影响。 --- #### 5. 测试性能表现 最后别忘了定期运用 Google PageSpeed Insights 工具分析实际改进成果，并据此微调各项参数直至达到满意水平为止。 ```javascript // 示例：简单的前端脚本用于检测当前环境是否启用了Gzip压缩 if (typeof navigator !== 'undefined') { console.log('Your browser supports GZIP compression.'); } else { console.error('Failed to check gzip support'); } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值