V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xuelang
V2EX  ›  程序员

个人博客访问速度优化~ 各位大佬帮忙看看有啥改进点没

  •  
  •   xuelang ·
    selfboot · 310 天前 · 2663 次点击
    这是一个创建于 310 天前的主题,其中的信息可能已经有所发展或是发生改变。

    文章在这里:

    个人博客访问速度优化:CDN, 图片压缩, HTTP2

    可以访问下看看加载速度如何。

    希望大家多批评指针~

    49 条回复    2024-01-15 17:18:18 +08:00
    weip
        1
    weip  
       310 天前
    tinypng 图片无损压
    BG7ZAG
        2
    BG7ZAG  
       310 天前
    速度挺快的~
    zjhzxhz
        3
    zjhzxhz  
       310 天前
    我当时也写过一篇文章做优化: https://infinitescript.com/2019/06/accelerate-wordpress-with-cdn-and-cache-servers/

    国内我直接全站静态化用了 CDN ,国外做了动静分离。
    xuelang
        4
    xuelang  
    OP
       310 天前
    @weip 嗯,这个是前置的。我现在是图片传到指定目录,会自动无损压缩,然后加日期传 cos

    https://selfboot.cn/2023/06/02/auto_compress_upload/
    xuelang
        5
    xuelang  
    OP
       310 天前
    @zjhzxhz 哇,你这个很厉害,速度也很快
    fuyun
        6
    fuyun  
       310 天前
    如果传统服务端( PHP 、Java 、Node.js 等)渲染,首屏加载很快;如果 SSR ,首屏会有影响,但后续访问速度飞快,纯 API 请求了;如果 CSR ,……这一套东西( CDN 、压缩、混淆、服务端/客户端缓存、AJAX 等等),无论哪种选择都很成熟了。我也在思考性能、交互、开发的平衡问题,且,加载速度只是访问速度(性能)的一方面,还包括可操作性(影响交互、体验)、操作后的响应速度等。
    kaf
        7
    kaf  
       310 天前
    有启用 gzip 吗
    xuelang
        8
    xuelang  
    OP
       310 天前
    @kaf 图片的 gzip 吗?这个还没注意,我看看
    kaf
        9
    kaf  
       310 天前
    顺便发下我司页面性能检测工具的结果
    红色指标
    首屏资源大小
    1233 Kb (1024 Kb)
    建议优化项
    URL 资源大小 可优化资源占比
    https://www.googletagmanager.com/gtag/js?id=G-QNFB9JLSPV
    77 KB 38.6 %
    https://selfboot.cn/css/style.css?v=1.0.0
    12 KB 86.0 %
    https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
    19 KB 99.1 %
    kaf
        10
    kaf  
       310 天前
    @xuelang 图片的 gzip 没有意义,一般用于 js ,css ,text ,xml ,html 等资源
    xuelang
        11
    xuelang  
    OP
       310 天前
    @kaf 嗯,这些我看 netlify 用 Content-Encoding: br 来压缩的。
    图片确实没必要,已经是压缩过的格式,再压缩就纯浪费 cpu 了
    xuelang
        12
    xuelang  
    OP
       310 天前
    @kaf google 这个 js 是 GA4 的,不能去。
    然后剩下几个 css ,主要大小也没多大,没时间去看哪些 css 用不到。

    这些 Google 的 insight 也报了出来的
    since2021
        13
    since2021  
       310 天前
    cloudinary 图片自动优化
    misaka19000
        14
    misaka19000  
       310 天前 via Android
    搭车问一下,目前博客放在 github pages ,速度不太理想,有什么优化手段吗?
    wuzhanggui
        15
    wuzhanggui  
       310 天前
    我的后端渲染,拼接个字符串,秒出
    https://blog.dumogu.top/
    xuelang
        16
    xuelang  
    OP
       310 天前
    @misaka19000 可以用免费 cdn 啊,我用的就是 netlify ,也可以用 Cloudflare 或者其他
    xuelang
        17
    xuelang  
    OP
       310 天前
    misaka19000
        18
    misaka19000  
       310 天前 via Android
    @xuelang 谢谢,研究了一下发现又拍云好像不错,准备试一下😁
    xuelang
        19
    xuelang  
    OP
       310 天前
    @misaka19000 嗯嗯,搞个 cdn 会快不少的
    encro
        20
    encro  
       310 天前
    无需优化,一直最快: https://c4ys.com/
    encro
        21
    encro  
       310 天前
    刚才用谷歌流浪器的 lighthouse 试了下,居然评分 99.。。
    xuelang
        22
    xuelang  
    OP
       310 天前
    @encro 会不会是因为没啥图片,哈哈哈。
    还是 http1.1 也没 cdn ,其他人访问可能会慢的
    encro
        23
    encro  
       310 天前
    @xuelang

    必须的啊,裸奔一丝不挂最快。。。
    Deshun
        24
    Deshun  
       309 天前 via Android
    套了 CDN 确实有效果 w3h5.com ,但是因为接了 Google AdSense ,导致 Lighthouse 结果特别差,楼主知道怎么解吗?
    xuelang
        25
    xuelang  
    OP
       309 天前
    @Deshun 看了下速度还可以啊。lighthouse 评估维度比较多,看看你关心的指标好不好就行
    hexiaowu1993
        26
    hexiaowu1993  
       309 天前
    我看 OP 还是个律师?还有法律相关咨询?
    xuelang
        27
    xuelang  
    OP
       309 天前
    @hexiaowu1993 我是程序员。。。 老婆是律师,https://selfboot.cn/links ,有法律需求可以来,很靠谱~
    kisnows
        28
    kisnows  
       309 天前   ❤️ 1
    可以分享一下前段时间整理的性能优化的文章: https://blog.kisnows.com/2023/01/11/alibaba-buyer-performance-optimization-summary
    kisnows
        29
    kisnows  
       309 天前   ❤️ 1
    还有博主提到的图片压缩格式,现在有新的压缩格式 avif ,这个比 webp 更好,而且浏览器支持程度也还不错,可以考虑。
    kisnows
        30
    kisnows  
       309 天前
    还有图片其实现在有了更好的压缩格式叫 avif ,浏览器的支持程度也很不错,博主可以试试,我们业务上已经在推了。
    Deshun
        31
    Deshun  
       309 天前
    @xuelang LCP 和 FCP 时间特别久,应该会影响排名吧?
    xuelang
        32
    xuelang  
    OP
       309 天前
    @Deshun 嗯嗯,理论上会的
    xuelang
        33
    xuelang  
    OP
       309 天前
    @kisnows 这个文章很不错,看完有收获,感谢大佬
    Msxx
        34
    Msxx  
       309 天前
    我好奇如何在不备案的情况下使用 cn 域名
    ragnaroks
        35
    ragnaroks  
       309 天前
    https://www.ragnaroks.site/default/,hexo 还是太慢了,也不够灵活

    ragnaroks
        36
    ragnaroks  
       309 天前
    @wuzhanggui 作为后端渲染你这个确实很快了,在我这比本地起个 go(fiber) send file 还快
    xuelang
        37
    xuelang  
    OP
       309 天前
    @Msxx 服务器不在国内就行。。 博客托管在 netlify 或者直接 Github pages 就行。
    proxytoworld
        38
    proxytoworld  
       309 天前
    @kisnows 哥们你博客能搞个 rss 吗,像订阅 rss 方便一点
    xuelang
        39
    xuelang  
    OP
       309 天前
    @ragnaroks hexo build 之后就是静态文件了,访问速度不慢的。 确实不够灵活,不过好在可以自己改
    ragnaroks
        40
    ragnaroks  
       309 天前
    @xuelang 我说的就是 hexo SSG 太慢了,SSG 之间也是有区别的,hexo 的文件组织方式比较原始。我以前也用了很久 hexo ,隔离的时候反正没事做用 next 重写了
    xuelang
        41
    xuelang  
    OP
       309 天前
    @ragnaroks 哦哦,是见过其他 ssg 的,据说几千个 md 文件,秒级别渲染。你的可以分享下看看吗
    ragnaroks
        42
    ragnaroks  
       309 天前
    @xuelang https://nextjs.org/docs ,对位的是 next/mdx
    kisnows
        43
    kisnows  
       306 天前
    @proxytoworld 抽空搞一下
    kisnows
        44
    kisnows  
       303 天前
    xuelang
        45
    xuelang  
    OP
       303 天前
    @kisnows This page contains the following errors:
    error on line 13 at column 568: StartTag: invalid element name
    Below is a rendering of the page up to the first error.
    kisnows
        46
    kisnows  
       303 天前
    @xuelang 我手头没有 rss 的阅读器,没法测试。
    浏览器是显示这个错误,但是我看具体的返回内容看起来没什么问题
    ```xml
    <?xml
    version="1.0" encoding="UTF-8"?>
    <rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
    <title><![CDATA[Kisnows\\'s Blog]]></title>
    <description><![CDATA[记录前端开发以及生活]]></description>
    <link>https://blog.kisnows.com</link>
    <image>
    <url>https://blog.kisnows.com/favicons/favicon.svg</url>
    <title>Kisnows\\&apos;s Blog</title>
    <link>https://blog.kisnows.com</link>
    </image>
    <generator>RSS for Node</generator>
    <lastBuildDate>Mon, 08 Jan 2024 12:22:38 GMT</lastBuildDate>
    <atom:link href="https://blog.kisnows.com/feed.xml" rel="self" type="application/rss+xml"/>
    <language><![CDATA[zh-CN]]></language>
    <item>
    <title><![CDATA[前端开发标准化 - 最佳实践 - 从开发到上线]]></title>
    <description><![CDATA[<h2>前言</h2>
    <p>本文原发于公司内部 ATA 平台,经过数据脱敏后,重新整理成为了这篇文章。所以文章内会有很多内部系统的介绍和链接,这些链接以及平台无法在非公司内网打开,但不影响文章整体的阅读和理解。</p>
    <h2>前言</h2>
    <p>在过去的一年中,我们团队的流量业务经历了一系列的重构和大幅度性能优化。最近,在<strong>前端开发标准化平台</strong>的支持下,我们也进行了一轮标准化治理。现在,从各个角度来看,整个应用相比之前都有了不小的提升。</p>
    <p>抛砖引玉,我把其中的一些思考和选择总结成了这篇文章,给大家做参考。</p>
    <h2>技术选型</h2>
    <h3>开发框架选择</h3>
    <h4>为什么选择 React</h4>
    <p>这个没有什么需要讨论的,内部的所有基建以及大环境决定了必然是 React 。</p>
    <h4>为什么是 React18</h4>
    <p>原本项目是 React16 ,React18 相较于 16 主要的变化:</p>
    <ul>
    <li>并发模式 - React18 默认开启了并发模式, 简单讲就是组件渲染从同步不可中断改为了异步]]></description>
    <link>https://blog.kisnows.com//2023/09/15/frontend-development-standardization-best-practices</link>
    <guid isPermaLink="false">/2023/09/15/frontend-development-standardization-best-practices</guid>
    <category><![CDATA[前端开发]]></category>
    <category><![CDATA[最佳实践]]></category>
    <pubDate>Fri, 15 Sep 2023 07:49:23 GMT</pubDate>
    <enclosure url="https://blog.kisnows.com/favicons/favicon.svg" length="0" type="image/svg+xml"/>
    <0>前端开发</0>
    </item>
    <item>
    <title><![CDATA[Alibaba.com 性能优化经验总结]]></title>
    ...
    ```
    kisnows
        47
    kisnows  
       303 天前
    @xuelang 再试试,应该可以了。
    我找了个 rss 阅读器测试过了。
    xuelang
        48
    xuelang  
    OP
       303 天前
    @kisnows 确实可以了的~
    proxytoworld
        49
    proxytoworld  
       298 天前
    @kisnows 没问题,就是没有全文
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1075 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 19:06 · PVG 03:06 · LAX 11:06 · JFK 14:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.