読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress(Page Speed対応) - 小さな JavaScript をインライン化する

パフォーマンスチューニング

難易度

★すごく簡単

概要

対応方法は大きく3つあります。

htmlに直接インラインで記述する 小さなJavascriptは他のJavascriptと合わせる WordPressプラグイン – Head Cleanerの「CSSJavaScript を、サーバ上にキャッシュする → 複数JavaScript を結合する」を使ってJavaScriptをがっちゃんこする

[html]<script src="/js/asobicocoro.js"></script> </body>[/html] [js]/ asobicocoro.jsの記述内容 / var url = window.location.href; alert(url);[/js]

[html]<script> var url = window.location.href; alert(url); </script> </body>[/html]

記述の少ないJavaScriptを外部JSファイルで読み込みこんでいる場合は、htmlに直接インラインで記述しましょう。ということです。外部ファイルで読み込むメリットは、ブラウザがJSファイルをキャッシュしてくれるところにありますが、外部ファイルを読み込む際には、「TCP接続設定」「HTTP要求」「DNS名前解決」の3つのレスポンスが発生します。小さなJSファイルはキャッシュさせるより、html内に展開したほうがレスポンスを抑えられて高速化に役立つという理由です。

注意点

Javascriptは、読み込み順序に依存関係などがあるので、Javascriptエラーが起きていないか。正常に動作しているか。を確認しましょう。chromeでサイトを開き、「要素を検証」をクリックして右下に赤丸で「×」と出ていないか確認しましょう。

確認方法

各種ブラウザで確認

参考サイト

Head Cleaner を使用する場合の設定