오늘 웹 사이트 속도를 높이는 7 가지 팁
모두가 멋진 작은 로딩 애니메이션을 좋아합니다. 그러나 그 디봇이 1 ~ 2 초 이상 지속되면 웹 사이트가 느리게 로딩된다는 사실에만주의를 기울입니다. 그리고 그것은 웹 사이트 킬러입니다.
사용자는 웹 사이트가 빠르고 효율적으로로드되기를 기대합니다. 디자인이 시각적으로 즐거울뿐만 아니라 100 % 기능적인지 확인하는 것이 귀하의 임무입니다. 사이트가 다소 드래그하는 경우 디자인을 약간 조정하여 웹 사이트 속도를 높이는 데 도움이되는 7 가지 팁이 있으므로 걱정할 필요가 없습니다. (포스트에 표시된 각 웹 사이트를 방문하십시오. 멋져 보이고 빠르게로드됩니다.)
Envato Elements 살펴보기
1. 애니메이션 관리
웹 사이트 디자인의 애니메이션은 2015 년의“it”트렌드 중 하나입니다.로드되지 않는 방대한 파일을 만들어서 뒤쳐지지 마십시오. 이러한 유형의 효과로 작업을 시작할 때 더 작은 애니메이션 터치로 시작하고 전체 웹 사이트 프레임 워크에서 어떻게 작동하고 작동하는지 잘 알고 나면 더 큰 애니메이션으로 넘어갑니다.
애니메이션의 핵심은 웹 사이트에 많은 비디오 파일을로드하지 않는 것입니다. 애니메이션이 작을수록 발자국이 작은 것을 쉽게 만들 수 있습니다. 어디에서 시작 해요?
움직이는 호버 상태 애니메이션과 같이 간단하고 재미있는 것을 수행하십시오. 버튼의 색상을 변경하거나 확장하면 멋진 요소로 이동하기 전에 CSS를 마스터하고 기본 애니메이션에 대한 느낌을 얻는 데 도움이되는 멋진 효과가 있습니다. AJAX 또는 시차 로딩 애니메이션을 고려할 수도 있습니다. 이러한 옵션 중 하나에 대한 좋은 점은 사용자가 눈치 채지 않고도 요소를로드 할 시간을 준다는 것입니다. 사용자가 스크롤 할 때 요소가로드되므로 모든 준비를 완료하는 데 몇 초의 시간이 필요합니다.
2. 이미지 최적화
사용자가 사용할 수있는 HD 및 레티 나 디스플레이의 수에 따라 웹 사이트를 구축 할 때 모든 이미지를 고해상도로 전체 크기로로드하려는 유혹이있을 수 있습니다. 이 함정에 빠지지 마십시오. 이러한 이미지의 대부분은 사이트가 효율적으로 처리하기에는 너무 큰 것 같습니다.
파일 형식을 알고 있어야합니다. 웹 이미지의 가장 일반적인 파일 형식은 JPG, PNG, GIF 및 SVG입니다.
- JPG : 사진에 가장 적합한 JPG 파일의 크기는 작은 것부터 큰 것까지 다양합니다. 웹 사이트 사용을 위해 JPG 파일을 저장할 때 최적화 된 파일을 저장하십시오. (Adobe Photoshop에서는 파일> 내보내기> 내보내기 형식에서 내보내기 설정을 사용하여 웹 이미지를 최적화 할 수 있습니다.)
- PNG : 글자가 잘 렌더링되도록 텍스트가 포함 된 이미지에이 파일 형식을 사용하십시오. 이것은 일반적으로 다소 작은 파일입니다.
- GIF : 인기있는 애니메이션 밈 스타일 이미지와 같이 작은 애니메이션 요소에 선호되는 파일 형식입니다. 그러나주의하지 않으면이 파일 형식이 무거워 질 수 있습니다.
- SVG : 웹용 벡터 이미지가 필요한 경우 이것이 가장 좋습니다. 아이콘에서 로고에 이르기까지 무엇이든 사용할 수 있습니다.
3. 가능한 경우 코드 사용
웹 사이트를위한 멋진 아이콘과 이미지를 만들어서 개별 요소로로드하려는 유혹이있을 수 있습니다. 일부 문제가 발생할 수 있습니다. 대신 코드를 사용하여 가능한 경우 이러한 요소를 호출하십시오.
CSS를 사용하여 배경 이미지도로드하십시오. 이렇게하면 배경에 앞서 다른 모든 항목을로드하도록 사이트를 "강제"하므로 사용자는 사이트에서 다른 요소와 텍스트를 즉시 볼 수 있습니다. W3Schools에는이 작업을 수행하는 방법에 대한 훌륭하고 간단한 자습서가 있습니다.
Font Awesome 아이콘부터 다른 CSS 및 JavaScript 라이브러리에 이르기까지 다양한 도구를 사용하여 가볍고 재미있는 효과로 멋진 요소를 만드는 데 사용할 수 있습니다. (CSS 디자인 어워드에는 특히 30 개의 버튼과 양식 요소가 포함되어 있습니다.)
4. 비디오를 짧게 유지
또 다른 최신 유행 웹 디자인 요소는 홈페이지에서 전체 화면 비디오를 사용하는 것입니다. 이것은 또 다른로드 타임 트랩 일 수 있습니다. 당신은 비디오 품질, 비디오 컨텐츠 및 속도에 사로 잡히고 어딘가에서 희생해야 할 것입니다.
최고의 비디오는 단 2 초만에 매우 짧으며 반복되므로 작업이 중단되지 않습니다. 사운드 나 다른 효과도 포함 할 필요가 없습니다.
파일 크기를 최대한 줄이려면 몇 가지 다른 방법을 시도해보십시오.
- 저해상도 비디오에서 색상 오버레이 또는 흐림 효과를 생각하십시오. 여전히 깔끔하게 보일 수 있지만 많은 대역폭이 필요하지 않습니다.
- 전체 화면 크기보다 작은 비디오를 고려하십시오.
- 자동 재생을 차단하여 사용자가 사이트를로드하는 것보다 빠르게로드한다고 생각하도록 속일 수 있습니다.
- 긴 비디오에 얽매이지 마십시오. 여러 비디오 클립을 표시하려면 비디오 "슬라이더"요소를 고려하거나 일정에 따라 비디오를 수동으로 변경하여 사용자가 사이트를 방문 할 때마다 새로운 내용을 볼 수 있도록하십시오. 클립의 상태에 관계없이 몇 초 동안 몇 명의 사용자 만 시청하므로 더 긴 클립의로드 시간을 희생하지 마십시오.
5. 주제에 대해 생각
테마가있는 WordPress 또는 다른 컨텐츠 관리 시스템을 사용하는 경우 모든 테마가 동일하게 구축 된 것은 아닙니다. 프리미엄 옵션을 사용하면 운이 좋을지 모르지만 일부는 사용하지 않는 요소를 "끄기"할 수 있습니다. 코드를 자세히 살펴보고 사이트를 방해하지 않는지 확인하십시오.
6. 플러그인 살펴보기
귀하의 사이트와 연결된 수많은 플러그인 또는 타사 응용 프로그램이 있습니까? 당신은 그들 모두를 적극적으로 사용하고 있습니까? 효율성을 최적화하려면 사용하지 않는 플러그인을 끄십시오.
WordPress 사용자는 플러그인 성능 프로파일 러를 사용하여 활성화 된 플러그인 및 작동 방식을 확인할 수 있습니다. 이를 통해 문제점을 해결하고 문제점을 식별하고 해당 플러그인을 제거하거나 재구성 할 수 있습니다. (일반적인 문제 영역은 종종 소셜 공유 플러그인입니다.)
7. 압축, 압축, 압축
웹 사이트의 개별 구성 요소를 압축해야 할뿐만 아니라 사이트 전체를 압축하여 신속하게 운영하고 유지할 수 있습니다. 압축 할 수있는 요소 중에는 CSS 및 JavaScript 파일, 이미지 및 비디오 (크기 조정) 및 GZIP와 같은 도구를 사용하는 사이트가 있습니다.
축소 된 파일은 플러그인과 작은 파일을 만들 때 가장 좋은 경로입니다. 또한 사이트 내에서 코드가 디자인 된 방식을 확인하려고합니다. 최대 속도를 위해서는 모든 JavaScript가 하나의 파일에 포함되어야하고 모든 CSS가 다른 파일에 포함되어야합니다. (다른 참고 사항 :이 코드를 배치하는 위치도 중요합니다. CSS를 페이지 상단에 연결하고 JavaScript를 하단에 연결하여 사이트 속도를 높이십시오.)
결론
사이트가 빠르게로드됩니까? 그렇지 않은 경우 최적의로드 시간을 충족하도록 조정해야합니다. (이 질문에 대해 전혀 생각하지 않으면 사이트가 충분히 빠르지 않을 수 있습니다.)
사용자가 즉시 상호 작용할 수 있도록 웹 사이트가 빨라야합니다. 기기에 관계없이 페이지를로드하는 데 시간이 오래 걸릴수록 사용자가 사이트를 완전히 포기할 가능성이 높습니다. 오늘 또는 이번 주에 몇 분이 걸리고이 목록을 검토하여 사이트가 최적의 수준으로 작동하는지 확인하십시오.
이미지 출처 : Mohammed Al-Sultan
