Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 최적화 Choose the right image format Choose the correct level of compression Use Imagemin to compress images Replace animated GIFs with video for faster page loads Serve responsive images Serve images with correct dimension..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 성능 예산 수립 Performance budgets 101 Your first performance budget Incorporate performance budgets into your build process Use Lighthouse for performance budgets Using bundlesize with Travis CI Using Lighthouse Bot to set a perf..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table of Contents Why does speed matter? What is speed? How to measure speed? How to stay fast? Measure performance with the RAIL model Why does Speed Matter? 연구에 따르면 낮은 성능은 비즈니스 목표에 부정적인 영향을 미칠 수 있습니다. 예를 들어 BBC는 사이트를 로드하는 ..

Overview Web.dev에서 소개하는 Network에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 네트워크 안정성을 측정하는 방법 # What is network reliability and how do you measure it? Identify resources loaded from the network Measuring offline usage 캐싱 도구 상자의 옵션 # Prevent unnecessary network requests with the HTTP Cache Love you..

Overview Web.dev에서 소개하는 Accessibility에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 2부에 걸쳐서 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 의미 체계 및 기본적인 화면 읽기 프로그램 지원 이해하기 # Semantics and screen readers Headings and landmarks Labels and text alternatives Media accessibility 다양한 요구 사항을 가진 사용자를 지원하는 디자인 및 CSS 생성 # Accessible tap targets Color and c..

Overview Web.dev에서 소개하는 Chrome DevTools에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents Chrome DevTools는 페이지가 로드되거나 실행되는 동안 발생하는 모든 것에 대한 심층 분석을 제공합니다. 성능 패널 UI에 익숙해지려면 런타임 성능 분석 시작하기를 참조하십시오. 다음 DevTools 기능이 특히 관련이 있습니다. CPU 조절로 덜 강력한 장치를 시뮬레이션합니다. 네트워크 조절로 느린 연결을 시뮬레이션합니다. 기본 스레드 활동 보기로 기록하는 동안 기본 스..