페이지의 성능을 향상시키는 4 가지 팁

Feb 2, 2026

어떻게

Web-performance expert Henri Helvetica sitting with his laptop

웹 성능 분석가 헨리 헬 베틱 귀하의 사이트의 성과를 높이는 방법에 대한 프로 팁을 공유 할 것입니다. 뉴욕을 생성하십시오 2018 년. 지금 티켓을 가져 가라 ...에

성능은 마침내 웹 디자인 및 개발의 대화의 더 큰 부분이되고 있습니다. 그러나 사람들이 실제로 거기에있는 훌륭한 콘텐츠를 실제로 소비하고 더 정기적으로 성능 접근 방식을 채택 할 수있는 도전이 될 수 있습니다.

다행스럽게도 프리랜서 개발자와 웹 공연 애널리스트 앙리 헬 베티 (Henri Helvetica) (Real Name Henri Brisard)는 귀하의 사이트의 성능을 스프링하는 데 대한 최고의 팁을 제공하기 위해 손에 있습니다.

01. 측정을위한 노력

Helvetica는 먼저 당신이 측정 할 수 있도록해야합니다. "당신이 측정하지 않는 것을 결코 개선 할 수는 없습니다."그는 설명합니다. "측정 및 데이터가 배치되면 측정 할 중요한 요소를 알아 내어야합니다. 9 초 만에 하나의 페이지를 가질 수 있지만 뷰포트가 훨씬 빨리 채워지므로 더 나은 사용자 경험이 있습니다.

"귀하는 귀하의 사이트 및 귀하의 상업 기업의로드 프로세스에서 중요한 것을 측정해야합니다. 사용자가 상호 작용하는 데 중요한 것이 무엇인지 생각해보십시오. 모든 사이트에는 자체 개인 요구가 있습니다."

일단 페이지 하중을 살펴보면, 그가 특정 항목을로드하는 방법과시기에 픽업하는 데 도움이되는 헬 베티 (Helvetica)의 다음 단계는 일반적으로 크롬 DevTools를 발사하여 무슨 일이 일어나고 있는지 정확히 평가합니다. 그것이 바로 거기 있고 무료이기 때문에 명백한 선택이기 때문에 페이지가 느려질 수있는 이유를 발견하기 위해 다른 도구로 뛰어 넘을 필요가 없습니다. 그러나 많은 개발자들이 간신히 사용합니다. "DevTools는 연기 탐지기와 같은 약간입니다."헬베타가 주장합니다. "화재가 있으면 Devtools가 당신에게 말할 것입니다. 그것은 적어도 연기가있는 곳에서 당신을 보여줄 것입니다. "

02. 일부 페이지 무게를 잃어 버리십시오

그런 다음 Helvetica는 자산의 크기와 로딩에 관여 한 대기 시간과 같은 다양한 문제와 같은 다양한 문제를 나타낼 수있는 폭포를 보입니다. 사이트에 크기가 잘 떨어지는 이미지가 포함되어 있지 않으면 일반적으로 매우 긴 폭포를 볼 수 있습니다. 이는 쉽게 픽업 할 수있는 고통 포인트 중 하나입니다. 이미지는 느린 로딩 사이트를위한 가장 큰 범인 중 하나입니다. 쉽게 쉽게 수정할 수있는 문제입니다. 가장 큰 데이터 원본으로서 이미지는 데이터 절약의 가장 큰 소스입니다.

"Helvetica는 항상 귀하의 페이지 중량을 고려할 것입니다. "당신이 어떻게 슬라이스하든, 3MB의 이미지가 하나도되거나 1MB의 이미지를 1MB로 가지고 있으면 사용자 경험 도전이 될 것입니다.

Web-performance expert Henri Helvetica coding on his laptop

"셀룰러 네트워크가 실제로 예측할 수 없기 때문에 네트워크의 피해자도 네트워크의 피해자가 될 수 있습니다. 따라서 자산이 작고 뷰포트에 최적화되어 있는지 확인하려면이 페이지를 볼 수 없도록하십시오. 모바일 장치의 데스크탑 크기 자산. "

Helvetica는 또한 필요할 때까지 객체 로딩을 지연시키는 기술 인 게으른 로딩을 권장합니다. "모든 사용자가 페이지의 맨 아래로 만들 수있는 것은 아니지만, 그는 경고합니다. "꽤 자주 보지 않을 자산을로드 할 수 있습니다. 게으른 하중을 사용하는 것은 데이터 및 배터리 배수 또는 메모리 관리를 저장하고 있기 때문에 매우 유익 할 것입니다. 이미지를로드하지 않으면 장치에서 UsUrp에 메모리가있을 것입니다. "

03. 당신이 어떻게 쌓는 지보십시오

또 다른 이유 Helvetica는 이제는 첫 번째 페인트 (사용자가 콘텐츠의 첫 번째 픽셀을 볼 수있는 시간) 및 첫 번째 의미있는 페인트 (페이지의 기본 내용을 보이는 데 걸리는 시간이 보이는 시간)와 같은 메트릭을 제공하기 때문입니다. 짐마자

그런 다음 브라우저 렌더링 사이트의 증분 스크린 샷을 보여주는 필름 스트립 (DevTools 또는 Performance Tool WebPagetest)이 있으므로로드 할 때 페이지가 보이는 페이지를 볼 수 있습니다. 그들을 조사함으로써 당신은 어떤 자산이 적재되었는지 알아 내고 일찍 일찍 일찍 그들 중 일부를로드하는 방법을 조사 할 수 있습니다.

WebPagetest - 어떤 Helvetica는 고무적인 세부 수준을 위해 칭찬 - 당신은 또한 부하의 비디오를 내보내고 필름 스트립을 경쟁자의 비디오와 비교할 수 있습니다. "일단 도트를 연결하면이 자산을 뷰포트에 빠르게 가져옴으로써 사용자 환경을 개선하는 방법을 탐색 할 수 있습니다."라고 Helvetica는 설명합니다.

04. 혼란을 자르십시오

Helvetica는 설계 결정이 성능에 미치는 영향을 미치고 뷰포트에 대한 첫 번째로드는 가능한 한 빠르지 않아도 가능한 한 궁극적으로 자유롭게해서는 안됩니다.

이러한 이유로 웹 페이지의 초기보기 - 중요한 렌더링 경로를 렌더링하기 위해 수행되는 일련의 이벤트를 이해해야합니다. 이러한 이벤트는 필요없는 적재 자산을 피하고 웹 글꼴 및 이미지 형식 선택을 중단하여 결정을 내리면 최적화 될 수 있습니다.

"SVG를 가능한 한 복잡하지 않은 것으로 보관하십시오."Helvetica는 예제로 제안합니다. "그러면 SVG를 렌더링 할 때 코드가 적을 수 있습니다. 나는 이것을 항상 개발자로부터 듣는다. 그들은 디자이너에서 SVG를 얻을 것이고 성능에 영향을 미치기 때문에 다시 보내야합니다. "

이 기사는 원래 웹 디자이너와 개발자를위한 세계 최고의 매각 잡지 인 NET 303에 출판되었습니다. 구입 문제 303. 또는 Net에 가입하십시오 ...에

귀하의 사이트의 속도를 쌓는 것에 대한 추가적인 통찰력을 원하십니까?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica는 API의 토크 행성을 제공하고 있습니다 : 성능의 이야기 & amp; 2018 년 4 월 25 일부터 25 일까지 뉴욕을 생성하는 사용자 경험

페이지가 번개를 빨리로드하는 데 관심이 있으시면 티켓을 잡아야합니다. 뉴욕을 생성하십시오 ...에 Henri Helvetica는 현재 웹 앱을 측정하는 데 사용되는 실험적 실천조차도 공연자의 사용자 경험을 제공하고 첫 번째 페인트, 의미있는 페인트 및 대화 형에 대한 시간 측정에 대한 더 많은 통찰력을 제공 할 것입니다.

2018 년 4 월 25-27 일부터 뉴욕을 창출합니다. 지금 티켓을 가져 가라 ...에

관련 기사:

웹 성능을 못 박는 7 개의 전문가 팁
3 웹 성능 테스트를위한 3 가지 top 도구
웹 성능이 왜 빠르게 느껴져야하는지

페이지의 성능을 향상시키는 4 가지 팁

01. 측정을위한 노력

02. 일부 페이지 무게를 잃어 버리십시오

03. 당신이 어떻게 쌓는 지보십시오

04. 혼란을 자르십시오

귀하의 사이트의 속도를 쌓는 것에 대한 추가적인 통찰력을 원하십니까?

어떻게 - 가장 인기있는 기사

Adobe XD를 사용하여 마이크로 상호 작용을 생성

CSS로 스마트 텍스트 효과를 코딩하는 방법

3ds Max에서 대규모 환경 마스터

훌륭한 Poser Art

WordPress API를 사용하여 블로그 전원

Photoshop의 대기 초상화를 칠하는 방법

센서 데이터를 수집하는 앱 만들기

사진을 VR 세트로 변환

카테고리