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

[xuelang]

文章在这里：

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

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

希望大家多批评指针～

[weip]

tinypng 图片无损压

[BG7ZAG]

速度挺快的~

[zjhzxhz]

我当时也写过一篇文章做优化： https://infinitescript.com/2019/06/accelerate-wordpress-with-cdn-and-cache-servers/

国内我直接全站静态化用了 CDN ，国外做了动静分离。

[xuelang]

@weip 嗯，这个是前置的。我现在是图片传到指定目录，会自动无损压缩，然后加日期传 cos

https://selfboot.cn/2023/06/02/auto_compress_upload/

[xuelang]

@zjhzxhz 哇，你这个很厉害，速度也很快

[fuyun]

如果传统服务端（ PHP 、Java 、Node.js 等）渲染，首屏加载很快；如果 SSR ，首屏会有影响，但后续访问速度飞快，纯 API 请求了；如果 CSR ，……这一套东西（ CDN 、压缩、混淆、服务端/客户端缓存、AJAX 等等），无论哪种选择都很成熟了。我也在思考性能、交互、开发的平衡问题，且，加载速度只是访问速度（性能）的一方面，还包括可操作性（影响交互、体验）、操作后的响应速度等。

[kaf]

有启用 gzip 吗

[xuelang]

@kaf 图片的 gzip 吗？这个还没注意，我看看

[kaf]

顺便发下我司页面性能检测工具的结果
红色指标
首屏资源大小
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]

@xuelang 图片的 gzip 没有意义，一般用于 js ，css ，text ，xml ，html 等资源

[xuelang]

@kaf 嗯，这些我看 netlify 用 Content-Encoding: br 来压缩的。
图片确实没必要，已经是压缩过的格式，再压缩就纯浪费 cpu 了

[xuelang]

@kaf google 这个 js 是 GA4 的，不能去。
然后剩下几个 css ，主要大小也没多大，没时间去看哪些 css 用不到。

这些 Google 的 insight 也报了出来的

[since2021]

cloudinary 图片自动优化

[misaka19000]

搭车问一下，目前博客放在 github pages ，速度不太理想，有什么优化手段吗？

[wuzhanggui]

我的后端渲染，拼接个字符串，秒出
https://blog.dumogu.top/

[xuelang]

@misaka19000 可以用免费 cdn 啊，我用的就是 netlify ，也可以用 Cloudflare 或者其他

[xuelang]

@wuzhanggui https://dumogu-blog.oss-cn-chengdu.aliyuncs.com/ce571a321b9de35a7344ec5e19e4dd2e-test%20-%20%E5%89%AF%E6%9C%AC.png 这个图片还是 http 1.1 的，加载明显有延迟才渲染出来

[misaka19000]

@xuelang 谢谢，研究了一下发现又拍云好像不错，准备试一下😁

[xuelang]

@misaka19000 嗯嗯，搞个 cdn 会快不少的

[encro]

无需优化，一直最快： https://c4ys.com/

[encro]

刚才用谷歌流浪器的 lighthouse 试了下，居然评分 99.。。

[xuelang]

@encro 会不会是因为没啥图片，哈哈哈。
还是 http1.1 也没 cdn ，其他人访问可能会慢的

[encro]

@xuelang

必须的啊，裸奔一丝不挂最快。。。

[Deshun]

套了 CDN 确实有效果 w3h5.com ，但是因为接了 Google AdSense ，导致 Lighthouse 结果特别差，楼主知道怎么解吗？

[xuelang]

@Deshun 看了下速度还可以啊。lighthouse 评估维度比较多，看看你关心的指标好不好就行

[hexiaowu1993]

我看 OP 还是个律师？还有法律相关咨询？

[xuelang]

@hexiaowu1993 我是程序员。。。 老婆是律师，https://selfboot.cn/links ，有法律需求可以来，很靠谱～

[kisnows]

可以分享一下前段时间整理的性能优化的文章： https://blog.kisnows.com/2023/01/11/alibaba-buyer-performance-optimization-summary

[kisnows]

还有博主提到的图片压缩格式，现在有新的压缩格式 avif ，这个比 webp 更好，而且浏览器支持程度也还不错，可以考虑。

[kisnows]

还有图片其实现在有了更好的压缩格式叫 avif ，浏览器的支持程度也很不错，博主可以试试，我们业务上已经在推了。

[Deshun]

@xuelang LCP 和 FCP 时间特别久，应该会影响排名吧？

[xuelang]

@Deshun 嗯嗯，理论上会的

[xuelang]

@kisnows 这个文章很不错，看完有收获，感谢大佬

[Msxx]

我好奇如何在不备案的情况下使用 cn 域名

[ragnaroks]

https://www.ragnaroks.site/default/，hexo 还是太慢了，也不够灵活

[ragnaroks]

@wuzhanggui 作为后端渲染你这个确实很快了，在我这比本地起个 go(fiber) send file 还快

[xuelang]

@Msxx 服务器不在国内就行。。 博客托管在 netlify 或者直接 Github pages 就行。

[proxytoworld]

@kisnows 哥们你博客能搞个 rss 吗，像订阅 rss 方便一点

[xuelang]

@ragnaroks hexo build 之后就是静态文件了，访问速度不慢的。 确实不够灵活，不过好在可以自己改

[ragnaroks]

@xuelang 我说的就是 hexo SSG 太慢了，SSG 之间也是有区别的，hexo 的文件组织方式比较原始。我以前也用了很久 hexo ，隔离的时候反正没事做用 next 重写了

[xuelang]

@ragnaroks 哦哦，是见过其他 ssg 的，据说几千个 md 文件，秒级别渲染。你的可以分享下看看吗

[ragnaroks]

@xuelang https://nextjs.org/docs ，对位的是 next/mdx

[kisnows]

@proxytoworld 抽空搞一下

[kisnows]

@proxytoworld 有了，
https://blog.kisnows.com/feed.xml

试试看

[xuelang]

@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]

@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]

@xuelang 再试试，应该可以了。
我找了个 rss 阅读器测试过了。

[xuelang]

@kisnows 确实可以了的～

[proxytoworld]

@kisnows 没问题，就是没有全文