이미지 프리로딩 (워드프레스 플러그인)

지능적인 이미지 프리페칭을 통해 페이지 로드 속도를 최적화하는 현대적이고 고성능 플러그인입니다.

이 플러그인을 사용하면 최신 JavaScript 프로미스나 표준 HTML 링크 헤더를 사용하여 중요한 이미지를 미리 로드할 수 있습니다. 경량화되어 있고, 개발자 친화적이며, WordPress 생태계와 완벽하게 통합되도록 설계되었습니다.

Image Preloading (WordPress Plugin)

✨ 주요 기능

이중 프리로딩 방법: JavaScript 프리로딩, HTML <link rel="preload"> 헤더 중 선택하거나, 최대 호환성을 위해 둘 다 결합하여 사용할 수 있습니다.
성능 우선: requestIdleCallback을 활용하여 브라우저 리소스와 메인 스레드 활동을 존중합니다.
스마트 조건부 로직: 스크립트가 로드되는 위치(예: 특정 게시물 유형, 아카이브)와 ID 기반 페이지 제외에 대한 세밀한 제어가 가능합니다.
견고한 아키텍처: 동시성 제어, 오류 처리, 입력값 검증이 포함된 Promise 기반 로딩을 제공합니다.
원활한 통합: 네이티브 WordPress 관리자 인터페이스, 번역 준비 완료, 이전 버전 자동 마이그레이션을 지원합니다.

요구사항

구성 요소	최소 버전
WordPress	5.0+
PHP	7.2+
MySQL	5.6+

빠른 시작 가이드

설치

플러그인 패키지를 다운로드하세요.
image-preloading 폴더를 서버의 wp-content/plugins/ 디렉토리에 업로드하세요.
WordPress에 로그인하여 플러그인으로 이동하세요.
Image Preloading을 찾아 활성화를 클릭하세요.

기본 구성

설정 → 이미지 사전 로드로 이동합니다.
메인 토글을 사용하여 플러그인을 활성화합니다.
사전 로드하려는 이미지의 전체 URL을 이미지 URL 상자에 붙여넣습니다(한 줄에 하나씩).
사전 로드 방법을 선택합니다(권장: 둘 다).
변경 사항 저장을 클릭합니다.

⚙️ 구성 옵션

1. 사전 로드 방법

성능 요구 사항에 가장 적합한 전략을 선택하세요:

자바스크립트 (JS): 최신 Promise를 사용하여 이미지를 로드합니다. 오류 처리 및 동시성 제한 기능이 있습니다. 동적 로딩 제어에 가장 적합합니다.
링크 프리로드 (헤더): 표준 <link rel="preload"> 태그를 문서의 <head>에 삽입합니다. 이는 최신 브라우저가 중요한 자산을 일찍 발견하는 가장 빠른 방법입니다.
둘 다 (권장): 두 가지 접근 방식을 결합하여 최신 브라우저에서 높은 성능을 보장하면서도 자바스크립트 폴백 및 검증 시스템을 유지합니다.

2. URL 관리

이미지의 절대 URL을 입력하세요. 외부 도메인(CDN)을 사용할 수 있습니다.

형식 예시:

https://example.com/images/logo.png
https://example.com/assets/hero-banner.jpg
https://cdn.external-site.com/campaign-graphic.webp

3. 조건부 로딩

불필요한 페이지에서 대역폭을 낭비하지 않도록 프리로더가 실행될 위치를 정확히 제어하세요.

로드 위치:

모든 페이지: (기본값) 모든 곳에서 실행됩니다.
프론트 페이지: 홈페이지만 해당됩니다.
블로그 게시물 페이지: 최신 게시물의 메인 피드입니다.
단일 게시물 / 페이지 / 아카이브: 특정 콘텐츠 유형을 대상으로 합니다.
페이지 제외: 프리로딩을 엄격하게 비활성화할 특정 URL의 페이지 또는 게시물 ID를 쉼표로 구분하여 입력하세요.
예시: 5, 12, 104

문제 해결

이미지가 프리로딩되지 않습니다

URL 확인: 모든 링크가 직접적인 이미지 경로이며 공개적으로 접근 가능한지 확인하세요.
확인 방법: “링크 프리로드”를 사용하는 경우, 페이지 소스(Ctrl+U)를 보고 <link rel="preload">를 검색하세요.
CORS: 외부 CDN에서 로드하는 경우, CDN이 올바른 교차 출처 리소스 공유(CORS) 헤더를 전송하는지 확인하세요.
캐시: 설정 저장 후 WordPress, 서버 및 브라우저 캐시를 모두 지우세요.

성능 및 콘솔 오류

디버깅: 플러그인은 활동을 브라우저 콘솔에 기록합니다.

개발자 도구(F12)를 엽니다.
[Image Preloading]으로 필터링합니다.
성공/실패 메시지를 검토합니다.

동시성: 브라우저가 정지되면, 플러그인은 일반적으로 동시성 제한을 통해 이를 처리합니다. 문제가 지속되면, 사전 로드되는 이미지의 수를 줄이세요.

설정이 저장되지 않음

권한: 사용자 계정에 관리자 권한이 있는지 확인하세요.
마이그레이션: v1.x에서 업그레이드한 경우, 관리자 알림을 확인하세요. 플러그인은 자동으로 이전 설정 형식을 마이그레이션하려고 시도합니다.

️ 개발자를 위한 정보

아키텍처

이 플러그인은 싱글톤 패턴을 사용하는 깔끔한 객체 지향 구조를 따릅니다.

image-preloading/
├── image-preloading.php        # 메인 진입점, 클래스 정의, 싱글톤
│   ├── Image_Preloading_Plugin # 코어 클래스
│   │   ├── load_options()      # 설정 및 마이그레이션 로직
│   │   ├── register_settings() # WP 설정 API
│   │   └── should_load_scripts() # 조건부 표시 로직
├── assets/
│   └── js/
│       └── image-preloading.js # Promise 기반 JS 프리로더
├── languages/                  # .pot 및 .po/.mo 파일
└── README.md

국제화

텍스트 도메인: image-preloading
위치: languages/
모든 관리자 및 프론트엔드 문자열은 완전히 번역 가능합니다.

라이선스 및 기여

라이선스: GNU General Public License v2.0 이상.