Background Image
如何给网站优化
鱼鱼幼稚园部署在一台香港服务器(平均200ms延迟和30M小水管),但是经过优化后能做到比较良好的访问体验,本篇文章让鱼鱼来分享对AppleBlog优化的手段

前言

之前鱼鱼的Blog部署在宁波的一台超级服务器,拥有20ms极低延迟和200M无敌大带宽,所以AppleBlog即使不做任何优化都能达到很快的访问速度,主打个力大砖飞😧?

但是最近华为送了我一台香港服务器(200ms延迟和30M小水管),想着不浪费这台服务器(穷),就把Blog部署在这里了,发现访问速度极其慢,体验非常差😡

于是开始对AppleBlog进行了性能改进,改进后甚至比原来部署在宁波还快😯

赶快抛弃你的万年JPG,使用AVIF🤯!

AVIF使用AV1技术压缩图像,是目前图像压缩中的顶尖格式,具有非常高的压缩率和质量平衡,以及支持HDR图片等诸多高级功能

鱼鱼实测,同样的图片,AVIF体积只有JPG的1/7😨,质量却更好,对于AppleBlog这类有很多图片的网站,可以极大提高图片传输速度

火眼金睛测试👀

以下是两张图片对比,第一张是AVIF(994KB),第二张是JPG(8MB),你能看出两者有明显区别吗?

AVIF

JPG

使用nginx反代理,并设置缓存😯

AppleBlog有很多资源,js/css/图片,如果每次访问网页都从服务器重新下载,这个会消耗服务器很多网络流量,并且每次请求到下载完毕耗时都很长

分析AppleBlog的资源可以发现,很多资源都是一成不变的,比如文章的图片,所以我们可以让这些资源保存在设备上,这样就不需要重复从服务器请求了

nginx给我们提供了很便捷的设置缓存的方法,用法如:

    # 缓存静态资源
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg|eot)$ {
        expires 30d;   # 设置缓存过期时间为30天
        add_header Cache-Control "public, no-transform";  # 设置Cache-Control头
        try_files $uri $uri/ =404;
    }

    # 针对HTML文件设置短时间缓存
    location ~* \.(html)$ {
        expires 1h;   # 设置缓存过期时间为1小时
        add_header Cache-Control "public, must-revalidate";
        try_files $uri $uri/ =404;
    }





在使用了缓存后,我们会发现再次加载网页快了很多,加载图片的资源时间为0ms,因为都在memory cache里了

切换更强大的数据库以及增加redis⚡️

比起上面两种方法的立竿见影和数倍性能提升,这个方法性能提升有限

原来AppleBlog使用的是sqlite,它很好,小巧精简,可靠性也很好

不过我们可以选用"世界上最先进的开源关系型数据库":PostgreSQL

并且加上redis保证延迟一致性,并且减少数据库查询开销,具体用法如:

class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

    def get_queryset(self):
        # 检查缓存中是否有文章数据
        cached_queryset = cache.get('post_queryset')
        if cached_queryset:
            return cached_queryset

        # 如果缓存中没有数据,则查询数据库并缓存
        queryset = Post.objects.filter(available=True)
        cache.set('post_queryset', queryset, timeout=60 * 15)  # 缓存15分钟
        return queryset