| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- 프로그래머스
- 자바스크립트
- 1on1
- 1on1미팅
- 개발자
- 자바스크립트코테
- 파이썬무료강의
- 힙한취미코딩
- 퍼블리싱
- 코딩테스트
- js
- 파이썬
- 개발지식
- js코딩테스트
- Python
- 자바스크립트코딩테스트
- zinnadevdiary
- 웹퍼블리셔
- 인프런
- 스파르타코딩클럽
- 오블완
- 티스토리챌린지
- javascript
- CSS
- 지나코딩
- 원온원
- 자바스크립트공부
- 퍼블리셔
- pythonquiz
- 코딩테스트연습
- Today
- Total
목록웹성능최적화 (2)
성장가능성 200% 프론트엔드의 Dev 다이어리
[웹 성능 최적화] 이미지 파일 압축 - tiny png 사용하기
이미지 파일은 해당 파일 정보를 메타 데이터(meta data)에 포함해 저장한다. 여기서 메타데이터란 어떤 카메라로 촬영했는지, 해상도가 무엇인지 등이 메타 데이터의 대표적인 내용이다. 메타 데이터는 사람의 눈에 실제 이미지로써 보이지 않으므로, 불필요한 부분을 제거하면 크기를 상당히 줄일 수 있다고 한다. tiny png의 온라인 서비스를 이용하면 손실 압축 방식으로 이미지 파일을 압축할 수 있다. https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG imag..
[css/웹 성능 개선] font-display:swap
요즘 웹 성능 개선 관련된 책을 읽기 시작했는데 책 초반에 google PageSpeed 사이트에서 웹 성능을 검출해 주는 서비스를 제공하고 있다는 사실을 알게 되었다. https://pagespeed.web.dev/ PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev 궁금한 마음에 이전에 퍼블리싱했던 사이트 주소를 넣어보니 모바일에서 성능이 좋지 않게 나와ㅠㅠ 신경 쓰여 아래 추천 개선 사항들을 살펴보았다. 꽤나 진단 결과 및 추천 개선사항이 상세히 나와서 놀랐고 살펴보다가 알게 된 새로운 CSS 속성 font-display:swap! 구글 pageSpeed에서 제공하고 있는 설명을 가져와 보았다. 1. 보이지 않는 글꼴을 표시하는 방법 글꼴은 로드하는 데 시..