성능 개선을 위한 작업 리스트

[CreatiCoding]

File, Firebase, PWA, AMP, React 를 사용하면서 최적화를 해야 할 사항들을 조사합니다.

[CreatiCoding]

1. react 최적화

https://reactjs.org/docs/optimizing-performance.html#webpack

[CreatiCoding]

2. png to jpg 무손실 압축

   72 무손실 압축 구현

[CreatiCoding]

3. AMP 이미지 슬라이더를 사용해야하는데 Swiper나 naver egjs의 flicking이나 AMP의 amp-carousel 전부 이미지를 초반에 다 받아오므로 비효율이 됩니다. 적절한 방법으로 제어하여 컨트롤 해야할 듯 합니다.

[CreatiCoding]

4. nosql 최적활용 http://interconnection.tistory.com/58

[CreatiCoding]

느린 네트워크의 테스트

[CreatiCoding]

5. 매우 느린 첫 화면 로딩 해결법 제안

현재 Pwa lighthouse에서 매우 느린 성능으로 측정된다. 웹툰의 특성상 첫화면에 매우 많은 이미지가 로딩되기 때문이다. 실제로 최소 200개의 썸네일 이미지가 로드된다.

Lazy 로딩으로 어느정도 해결을 보았지만 그래도 느리고 화면을 바꿀때마다 버벅거린다.

이미지 최적화를 해봐도 이미 최적화된 이미지도 많다.

따라서 근본적 해결책이 필요하다.

Dom이 이미지로딩을 기다리지 않도록 해야한다.

https://snook.ca/archives/javascript/settimeout_solve_domcontentloaded

[CreatiCoding]

사용자에게 로딩을 기다리게 하면 안된다. 최소한 로딩중이라고 화면을 띄우기라도 해야한다아.

[CreatiCoding]

6. 이미지 최적화 png -> jpg 로 무손실 최적화시 10~30% 사이즈 최적화되지만 여전히 많은 사이즈였다. webp라는 새로운 타입의 파일형식을 이용하여 50% 추가 최적화에 성공! jpg를 계속해서 jpg형식으로 압축하면 오히려 증가되는데 이를 webp라는 새로운 형식으로 변환하니 50%압축률을 보여주었다.

[CreatiCoding]

7. pwa lighthouse 성능지수 현재 성능지수 상승중

[CreatiCoding]