惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
The Register - Security
The Register - Security
aimingoo的专栏
aimingoo的专栏
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
博客园 - 司徒正美
The Cloudflare Blog
GbyAI
GbyAI
IT之家
IT之家
A
About on SuperTechFans
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
U
Unit 42
美团技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell
罗磊的独立博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Martin Fowler
Martin Fowler
F
Full Disclosure
B
Blog RSS Feed
F
Fortinet All Blogs
MongoDB | Blog
MongoDB | Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Blog of Author Tim Ferriss
WordPress大学
WordPress大学
J
Java Code Geeks
G
Google Developers Blog
Jina AI
Jina AI
量子位
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
有赞技术团队
有赞技术团队
L
LangChain Blog
博客园 - 三生石上(FineUI控件)
Engineering at Meta
Engineering at Meta
宝玉的分享
宝玉的分享
H
Help Net Security
月光博客
月光博客
雷峰网
雷峰网
D
Docker
Vercel News
Vercel News
人人都是产品经理
人人都是产品经理
博客园 - 【当耐特】
Stack Overflow Blog
Stack Overflow Blog
Apple Machine Learning Research
Apple Machine Learning Research
Y
Y Combinator Blog
小众软件
小众软件
博客园 - 聂微东
爱范儿
爱范儿
D
DataBreaches.Net

鸦鸦的巢穴

母欲养而猫不待 - 鸦鸦的巢穴 又活半年 - 鸦鸦的巢穴 服务器廉价续费迁移教程 - 鸦鸦的巢穴 AD原理图添加ROOM及模块复制的方法(PCB更新不删除) - 鸦鸦的巢穴 2025幸福报告 - 鸦鸦的巢穴 NAS入坑笔记 | 网盘+相册+影视库+软路由 ALL IN ONE - 鸦鸦的巢穴 迄今为止最满意的GIF录屏软件 - 鸦鸦的巢穴 沃尔沃VOLVO工厂参观日记 - 鸦鸦的巢穴 Argon主题优化 | 将说说添加到RSS - 鸦鸦的巢穴 人物速写(三):表演型人格的底层逻辑 - 鸦鸦的巢穴 人物速写(二):采样心理学与宿命心理学 - 鸦鸦的巢穴 人物速写(一):自恋型人格障碍素材合辑 - 鸦鸦的巢穴 上班真是太爽了 - 鸦鸦的巢穴 九寨沟单人行 - 鸦鸦的巢穴 最喜欢的三款Typora主题 - 鸦鸦的巢穴 一个充电宝引发的争论:先有mAh还是先有Wh - 鸦鸦的巢穴 自建Meting API修复音乐播放器 - 鸦鸦的巢穴 P2P联机游戏加速之ZeroTier方案 - 鸦鸦的巢穴 Matlab求解函数solve、vpasolve和fsolve宠幸谁 - 鸦鸦的巢穴 PCB进阶指南 - 鸦鸦的巢穴 运算放大器&比较器应用指南 - 鸦鸦的巢穴 教程 | 将博客朋友圈化——仅展示最近一个月动态 - 鸦鸦的巢穴 脑电波仅展示最近一个月动态,看到这条说明已经到底啦! - 鸦鸦的巢穴 PTC Mathcad 8.0 setup.exe 打不开/无反应解决办法 Word导出PDF图片模糊解决办法 & PPT制作海报导出图片分辨率不够解决办法 - 鸦鸦的巢穴 Microsoft Word 的文艺复兴 - 鸦鸦的巢穴 Zotero+阿里云盘WebDAV+公网访问≈无限空间+全平台 Altium Designer 重拾指南 | 菜鸟救星 - 鸦鸦的巢穴 Notion也可以有#文内标签# Matlab/Simulink批量运行仿真、参数寻优
页面加载速度优化指南 - 鸦鸦的巢穴
鸦鸦 · 2023-05-17 · via 鸦鸦的巢穴

前言

从建站至今一直没有优化过网站访问速度,也有小伙伴反映过我的页面加载速度奇慢,我也是知道的,然而懒癌发作一直都没有行动,还有什么SEO呀我也是佛系对待,纯属摆烂。直到最近才重新审视这个问题。

如何测速

上面两个都是谷歌家的,生成的报告内容也基本一模一样,区别在于前者是在别的地方模拟访问,后者是你自己的网络环境。

指标最好的一次报告,每次测试相差较大。

测速完成后还会给出很多优化建议,很有参考价值,按照它说的做也能提升不少。

太复杂的操作我也不会,最近小小地折腾了一下,目前了解到的影响访问速度的三大因素是:缓存、CDN、异步或延迟加载JS。

缓存

缓存据说是影响最大、见效最快的因素。

 为什么缓存能加快访问速度?

主要是节省了服务器执行PHP这一步骤。需要执行PHP的是动态页面,不需要执行代码的就是静态页面,静态比动态快。

我目前使用的缓存插件有:

  • WP Super Cache(WordPress插件,页面缓存,存至硬盘)
  • Autoptimize(WordPress插件,JS/CSS压缩和缓存,存至硬盘)
  • 堡塔网站加速(宝塔面板应用,据说和memcached效果差不多,存至内存)
  • opcache(宝塔面板PHP扩展,据说用于加速PHP脚本)

服务器也是一台计算机,理论上内存的读取速度比硬盘快,那么缓存到内存可能比缓存到硬盘快。

WP Super Cache

WP Super Cache的设置我参考了Bensz的这篇教程:Docker系列 WordPress系列 缓存插件WP Super Cache

Autoptimize

Autoptimize的设置不要瞎启用,可能会对主题功能造成一定影响,如果遇到问题,排查到那个设置项然后关闭,其他的只要开着没影响就打开好了。

这个插件起效后查看网页源代码应该是像这样谁也看不懂的压缩后的鬼画符。

堡塔网站加速

这个设置超简单的,点击配置向导选择WordPress专属规则就OK了。

opcache

这个好像不需要设置,在PHP的设置-安装拓展里装上就好了。

CDN

Content Delivery Network,内容分发网络,这个好理解,如果你不用CDN,所有内容都从你自己服务器上传输,压力很大,如果能从多个源头同时获取数据,效率就快了。而且CDN貌似能根据用户网络位置就近分发数据,就好比你网购时总是从最近的仓库发货。

考虑到这一点后,我把站点图标、背景之类的图片以及字体统统上传到OSS了,OSS配置了CDN加速。关于字体这里好像有个小坑,涉及到跨域传输,需要在阿里云设置一下,具体过程我忘记了,根据提示操作就行了。

其他的CDN平台也有,比如很常见的jsDelivr,配合GitHub使用就是免费的CDN,而且不需要任何配置,所有GitHub资源都可以通过https://cdn.jsdelivr.net/gh/用户名/仓库名/路径/文件名直接引用!具体案例可参考这里。怪不得大家都喜欢上传到GitHub,原来配合CDN之后理论上可以当网盘用。

另外,有一些使用率很高的公共库,比如MathJax,有很多现成的CDN,比如BootCDN,可以在这里面搜。其实Argon的主题资源、数学公式也是引用了CDN。

异步或延迟加载JS

页面加载速度里面,JS的加载和执行一般占了大头,因为很多臃肿、花俏、华而不实的东西都是通过JS实现的,而这些东西往往放在页尾脚本里,等到页面加载完再执行,起到锦上添花的作用。

主题的JS有些功能是必备的,一般予以排除。但是有些不太重要的JS可能没有设置异步,就必须执行完再加载后续页面,会造成阻塞。这里主要涉及async和defer两个概念,区别见下图[1]

async和defer的区别

那具体怎么优化呢?我直接用的Async JavaScript插件。这个插件作者和Autoptimize的作者是同一人。虽然插件名字叫Async,但async和defer两种功能都有,可以自己选,我试了下感觉区别不大,可能是因为很多JS本身就声明了async,优化空间不大,具体选哪种随缘,唯一需要注意的是设置里应排除Argon主题,否则有些功能加载不正常,比如左侧栏目录。

值得注意的是,这种方法并没有减少未使用的JavaScript,只是优化了时间顺序,具体如何减少未使用的JavaScript或CSS,甚至按需加载,笔者并没有研究。但按照谷歌测速的报告来看,如果能实现Tex公式的按需加载,应该还能节省一大笔时间。

小结

在缓存、CDN、异步或延迟加载JS这三大因素里,我感觉最有用的还是缓存,因为CDN你本来就或多或少有意识或无意识地在引用,另外很多JS的作者本来就预先声明了async,所以优化空间有限,但缓存真的是从0到1的质变,你自己不搞没人能帮你优化。我之前访问速度超级慢就是完全没设置缓存这些东西,今儿才算搞懂了它的作用。