紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

Jqueryの読み込み先は統一する方法【初心者は要注意】

f:id:slash1196:20210815002322j:plain

f:id:slash1196:20200521163130j:plain

ブログ初心者

「今まで結構表示速度上げるためにやってきたけど、まだ遅いような感じがする。まだいじってないのはJqueryなんだけど。読み込み先って統一したほうがいいのかな。
教えてほしいな。」

 

こんなお悩みにお答えします。

 

この記事でわかること

  • Jqueryの読み込み先は統一したほうがいい

  • 【悲報】初心者はわからないままページを遅くしている

 

こんにちわ、紅蓮です。

 

ブログの表示速度を上げるときに気になるのが、Jqueryだったりしますよね。

 

でもブログ自体が初心者でプログラミングにも携わったことがない場合って、「Jqueryを下手に触って動かなくなるの怖いな」なんて思ってしまいますよね。

 

そこで今回では、Jqueryの読み込み先は統一したほうがいい事実ややり方、初心者がカスタマイズするときにどうすべきかまでばっちり解説しちゃいます。

 

この記事を書く僕は、アフィリエイト歴は3年目。

今ではアフィリエイトからの収益が、毎月3000円くらい入ってきます。

 

また無類のブログカスタマイズオタクでして、高速化のカスタマイズを学習して3年目。

このブログでも高速化についての記事があります。

 

そんな僕も初心者の時にはJqueryが何かわからず、遅くなっている原因を見つけても敬遠していましたね。

 

そんな時にある記事を読んでやってみたらPage Speed Insightの結果がよくなったのが今回のお話ですね。

 

ぜひ最後までお読みの上、実践してくださいね。

 

では行ってみましょう。

Here We Go!!

 

Jqueryの読み込み先は統一したほうがいい

f:id:slash1196:20210815002404j:plain

いきなり結論で申し訳ないですが、Jqueryの読み込み先は統一したほうがいいですね。

 

というのも、以下のような理由があるからなんです。

 

jqueryの読み込み先は統一したほうがいい理由

jqueryの読み込み先を統一したほうがいい理由は、以下の通り。

 

  • 理由①読み込み先が増えると単純に待ち時間が増える
  • 理由②読者の時間を奪ってはいけない

 

では詳しく見ていきましょう。

 

理由①読み込み先が増えると単純に待ち時間が増える

理由の1つ目は、読み込み先が増えると単純に待ち時間が増えるからですね。

 

読み込み先が1つの場合と2つの場合、単純に時間は2倍かかります。

 

ここで知っておきたいのは、jqueryってjavascriptを使いやすくしたものであることなんです。

 

CSSの場合はたくさんのコードがあっても同時に読み込みが可能ですが、javascriptは1つずつしか読み込みできません。

 

読み込み先が複数あると処理が終わってから次にいくという風になります。

待ち時間が増えてしまいます。

 

ですから統一したほうが、時間が少なくて済みます。

 

理由②読者の時間を奪ってはいけない

理由の2つ目は、読者の読む時間を奪うことになるからですね。

 

近年ブログを読むデバイスってPCよりも、スマホからが多いです。

 

そしてスマホから読むということは、隙間時間に読むことも多くなったというです。

 

このことからわかるのはPCから読むのと違って、腰を落ち着けて読む時間がなくても表示できるサイトでないといけないということが言えます。

 

そんな時に読み込み先を複数にしてしまうと、もちろん時間が増えてしまいます。

 

そうなると読者は待っている時間が長くなり、隙間時間が終わってしまう可能性もありますよね。

 

そのまま戻ってきてくれればいいですが、二度と現れないということにもなります。

 

そうなると大きな機会損失になり、もったいないですよね。

 

ですから、Jqueryの読み込み先は統一したほうがいいのです。

 

jqueryの読み込みのからくり

ここでは、Jqueryの読み込みのからくりをお話しておきましょう。

 

Jqueryの読み込みは、外部ファイル読み込みと同じような感じですね。

 

以下の画像をご覧ください。

 

f:id:slash1196:20210814194008j:plain

まずあなたはサイトを見たときに、クリックするなどのアクションを起こします。

 

すると、サイトからJqueryのライブラリーに読み込みに行きます。

 

そしてそのライブラリーから、ウェブサイトに向けて情報を返してその情報を僕たちがサイト上で見ているというような感じなんです。

 

Jquery使用の時の読み込み先

先ほど上記で、「Jqueryは外部ファイルのようなものだ」とご紹介しましたよね。

となると当然のことながら、読み込みに行く場所が必要になります。

 

実はJqueryには、CDNと呼ばれるライブラリーがあり、これを使うことが一般的ですね。

 

CDNとは、コンテンツデリバリーネットワークの略で、ファイルを置いておいて必要に応じて配信するための仕組みを言います。

 

この仕組みは全国各地にサーバーが存在していて、アクセス元から一番近くのサーバーにつなぐことができるので、素早く読者に情報を届けることが可能なんです。

 

CDNは各社作っているのですが、GoogleのCDNが結構有名ですね。

Hosted Libraries  |  Google Developers

 

CDNには、3つのバージョンがある。

f:id:slash1196:20210814201046j:plain

3つの系統があるCDN(Hosted Libraries )

上記の画像を見たあなたは、「なんか3つURLがあるけどどうしよう。」なんて思うかもしれませんね。

 

そうなんです。

 

CDNには、3つのバージョンががあるんですよね。

 

以下をご覧ください。

 

  • 3.x snippet:サポートしているブラウザは2.xと同様。しかし2.x系で非推奨tなっていたAPIを廃止にしたり、今のブラウザ環境に合わせた設計の変更がなされているこれからのタイプ。
  • 2.x snippet:サポートしているブラウザは、1.xよりも少ない。Internet Explorer 9以降,chrome,edge,firefox,safariの最新版と一つ前のバージョンなどがあげられる。軽量化されたバージョン。
  • 1.x snippet:Internet Explorer6-8,Opera 12.1x Safari 5.1といった古いブラウザにも対応している。

 

上記の感じですね。

 

何もなければ、一番新しい3.x系のバージョンを選んで使っておくといいですね。

 

Jqueryの取得先を統一する方法

Jqueryの取得先を統一する方法についてですね。

 

手順は以下の通り。

 

  • 手順①headの要素、ヘッダ・フッタなどを確認し、バージョン違いがないかを確認する
  • 手順②もしバージョン違いがあった場合には、バージョンが一番新しいものだけを残してそれ以外を削除する

 

では詳しく見ていきましょう。

 

手順①headの要素、ヘッダ・フッタなどを確認し、バージョン違いがないかを確認する

まずはheadの要素、ヘッダ・フッタなどを確認し、バージョン違いがないかを確認しましょう。

 

調べ方はブログの違いによって変わってきますが、以下のように調べます。

 

はてなブログの場合

  • headの要素の確認:「設定」→「詳細設定」→「headに要素を追加」
  • ヘッダ:「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」
  • フッタ:「デザイン」→「カスタマイズ」→「フッタ」

 

Wordpressの場合

  • ヘッダ:「外観」→「テーマの編集」→「テーマのための閲覧」→「function.php」→「</head>」の間を確認
  • フッタ:「外観」→「テーマの編集」→「テーマのための閲覧」→「function.php」→「</body>」の間を確認

 

上記のようなやり方でバージョン違いがないかを確認しましょう。

 

気を付けたいのは同じ場所にあるとは限らないので、コードをくまなく探すことですね。ctrlキーとFキーを押して検索するとわかりやすいですね。

 

手順②もしバージョン違いがあった場合には、バージョンが一番新しいものだけを残してそれ以外を削除する

次にもしもバージョン違いがあった場合には、バージョンが一番新しいものだけ残して、それ以外を削除しましょう。

 

例えば以下のような感じ。

 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

 

この場合には2.2.3のほうを残して、上の1.12.3は削除しましょう。というのも二つ読み込み先があるので時間が遅くなってしまいます。

 

必要のないコードは消していくのがいいですね。

 

【悲報】初心者はわからないままページを遅くしている

f:id:slash1196:20210809210312j:plain

実は初心者がカスタマイズする場合にはわからないままページを遅くしている場合が多いです。

 

というのも、わからないままコピペして満足することがあるからですね。

 

実は怖いカスタマイズ時のコードのコピペ

でもこのコピペめちゃめちゃ怖いんです。

 

というのも知識のないまましてしまうと、今回のようにバージョン違いを一緒に設置していて遅くなっていても、わからないまま放置してしまいがちです。

 

そして最後にはSEO的にも順位が落ちてもわからない可能性もある始末です。

 

だからコピペというのは結構怖いんですよね。

 

初心者はカスタマイズするときにはググりながらしましょう

気を付けたいのは、初心者はカスタマイズをするときにはググりながらやらないとかえって二度手間になったりします。

 

ですからコピペをするにしてもググって本当にこれでOKなのかというのは確認しながらやっていくことにしましょう。

 

知識もついて一石二鳥になりますよ。

 

まとめ|jqueryの読み込み先を統一して表示速度を早めよう

お疲れさまでした。

 

ここまでjqueryの読み込み先は統一したほうがいいという話からカスタマイズするときの注意点を一緒にお話してきました。

 

まとめると以下のようになります。

 

まとめ
  • Jqueryの読み込み先は統一したほうがいいです。
    • その理由は以下の通り。
      • 理由①読み込み先が増えると単純に待ち時間が増える
      • 理由②読者の時間を奪ってはいけない
    • 読み込みのからくりは、外部ファイルと同じような感じ。
    • 読み込み先は、CDNと呼ばれるものを読み込むのが一般的。
    • CDNには3つのバージョンがある。
    • jqueryの取得先の仕方は以下の通り。
      • 手順①headの要素、ヘッダ・フッタなどを確認し、バージョン違いがないかを確認する
      • 手順②もしバージョン違いがあった場合には、バージョンが一番新しいものだけを残してそれ以外を削除する
  • 初心者はわからないままページを遅くしていることがある。
    • というのもコピペでできるからと思考停止しているから。その知識のなさによって遅くなっていることに気が付かない。
    • 初心者はカスタマイズするときにはググりながらしましょう

 

という感じです。

 

ぜひ気を付けて、Jqueryの読み込み先を統一し、表示速度の速いサイトになるように考えてみてはいかがでしょうか。

 

きっと読者のためになるはずです。

 

ってことで今回はこの辺で。

また次回に。