本文介绍一下常用的网站速度优化,借鉴了大量的网上资料,由于能力有限,仅仅列出来自己能处理的几个方面。希望大家的网站打开都速度飞快,嗖嗖的~
1、开启Gzip/Brotli压缩
检查nginx 上是否开启了 gzip,现在一般都默认开启了:
压缩率一般都是建议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 依然能够提供非常高的压缩率
2、网站图像压缩
首先,如果是本地的图片的话,质量可以接受的情况下尽量压缩大小。
建议使用JPEG/webp格式,而不是GIF和PNG图像,除非图像包含Alpha因子或者是透明的。
WebP 就像 JPEG 的升级版。 它是 Google 推出的图片文件格式,它的目的就是为 Web 上的图片资源提供卓越的有损、无损压缩。
有条件的可以使用webp格式的图片,我用的Snipaste截图,不支持webp,写文章的图片就用jpeg凑活着吧。
3、CDN加速
(1)、外部库公共CDN加速
首先是主题的CDN加速。在Handsome主题下,可以选择公共库,我选择字节跳动的CDN,貌似相对比较快。
当然这个库是主题的使用了jquery、bootstrap、vditor、mdui、mathjax外部库(体积较大>60kb)
(2)、静态资源CDN
主题本地静态资源自定义cdn加速,如果自己有CDN服务器的话,可以自己搭建。在使用说明里面都有细说方法。
如果没有的话,可以找这两个Handsome 静态资源CDN加速(已更新)、[Handsome主题静态资源CDN加速服务[更新至8.3.0]](https://blog.9az.ren/archives/88.html)借用一下。而且支持自定义,非常感谢两个大佬,在此谢过。
(3)、插件的CDN
我用的美化插件是AliceStyle,感谢温瞳's Blog
大佬提供的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主题中,懒加载不需要修改代码,在外观设置中开启即可:主题增强功能——>增强功能开关——>延迟加载图片