WordPress_php 팁에서 JavaScript 로딩 경험을 최적화하는 여러 플러그인 소개

WordPress 자체와 테마 및 플러그인은 일반적으로 일부 특수 기능을 구현하기 위해 일부 JavaScript를 로드해야 합니다. 호환성을 최대화하고 JavaScript가 무효화되는 것을 방지하기 위해 일반적으로 JavaScript 파일은 페이지 헤더에 로드됩니다. 그러나 Yahoo 개발자 포럼의 권장 사항에 따르면 페이지의 표시(응답, 렌더링) 속도를 향상시키기 위해서는 가능한 한 페이지 끝 부분에 JavaScript를 로드해야 합니다. 이 기사에서는 작성자의 경험을 바탕으로 여러 관련 플러그인을 소개하고 일부 특수 페이지의 헤더에 JavaScript를 로드하는 방법을 설명합니다.

다음에서는 JavaScript를 최적화하는 몇 가지 관련 WordPress 플러그인과 기능을 간략하게 소개하고 몇 가지 특별한 상황을 처리하는 방법을 보여줍니다.

1. JavaScript를 최적화하는 WordPress 플러그인
제가 사용해 본 플러그인은 WP Minify, Autoptimize, JavaScript to Footer입니다.

1.WP 미니파이
이 플러그인은 Minify 엔진을 WordPress에 통합합니다. 활성화되면 플러그인이 JS 및 CSS 파일을 병합하고 압축하여 페이지 로딩 속도를 향상시킵니다.

WP Minify는 생성된 WordPress 페이지에서 JS/CSS 파일을 크롤링하고 파일 목록을 Minify 엔진에 전달할 수 있습니다. Minify 엔진은 이를 처리하고 WP Minify가 WordPress 헤더로 대체하는 향상되고 축소되고 압축된 JavaScript 또는 스타일 시트(CSS) 파일을 반환합니다.

주요 기능은 다음과 같습니다.

• 사용하기 쉽습니다.
• JavaScript, CSS 및 HTML에 유효합니다.
• 디버깅 도구 제공
• 외부 JS 및 CSS 파일 처리 기능
• 지정된 JS 및 CSS 파일을 제외하는 기능
• 처리된 JS 및 CSS 파일의 위치를 ​​지정할 수 있습니다(머리글, 바닥글 또는 다른 곳).
• 처리된 JS 및 CSS 파일에 만료 시간 등이 추가될 수 있습니다.

WordPress 3.1 베타가 나왔을 때 WP Minify가 호환되지 않아 사이트가 제대로 로드되지 않는 것을 발견했습니다.

2.자동최적화
향후 WP Minify 업그레이드를 통해 비호환성 문제가 해결될 수도 있지만 기대됩니다. 나중에 비슷한 기능을 가진 플러그인인 Autoptimize를 발견했는데, 이 플러그인이 작동이 더 간단합니다.

자동 최적화는 모든 JS 및 스타일시트(CSS) 파일을 통합, 간소화 및 압축하고 캐시 만료 플래그를 추가합니다. 그런 다음 스타일 시트 파일을 페이지 헤더에 배치하고(페이지 로딩 효율성 향상을 위해) JS 파일을 페이지 바닥글에 배치합니다. 또한 HTML 코드를 간소화하고 페이지를 축소할 수 있습니다. 그러나 HTML 페이지를 줄이는 효과는 그리 명확하지 않습니다. 서버에 Gzip 압축 기능이 활성화되어 있으면 이를 수행할 필요가 없습니다.

기본적으로 자동 최적화는 위에서 설명한 대로 모든 HTML/CSS/JavaScript를 최적화합니다.

저는 개인적으로 Autoptimize가 WP Minify보다 더 나은 WordPress 최적화 플러그인이라고 생각합니다.

3. 자바스크립트를 바닥글로
이 플러그인은 매우 간결하게 작성되었습니다. 소스코드를 살펴보니 해당 작업을 수행하는 코드는 워드프레스 함수 6개(아래 참조), 즉 6줄에 불과합니다. 그렇다면 이 플러그인은 생성된 이후 어떻게 업데이트되었습니까? 마지막 변경 날짜가 여전히 2009년 9월 22일인 것을 확인했기 때문에 처음에는 이를 무시했습니다.

그러나 이는 JavaScript의 로딩 위치만 최적화합니다. 즉, WordPress에서 올바르게 선언된 모든 Javascript 파일은 로딩을 위해 페이지 끝으로 이동됩니다. HTML 코드 및 CSS 스타일시트 파일에는 아무 작업도 수행하지 않습니다.

Footer에 대한 JavaScript 소스 코드에 따르면 작업을 완료하기 위해 다음 6줄의 코드를 사용합니다.

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

필요한 경우 특정 WordPress 템플릿의 wp_head() 함수 앞에 다음 코드를 추가하여 위 프로세스를 반대로 할 수 있습니다. 즉, 이를 무효화하고 원래 로드 위치로 복원할 수 있습니다.

remove_action('wp_footer', 'wp_print_scripts', 5);
remove_action('wp_footer', 'wp_enqueue_scripts', 5);
remove_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_head', 'wp_print_scripts');
add_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_head', 'wp_enqueue_scripts', 1);

当然只是说某些特定的页面模板，如果是所有页面，那干脆禁用该插件好了 :D

二. 使用方法
相信对于大多数 WPer 来说，看了前面的介绍就知道如何选择自己需要的优化插件并合理使用了。无非是基于以下三个方面来考虑：

你的页面模板中是否使用了大量的 HTML 注释、空格、空行等标记？如果没有，那么你就不需要为了一点点（开启 Gzip 压缩时通常 1% 以下）的带宽节省而使用 HTML 精简功能；
你的页面中是否加载了多个 CSS 样式表文件？如果没有，你也不需要通过插件来精简和整合 CSS 样式表，手工精简和整合 CSS 样式表比使用插件更加简单有效；
基于 WordPress 默认会在页头中加载 JavaScript，一般的 WordPress 网站都需要对 JS 的加载位置进行优化。但是如果你大部分的页面也都需要在页面头部加载 JS 以保证不会出现 JS 失效的情况，那你就不能进行这样的优化了。
在我看来，WP Minify 就不需要了，原因在前面已经说过了。那么剩下的 Autoptimize 和 JavaScript to Footer 可以选用其一或者两者配合使用（如果是配合使用，当然是使用前者的 HTML 和 CSS 精简/整合功能，而使用后者的 JS 位置控制功能，因为后者就这一个功能）。我只需要控制 JS 的加载位置，所以就选择了 JavaScript to Footer。因为我的页面中也就四五个 JS 文件，又是放到页尾加载，我觉得没必要进行整合。

三. 特殊情况处理
虽然将 JavaScript 文件都放到页面末尾加载对于页面加载速度很有帮助，但是请注意，所谓页面末尾指的是在 WordPress 的 wp_footer() 函数中调用，这个函数通常刚好位于页面的 36cc49f0c466276486e50c850b7e4956 标签前面（当然是末尾了）。

有时候我们可能会在 wp_footer 函数出现之前就需要用到某些 JavaScript，比如 jquery.js 文件。

这样的情况也是很常见的。比如我单独创建了一个链接页面，在这个页面中我使用了 jQuery 方法来获取链接网站的 favicon。很显然，我只需要在这唯一一个页面使用这部分代码，所以将这段代码直接放在这个页面模板中是最好的做法。问题来了：这部分内容显然是在 wp_footer 之前出现的，那么这段代码就在 jquery.js 文件之前出现了，导致该代码段实际上无法工作，因为调用 jQuery 方法的代码段必须比 jquery.js 文件后加载。

那么如何处理这种特殊情况呢？其实也很简单。以上面的情景为例，既然我们需要先调用 jquery.js 文件，那我们就在该代码段之前直接输出需要的 jquery.js 文件，不使用 wp_enqueue_script() 函数，而改用 wp_print_scripts() 函数。

wp_enqueue_script() 与 wp_print_scripts() 的区别是：wp_enqueue_script() 是告诉 WordPress “我在这个页面上需要用到某个 JavaScript 文件，你可要记得加载啊”。WordPress 默认在 wp_head() 中处理，而我们改为在 wp_footer() 中处理。wp_print_scripts() 则直接在你使用此方法的位置输出需要的 JavaScript 文件，而不是加入到 WordPress 的处理任务中。

如果我们在页面的中间使用，

 <&#63;php wp_print_scripts('jquery'); &#63;>

直接输出了 jquery.js 文件（通常是其压缩版本 jquery.min.js），那么即使其它的插件或者什么东西使用，

 <&#63;php wp_enqueue_script('jquery'); &#63;>

告诉 WordPress 需要加载 jquery.js，WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了，如果有了就不会再重新加载一次。

四. 结论
在 WordPress 中加载 JavaScript 最好使用 wp_enqueue_script() 函数以减少问题提高效率。如果不是有这些特殊情况要处理，使用 Autoptimize 显然比较好，它全面完成任务而且使用简单。

但是如果使用的主题本身已经很简洁了，那么 JavaScript to Footer 更简单高效，也就更好。