紅蓮ブログ

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

Javascriptの高速化する方法【初心者こそやるべき4つ】

f:id:slash1196:20210718024825j:plain

f:id:slash1196:20200520205950j:plain

Javascriptの高速化をしたいひと

Javascriptの高速化をしてページの表示速度の高速化したいんだけど、何をすればいいかわからない。

誰か教えてほしいな。

 

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

 

 この記事でわかること

  • Javascriptの高速化する方法
  • Javascriptの高速化をやっておくべき理由と勉強法

 

こんにちわ、紅蓮です。

 

Javascriptってなかなか高速化をするのって怖いですよね。というのもJavascriptって何から始めたらいいのかがわからないからです。

 

僕の友達にも「下手にいじって動かなくなったら嫌だ」って人結構多いです。

 

あなたもそんな一人ではないでしょうか。

 

そんなあなたに、今回はJavascriptの高速化する方法【初心者こそやるべき4つ】をご紹介します。

 

この記事を読むと、初心者でもできるJavascriptの高速化する方法がわかると同時にやっておくべき理由と勉強法がわかります。

 

僕は結構なカスタマイズオタクで、よく友達から無料で頼まれます。今までカスタマイズしてきたサイトはトータルで70以上です。

 

今回はそんな僕がJavascriptの高速化の方法をまるっとばっちり説明しちゃいますので、是非とも後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

スポンサーリンク
 

Javascriptの高速化をする方法

f:id:slash1196:20210718024202j:plain

ではさっそくJavascriptの高速化する方法をお話していきましょう。

 

高速化の方法は、以下の通り。

 

  • 方法①CSSの参照タグをJavascriptよりも先に記述する
  • 方法②プロトコルを省略する
  • 方法③Script要素のtype属性を省略する
  • 方法④Javascriptを圧縮する

 

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

 

方法①CSSの参照タグをJavascriptよりも先に記述する

Javascriptの高速化をする方法の1つ目は、CSSの参照タグをJavascriptよりも先に記述することです。

 

<head>タグの中にscriptタグを使って読み込みを入れている場合に、一番上にJavascriptを入れている場合があります。

 

でもCSSのほうを先にするほうがいいですね。

 

というのも、Javascriptは読み込みが始まると、読み込みが完了して実行されるまでほかのCSSの読み込みができないんです。

 

そのために待ち時間が発生して、読み込みが遅くなってしまいますよね。

 

しかしCSSコードは、読み込みが複数同時に行うことができ、たとえ実行が完了していなくてもJavascriptファイルを含むほかのファイルを読み込むことができるんです。

 

そのために読み込みが若干ですが、早くなりますね。

 

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

 

 NGの場合

<script src="https://www.example.com/○○○.min.js">
<script src="https://www.example.com/○○○1.min.js">
<style><link rel="stylesheet" type="text/css" href="stylesheet1.css">
<link rel="stylesheet" type="text/css" href="stylesheet2.css"></style>

 

 OKの場合

<style><link rel="stylesheet" type="text/css" href="stylesheet1.css">
<link rel="stylesheet" type="text/css" href="stylesheet2.css"></style>
<script src="https://www.example.com/○○○.min.js">
<script src="https://www.example.com/○○○1.min.js">

 

方法②プロトコルを省略する

Javascriptの高速化をする方法の2つ目は、プロトコルを省略することですね。

 

プロトコルというのは、URLの一番前の部分です。

https:の部分を言いますね。

 

省略することによってごくごくわずかですが、ファイルサイズが小さくなり、表示速度を早くすることができます。

 

 プロトコルを省略した例

<script src="//www.example.com/○○○.min.js">
<script src="//www.example.com/○○○1.min.js">

 

方法③script要素のtype属性を省略する

Javascriptの高速化をする方法の3つ目は、script要素の属性を省略することです。

 

簡単に言うと<script type="text/javascript">という部分を省略して<script>にすることで、データ量を減らして高速化するんです。

 

しかしこの方法は、HTML5に限ります。

というのもHTML5のscript要素のtype属性の初期値が、text/javascriptになっているから。

 

減らせるデータ量は少しですが、チリつもです。

やっておいて損はありませんね。

 

方法④Javascriptを圧縮する

Javascriptの高速化をする方法の4つ目は、Javascriptを圧縮することですね。

 

Javascriptのコードを圧縮すると、コメントやコードの間の改行自体がなくなります。

 

この改行実は人にとってはただの改行でも、ブラウザにとってはすべてがデータになります。

 

詳しくは 、Javascriptを圧縮する方法【はてなブログOK】にて解説していますのでぜひこちらをどうぞ。

 

Javascriptの高速化を知らなくて、下手をこいた話

f:id:slash1196:20210718024314j:plain

Javascriptの高速化を知らないと、SEO的にも下手をこいてしまいます。

 

というのも僕自身が、Javascriptの高速化を知らずにいてSEOに速さを求められて困ったからです。

 

ブログを始めて1年半たつまで、高速化のことを知らずにどうするかを延々と考えていましたね。

 

知らないで安心していると、不利益をこうむることになる

そんな僕からいえることは、一つだけです。

 

もしあなた自身が「Javascriptの知識がないから」と高速化をあきらめているなら、それは非常にもったいないです。

 

というのも知らないことで、不利益を被っている可能性が高いからです。

 

例えば、上記の4つの方法の中でも、プロトコルを減らすと若干だけどデータ量が減るなんて正直わからないですよね。

 

でも知っていればわずかでもデータ量を減らすことができます。

 

ですから勉強は大事なんです。

 

まずはこの記事を読んで実践をすべき

じゃあどうやって勉強するのかですが、まずはこの記事を読んでみて実践してみるのがいいですね。

 

そして本当にうまくいくかを実感してほしいですね。

 

で実感がでて興味がわいたら、本を買って勉強するという感じがいいと思います。

 

以下は、Javascriptのおすすめの本ですね。

 

 スラスラ読める JavaScriptふりがなプログラミング

 

インプレスから出ている本ですが、簡単になるようにJavascriptのコードの意味をふりがなっぽく書いてくれているんですね。 

 

読み終わるころには、書けるようになっているという超便利な本ですね。

 

初心者にはおすすめの本です。

 

 JavaScript コードレシピ集 

これは、僕は辞書代わりに使っていますね。

 

というのもボタンやグローバルナビなどJavascriptで作ることができるレシピがたくさん載っているからですね。

 

わからないときにわからないところだけを勉強できるので非常に効率的ですね。

ですから初心者にもおすすめです。

 

まとめ|Javascriptの高速化は初心者にこそ必要。 

お疲れさまでした。

ここまでJavascriptの高速化の方法をお話してきましたね。

 

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

 

まとめ
  • Javascriptの高速化をする方法は、以下の通り。
    • ①CSSの参照タグをJavascriptよりも先に記述する
    • ②プロトコルを省略する
    • ③Script要素のtype属性を省略する
    • ④Javascriptを圧縮する
  • Javascriptの高速化を知らなくて、下手をこきます。理由は以下の通り。
    • 知らないで安心していると、不利益をこうむることになる
    • なにをするかは、まずはこの記事を読んで実践をすべき。そのあとには本を読んでみるといいかも…

 

初心者こそJavascriptの高速化の方法を知るべきです。

ぜひやってみてくださいね。

 

あなたのサイトがいい感じになりますので。

 

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

また次回に。

スポンサーリンク