|

像闪电一样加载WordPress页面:插件组和优化教程

在不使用CDN的前提下,如何提高网站的速度?想要让网站拥有像闪电一样的加载速度,最好的办法是启用缓存、无图、精简样式文件和字体文件等。我看了很多博客,几乎都是这个思路。

基础操作思路

今天我换个思路,刚刚把网站的Memcached停用,只启用SuperCache缓存,将WordPress的动态页面转为静态缓存。这是基础,毕竟动态查询还是比较慢的。在此基础上,再增加几块调整。

图片优化

目前这个优化方案针对的是我的博客。由于我比较喜欢放图,尤其是自己的臭脸图,所以图片优化就是重中之重了。
首先检查网站的首页调用的特色封面图片,质量非常大,一张就有8兆大小,首页还有很多这样的图片,无形中增加了加载的负担。这里我们的处理方法是通过钩子将首页的图片替换为缩略图,8兆的图片最后的大小变成了12k。

图片尺寸设置

在后台的设置>媒体中,你可以自己设置媒体大小。我的设置是:缩略图250px、中等580px、大图1280px。基本上这三个尺寸满足了大部分的使用场景,具体的质量大小建议你自己根据自己的博客来设置。
设置完后,使用缩略图生成插件。这里主要是特色封面生成,不需要生成其他图片,因为一般首页调用的都是封面特色图片。点击精选生成特色图片。
生成完缩略图后,小、中、大的尺寸就和你在媒体设置的保持一致了,我们就有了足够低质量的图片来作为首页和文章页面封面调用的来源了。插件名称:Regenerate Thumbnails。直接在后台插件市场搜索即可,启用然后在工具>重制缩略图中使用。
通过插件调用封面的缩略图,我没有直接修改主题代码,因为我平时总换主题。所以自己写了一个插件,用于直接选择调用首页和文章页面的特色封面质量。
你可以有三种选择,我的设置标准为首页缩略图250,文章页面580。这个插件不涉及数据库操作,不会影响网站性能,可以放心使用。
插件下载地址:optimize-thumbnails_T8GJX.zip

提前加载页面

提前加载页面这个思路,我是在@bosir的博客看到的。他提供的一个工具是instant.page,我发现一些博客主题已经集成了这个工具。提前加载的思路是:当我们访问网页的时候,鼠标悬浮在链接上,浏览器自动提取加载。当你点击的时候,其实已经加载过数据,这就造成了一种错觉,页面打开就像闪电一样。这个工具可以通过代码调用:

我也尝试通过代码调用了,但是加载的时候出现的效果是:有时候能用,有时候不能用,整个流畅性有问题。后来的思路是将js文件下载到本地,然后加载到主题里。鉴于我总换主题,就容易忘记添加代码,所以写了一个插件将这个功能集成到插件里面。开启后自动启用提前加载效果。核心代码基本上就几行,这里仍然不涉及数据库操作,可以放心安装插件,不会影响数据库加载。
插件下载地址:Jef-instant-page_NfJxN.zip

整体优化思路和插件组合

整体思路也比较简单:为特色封面设置小、中、大三个尺寸。
本文中使用的插件有:SuperCache动态生成静态、Regenerate Thumbnails缩略图重制、JefThumbnails Size特色封面质量选择来源、Jef Instant Loader提前加载页面,就这四个插件。

 

体验效果

优点:整体优化完换,删除浏览器缓存访问博客,速度有非常明显的提升!点击页面的加载的确有闪电一样的感觉。

不足:第一次访问首页的时候,速度仍然没有那么快,和bosir的首页加载仍然有差距。限制我的有两点,我的首页图片较多,无形中增加了加载成本,第二服务器是香港服务器,受到带宽影响和bosir国内的服务器没法比。

AI辅助:

文章排版由KIMI完成,代码开发由Cursor完成。

结尾

本文感谢 @bosir@沉沦 两位博友提供了具体的方法和一些借鉴性思路。针对于本文的具体使用,建议无图的下载插件JefThumbnails Size感受提前加载页面的魅力;如果博客图片比较多,又不想通过代码改主题的,直接安装插件操作即可。
如果你真的想体验闪电的速度,还是建议使用国内服务器,同时降低首页图片使用,或者无图。cdn也是一种不错的选择,本文的像闪电一样,到这里你知道了,纯纯就是标题党,闪电是达不到的,但是确实能够提升很大幅度的访问速度。

《 “像闪电一样加载WordPress页面:插件组和优化教程” 》 有 97 条评论

  1. Feng 的头像

    这个插件:Jef-instant-page_NfJxN,不知道有没有生效,大佬来耍耍

    1. Jeffer.Z 的头像

      我看已经添加了,在控制台能够看到加载,博客速度非常快。

  2. 闲鱼 的头像

    之前用过这个提前加载的浏览器扩展,确实有点作用。
    我都是图片各种压缩,其实这个高亮插件也比较影响的

    1. Jeffer.Z 的头像

      高亮插件对加载也是负担,我把一个灯箱插件都停了,用的古腾堡编辑器自己的灯箱插件,博客嘛,优化也就这样,不折腾啦,浪费了太多时间在这个上。

  3. 满心 的头像

    我现在都是先禁用wp的图片裁剪,然后所有图片压缩再使用,上免费CDN,速度就很不错了,当然各类优化的插件也都用上

    1. Jeffer.Z 的头像

      前些天脑抽,老想做速度优化,实际上服务器本身有带宽速率限制,怎么优化也就是这样,后来我看到带宽限制才反应过来。
      最好就是上cdn了,目前没有这个需求,博客这样就够了,也不是大项目。

  4. 亮娃子 的头像

    很不错,我先按照你的方法用上了

    1. Jeffer.Z 的头像

      哈哈,能用上就行,优化一点是一点,水磨功夫吧就算是。

  5. 时光散记 的头像

    WP 的附件是真的烦,一张图片上传,偏要处理成不同的尺寸图片

    1. Jeffer.Z 的头像

      对,会把服务器空间消耗,一张图多出来好多尺寸。相当于传一次等于传几次,大概是老美的人不缺服务器空间。

  6. 刘郎 的头像

    无图和精简样式是最快的 在不使用任何Cdn的情况下😂

    1. Jeffer.Z 的头像

      对,我帮两个博友优化,无图主题,搞完那个速度,太快了。

  7. 信息名单 的头像

    我目前的解决方案是:
    1. 先把图片无损压缩,顺带转换成webp格式(推荐图压工具软件:https://tuya.xinxiao.tech/)
    2. 使用对象存储服务存储+CDN加速图片,并进行参数处理(转换成avif格式)
    3. 后台安装Redis Object Cache 、 WP Rocket 、 Sync QCloud COS
    4. 服务器环境安装redis+PHP扩展opcache 、 redis

    1. Jeffer.Z 的头像

      感谢详细回复,目前这些我都上了,只有cdn没上,因为不是国内备案域名,主要是博客不太想放国内。图片已经分离出去,放在国内,所以目前就还行吧。

  8. 拾风 的头像

    wordpress感觉现在的访问速度比以前快不少,好奇,是代码官方有优化过吗,还是云服务器支撑的缘故。

    1. Jeffer.Z 的头像

      WP的系统应该是优化了,服务器端的话,要看自己的配置,PHP8.4确实快,在安装opcache就速度不错了,还可以增加一些其他的优化。

  9. Karlbaey 的头像

    不涉及服务器传输数据的网站加速本质上都是靠压缩,比如 WordPress 动态变静态。不过也可以考虑一下懒加载什么的。

    1. Jeffer.Z 的头像

      后台已经使用了静态缓存,还是内存缓存。服务器和静态层面基本上就这样,主要的在于大图片这些需要加速。图片目前压缩延迟加载的,但是速度吗,很感人

  10. 六道轮回 的头像

    页面压缩,越小加载速度越快

    1. Jeffer.Z 的头像

      压缩,图片太大了,压缩也白扯,现在是图太多啦,只能把图片换低质量。

  11. krwater 的头像

    图片用webp是不是比较好

    1. Jeffer.Z 的头像

      效果不会差太多了,毕竟原始图片就特别大。刚换了加速方式,应该快一些了。

  12. 皇家元林 的头像

    提前加载这个,我也看过,懒得加,你现在整成插件了,不错,我试试。

    1. Jeffer.Z 的头像

      插件就是方便点,毕竟动手麻烦,换主题每次都挨个代码调整一遍。可以试试,我发现每个博客出来效果都不一样,有的快有的慢,应该和博客内部的资源加载有关系。

  13. 阿锋 的头像

    提前加载,这个功能好。如果用户不点击,感觉会浪费提前加载的资源。

    1. Jeffer.Z 的头像

      是会消耗资源的,如果是大站用就会比较消耗。个人博客的话,每天的访问量倒是问题不大,以我这个一天几十上百IP访问还行,但是访问量大了就不推荐用了。

  14. 1900 的头像

    感觉这种形式的缩略图都是拿储存空间换速度。
    还是用云空间的图片处理函数来的方便,后缀加上参数就能获得想要的图片尺寸。

    1. Jeffer.Z 的头像

      云空间存储的话我没用过,如果是使用三方的调用应该也不错,分离加载应该效果很好。
      这个就是利用了wp自带的三个尺寸,实际上图片一进wp就会被裁切出来这三个尺寸,所以直接利用钩子调用的这个图到首页和文章页面,属于二次利用一下,不用到话那三个图片也特别占空间。

      1. 1900 的头像

        空间本来就不大,这样会增加挺多占用的。
        还是云储存香,哈哈。

  15. 蒙需 的头像

    优化学习了。
    我是一直保持原汁原味,使用 Jetpack Boost 显示性能还不错。
    所以暂时就先这样,等哪天访问慢了再多方面调整一下博客。

    1. Jeffer.Z 的头像

      不敢当啊,我看你博客访问非常快,没必要优化的。我的博客因为我喜欢折腾,加载了很多插件和服务,导致了拖慢了速度,不得不上优化,否则访问还是有点慢点。

  16. Xoyo 的头像

    比闪电还快喔,速度堪比跑步进入新时代 😀 使用 instant.page 后服务端必须能快速响应预加载请求,否则反而适得其反,它非常适合没有复杂 JS 路由,内容以静态页面为主的网站。

    1. Jeffer.Z 的头像

      笑死,评论区都是这句调侃。wp的话,其实开启静态缓存还凑合,提前加载能够满足基本的响应,但是因为wp的乱七八糟加载太多,所以会把加载多慢,我是想用静态,但是不太习惯静态博客的操作。

  17. 耳朵的主人 的头像

    嘿嘿,我找不到可以折腾的活,晚上就照着你的文章来操作下,打发我的漫漫长夜。

    1. Jeffer.Z 的头像

      建议升级PHP8.4,开启Opcache,Memcached,supercache,然后再启用提前加载和图片首页选择插件。在8.4的情况下,速度会有显著的提升。

      1. 耳朵的主人 的头像

        哈哈,折腾一夜,我就弄了那个提前加载,嘿嘿,现在速度有快一点吗?

      2. Jeffer.Z 的头像

        快了一些,但是加载感觉还是有点慢,是啥拖慢了速度?,应该生成静态缓存了吧,按理说应该比这个更快一些才对。

  18. Andy烧麦 的头像

    打开是真的快,比时间还快

    1. Jeffer.Z 的头像

      是是是,比光速都快 😳

  19. 网友小宋 的头像

    几天不上网,怎么到处评论区头像都挂了。

    1. Jeffer.Z 的头像

      你不说我没注意,cravar的不太稳定,换Sep.cc的吧。

  20. 林三 的头像

    第2次打开,确实是闪电速度,不错不错…

    1. Jeffer.Z 的头像

      哈哈哈,缓存完就快了,但是优秀的站点第一次访问也很快。还得优化啊~

  21. 威言威语 的头像

    WordPress 6.8 好像就新增推测性加载的功能,还不知道具体怎么样。

    1. Jeffer.Z 的头像

      推测下加载不会就是提前加载吧,我并不看好,现在提升上不去的,是wp的自身性能,Wp还是太臃肿了。

  22. Astrophel 的头像
    入选走心评论

    确实感觉到访问速度变快了👍🏻

    1. Jeffer.Z 的头像

      比原来快了一些,算是没有白弄,有一些效果。

  23. Evan 的头像

    我其实,只关心闪电⚡哈哈哈哈哈哈哈哈哈哈哈

    1. Jeffer.Z 的头像

      你好,我是闪电⚡️,请把你的提前加Js载带走。

  24. 灰常记忆 的头像

    typecho是比较快速的 网络环境关系也很大

    1. Jeffer.Z 的头像

      ty的性能好,我是香港服务器,多少也有一些影响。毕竟整个访问速度是一个综合性能后的结果。

  25. 似水流年 的头像

    Bosir的这个是typecho吧?
    我感觉wp再怎么优化速度上也没typecho快,毕竟代码体量在那放着,可能这是你感觉没他的快的原因。

    1. Jeffer.Z 的头像

      Bosir的是ty的博客,性能真的好,不过我还是喜欢Wp,毕竟生态在这里放着。

  26. 龙笑天 的头像

    WP自带的缩略图裁剪会把一张图片裁剪出好几张不同尺寸的缩略图片,有点太占硬盘空间了~

    1. Jeffer.Z 的头像

      确实非常占用空间,不过我的原始图也太大了,最小的5mb,大的十几mb,不得已还是得使用缩略图放首页加载。

      1. 龙笑天 的头像

        用作缩略图的图片搞300KB以内就行哈,大了有点吓人了~
        PS:贵站怎么没有评论回复的提醒邮件?有人回复了都不知道~~

      2. Jeffer.Z 的头像

        现在有邮件提醒没,我用的一个邮件提醒插件太老了,升级php8.4结果插件无法启动,好多天我都不知道,刚才临时写了一个插件,应该可以看到邮件了吧。我把缩略图换完,大约 几十k吧,应该还行,就是没cdn还是有点慢的。

      3. 龙笑天 的头像

        嗯 现在有邮件了。你这速度很快了 我这秒开~

      4. Jeffer.Z 的头像

        有通知就好,我再想想办法,应该还能优化优化。😂我访问你官网,特别快,香港服务器不应该只这个速度。

      5. 龙笑天 的头像

        香港服务器来说 你这非常快了。如果还想追求速度 可以把JS/CSS/图片等静态文件用备案的二级域名反代下再套个CDN 那就更快了。

      6. Jeffer.Z 的头像

        对,你这个思路清晰了,我研究下怎么用钩子把静态文件分离出去到备案服务器,然后再给备案套cdn,这样就直接静态加载啦,感谢龙总的思路。😄

  27. 粽叶加米 的头像

    我也是用这个缩略图插件,非常好用。

    1. Jeffer.Z 的头像

      这个确实好用,我是用这个,然后再用我做那个插件,把首页的图和文章页面封面图换到中等尺寸。

  28. 花非花 的头像

    WP感觉有些臃肿,好久没做主力用了;当前主用typecho,轻量化。不过优化思路值得参考

    1. Jeffer.Z 的头像

      WP的后台更慢,,,我有考虑用静态,但是不太习惯没有后台,所以只能优化下。typecho的是真快,凡是用ty的博友,我访问几乎就没有慢点,除非是主题加点负载比较多,正常一点都特别快。

  29. 文案姐笔记 的头像

    提前加载页面
    这个功能很实用呀!目前我的优化就到预解析。

    1. Jeffer.Z 的头像

      这个功能挺实用的,我网站速度我觉得还是不够快的,毕竟香港服务器没法和国内的比。

  30. Kevin's Space 的头像

    的确看到了 提前加载的影子哈哈哈,棒

    1. Jeffer.Z 的头像

      技术普及好快,最近看发现几乎全员上提前加载了。感谢Bosir给我的普及。

  31. 大致 的头像

    不优化。看的人急,我写的人着什么急。

    1. 文案姐笔记 的头像

      自己要着急呀!不知道你么是怎么预览的!我是那种最简单的方式!只是写完,没有意识在编辑器读总要点开那个 预览链接读。不知道你们用wp是不是这样的。

    2. Jeffer.Z 的头像

      思路完美闭环,下届脱口秀大会没你我不看~

  32. Mr.He 的头像

    确实快了那么一丢丢

    1. Jeffer.Z 的头像

      我的感受快了不少,还是和各地网络环境有关系,但是又没有到特别快的地步。

  33. XIGE 的头像
    XIGE

    速度快了不少,我这很明显

    1. Jeffer.Z 的头像

      确实挺明显的,但是还是不够快,这个线路优化也就这样了,不备案还是不太行,速度起不来。

  34. 皮皮 的头像

    的确比以前打开快一点点,效果不明显,不知道是否心理反应

    1. Jeffer.Z 的头像

      我猜测你访问速度很快的缘故是,我的服务器就是香港的,然后你正好是本地人访问最优线路,反倒是我们内陆访问速度不如你快。其实优化完速度挺明显的,但是本来你就快所以感觉不到那么明显。

  35. Siven 的头像

    臭脸图是精髓。

    1. Jeffer.Z 的头像

      你一下子就get了精髓,臭脸图和我头像一模一样。

  36. 三十海河 的头像

    你站点挺快的啊~

    1. Jeffer.Z 的头像

      还是有点慢,和理想状态差太多,主题和图片都不太行,首页无图最好,但是我还是想加图…..

  37. 紫慕 的头像

    挺闪电的,我觉得我的博客也需要像闪电一样优化一下子。

    1. Jeffer.Z 的头像

      还不够快,你看看bosir的博客,快的都冒火星子,你的我记得静态博客,应该好优化。

      1. 紫慕 的头像

        伪静态,最后换了了图标ico,占用了我36ms左右,刚觉还是像素太大了,感觉优化不了一点了。

  38. acevs 的头像

    速度很快,可惜我阅读速度很慢。哈哈。

    1. Jeffer.Z 的头像

      阅读慢出细活,我看东西快,扫几眼就完事了….

  39. ymz316 的头像

    对于图片我总想既要保留必要大小或者细节,又想要减少内存,真是两难选择。

    1. Jeffer.Z 的头像

      我现在就是这个状态,想要快还想加大图,又不想失真,结果快不起来。

  40. 广树 的头像

    我的小破站就是把页面缓存在了内存里,大概有1GB的内存空间划分出来缓存页面。

    1. Jeffer.Z 的头像

      我尝试了下几个缓存吗内存,如果服务器不太稳定,非常容易卡顿,所以直接就不用缓存到内存,也可能是我没调教好效果。

  41. Snake Wu 的头像

    我就是觉得wp太臃肿了,然后混编不优雅,就用react做的前端,在wp的基础上封装接口,可玩性也更大了~

    1. Jeffer.Z 的头像

      wp的性能不好,你看typecho什么都不弄都很快,太大了项目,现在就是生态齐全,所以用的多,我本来想用静态,但是用着不习惯。

  42. 夜未央 的头像

    流量少时使用CDN其实更慢了,因为经常要回源,不过据说用了CDN可以更安全,这才是我选择CDN的原因。

    1. Jeffer.Z 的头像

      我没用过cdn,但是我看博友用cdn的确实快,尤其是很多图片的情况下,图片都是一瞬间就出来啦。

  43. obaby 的头像

    ⚡️闪电呢?

    1. Jeffer.Z 的头像

      一种小修辞手法 😁

回复 ymz316 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注