在不使用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也是一种不错的选择,本文的像闪电一样,到这里你知道了,纯纯就是标题党,闪电是达不到的,但是确实能够提升很大幅度的访问速度。
Categories:

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

发表回复

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


  1. Astrophel 的头像

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

  2. Evan 的头像

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

  3. 灰常记忆 的头像

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

  4. 似水流年 的头像

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

  5. 龙笑天 的头像

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

  6. 粽叶加米 的头像

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

  7. 花非花 的头像

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

  8. 文案姐笔记 的头像

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

  9. Kevin's Space 的头像

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

  10. 大致 的头像

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

    1. 文案姐笔记 的头像

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

  11. Mr.He 的头像

    确实快了那么一丢丢

  12. XIGE 的头像
    XIGE

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

    1. Jeffer.Z 的头像

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

  13. 皮皮 的头像

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

    1. Jeffer.Z 的头像

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

    1. Jeffer.Z 的头像

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

    1. Jeffer.Z 的头像

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

  14. 紫慕 的头像

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

    1. Jeffer.Z 的头像

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

  15. acevs 的头像

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

    1. Jeffer.Z 的头像

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

  16. ymz316 的头像

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

    1. Jeffer.Z 的头像

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

  17. 广树 的头像

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

    1. Jeffer.Z 的头像

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

  18. Snake Wu 的头像

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

    1. Jeffer.Z 的头像

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

  19. 夜未央 的头像

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

    1. Jeffer.Z 的头像

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

    1. Jeffer.Z 的头像

      一种小修辞手法 😁