fix. jsx render issue

inje-megabrain · Nov 26, 2024 · b43db10 · b43db10
1 parent 7d2c8ee
commit b43db10
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/blog/puleugo/puleugo8.md b/blog/puleugo/puleugo8.md
@@ -7,12 +7,12 @@ date: Sun, 17 Nov 2024 21:44:55 +0900
 
 ## 개요
 
-|||
-|---|---|
-|**문제**|Waktaverse.games 사이트의 이미지 로딩 속도가 느려 사용자 경험에 부정적 영향을 미치고 있었습니다.특히 네트워크가 느린 환경에서는 LCP(Largest Contentful Paint) 시간이 권장사항인 2.5를 초과하여, Fast 4G 환경에서는 4.88초, Slow 4G 환경에서는 28.54초가 소요됐습니다.|
-|**해결방안**|이미지 로딩 성능을 개선하기 위해 Cloudflare를 활용하여 다음과 같은 조치를 취했습니다. WebP 형식으로 압축된 이미지 캐시를 응답했으며 페이지 새로고침 시 서버로 재요청하는 문제를 해결하기 위해 Cache-Control 헤더를 추가했습니다.개선 결과:<ul style="list-style-type: disc;" data-ke-list-type="disc"><li>Fast 4G 환경: 5.88초 &rarr; 2.39초 (약 59.35% 개선)</li><li>Slow 4G 환경: 28.54초 &rarr; 8.24초 (약 71.13% 개선) </li></ul>|
+|              |                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **문제**     | Waktaverse.games 사이트의 이미지 로딩 속도가 느려 사용자 경험에 부정적 영향을 미치고 있었습니다.특히 네트워크가 느린 환경에서는 LCP(Largest Contentful Paint) 시간이 권장사항인 2.5를 초과하여, Fast 4G 환경에서는 4.88초, Slow 4G 환경에서는 28.54초가 소요됐습니다.                                                                                                                                                                    |
+| **해결방안** | 이미지 로딩 성능을 개선하기 위해 Cloudflare를 활용하여 다음과 같은 조치를 취했습니다. WebP 형식으로 압축된 이미지 캐시를 응답했으며 페이지 새로고침 시 서버로 재요청하는 문제를 해결하기 위해 Cache-Control 헤더를 추가했습니다.개선 결과:<ul style={{ listStyleType: "disc" }} data-ke-list-type="disc"><li>Fast 4G 환경: 5.88초 &rarr; 2.39초 (약 59.35% 개선)</li><li>Slow 4G 환경: 28.54초 &rarr; 8.24초 (약 71.13% 개선) </li></ul> |
 
-* [waktaverse.games](https://waktaverse.games/) 웹 사이트의 이미지 로드 성능 개선을 수행했다.
+- [waktaverse.games](https://waktaverse.games/) 웹 사이트의 이미지 로드 성능 개선을 수행했다.
 
 ## 너무 느려요. 개선해주세요.
 
@@ -32,8 +32,8 @@ Chrome Browser의 Performance 기능을 활용하여 성능을 측정해보았
 
 LCP(가장 큰 콘텐츠 페인트) 소요 시간을 측정했다.
 
-* Fast 4G: 5.88s
-* Slow 4G: 28.54s
+- Fast 4G: 5.88s
+- Slow 4G: 28.54s
 
 참고로 2.5초 이하가 GOOD이다.
 
@@ -69,9 +69,8 @@ Cache-Control은 이미 수신한 리소스의 유효 시간이 지나기 전이
 
 Fast 4G: 2.39 s, Slow 4G: 8.24 s
 
-* Fast 4G: 5.88s &rarr; 2.39s (59.35%)
-* Slow 4G: 28.54s &rarr; 8.24s (71.13%)
+- Fast 4G: 5.88s &rarr; 2.39s (59.35%)
+- Slow 4G: 28.54s &rarr; 8.24s (71.13%)
 
 '어떻게 해야겠다'는 명확했습니다.  
 Cloudflare가 이렇게 편한줄 알았더라면 훨씬 더 빠르게 작업에 들어갈걸 그랬습니다.
-