프런트 엔드 웹 사이트 성능 측정 방법
최적화 과정에 대해 말하면 새로운 시대의 웹 디자이너들 사이에는 거의 존재하지 않습니다. 10 년 이상 사업을해온 많은 웹 디자이너들조차도 사이트 최적화의 중요성을 완전히 이해하지 못합니다..
오랜 기간이 지나면 웹 사이트가 늪에 빠지기 시작할 것입니다. 프론트 엔드 파일에는 과장된 코드 블록이나 숨겨진 비트가 잠겨있을 수 있습니다. JavaScript 파일이나 이미지에서 가장 일반적으로 발생합니다. 사용자 경험을 위해 즐거운 웹 사이트를 만드는 것이 중요 할 수 있지만 최적화 된 웹 사이트가 없으면 참을성없는 사용자에게 완전히로드 할 수있는 기회조차 없을 수도 있습니다.
아래의 팁은 초급 중급 웹 개발자를 대상으로합니다. 페이지 최적화하기 최대한으로. 사용할 수있는 많은 기술이 있으며 각 웹 사이트가 겪고있는 문제에 따라 각각 다르게 작동합니다. 몇 가지 영역을 감추고이 기술을 자신의 상표에 적용 할 수 있는지 확인하십시오..
HTTP 요청
웹 사이트가로드 될 때마다 HTTP 요청이 원격 서버로 전송됩니다. 이러한 유형의 데이터 전송을 네트워크 프로토콜 특히 일반 텍스트 파일을 배포하고 저장하는 데 사용됩니다. 여기에는 종종 HTML, CSS 및 JavaScript와 같은 기본 프론트 엔드 코드가 포함됩니다.
요청이 전송되면 브라우저는 각 페이지 요소를 구문 분석합니다. 파싱 엔진에 따라 각 웹 사이트는 다르게로드되며 요소는 전송 속도에 따라 다양한 순서로 나타납니다. 예를 들어, 인터넷 익스플로러는 크롬이나 사파리와 다른 웹 페이지를 렌더링 할 것이고, 이것들 모두는 파이어 폭스 나 오페라와 약간 다른 파싱 엔진을 실행한다..
고려해야 할 것은 요청 시간이 각 파일에 얼마나 오래 걸리는 지와 이러한 추세가 일관되게 유지되는지 여부입니다. 한 달 동안 100 만 명 또는 1 백만 명이 방문하는 것을 고려하십시오. 각 페이지 요소를 하나로 모으고 외부 파일을 메모리에로드하는 것은 브라우저의 작업입니다.
종종 웹 사이트의 최적화 된 속도 참조를 방해하는 요인으로는 큰 이미지 파일이 포함됩니다. Verizon FiOS의 보급으로 인터넷 속도가 600kbps를 도달하고 등반을 계속하는 것이 일반적입니다! 불행히도 이것은 표준이 아니며 고속 연결을 사용하더라도 최적화 오류를 경험할 수 있습니다.
사이트 실적에 대한 구제책
우리는 웹 개발 및 프론트 엔드 최적화 분야에서만 혼자가 아닙니다. 적절한 작업을 완료하려면 작업을 처리하는 데 필요한 특정 도구가 있어야합니다.
Google은 개발자가 웹 사이트를 최적화하고 최상의 실적을 확인할 수 있도록 만들어진 Page Speed라는 프로젝트를 출시했습니다. 원래이 프로젝트는 오픈 소스 Firebug 애드온으로 시작되었으며 현재 웹 사이트 테스트를위한 제 3 자 참조로 받아 들여지고 있습니다..
Firebug 사용자를위한 또 다른 옵션은 Yahoo!의 YSlow 추가 기능입니다. 스크립트는 각 웹 페이지 요청을 분석하고 성능을 향상시키는 가장 일반적인 방법을 제안합니다. 이 제안은 Yahoo! 웹 디자인에서 최상의 최적화 방법을 제시하는 개발자 리소스.
처음에는 프로그램이 너무 많은 정보를 포함하고 있기 때문에 약간의 마찰이있을 수 있습니다. 기본에 충실하고 간단한 문서를 따르면 과정은 케이크 조각이어야합니다..
개발자는 항상 코드를 분석하기 위해 프로젝트에 뛰어 들기에 관심이 있습니다. 약간의 도움이 필요하면 YSlow 도움말 가이드를 확인하십시오..
속도 기술
성능 향상을 위해 웹 사이트에 즉시 적용 할 수있는 몇 가지 간단한 트릭이 있습니다. 가장 쉬운 방법은 CSS와 자바 스크립트 파일을 분리하는 것입니다..
CSS 코드는 문서의 헤더에 있습니다. 이는 DOM이로드되는 동안 CSS 속성을 파싱해야하기 때문에 유용합니다. 웹 브라우저가 머리글에서 CSS 스타일을 인식하면 모든 스타일이로드 될 때까지 웹 페이지를 완전히 표시하기까지 기다립니다. 또한 아이콘이나 배경 디자인에 사용 된 이미지는로드하는 데 시간이 걸리므로 먼저 그렇게해야합니다..
플립 사이드에서는 모든 자바 스크립트 파일을 사이트 바닥 글로 옮기는 것이 행상 시간을 획기적으로 해결할 수 있습니다. 많은 브라우저가 병렬 다운로드를 차단합니다. 이는 페이지를 렌더링하기 전에 사용자의 웹 브라우저가 외부 JS를 완전히로드하기 위해 4 초 동안 멈출 수 있음을 의미합니다..
항상 가능한 것은 아니며 모든 웹 사이트에 항상 필요합니다. 파일 포함 위치에 관계없이 페이지가 동일한 응답 시간으로로드되는 경우 모든 재생을 방해하지 않습니다..
동적 콘텐츠는 DOM 전체가 완료 될 때까지로드 할 수 없지만 때로는 오류를 반환합니다. CSS / JS 테스트를 통해 최적화 혜택을 얻을 수 있는지 확인하십시오..
파일 크기 압축
대용량 파일 압축이 널리 보급되었습니다. 웹 페이지에서로드 시간을 줄이고 파일 크기를 매우 낮게 유지할 수 있습니다. 많은 작업이 이미 완료되었으며 YUI Compressor 미니 파일과 같은 도구로 에너지가 사용되지 않습니다..
이 작업을 돕기 위해 웹상에 무료 서비스가 많이 있습니다.. CSS 축소 프로세스를 단순하게 만들기 위해 전체 CSS 압축 인터페이스가 있습니다. 동일한 웹 사이트에는 동일한 작업을 많이 수행하지만 스크립팅을 체계적으로 유지하는 맞춤 자바 스크립트 압축기가 있습니다..
웹 페이지에서 가장 큰 이미지를 압축 할 수도 있습니다. Adobe Photoshop 또는 GIMP와 같은 모든 사진 편집 소프트웨어를 사용하면 이미지를 더 낮은 해상도로 간단하게 리샘플링하여이 작업을 수행 할 수 있습니다. PNG 이미지는 jpg 또는 TIFF 형식보다 평균 크기가 훨씬 작습니다. 압축 과정을 돕기위한 이미지 최적화 도구와 같은 온라인 도구도 많이 있습니다..
소스 점검 및 메트릭
이것은 놀라운 결과를 제공 할 수있는 웹 개발자가 자주 수행하지 않는 일상입니다. 웹 사이트의 모든 페이지 요소를 분석하여로드하는 데 가장 오래 걸린 부분과 각 부분이로드 된 순서를 볼 수 있습니다.
가장 인기있는 도구 인 Mozilla Firebug는 Firefox 브라우저 용 플러그인입니다. 이 앱은 브라우저 하단에 작은 툴바를 설치하여 각 웹 사이트의 응답 시간, 헤더 정보, 페이지 요소 및 스크립트를 확인합니다. 이 스크립트는 Google 크롬의 확장 기능으로 Firebug Lite에도 이식되었습니다..
mod_pagespeed가있는 Apache
모든 설정이 Apache 웹 서버를 실행하는 것은 아니므로이 옵션을 항상 사용할 수있는 것은 아닙니다. 이 모듈은 Google의 페이지 속도 모니터 언급했다. 실제로 mod_pagespeed 코드는 원래 Google 코드의 데이터베이스에있는 많은 라이브러리를 기반으로했습니다..
Apache는 서버 관리자가 서버라는 작은 패키지를 설치하여 서버의 성능을 향상시킵니다.. mod_pagespeed 런타임시 자동으로 최적화 기술을 수행하는 이들 모듈 중 하나입니다. 주요 응용 프로그램 중 일부에는 HTML / CSS / JS 압축 및 이미지 캐싱이 포함되어 있지만 목록에 표시 할 프로세스가 너무 많습니다..
이 프로젝트는 현재 Google에 있으며 개발자에게 개방되어 있습니다. Google은 GoDaddy와 협력하여 Apache HTTP Server를 실행하는 모든 호스팅 계정에 mod_pagespeed를 구현했습니다..
프론트 엔드 개발 작업은 여러 가지 옵션이 있지만 가장 중요한 것은 특히 중요한 웹 페이지에 대한 사전 최적화를 고려하는 것입니다. 사이트 헤더와 큰 이미지를 최적화하는 것은 지루하고 보람있는 작업이 될 수 있습니다..
이 기사에서 소개 된 몇 가지 기술을 살펴보고 이러한 기술이 웹 프로젝트에 어떻게 적용될 수 있는지 살펴보십시오. 종종 개발자는 작업을 감사하고 오래된 코드를 지우는 데 충분한 시간을 할애하지 않습니다. 아직 몇 가지 팁을 원한다면 frontend 유지 보수 및 편리한 성능 향상에 대한 지침을 얻으려면 궁극의 웹 최적화 가이드를 읽어야합니다..
