あなたは外部Javascriptを利用する目的を知っていますか?

あなたは外部Javascriptを利用する目的を知っていますか?

バイクに乗ってスピードアップするイメージ画像

 

「スピード アーップ!」

 

「Javascript」を使うとページの表示スピードが遅くなるって、ホームページを作った経験がある方ならそう思うはずです。でも、少しでも速くページ表示ができるのであれば、ページを見に来てくれたお客さんのためにも「速くする工夫」にチャレンジするべきでしょう。そんな工夫をこのページでご紹介いたします。

 

 

もくじ

 

 

○「外部Javascriptを利用する」とはどういうこと?
  1.そもそもJavascriptとはどういうものか
  2.外部Javascriptとは何か?
  3.外部ファイルの準備の仕方
  4.外部Javascript読み込み方法

 

 

 

「外部Javascriptを利用する」とはどういうこと?

 

 

 

形式的SEOができているかチェック
するために「SEOスカウター」という
サービスを利用しました。

 

3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
※SEOスカウターについては、別ページでご紹介してます。

 

私のサイトを、SEOスカウターで
チェックしたところ、以下の指摘を
受けました。

 

 

SEOスカウターでjavascriptの診断をしてだめだった映像

 

 

「外部Javascriptの利用」という
項目についてのコメントです。

 

 

「Javascriptがページに書かれていると
検索クローラーがページ内を回遊しづらく
なります。出来るだけJavascriptは外部
ファイルを読み込むようにしましょう。」

 

【対策例】
下記のように<head>内に記述し、
外部のページからJSファイルを読み込みます。

 

<script type="text/javascript" src="任意の名前.js"></script>

 

 

外部Javascriptを読み込みを行う
ことで、いちいち内部に何度も同様
の記載を行うことを避けて、上記の
ようにシンプルな記載にします。

 

シンプルな記載にすることで、検索
エンジンのクローラーがページ内を
回遊しやすくなる。ということでしたが、
正直何をどうしてよいのか理解できま
せんでした。

 

ひとつひとつの言葉がよく分からな
かったので整理してみました。

 

 

香辛料が市場に整然と並んでいて、赤や黄色の彩りが美しい。整然と並んでいる様子を「Javascriptとはなにか整理してみる」というキーワードに合わせた画像

 

 

1.そもそもJavascriptとはどういうものか
2.「外部」Javascriptとは何か?
3.外部ファイルの準備の仕方
4.外部Javascript読み込み方法

 

 

 

1.そもそもJavascriptとはどういうものか

 

 

 

「Javascript」とは、簡単に言うと文字や
画像に動きを与える言語です。

 

インターネット上で、動く画像はこの言語が
使われている場合がほとんどです。ここでは、
この程度の理解で十分かと思います。

 

詳しく解説すると一冊本ができるぐらいです。

 

 

 

 

Javascriptはプログラム中でこのような
記述で存在しています。

 

「Google-analytics」の場合のJavascript
記載例です。

 

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '○○○○']);
_gaq.push(['_trackPageview']);
  (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

 

○○○○は個人のコードに該当する部分です

 

 

この記述の緑色の部分
そのままコピペして、ファイルをつくり、
拡張子.jsのファイルを保存したら
つぎに説明する「外部Javascript」
ファイルの出来上がりです。

 

(ファイル名は「○○○(好きな名前).js」となります)

 

 

 

2.「外部」Javascriptとは何か?

 

 

 

外部Javascriptとは・・

 

「サイトのプログラムとは別の、
Javascriptファイルのこと」です。

 

要は、別にひとつJavascriptの
ファイルを作らなくてはいけない
ということです。

 

なぜ、別にひとつJavascriptのファイルを
作らなくてはいけないのかというと、

 

Javascriptをプログラムの中に記載
すると、動作が遅くなります。

 

だから、外部のファイルを作って、高速化
を図るのです。

 

では、何をどう作ればいいのか、
具体的に作成方法を見てゆきます。

 

 

 

3.外部ファイルの準備の仕方

 

 

 

.jsファイル作成方法

 

→まずは「メモ帳」を開きます。

 

 

.jsファイル

 

 

→次に、コピーしたものを「メモ帳」
 に貼り付けます。

 

 

.jsファイル

 

 

→作成した「メモ帳」ファイルに名前を
 つけます。

 

  (名前は・・「○○○(好きな名前).js」となります)
  (下の例では・・「abcdefg.js」としました)

 

 

.jsファイル

 

 

→パソコン(のどこか好きな場所)に保存すると
  出来上がりです。

 

 

.jsファイル

 

 

※別ファイルの作成の仕方はこのホームページを参考にしました

 

JavaScriptを外部ファイル化する方法

 

 

 

4.外部Javascript読み込み方法

 

 

 

上記3までの準備ができたら、ようやく
【対策例】の記載をHTMLプログラム
の<head>内に行います。

 

 

<script type="text/javascript" src="任意の名前.js"></script>

 

 

javascript

 

 

最後の記載を行うまで、何をしなければ
いけないのか調べるのに苦労しましたが、
これで完了です。

 

あなたもぜひチャレンジしてみてください。

 

 

<※外部化ができるようになったら、考えてみてください>

 

実は、闇雲に外部化すればいいのか
と言うとそうでもなく、外部Javascript
の記載の場所や、数にまで気を遣う
必要があるのです。

 

※いきなり内容が高度になってしまいますが、
興味がある方は参考になるサイトをご紹介します。
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法

 

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

よく読まれる関連ページ

 

  ↓↓一番左をクリックしていくと、順にサイトを見ることができます

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)うへのリンク画像

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う

canonicalタグ

サイト公開するなら、最低限canonicalタグを使いこなせ!

きみは2つのサイトマップを上手に使えているか?へのリンク画像

きみは2つのサイトマップを上手に使えているか?

そろそろグローバルメニューについて一言いっとくかへのリンク画像

そろそろグローバルメニューについて一言いっとくか

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



あなたは外部Javascriptを利用する目的を知っていますか?関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
3行入力するだけ!誰でもできる圧縮によるサイト高速化
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ