本文介绍一下常用的网站速度优化,借鉴了大量的网上资料,由于能力有限,仅仅列出来自己能处理的几个方面。希望大家的网站打开都速度飞快,嗖嗖的~

1、开启Gzip/Brotli压缩

检查nginx 上是否开启了 gzip,现在一般都默认开启了:

检查Nigx配置

压缩率一般都是建议4~5:

宝塔中压缩率设置

如果开启了这一个就没有什么必要了。

也可以直接在站长工具 网页GZIP压缩检测里面检测一下自己的网站是否开启了压缩:

站长工具检测

如果没有开启的话,在网站根目录下的index.php文件下(不是主题目录下)添加以下代码,开启Gzip压缩:

 /** Gzip压缩 */
ob_start('ob_gzhandler');

代码插入的位置

网站开启了Gzip会对传输的数据进行压缩,既可以减少流量,也可以提高网站速度。

小发现:即便nginx 上是否开启了 gzip,在index文件上添加之后可以小幅度再压缩,比如我的从74%达到76%(好像变化也不是很大)

再次测试压缩率

如果嫌弃这还不能满足你的需求,愿意折腾的话可以看看这个文章:

塔Linux面板Nginx开启Brotli压缩,提升网站加载速度

根据 Google 发布的研究报告,Brotli 压缩算法具有多个特点,最典型的是以下 3 个:

  • 针对常见的 Web 资源内容,Brotli 的性能相比 Gzip 提高了 17-25%;
  • 当 Brotli 压缩级别为 1 时,压缩率比 Gzip 压缩等级为 9(最高)时还要高;
  • 在处理不同 HTML 文档时,Brotli 依然能够提供非常高的压缩率

Brotli和Gzip是否冲突的问答

2、网站图像压缩

首先,如果是本地的图片的话,质量可以接受的情况下尽量压缩大小。

建议使用JPEG/webp格式,而不是GIF和PNG图像,除非图像包含Alpha因子或者是透明的。

WebP 就像 JPEG 的升级版。 它是 Google 推出的图片文件格式,它的目的就是为 Web 上的图片资源提供卓越的有损、无损压缩。

有条件的可以使用webp格式的图片,我用的Snipaste截图,不支持webp,写文章的图片就用jpeg凑活着吧。

Snipaste截图设置

3、CDN加速

(1)、外部库公共CDN加速

首先是主题的CDN加速。在Handsome主题下,可以选择公共库,我选择字节跳动的CDN,貌似相对比较快。

公共CDN加速

当然这个库是主题的使用了jquery、bootstrap、vditor、mdui、mathjax外部库(体积较大>60kb)

(2)、静态资源CDN

主题本地静态资源自定义cdn加速,如果自己有CDN服务器的话,可以自己搭建。在使用说明里面都有细说方法。

自建CDN详细步骤

如果没有的话,可以找这两个Handsome 静态资源CDN加速(已更新)Handsome主题静态资源CDN加速服务[更新至8.3.0]借用一下。而且支持自定义,非常感谢两个大佬,在此谢过。

(3)、插件的CDN

我用的美化插件是AliceStyle,感谢温瞳's Blog大佬提供的CDN加速。

大佬提供的加速CDN

AliceStyle3.4.0版本的CDN加速地址:https://static-public.9az.ren/static/AliceStyle/3.4.0/static/

AliceStyle3.3.2版本的CDN加速地址:https://static-public.9az.ren/static/AliceStyle/3.3.2/static/

4、谷歌广告懒加载

原本的广告:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-你的id"
     data-ad-slot="你的id"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

首先,把

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"
     crossorigin="anonymous"></script>

放到头部,而不是每次都加载一下,这也是谷歌广告官方所支持的。页面的所有广告这样共同一个头还是不够的。让谷歌广告懒加载,可以提高网速,window.addEventListener 来实现谷歌广告懒加载,可直接复制使用,放在网站 head ,修改实例如下:(推荐使用)

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.setAttribute("async", "");
        element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID";
        element.setAttribute("crossorigin", "anonymous");
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

把上面的这段js放在我们页面的head之内,即使多个页面都会统一调用,然后将<ins><script>代码放在网页广告接口位置即可。

5、避免使用过多的插件

博主的插件列表

过多的插件会产生许多http请求,甚至产生一堆网页错误,拉下来网站的响应时间。所以,花里胡哨的插件没啥必要就不要装了,尽可能减减肥吧。

6、统计代码

统计代码不建议放在head里面。因为统计代码不是你最网站重要的东西。可以放到底部或者body的尾部,这样,在计数器不能访问的时候,你的网站速度也不会受到太大的影响。

统计位置示意图

7、图片懒加载

如果只是普通的文章博客,没啥太大必要。要是图片较多的那种,可以给网站设置懒加载。

具体的方法在网上找找挺多的。因为我的文章图片可能也就几张,基本看不出来什么效果。

在handsome主题中,懒加载不需要修改代码,在外观设置中开启即可:主题增强功能——>增强功能开关——>延迟加载图片

开启懒加载


博主个人公众号
版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/SEOSpeed.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 06 月 27 日
如果觉得我的文章对你有用,请随意赞赏