在不使用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页面:插件组和优化教程” 》 有 81 条评论

发表回复

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


  1. 1900 的头像

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

    1. Jeffer.Z 的头像

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

      1. 1900 的头像

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

  2. 蒙需 的头像

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

    1. Jeffer.Z 的头像

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

  3. Xoyo 的头像

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

    1. Jeffer.Z 的头像

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

  4. 耳朵的主人 的头像

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

    1. Jeffer.Z 的头像

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

      1. 耳朵的主人 的头像

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

      2. Jeffer.Z 的头像

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

  5. Andy烧麦 的头像

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

    1. Jeffer.Z 的头像

      是是是,比光速都快 😳

  6. 网友小宋 的头像

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

    1. Jeffer.Z 的头像

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

  7. 林三 的头像

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

    1. Jeffer.Z 的头像

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

  8. 威言威语 的头像

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

    1. Jeffer.Z 的头像

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

  9. Astrophel 的头像

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

    1. Jeffer.Z 的头像

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

  10. Evan 的头像

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

    1. Jeffer.Z 的头像

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