속도를 위해 구축 된 인터페이스를 설계하는 방법

/2018-08-09 04:44:19/
Sweden
/프로그램들/

귀하의 웹 사이트가 느립니까? 솔직 해지십시오. 더 빠를 수 있습니까? 사용자는 빠르게로드되고 지연없이 계속 컨텐츠를 제공하는 웹 사이트를 요구합니다. 귀하의 웹 사이트가 이러한 요구를 충족시키는 데있어 가장 뒤 떨어지면 사용자는 귀하의 사이트를 포기할 수 있습니다 (그리고 다시는 돌아올 수 없음).

오늘은 웹 사이트 인터페이스 속도를 높이는 방법을 모색 할 것이므로 페이지로드 시간을 다시 걱정할 필요가 없습니다.

Envato Elements 살펴보기

웹 사이트 테스트

“내 웹 사이트 속도가 느릴 방법이 없습니다”에 들기 전에 테스트하십시오. Google은 누구나 URL을 입력하여 웹 사이트를 테스트하는 데 사용할 수있는 훌륭한 도구를 제공합니다.

사이트가 얼마나 빨리 이동하고 개선 될 수 있는지 알려주는 멋진 보고서가 제공됩니다. 모든 것이 원활하게 작동하도록 테스트를 주기적으로 실행하는 것이 좋습니다. 또한 모바일 및 데스크톱 장치의 성능을 저하시키고 개선을위한 제안을 제공합니다.

이 보고서는 다음 항목에 대해 세 가지 권장 사항 (수정, 수정 및 통과 고려)을 제시합니다.

브라우저 캐싱
이미지 최적화
서버 응답
접기 위의 스크립트 및 CSS
압축
리디렉션
CSS, HTML 및 JavaScript의 축소
보이는 컨텐츠의 우선 순위

불필요한 플러그인 덤프

사용하지 않는 플러그인이나 애드온을 유지하고 있습니까? 그들을 버릴 시간이다.

사용하지 않는 요소조차도 사이트에서 속도를 떨어 뜨리고 있습니다. (WordPress와 같은 시스템에서 작업하는 경우 특히 그렇습니다.)

정리 모드로 들어가서 사용하지 않는 플러그인을 제거하십시오. 더 나은 옵션을 찾지 못하면 사용중인 플러그인에 대해 생각하고 실제로 사용하고 있는지 또는 전체 사용자 경험에 기여하는지 확인해야합니다.

플러그인 수 외에도 품질도 중요합니다. 웹 사이트에 이전 플러그인을 추가하지 마십시오. 실제 가치를 제공하고 등급이 높은 요소를 찾아보십시오. 오래되고 오래된 요소도 사이트를 아래로 끌 수 있습니다.

필요한만큼만 공유

플러그인에 대해 생각하는 동안 웹 사이트에 소셜 미디어 공유 버튼이 몇 개 있습니까? 이제 정직하게 대답하십시오. 실제로 얼마나 많은가?

이 버튼 중 너무 많은 수는 사용자에게 혼란을 줄 수 있으며 (어쨌든 여러 플랫폼에서 얼마나 많은 수를 공유 할 것인지) 속도와로드 시간을 단축시킵니다. (양방향으로 실행되는 쿼리로 게시물의 좋아요 수 또는 공유 개수를 파악하려는 경우 특히 그렇습니다.)

활성화되어 있고 사용자가 웹 사이트에 정기적으로 연결하고 해당 단추를 포함하는 하나 또는 두 개의 네트워크를 선택하십시오. 나머지를 버린다. 그들은 단지 방해하고 있습니다.

이미지 과부하에주의하십시오

비디오, 일러스트레이션, 사진 및 애니메이션… 이러한 훌륭한 시각적 요소는 모두로드 시간을 늘릴 수 있습니다. 현명하게 선택해.

웹 사이트 디자인에 시각적 요소를 추가하기 전에 다른 요소와 비교하여 그 가치를 평가하십시오. 사용자에게 무언가를 제공합니까? 그렇다면 계속 진행하십시오. 그렇지 않은 경우 왜 해당 디자인 요소를 사용하고 있습니까?

웹에 맞게 모든 이미지를 적절하게 최적화해야합니다. 일반적으로 이미지는 필요한만큼만 커야합니다. 배 밖으로 나가서 전체 크기의 사진을 업로드하지 마십시오. 프론트 엔드에서 약간의 작업이 필요하지만 나중에 (특히 웹 사이트가 계속 성장하는 경우) 기뻐할 것입니다.

다른 트릭도 활용하십시오. 이미지 기반 아이콘 대신 아이콘 글꼴을 사용해보십시오. 아이콘 글꼴이 작동하지 않으면 요소를 SVG (스케일링 된 벡터 형식)로 변환하십시오. 버튼, 화살표 및 기타 사용자 인터페이스 도구와 같은 사진으로로드되는 요소로 사이트를 혼란스럽게 만들거나 가능한 한 많은 HTML 및 CSS "매직"을 사용하십시오.

수축 공구로 하중 제거

작은 파일이 최고 속도의 열쇠입니다. 균형이 잡힌 것은 고해상도 디스플레이를 통해 컨텐츠를 최고 품질로 공유하고 전시 할 수 있다는 것입니다. 그것이 축소 공구가 들어오는 곳입니다.

크기 및 축소 기능에 확신이 없거나 원하는 결과를 얻지 못하는 경우 다음 옵션 중 하나를 사용하여 파일을 사용 가능한 가장 작은 크기로 줄이십시오.

WP Smush, WordPress 사용자를위한 이미지 축소
크라켄은 모든 사용자를 위해 이미지를 압축합니다
TinyPNG는 일반적인 형식의 크기를 훨씬 줄입니다.
최적의 압축을위한 Gzip 패키지 파일
CSS 축소는 전체 코드 크기를 줄이고 API를 포함합니다
SpriteMe는 배경 이미지를 CSS 스프라이트로 변환하여 HTTP 요청을 저장합니다.
CSS Compressor는 전체 코드 크기를 줄입니다

그냥 캐시

웹 사이트에서 캐싱을 활성화하십시오.

이 작업을 수행하지 않으면 사용자가 가격을 지불하는 것입니다. 거기에 다른 주장을 할 사람들이 여전히 있지만, 사용자에 대한 가치는 이러한 주장보다 중요합니다. 귀하의 웹 사이트는 빨라야합니다.

캐시는 사용자가 돌아올 때 브라우저가 사이트를 "기억"할 수 있도록 페이지에서 임시 파일을 만듭니다. 대역폭 사용량, 서버로드 및 지연 시간 (실제 또는인지)을 줄입니다. 특히 대규모 웹 사이트에 액세스하는 경우 사용자에게 감사합니다.

정기적으로 청소

집을 정기적으로 청소해야하는 것처럼 웹 사이트 데이터베이스, 링크 및 파일을 정리하고 유지해야합니다.

다음은 웹 사이트 청소 점검표의 항목입니다.

데이터베이스를 최적화하십시오. 시간이 지남에 따라 데이터베이스에서 사용하지 않는 사진 및 저장된 데이터가 수정되어 막힐 수 있습니다. 다 유지할 필요는 없습니다. 더 이상 웹 사이트 계획에 포함되지 않은 요소를 제거하십시오.
이미지를 핫 링크하지 마십시오. 다른 사람의 웹 사이트 (및 서버)에서 귀하의 웹 사이트로 이미지를 가져 오는 것은 나쁜 생각입니다. 그리고 느립니다. 거의 모든 다른 외부 파일 요청에서도 마찬가지입니다. 필요할 때만 사용하십시오.
링크를 수정하십시오. 링크가 끊어지면 사이트 속도가 느려지지 않지만 사용자가 사이트에서 다른 장소로 연결하는 속도가 느려져 나빠질 수 있습니다. 끊어진 링크를 확인하고 수정하는 습관을 가지십시오.
모든 것을 업데이트하십시오. WordPress와 같은 플랫폼에서 실행중인 경우 업데이트를 수행하십시오. 모든 유형의 테마 또는 상자 요소를 사용하는 경우에도 마찬가지입니다. 업데이트에는 속도를 높이고 잠재적 인 위협으로부터 웹 사이트를 보호하는 패치가 포함될 수 있습니다. (그리고 해킹되었거나 악성 코드에 감염된 사이트보다 느린 것은 없습니다.)