검색엔진 최적화 로딩 속도
검색엔진 최적화에서 로딩속도를 높이는 방법중 동영상과. 움직이는 이미지를 제외한 일반적인 이미지를 사용시 주의할점과 이미지의 배치에 대한 이야기를 했었습니다. 검색엔진 최적화 글중 이번에는 이미지를 사용시 생각해야할 부분과 파일 형태 그리고 미리로드와 지연로드에 관한 내용입니다.
검색엔진 최적화 작업중 로딩 속도는 중요한 요소입니다. 그중 상당부분을 검색 엔진최적화의 속도에 영향을 주는것이 이미지 요소입니다. 이미지들을 생각없이 사용하다 보면 검색엔진 최적화 속도에 상당한 악영향을 미치기때문에 이미지 하나를 사용하더라도 다양한 관점에서 판단하고 결정해야 할거 같습니다.
이미지는 다양한 파일형태로 존재합니다. 이러한 이미지 파일의 형태가 틀린것은 이미지마다 각각의 목적에 따라 압축방식과 포맷방식이 틀리기때문입니다.
여기서는 주로 검색엔진 최적화를 위해 인터넷으로 글을 작성하는데 사용하는 이미지에 관련된 정보로 한정해서 이야기하겠습니다. 주로 많이 사용하는 이미지 형태는 png,git ,jpg 등의 다양한 파일을 많이 사용하며 그밖에 고품질의 이미지를 사용해야 하는 경우도 있지만 예외의 경우로 판단해서 제외시키겠습니다.
검색엔잰의 최적화를 위해서 이미지파일을 변환해주는 사이트들이 많이 있기때문에 쉽게 이미지 파일을 변환해서 사용할수 있고 조금만 신경만 쓴다면 검색엔진 최적화를 위해 충분히 할수있는 작업입니다.
검색엔진 최적화를 위해서 이미지 파일형태는 가능하면 webp 파일로 변환해서 사용할것을 권해드립니다. 다양한 이유가 있지만 . 가장 권해드립니다. 물런 장정도 상당히 있습니다. 검색엔진 최적화를 위해서 이미지 변환 파일도 그냥 사용히지 마시고 좀더 작은 용량으로 압축해서 사용할것을 권해드립니다.
검색엔진 최적화의 속도를 향상하기 위해서는 기존의 이미지 형태를 WEBP 이미지 파일로 변환해서 이미지를 사용할것을 권해드립니다 검색 최적화를 위해 다양한 이미지 포맷 변환 사이트들이 있어 쉽게 이용하실수 있습니다. 이미지 변환후 이미지 파일을 압축해서 올리것을 검색엔진 최적화 속도를 높이는 방법으로 권해드립니다.
검색엔진 최적화 작업중 속도에서 이미지가 글 페이지의 첫번째 요소로 나오게 하는것은 피해야 합니다. 그러나 부득이 글의 상단에 이미지를 사용할 경우는 선별적 로드 작업을 진행해 주시면됩니다. 선별적 로드 작업은 이미지의 중요성에 기준을 두고 먼저 로딩이 되야 하는 이미지와 늦게 로딩되도 검색엔진 최적화 속도에 상관없는 이미지를 구분해서 작업을 진행해 주시면 됩니다.
검색엔진 최적화의 속도 향상을 위해서 지연로드(LAZY LOADING) 미리로드(PRELOAD) 전략적 판단
검색엔진 최적화에서 속도관련 문제 해결중 지연로드(LAZY LOADING)과 미리로드(PRELOAD)을 사용해서 먼저 로딩이될 요소와 차후에 로딩이되도 상관 없는 요소를 구분해서 선별적으로 로드작업을 진행하게 하는 방법입니다.
이 판단의 기준은 검색엔진 최적화의 페이지 로딩속도에 기준합니다.
즉 페이지 로딩시 상당한 영향을 주는 요소는 미리로드 작업을 진행해서 다른 시스템보다 먼저 실행되게 하는 방법 그리고중요하지 않은 요소나 페이지나 하단에 있는 요소중 나중에 로딩되도 검색엔진 최적화 속도에 문제가 안되는 요소를 선별합니다. 또한 동시에 로딩되면서 발생하는 시스템 저하, 다른 요소의 로딩을 지연시키거나 부정적 요소로 작용하는지를 판단해서 검색엔진 최적화 속도향상에 보완으로 다른 중요 요소를 선별적으로 로딩시키는 방법입니다.
지연로드(LAZY LOADING)
초기 로딩에 지연요소로 작용하거나 차후 로딩시 문제가 되지 않은 요소들을 지연시켜 다른요소의 검색엔진 최적화 속도를 향상시키는 방법
✔ 예시
<img loading="lazy" src="image.jpg" alt="..." />
<iframe loading="lazy" src="video-player.html" title="..."></iframe>
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />미리로드(PRELOAD)
검색엔진 최적화 속도를 높이기 위해 초기 로딩에 중요한 요소로 먼저 로딩시키거나 전체 시스템에 늦게 로딩시 최적화 속도에 문제를 일키는 요소를 미연에 방지하기 위해 미리 로드 시키는 방법
✔ 예시
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="https://AS.webp" as="image">사용가능요소
- fetch: ArrayBuffer, WebAssembly 바이너리 또는 JSON 파일과
- font: 글꼴 파일입니다.
- image: 이미지 파일.
- script: 자바스크립트 파일.
- style: CSS 스타일시트.
- track: WebVTT 파일.
검색엔진 최적화 속도향샹을 위해 과도한 이미지 파일을 자제하고 이미지 파일을 사용시 검색 최적화 파일형태로 변경후 압축해서 최소한의 크기와 용량으로 검색 최적화에 불필요한 시스템 부하를 방지하며 지연로드와 미리로드의 코드를 이용해서 선별적 로딩 작업으로 검색엔진 최적화의 초기 속도를 향상시킬수 있습니다.