즐겁게, 코드

강의 링크 : https://classroom.udacity.com/courses/ud884/ 웹 최적화 기법과 브라우저의 원리에 대한 괜찮은 강의가 하나 있어 공유해보고자 합니다! 바로 유다시티의 Website Performance Optimization 무료 강의인데요, 브라우저가 화면에 페이지를 렌더링하는 과정 및 페이지 반응속도를 향상시키기 위한 여러 기법들에 대해 배울 수 있습니다. Vue나 리액트 등 특정 기술에 한정된 내용이 아닌 어떻게 보면 개발자의 기본 소양과도 같은 "최적화" 기법에 대해 익히기 좋으실 듯 한데요, 간단한 맛보기 퀴즈를 하나 보여드리겠습니다. 사진의 세 렌더링 프로세스는 각자 다른 방식으로 자바스크립트를 불러온 결과물인데요, 각 보기가 어떤 방식으로 스크립트를 불러온 것..

"프론트엔드 개발자라면 내 테마정도 한번은 만들어 봐야지" 라는 헛된 생각으로 시작한 Gatsby 블로그 프로젝트가 있는데요, 이 블로그에는 정말 정말 치명적인 문제가 하나 있습니다. 바로 매번 들어갈때마다 메인 아이콘 이미지들이 약 1 ~ 2초간 로드된다는 문제로, 얼핏 보면 대수롭지 않아 보이지만 매번 저렇게 1 ~ 2초간 블러 이미지를 보게되면 "왜 캐싱이 되지 않은거지?", "netlify 서버가 느려서 문제인가?" 등의 생각이 들면서 답답함이 밀려옵니다. 다만 오늘 우연히 원인을 발견해 개선할 수 있었고, 그 내용을 간단하게나마 기록으로 남겨보려 합니다. 🛠 이미지 최적화를 통한 로딩시간 개선 시도 먼저 이미지 최적화를 위해서는 PNG보다는 무손실 압축 포맷인 JPEG를 사용하는것이 효율적이지만..

이미지 파일을 다루다 보면 자연스럽게 다양한 확장자들을 만나게 됩니다. gif, png, jpg, raw... 등등 다양한 이미지 포맷은 벡터 이미지냐 래스터 이미지냐 / 무손실 이미지냐 손실 이미지냐로 구분되는데요, 오늘은 다양한 이미지 포맷들 중 PNG와 JPEG 포맷을 비교해 보도록 하겠습니다. 📸 JPEG 포맷 JPEG는 가장 많이 사용되는 이미지 포맷들 중 하나로, 원본 데이터가 손실되는 손실 이미지라는 특징이 있습니다. 물론 가만히 저장해 둔다고 손실이 생기는 것이 아니라, JPEG 이미지를 웹 페이지에 업로드하거나 메일로 전송하면 JPEG 포맷은 사람의 눈이 인식할 수 있는 색상만을 남기고 나머지를 제거하기 때문에 압축 과정에서 *언제나 약간씩 데이터가 소실됩니다. (* JPEG 압축 시에는..

이미지나 외부 파일을 불러오기 위한 HTTP 요청은 페이지 로딩 시간에 많은 영향을 미치게 됩니다. 만약 페이지에서 불러와야 할 이미지가 50개라면 HTTP 요청을 최소 50번 이상 보내야 할텐데요, 이러면 3G나 네트워크 환경이 좋지 않은 환경에서는 세월아 네월아 로딩되는 페이지를 보면서 분을 삭혀야 합니다. 오늘은 이미지 파일 요청을 최소화하기 위한 CSS 스프라이트 라는 기법을 알아보겠습니다. CSS 스프라이트 CSS 스프라이트는 여러 이미지를 한 장으로 묶은 후 CSS의 배경 포지셔닝을 통해 처리하는 기법입니다. 위 사진은 여러 서비스에서 CSS 스프라이트를 사용한 예시인데요, 버튼과 로고 이미지를 일일히 HTTP 요청을 통해 불러온다면 용량이 아무리 작다 해도 브라우저의 최대 동시 요청수 제한*..

HTML, CSS, 자바스크립트. 과연 셋의 조합이 어떻게 웹 페이지를 만들어내는 걸까요? 오늘은 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보도록 하겠습니다. Critical Rendering Path (CRP) 이름이 크리티컬하다고 겁먹지 마세요. CRP는 HTML 코드를 실제 페이지로 만드는 일련의 과정입니다. 전체적인 순서는 위 도식과 같은데요, 이제부터는 각 단계에서 일어나는 일을 소개하겠습니다. (※ 이번 글은 페이지 렌더링 프로세스에 관한 글로써 자바스크립트 실행 및 처리 과정은 제외했습니다.) 1. HTML을 DOM으로 변환하기 우리가 열심히 짠 HTML 코드를 브라우저가 받아들면 제일 먼저 DOM 트리를 생성합니다. 트리라... 우리가 알고 있는 그 트리가 맞나요? 맞습니다! , ..