ID #1141

Mobify.jsウェブサイトのパフォーマンスを向上させる為にするべき事は何ですか?

・必要なスクリプトのみを組み込む。これが最も大きなパフォーマンスの障壁です。同期的なjavascriptはモバイルサイトのパフォーマンスの敵です。スクリプトの大部分が使用されないとしても、モバイルブラウザはパースし、バイトコンパイルしなければなりません。大きなフレームワークの使用や、さらに悪い事に複数のフレームワークの使用をすると、ページの読み込みに大幅な影響を与えます。
・もしも大きなスクリプトが絶対に必要という場合、非同期的に読み込むことが出来ないか考えてみてください。即ち、ページのレンダリングをブロックすることなく評価させられないかという事です。async script tagオプションについてはこちらの”MDN reference”を御覧ください。
・大きな画像に対してはMobifyの画像リサイズAPIを使用して下さい。Mobifyの画像リサイズAPIは画像を再圧縮し、表示する端末向けに適切な大きさにリサイズします。
・冗長なCSSの使用は避けてください。CSSの行数は可能な限り少なく抑えてください。

こちらはMobifyを使用した実際のウェブサイトのパフォーマンスチャートです。全てのサイトがパフォーマンスを向上させていますが、1つだけ他よりも大幅に向上していることがわかります。このサイトはスクリプトを減らすことに重点を置いてパフォーマンスを向上させたのです。

タグ: -

関連エントリー:

この FAQ にコメントする