전체 글 (5) 썸네일형 리스트형 [Flutter] macOS Sonoma 업데이트 후 XCode 빌드가 안됨 문제 Error (Xcode): DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PATHS, use TOOLCHAIN_DIR instead Sonoma가 어제 출시되었다. 설레는 마음을 갖고 업데이트를 하고 평소처럼 빌드를 하니, 일단 시뮬레이터가 안켜지는 오류가 발생했다. 이거야 뭐 당연히 XCode에서 iOS17을 안올렸으니까 그려러니 하고 업데이트를 했다. 업데이트 후 시뮬레이터가 잘 켜지는 것을 확인했고, 안심하고 빌드버튼을 눌렀다. 하지만, 갑자기 다음과 같은 오류가 발생하며 빌드가 안되는 것을 발견했다. Launching lib/main.dart on iPhone 15 Pro Max in debug mode... main.dart:1 X.. LCP(Largest Contentful Paint)와 한판승부 - CSS lazyloading LCP(Largest Contentful Paint)를 빠른 시간안에 로딩하기 위해서는, js나 CSS로 인해 발생하는 rendering block을 최대한 줄여야 한다. js는 defer 나 async 속성을 붙이거나, 가 아닌 에서 로딩하는 것으로 lazy loading이 가능하다. 그렇다면 CSS는 어떻게 천천히 로딩시킬수 있을까? 안타깝게도 link 자체에서는 preload 속성은 존재하지만, lazyload 속성은 따로 없다. 그래서 사용하는것이 js이다. js의 //출처 : https://blog.webjeda.com/lazy-load-css/ 이렇게 CSS lazy loading을 할 수 있었다. 하지만, render-blocking 리소스들을 뒤로 천천히 로딩하면서 발생하는 문제점도 생긴다.. LCP(Largest Contentful Paint)와 한판승부 - 눈물의 삽질(2) h2 프로토콜로 이미지를 전달했음에도 불구하고, 나의 LCP는 전혀 개선되지 않았다. 오히려, Lighthouse를 돌릴때 마다 더 하락하는 경우도 있었다. 이 페이지의 구조는 이미지가 object-fit: cover 되는 형태여서, 당연히 LCP 객체는 CDN에서 받아온 저 이미지인줄 알고있었다. 그리고 오락가락 하긴 했지만, 개발자 도구의 Performance 탭에서는 LCP 객체가 image라고 말하고 있었다. 그래서 이미지만 빨리 로딩시켜주면 한방에 끝날 줄 알았지만, 오히려 새로운 난관의 시작이었던 것이다. 그렇게 절망을 하고, '오늘은 여기까지' 하고 컴퓨터를 종료하고 저녁으로 온 버거킹을 리갈하이 드라마를 보면서 먹고있었는데, 다 먹고나니 문득 이런 생각이 들었다. '이미지를 전부 다 없애도.. LCP(Largest Contentful Paint)와 한판승부 - 눈물의 삽질(1) 저번 글에서는 결국 http/1.1을 사용할 수 밖에 없는 서버 상황에 절망하며 글을 마쳤다. 주말인 오늘, 어제 계획했던 엄청난 삽질을 시도 + 실패를 거듭한 끝에, 결국은 Performance점수를 만족스럽게 만드는 것에 성공했다. 참고로 지금 테스트 페이지의 Lighthouse결과는 다음과 같다. 호스팅 업체를 끼고 서비스 중인 웹페이지기 때문에, 업체 서버가 http/2를 지원하지 않는다면, 어쩔 수 없이 서버 내에서는 http/1.1을 사용할 수 밖에 없다. 이런 경우 사용 가능한 옵션으로는, http/1.1은 여러 파일을 보내는 것이 단일 파일을 보내는 것보다 속도가 느리기 때문에, 편의를 위해 분리해놓은 css와 js파일, 그리고 svg 파일까지 전부 단일 html 파일에 합치는 방법이 있겠.. LCP(Largest Contentful Paint)와 한판승부 - http/2의 희망고문 http://www.daeduckmetal.com/ 대덕메탈 종합 비철금속 전문 업체 대덕메탈입니다. www.daeduckmetal.com 더 나은 SEO 결과를 얻기 위해, SSL 인증서를 호스팅 업체에 설치를 요청했다. 내가 인증서를 설치하면서 기대했던 효과가 두가지 있었는데, 이는 다음과 같다. 1) https 인증으로 인한 신뢰도 향상 및 검색엔진 순위 상승 2) http2 프로토콜로 인한 페이지 로딩속도 향상 여기서 http/2란, 서버와 브라우저간에 파일전송에 사용되는 프로토콜로, 기존에 많이 사용되었던 http/1.1보다 빠른 속도를 지원한다. 자세하게는, 이전 버전보다 좀더 헤더를 압축하고, 멀티플렉싱과 우선순위 지정 등의 기술이 사용되었다고 한다. 자세한 내용은 하기된 블로그에 잘 정리되.. 이전 1 다음
