eye-catch-yepnop

2015/1/7更新
yepnope.jsの新バージョン「2.0.0」がリリースされています。


2013年2月12日時点 yepnope1.5.4に対するメモです。

とある実案件で、サイトの表示スピードを早くして欲しいとの依頼があり、いろいろと模索した結果「yepnope.js」を利用することで劇的なスピードアップを行えたのでメモ。

表示スピードを早くするためには何をしたの?

head内に記載された、jqueryのプラグインをyepnope.jsでまとめて/body前で読み込み、非同期にてjqueryプラグインを読みこめば(・∀・)イイ!!。

それだけでかなり違う。難しいことは置いておいて今回は簡単導入メモ。

  1. yepnopeのサイトから「yepnope.js」をダウンロード
  2. yepnope.jsをサイトに設置。
  3. script適当な名前.jsなど適当な名称のjsファイルをyepnope.jsの後に設置。
  4. script適当な名前.jsに下記のようにjqueryのプラグインへのリンクを記述。

以上!
yepnopeは、プログラムにそれほど強くない自分でもあつかえる、条件付きの非同期リソースローダー。これを導入するだけで、サイトの表示スピードが飛躍的に上がったりするので、おススメです。
※一部読み込み順序とか、実行のタイミングで動かなくなるプラグインがありますが、焦らず順序を入れ替えてみて下さい。

参考にした日本語サイト:

条件付きで外部ファイルの読み込みが出来る「yepnope.js」

[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope

条件分岐に特化したリソースローダー「yepnope.js」を試してみる

page
1 / 1