모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [2 ​​부]

아래로 스크롤하여 여기에 저장되어있는 것을 확인한 경우 1-5 단계에서 발생한 일이 궁금 할 수 있습니다..


아, 맞습니다. 답을 찾으려면이 미니 시리즈의 첫 부분을 살펴 봐야합니다..

요컨대, 우리가 겪고있는 것은 WordPress를위한 고성능 모바일 테마를 구축하는 방법. 처음에는 그렇지 않은 것 같지만 실제로 대부분의 사람들이 생각하는 것보다 문제가 더 크다.

결국, 일반적인 생각은 당신이 테마를 반응 형으로 만들고, 모바일로 최적화해야한다는 것입니다. 글쎄요 더 이상 고민하지 않고 바로 주제로 돌아 갑시다..

1 부에 대해서는 다음을 참조하십시오 : 모바일을 우선으로하는 성능 중심의 워드 프레스 테마 [파트 1]

모든 모바일 브라우저를위한 6. Design

실행중인 웹 브라우저에 따라 일부 HTML 코드가 다르게 작동 할 수 있다는 것은 정말 놀랍습니다. 그리고 이것은 모바일 컴퓨터와 데스크톱 컴퓨터 모두에 적용됩니다. 하지만 모바일 기기에는 아마도 더 많은 것들이있을 것입니다. 수백 가지의 기기와 화면 사양이 있기 때문입니다..

따라서 테마 작업을 할 때는 다음 사항에 유의하십시오.

  • 모든 주요 브라우저에서 작업을 테스트하십시오. 이미 전체 테마를 완료했을 때 브라우저 테스트를 시작하는 것이 아니라 초기에 이렇게하면 문제 해결이 훨씬 쉬워집니다.,
  • 가능한 많은 장치를 사용하고 테마가 어떻게 작동하는지 확인하십시오 (가능한 경우 다른 화면 크기, 해상도 및 비율을 시도하십시오).

7. UX 문제

모바일에서는 사람들이 데스크톱과 웹 사이트와 매우 다른 방식으로 상호 작용합니다.

이것은 기본적으로 들리지만 간단한 예를 들어 보겠습니다. 누군가가 데스크탑에서 피자 가게를 찾고있을 때, 그들은 체크 아웃하는 식당에 대한 많은 세부 사항에 관심이있을 것입니다. 예를 들어 메뉴, 갤러리, 연락처 세부 사항 등.

그러나 모바일에서 동일한 웹 사이트를 방문하는 경우 장소에 도착하는 방법 및 예약을 위해 전화를 거는 횟수는 한 가지에 대해서만 신경 쓰게됩니다.

모바일 테마를 만들 때 디자인을 통해 사이트 소유자는 모바일 방문자에게 중요한 특정 요소에 추가로 초점을 맞출 수 있어야합니다..

가장 쉬운 방법은 홈페이지에 표시되고 화면의 보이는 영역의 상단에 남아있는 잘 디자인 된 위젯 영역을 사용하는 것입니다 (일명 접는 부분 위에 유지)..

모바일에서는 사람들이 필요한 정보를 찾을 시간이 거의 없습니다. 이것이 좋은 정보를 접근성있게 만드는 데 효과적인 모바일 디자인이 효과적인 이유입니다..

8. 더 적은

더 적은 개념은 테마 개발의 대부분의 시나리오에 쉽게 적용 할 수 있으며, 모바일 테마와 관련하여 훌륭한 테마와 너무 테마의 차이를 의미합니다..

적은 비용으로 더 많은 것을 달성하기 위해 할 수있는 일은 다음과 같습니다.

  • 브랜드 요소를위한 공간을 남겨 두십시오. 사이트의 로고를위한 공간이 중요합니다. 그러나 여전히 실제 콘텐츠만큼 중요하지는 않으므로 로고가 접힌 공간의 대부분을 차지하지 않도록하십시오..
  • 접근 가능한 메뉴를 소개합니다. 메뉴는 항상 모바일에서 문제였습니다. 한편으로 웹 사이트에는 메뉴가 필요합니다. 그러나 짧은 메뉴 (4 개 정도의 항목 만있는 것)조차도 대부분의 모바일 장치에서 두 줄의 텍스트를 쉽게 사용할 수있어 내용을 페이지 아래로 밀어냅니다. 이 문제를 해결하기 위해 수행 할 수있는 작업은 다음과 같습니다. (1) 한 줄의 텍스트 안에 맞는 메뉴를 정상적으로 표시합니다. (2) 그렇지 않은 경우 드롭 다운 메뉴를 만듭니다..
  • 중요하지 않은 메뉴를 가져옵니다. 대부분의 경우 바닥 글 메뉴는 모바일 방문자에게 가치가 없다고 말할 위험이 있습니다. 데스크톱에서는 방문자가 다른 모든 페이지에 대한 링크를 찾을 수있는 일종의 포괄 메뉴 역할을하지만 모바일에서는 누구나 사용할 이유가 거의 없습니다. 모바일에서 테마를 볼 때 완전히 제거하는 것을 고려하십시오..
  • 추가 웹 사이트 기능에주의하십시오. 새로운 WordPress 테마에 사용자 정의 기능을 도입 할 때 수많은 가능성이 있습니다. 이미지 슬라이더, 소셜 미디어 통합, 사용자 정의 갤러리 및 기타 여러 가지를 구현할 수 있습니다. 그러나 당신은해야합니까? 이러한 기능 아이디어는 모두 훌륭하지만 모바일 사용자에게는 문제가 발생할 수 있습니다. 대부분의 플랫폼에서 테마가 제대로 작동하도록하려면 네이티브를 사용하십시오. wp_is_mobile () 함수. 모바일 방문자와 데스크탑 방문자를 구별 할 수 있으므로 문제를 피하기 위해 전자의 인터페이스를 단순화 할 수 있습니다..

9. 필요한 파일 만로드

요즘 사람들은 다양한 휴대 기기에서 웹에 액세스 할 수 있습니다. 따라서 이러한 기기 중 일부는 매우 오래되어 최신 웹 기능을 지원할 수 없습니다. 이 때문에 주어진 기능을 실행하는 데 필요한 라이브러리 또는 모듈을 항상 확인해야합니다.

그렇게하는 가장 좋은 방법 중 하나는 Modernizr. 간단히 말해 사용자 브라우저에서 HTML5 및 CSS3 기능을 감지하는 자바 스크립트 라이브러리입니다. 주어진 기능이 기본적으로 브라우저에 포함되어 있는지 여부에 따라 조건부 코드를 작성할 수 있습니다. 그런 다음 필요한 경우 필요한 라이브러리를 가져올 수 있습니다.

현대화

그러나 Modernizr은 모든 것에 대한 해결책이 아닙니다. 명심할 가치가있는 다른 지침은 다음과 같습니다.

  • 일반적으로 테마의 기능에 반드시 필요한 라이브러리가 아닌 경우 라이브러리를 가져 오지 마십시오. 라이브러리와 외부 스크립트가 많을수록 최종 사이트 (특히 모바일)를로드하는 데 더 많은 시간이 걸립니다..
  • 항상 시작이 아닌 HTML 구조의 끝에 JavaScript 파일을로드하십시오.
  • 하려고 노력하다 DOM 요소 수를 최소화 HTML 구조는.
  • 모든 페이지에 대해 CSS 파일과 JavaScript를 개별적으로로드하십시오. 예를 들어 하나의 특정 페이지에만 필요한 CSS 파일이있는 경우 조건문 내에서 is_page () 함수를 사용하고 해당 페이지에서만 스타일을 큐에 넣습니다..

10. 테스트 서버에서 속도 테스트 수행

개발 초기 단계에서 로컬 테스트 서버를 갖추면 충분하지만 고급 테스트 설정을 신속하게 도입해야합니다..

사실 몇 가지 테스트 환경에 테마를 설치하고 실제 환경에서 테마가 어떻게 작동하는지 확인할 때까지 테마가 얼마나 최적화되었는지 확실하게 알 수 없습니다..

여전히 비용은 낮게 유지하면서도 최종 공유 사용자 대부분이 아마도이 계정을 사용하기 때문에 저렴한 공유 호스팅 계정 몇 개에 테마를 설치하면됩니다. 그런 다음 다음 도구를 사용하여 다양한 테스트를 실행할 수 있습니다.

  • PageSpeed ​​통계. Google이 만든 도구입니다. 그것은 당신에게 더 나은 것을 만드는 방법에 대한 몇 가지 팁과 함께 모바일 및 데스크탑 성능에 대한 좋은 데이터를 제공합니다.
  • Pingdom 웹 사이트 속도 테스트. 이 도구를 사용하면 사이트에 필요한 개별 스크립트 / 파일을로드하는 데 걸리는 시간을 완전히 분석 할 수 있습니다..
  • 고 스트랩. 웹과 모바일에 대한 동시 브라우저 테스트를위한 매우 편리한 도구.
  • Mobitest의 모바일 성능 테스트. 일반적인 에뮬레이션 된 모바일 환경뿐만 아니라 실제 모바일 장치에서도 사이트를 테스트 할 수 있습니다..
  • BrowserStack. 모든 인기있는 모바일 및 데스크탑 브라우저의 모든 버전에 즉시 액세스 할 수 있습니다. 이 도구를 사용하면 오래된 브라우저에서 테마가 어떻게 보일지 궁금 할 필요없이 몇 번의 클릭만으로 스크린 샷을 생성 할 수 있습니다.

pagespeed

이것은 모바일 우선, 성능 중심의 워드 프레스 테마를 구축하는 10 단계 가이드를 요약합니다. 멋진 아이디어를 얻고 다음 주제를 진정한 성능의 괴물로 바꾸는 데 도움이되기를 바랍니다.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map