Hexo页面加载速度优化

最新推荐文章于 2024-02-29 00:38:49 发布
最新推荐文章于 2024-02-29 00:38:49 发布
阅读量4k 收藏 8
点赞数
分类专栏： 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，进一步减少网页呈现的时间

MSDN_tang
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hexo matery主题博客解析bug问题及主题优化
01-08
matery主题优化时解析出bug matery是个好的主题这个我就不详细地说了，但是优化也难 越好的主题、越丰富的主题，插件越多，配置越多，就容易出错 最要命的是这种静态网页的部署还要用最原始的方法进行，先在命令行生成静态文件，然后发送给要命的github 总之bug数不胜数，大部分出错的原因基本都一致，无非就是在yml文件里乱弄出的bug 但是我优化主题时碰上了难得的bug，就分享给大家，省的大家走弯路 page.*.ForEach is not a function后接一大片路径 这里的*就是图中的categorioes,我叫他page bug。就光看那么多行根本摸不着头脑，想着是肯定
Hexo和icarus主题那些坑：打开速度太慢，访问不了
m0_52549699的博客
06-26 1172
Hexo和icarus主题那些坑：打开速度太慢，访问不了 ​ 有很多人个人博客采用hexo+github的方式，把代码托管到github上，用户访问是由github托管的网站，这样访问速度其实还是比较慢的。部署后访问基本可能要十几秒，这对用户来说，简直太可怕了。原因肯能只有一个，托管网站的github是外网，访问外网慢是必然的。但按理说外网也不能这么慢吧。后面发现慢主要是加载icarus主题的一个谷歌字体用时最多，明白了这个就好办了。 icarus主题打开慢 换了icarus主题后，没有域名的情况下打开非常
Hexo博客之butterfly主题优雅魔改系列（持续更新）
热门推荐
小康博客
06-21 1万+
为了便于各位博主了解到是否新增了魔改方案，请查看更新记录页 前置说明 魔改亮点 ????主题可升级：几乎不改动主题源码。即便魔改，也不需要为升级主题而烦恼。 ????简单快速：简单上手，快速修改。 ????看我72变：多种背景随意更换。 ????优雅阅读：对卡片进行不同的透明度设置，实现更优雅的阅读。 ????个性友联：为你的好友设置不同的颜色 ????页脚更炫酷：彩色渐变footer喜欢么？ ????更多优点等你发现 为什么写这篇文章? 相信在这之前，大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上
【Hexo】优化教程
最新发布
Fgaoxing的博客
02-29 347
本文原文：https://www.yt-blog.top/46463/本文章将从部署速度和访问速度两方面说说如何优化Hexo博客。
hexo-tag-aplayer:将播放器嵌入Hexo帖子页面
05-15
hexo-tag-aplayer 在Hexo帖子/页面中嵌入APlayer（ ）。 重复的APlayer.JS加载 执照 安装 npm install --save hexo-tag-aplayer 相依性 APlayer.js> = 1.10.0 Meting.js> = 1.2.0 用法 {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %} 选项 title ：音乐标题 author ：音乐作者 url ：音乐文件网址 picture_url ：可选，音乐图片url narrow ：可选，窄样式 autoplay ：可选，自动播放音乐，移动浏览器不支持 width:xxx ：可选，前缀width: width:xxx播放器宽度（默认值：100％） lrc
hexo实现个人博客网站
08-09
利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分类等等。利用hexo整合，实现个人博客网站。增加了各种特效效果，菜单分栏、分类、主题适配。通过markdown编写文章，增加分
优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度
∑
12-16 806
为什么要压缩页面静态资源 对于个人博客来说，优化页面的访问速度是很有必要的，如果打开你的个人站点，加载个首页就要十几秒，页面长时间处于空白状态，想必没什么人能够忍受得了吧。我个人觉得，如果能把页面的加载时间控制在三四秒内，就很不错了。 那么怎么提高hexo这个静态博客的页面加载速度呢？可以从以下的几个方面去入手： 将js文件尽可能放置到body的闭合标签之前，因为在加载或者引入js文件时是阻塞式...
解决Hexo的图片加载和评论问题
程序无言
09-25 1184
一.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-offline-popup（提升hexo框架博客访问速度）
qq_62928039的博客
07-06 414
hexo-offline-popup 是一个hexo插件， 它可加速您的Hexo网站的加载速度，以及网站内容更新弹窗提示。该插件基于停止维护已久的hexo-service-worker插件，并在它的基础上加以改进。
Hexo博客因图标失效导致加载过慢（icarus主题）
.
07-19 887
导致问题原由 最近也不知到主题版本太老还是咋回是，我的Hexo博客的小图标突然就失 效，因为最近事情比较多，也没去管它，大体的美观不受影响，今天打开我 的博客发现访问速度超慢。当时首先考虑是网络的问题，于是打开本地预 览，结果还是很慢，经过一番百度，找到了许多原因，像默认使用Google字 体、端口好冲突呀，但都不是我所遇到的问题。 直到看到这位老哥的回答，找到了解决的思路 操作步骤 打开调试工具* 打开调试工具后，发现因为图标失效，导致加载缓慢，这个问题就找到了，如果是这种情况，它不光在本地加载缓慢，
【建站指南】解决个人网站图片加载缓慢的问题
XavierJ的博客
03-06 2360
项目场景 最近笔者用 hexo 框架搭建了一个静态博客，方便发布博文和日常随笔。发文章自然少不了插入图片，因此在专门 GitHub 建了一个仓库作为图床来管理图片。 问题描述 但 GitHub 在国内的访问速度很慢，这里可以考虑加上 jsdelivr 提供的免费 CDN 加速服务，笔者亲测加上后会有所提升，但大图的加载速度仍然很慢。 原因分析 GitHub 的服务器在国外，所以在 GitHub 仓库中存储的图片的访问速度才会很慢。 解决方案 找一家国内的代码托管平台作为我们的免费图床来替换 GitHub，这
Hexo主题基于landscapeplus进行的优化
08-10
Hexo主题,基于landscape-plus，进行的优化
hexo-images:优化Hexo静态站点生成器图像的工具集
05-04
十六进制图像 hexo-images是Hexo静态网站生成器的插件，可优化图片以提高网站性能。 将图像调整为便于浏览的尺寸。 您无需在网络上共享36万像素的照片 :upside-down_face: 压缩图像以确保尽快加载。 它使用最有效的...
hexo-all-minifier：Hexo的插件，可以优化HTML，CSS，JS和imagages，并且可以选择部署您的博客
02-04
$ npm install hexo-all-minifier --save 对于Mac用户，也许您需要安装更多内容 $ brew install libtool automake autoconf nasm 用法 只需将此行放在您的hexo站点的配置文件中即可启用此插件。 all_minifier : ...
hexo-util:Hexo 的实用程序
08-04
hexo-util 实用程序。 目录 编码网址 逃脱变音符号 转义HTML 转义正则表达式 full_url_for 头像 散列 强调 html标签 是外部链接 图案 永久链接 漂亮的网址 棱镜高光 相对网址 跺跺脚 产卵 条形HTML 自动换行 ...
hexo-pwa：Hexo PWA插件
02-05
hexo-pwa让Hexo网站具有这两种功能。 -用户可以将您的网站添加到移动主屏幕 -使您的网站可以离线使用 安装 $ npm install --save hexo-pwa 选件 您可以在_config.yml配置此插件。 pwa : manifest : path : /...
终于解决了hexo开启懒加载后图片无法立即显示的问题
东曜说
04-18 1977
干货时刻 本文主要介绍hexo-lazyload-image插件引发的bug以及相关API 问题描述 笔者最近在折腾hexo搭建的个人主页：东曜说 的时候，遇到了这样一个 bug： 网站开启图片懒加载后，首次加载页面图片不显示，但是刷新一次后会显示。 我的插件版本是：hexo-lazyload-image v1.0.10 。 问题原因 笔者为了提升网页的浏览体验，开启了pjax优化，其原理在于pjax封装了ajax实现局部刷新，将网站变成了单页面应用。 懒加载插件如果配置不当，将与pjax插件发生冲突，导致
Hexo博客开发之——jsDeliver+Github加速图片访问
我的博客
09-22 1114
一 CDN解释 内容分发网络(Content Delivery Network，缩写：CDN)是指一种透过互联网互相连接的电脑网络系统 利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户 来提高性能、可扩展性及低成本的网络内容传递给用户。 <!--more--> 二 为何使用jsDeliver GitHub上存储的图片、视频资源，由于某种因素会出现访问受限的情况，导致图片、视频显示异常； 为了图片、视频显示正
hexo图片懒加载方案
周子川的博客
06-24 3232
文章目录配置 自从给hexo+next配置了背景图片之后，发现博客网站加载比较缓慢，就想着给图片添加上懒加载功能。 解决方案也很简单，就是通过依赖hexo-lazyload-image模块。 配置 新增hexo-lazyload-image模块 npm install hexo-lazyload-image --save 在站点配置文件_config.yml增加配置 lazyload:...
hexo butterfly加载动画怎么弄
06-13
要在 Hexo 的 Butterfly 主题中添加加载动画，可以按照以下步骤进行操作： 1. 在你的 Hexo 博客目录下，找到 `themes/butterfly/layout/_partial/head.ejs` 文件。 2. 在 head.ejs 文件中添加以下代码： ``` <script> document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { document.getElementById('contents').style.visibility="hidden"; } else if (state == 'complete') { setTimeout(function(){ document.getElementById('interactive'); document.getElementById('load').style.visibility="hidden"; document.getElementById('contents').style.visibility="visible"; },1000); } } </script> <div id="load"> <div class="loader"> <div class="loader-inner"> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> <div class="loader-line-wrap"> <div class="loader-line"></div> </div> </div> </div> </div> ``` 3. 保存文件并重新生成静态页面。 这个代码会在页面加载时显示一个加载动画，直到页面全部加载完成后才会显示页面内容。你可以根据自己的需求来修改加载动画的样式和持续时间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值