Browser Performance Wishlist
April 20th, 2011 by 맥스제로이쉐뀌
브라우저의 성능을 향상 시키기 위해 할수 있는 가장 중요한 변화는 무엇일까요? 이 포스트는 그 질문에 대한 제 대답이예요. 이건 주로 브라우저 개발자를 위한 내용이지만 웹개발자들도 이 개선 사항이 채택되기를 바라고 있을거예요 download scripts without blocking SCRIPT attributes resource packages border-radius cache redirects link prefetch Web Timing spec remote JS debugging Web Sockets History anchor ping [...]
HTTP Archive 공개
April 7th, 2011 by 맥스제로이쉐뀌
HTTP Archive 코드는 오픈 소스 이며 그 정보를 다운 받을 수 있습니다. 대략 17,000건의 상위 웹사이트를 2주마다 검사를 진행하고 있습니다. 저는 2010년 10월 부터 정보를 수집하기 시작했어요. URL목록은 Alexa, Fortune 500 그리고Quantcast등 다양한 곳에서 수집 되었어요. 이 시스템은 webpagetest를 어깨에 짊어지고 각각의 다운로드 URL과 HAR file의 수집, 스크린샷, 사이트 로딩 비디오, 그리고 다른 정보등을 보여주고 있습니다. 이 정보는 HTTP Archive 데이터를 [...]
웹 페이지 성능에 대한 논문(Web Page Performance Thesis )
July 7th, 2010 by 맥스제로이쉐뀌
글래고스 대학에서 Thiam Kian Chiew은 웹사이트 성능에 대한 박사학위를 공부하였습니다. 그는 웹사이트의 구성요소의 다운로드 시간을 테스트하고 모델링 하며 웹사이트의 속도에 영향을 주는 요인들을 연구하였습니다. 아래는 그의 연구 결과를 요약한 내용입니다. Web Page Performance vs. Server Performance 대부분의 서버 및 네트웍의 문제를 다루는 기존 연구와는 달리 Chiew의 논문은 웹페이지 자체의 성능 분석에 촛점을 맞추고 있습니다. 웹 [...]
Frontend 취약점 (Frontend SPOF)
June 15th, 2010 by 맥스제로이쉐뀌Frontend 취약점의 예제 단순하게 생각해 보면 웹사이트에 SCRIPT나 STYLESHEET를 삽입하는 것으로 많은 사람들을 당황시키지는 않습니다. 오히려 css의 실수나 JAVASCRIPT에러 보다 그 열쇠는 자원의 요청 시간 초과로 인해 생기는 현상이라고 생각 됩니다. 간단한 테스트 케이스를 만들어 봤어요 <html> <head> <script src=”http://www.snippet.com/main.js” type=”text/javascript”> </script> </head> <body> Here’s my page! </body> </html> 5년전 웹성능의 관심은 대부분 백엔드쪽이었어요. 사용자가 [...]
PNG24 와 PNG 최적화
April 5th, 2010 by 맥스제로이쉐뀌
웹페이지의 평균 파일 사이즈의 60%이상은 멀티미디어와 그래픽으로 이루어져 있습니다. 그래서 그래픽 최적화는 웹페이지 속도 최적화를 위한 중요한 단계입니다. 우리는 걱정스러울 정도로 큰 PNG24와 최적화 되지 않은 JPEG를 사용하는 웹사이트를 볼 수 있습니다. 큰 PNG24는 파일사이즈 최적화나 PNG8로 변환하여야 합니다. 이 문서는 컬러 팔렛트를 최소화 하여 어떻게 효과적으로 PNG파일을 최적화는지와 알파 투명도를 지능적으로 사용하는 법에 대해 알려 줍니다. PNG [...]
@font-face 와 성능
March 19th, 2010 by 맥스제로이쉐뀌지난 주에 Ajaxian에서 @font-face에 대한 글을 읽었어요. 지난 몇달동안 @font-face가 성능에 미치는 영향이 궁금했어요 그래서 Zoltan Hawryluk 의 오리지날 포스트를 찾아 봤어요. 폰트의 미학적, 역학적, 호환성 문제등의 훌룡한 글이 었지만 성능에 대한 부분은 없더군요. 그래서 문의를 했죠. “@font-face가 성능에 어떤 영향을 미칠까요? 글꼴 파일은 다른 리소스들과 병행으로 다운로드 되나요? 다운로드된 글꼴은 style을 사용하거나 DOM element [...]
WebPagetest.org – 최고의 툴
March 15th, 2010 by 맥스제로이쉐뀌
난 WebPagetest.org.를 좋아해요. 난 나의 두번째 책에도 “web page test는 가치에 비해 많은 관심을 가지지 못하였다”고 말했죠. WebProNews와의 인터뷰에서 Matt Cutts 는 WebPageTest.org에 대해 언급하며 격려 하였습니다. 하지만 내가 만나는 사람들은 이 뛰어난 툴이 있다는걸 알지 못해요 그래서 난 그들에게 알리고 다니죠. AOL Pagetest 와 WebPagetest.org의 뒤에는 Pat Meenan 와 Eric Goldsmith 의 팀이 있습니다. AOL Pagetest는 윈도우 툴인 IE에서 동작해요. Pat은 자기 집 지하실의 웹서버에 그것을 [...]
Simplifying CSS Selectors
February 23rd, 2010 by 맥스제로이쉐뀌
“CSS Selectors를 간략히 사용하세요” 는 내 두번째 책의 마지막 챕터입니다. 난 비교적 최근에 CSS selector 성능에 대해 조사를 했었습니다. 몇달전 “성능에 영향을 미치는 CSS Selector“에 대한 블로그 포스팅을 했었어요. 그건 CSS selectors의 종류와 가장 성가신 것들은 무엇이고 selector를 일치시키는 방법이 미치는 영향에 대한 이야기에 대해 썻었습니다. 그 가설의 결론은.. “대부분의 웹사이트 들은, CSS Selector을 최적화 하여 성능향상을 [...]
5개중 마지막 – background image를 추측하다 (5e speculative background images)
February 17th, 2010 by 맥스제로이쉐뀌이건 지난 몇 주 동안 발생한 몇몇 브라우저들의 문제점에 대한 5개의 간단한 포스팅 중 마지막 포스팅 입니다. 크롬과 사파리는 모든 style을 사용할 수 있기 전에 background image 를 다운로드 하기 시작합니다. 만약 background image style을 덮어 쓰게 된다면 불 필요한 다운로드를 할 수도 있습니다. background image 는 어느곳에나 사용됩니다. Button, background wallpaper, 둥근 모서리, 기타 [...]
5개중 네번째 동적 stylesheet (5d dynamic stylesheets)
February 16th, 2010 by 맥스제로이쉐뀌이건 지난 몇 주 동안 발생한 몇몇 브라우저들의 문제점에 대한 5개의 간단한 포스팅 중 네번째 포스팅 입니다. 만약 stylesheet를 DHTML과 setTimeout을 사용하여 로드 한다면 IE에서 렌더링 대기 현상을 피할 수 있습니다. 몇주 전에 유명 위젯을 만드는 회사와 미팅을 가졌습니다. 그 회사에서는 메인 페이지에 위치해있는 회사의 위젯에 영향을 줄이기 위해 stylesheet를 동적으로 로드 하고 있었습니다. 바로 [...]