fix: change LCP image from png to webp

[Kyujenius]

📝 Key Changes

This PR focuses on optimizing performance metrics, specifically First Contentful Paint (FCP) and Largest Contentful Paint (LCP), through various improvements. All of these analyses were analyzed by lighthouse in Chrome.

Initial Performance Issues

The current LCP file is the following image. It is ff-symbol-gradient.png

When using the current png file as it is

The site currently experiences suboptimal performance: FCP is around 2.6 seconds, it exceeds the ideal time of 1.8 seconds LCP is around 6 seconds, significantly higher than the recommended 2.5 seconds

Implemented Optimizations

1. Image Format Optimization
   Converted ff-symbol-gradient.png to WebP format
   Tested different quality settings (80%, 60%, 40%) to find optimal balance
   Results showed improved performance metrics while maintaining visual quality

WebP(Quality 80)	WebP(Quality 60)	WebP(Quality 40)

Even if the quality is only 80 percent, the performance benefits are sufficient.
Changing png to webp only reduces LCP by half. However, this does not solve the underlying problem.

2. CSS Loading Strategy Improvement
   Current problematic implementation:

// .vitepress/shared.mts
[
  "link",
  {
    rel: "stylesheet",
    href: "https://static.toss.im/tps/main.css"
  }
],
[
  "link",
  {
    rel: "stylesheet",
    href: "https://static.toss.im/tps/others.css"
  }
]

If you comment out these two parts, the performance changes as follows

However, this approach has many issues as it simply removes the code without considering the side effects in the font usage.
A better method would be to bundle the CSS files within the project instead of loading them through the network.
Copy the static CSS that was previously loaded through the two links and define it internally as follows:

 [
      "link",
      {
        rel: "preload",
        href: "/fonts/main.css",
        as: "style"
      }
    ],
    [
      "link",
      {
        rel: "preload",
        href: "/fonts/others.css",
        as: "style"
      }
    ],

While it would work fine to save and use the downloaded CSS files in the public/fonts folder, this isn't included in this PR as it could raise legal issues. If it's acceptable, I'll add this in an additional commit. 🙂

After applying this change, we can observe the following performance metrics while maintaining the use of existing fonts..!

How about introducing the Slash library developed by Toss?
https://www.slash.page/ko/libraries/react/async-stylesheet/src/index.i18n

🖼️ Before and After Comparison

Before	After

---

中文版

此PR主要通过各种改进来优化性能指标，特别是First Contentful Paint (FCP)和Largest Contentful Paint (LCP)。所有这些分析都是通过Chrome中的lighthouse进行的。

初始性能问题

当前的LCP文件是以下图片：ff-symbol-gradient.png

使用当前png文件时的情况

网站目前性能表现不佳： FCP约为2.6秒，超过了理想时间1.8秒 LCP约为6秒，远高于建议的2.5秒

已实施的优化

1. 图片格式优化
   将ff-symbol-gradient.png转换为WebP格式
   测试了不同的质量设置（80%、60%、40%）以找到最佳平衡点
   结果显示在保持视觉质量的同时改善了性能指标

WebP(Quality 80)	WebP(Quality 60)	WebP(Quality 40)

即使质量只有80%，性能提升也已经足够。
将png更改为webp只能将LCP减少一半。然而，这并不能解决根本问题。

2. CSS加载策略改进
   当前存在问题的实现：

// .vitepress/shared.mts
[
  "link",
  {
    rel: "stylesheet",
    href: "https://static.toss.im/tps/main.css"
  }
],
[
  "link",
  {
    rel: "stylesheet",
    href: "https://static.toss.im/tps/others.css"
  }
]

如果注释掉这两部分，性能变化如下：

然而，这种方法存在许多问题，因为它只是简单地删除代码而没有考虑字体使用方面的副作用。

更好的方法是在项目内部打包CSS文件，而不是通过网络加载。
将之前通过两个链接加载的静态CSS复制下来，按照以下方式在内部定义：

 [
      "link",
      {
        rel: "preload",
        href: "/fonts/main.css",
        as: "style"
      }
    ],
    [
      "link",
      {
        rel: "preload",
        href: "/fonts/others.css",
        as: "style"
      }
    ],

虽然将下载的CSS文件保存在public/fonts文件夹中并使用是可行的，但由于可能涉及法律问题，这部分未包含在本PR中。如果可以接受的话，我会在后续提交中添加这部分内容。🙂

应用此更改后，我们可以在保持现有字体使用的同时观察到以下性能指标..！

考虑引入Toss开发的Slash库如何？
https://www.slash.page/ko/libraries/react/async-stylesheet/src/index.i18n

🖼️ Before and After Comparison

Before	After

[vercel]

@Kyujenius is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

[milooy]

👍 👍
can you please add this to Chinese version?

[Kyujenius]

Of course, I'm willing to do it! If you don't mind, may I ask why?

[milooy]

We recently merged the PR for the Chinese version.

It would be great if you could add this there as well.
You should be able to see it after merging or rebasing with the latest main branch. Let me know if you need any help!

[Kyujenius]

@milooy
Oh! I thought you wanted me to post PR in Chinese, so I had a fascinating experience of translating into Chinese. I'll add it.

Extra: If you look within my PR, I'm asking if it's legally possible to define and add static css files that have been received through the network. I asked if it's possible to add them, is it possible?

If possible, I will upload it within the evening :)

[milooy]

Sorry for missing your question.

Currently, Toss doesn't officially provide a static font file. Loading an async CSS file can cause layout shifts, so it might be better to explore alternative solutions.

Let's make this slow FCP caused by web font problem as a known issue. I've created an issue to track this and will follow upon it soon.

If you commit the change to use WebP for images in ch/index.md, I'll review it shortly!

[Kyujenius]

@milooy
I was short-sighted :) I've now added the Chinese version. Thank you for reviewing my long PR.